Building websites
Leading librarians to a new level
of project engagement
Marina Georgieva
Visiting Digital Collections Librarian | University of Nevada - Las Vegas
2018 LITA Forum - Minneapolis, MN
Topics
Website
elements
site identity
header | footer
navigation
site body
Types of
websites
static
dynamic
Information
architecture
site content
functionality
Tools for static
web design
CMS
coding software
graphic design
software
Technologies
for static web
design
HTML | CSS
Demonstration
Get started
template
selection
customization
Site identity
favicon
jumbotron
title | tagline
Key elements
header
footer
Creating pages
template pages
content placement
Custom coding
inline HTML
inline CSS
escape from
template frames
Navigation
main menu
side menu
sitemap
Some concepts
Types of websites
Static websites
Features
HTML | CSS driven
Browsing only
Basic and easy to create
No database | no web programming
Pages with fixed content
Updates happen manually
Great for
Small websites
Rigid content
Small team
Novice
Example:https://nvdnp.wordpress.com/
Dynamic websites
Features
Database driven
Searching feature
Require team of developers
Require web programming
HTML | CSS | PHP | JavaSript
Dynamic (interactive) pages
Automated updates
Great for
Large websites
Constantly changing content
Change design easily
Easier to manage
Example:https://www.vitacost.com/
Website elements
Site identity
Logo
Favicon
Jumbotron
Color palette
Consistent style
Header and footer
Header
Container for some
site identity
elements
Main navigation
Search bar
Footer
Contact details
Quick links
Navigation
Main navigation
Side navigation
Landing pages
Sitemap
Site body
All site pages
All unique site content
Most updated section
Website elements
button button button button button TOP NAVIGATION
button
button
button
SIDE NAVIGATION
content content
FOOTER
HEADER
logo jumbotron
FAVICON www.yoursite.com
Information architecture
Content organization
structuring the information in meaningful way to
improve the usability
Labelling systems
describing the categories with explicit labels to
improve browsing experience
Navigation systems
how users interact with the content and move
through information
Search systems
how users search for information
Tools for static web design
Coding software
Notepad ++
Oxygen
SublimeText
TextMate
Content Management System
WordPress
Drupal
Joomla
Wix | web-builder, not pure CMS
Graphic Design Software
Photoshop
CorelDraw
Pixlr | free browser-based
WordPress overview
Some advantages
Easy to start
Quick results
No programming skills to start designing
Built-in layout
templates and themes
Built-in features for website key elements
site identity, navigation, content organization
Customizable on all levels
navigation, pages, site identity
Greatest of all!
Millions of free tutorials!
Community support
Some stats
Ranked as most popular CMS for 2017
Market share 59.9%
Active websites 26+ million
All websites 239+ million
https://websitesetup.org/popular-cms/
WordPress flavors
Start for FREE!
No fee
WordPress hosting
limited storage space 3 GB
WordPress.com sub-domain
yourproject.wordpress.com
Limited templates | themes
Standard plug-ins
no option to add custom plug-ins
Great option to start
can upgrade later to paid WP plan
WordPress flavors
Or go PRO!
Paid WordPress website
Personal hosting | domain
.com, .edu, .net, .org ….
Sub-domain options
Skills to set up WP on C-Panel
Storage space size of your choice
Custom plug-in
install what works best for you
Direct access to CSS
modify the theme
remove features you dislike
Or do something in the middle!
Paid WordPress plans
Personalized hosting | domain purchased from WP
.com, .edu, .net ….
All perks that come with the selected plan
https://wordpress.com/pricing/
Direct support from WordPress
Technologies for static web design
Cascading Style SheetsHypertext Markup Language
Markup language for creating websites.
Webpages are rendered in browsers and HTML is
used to describe each element of the content (text,
audio, graphics, links, video) so the web browser
displays them correctly.
Used for formatting the webpage layout.
It describes how HTML elements are displayed on
the website.
It defines text styles, element sizes, changes layouts
and facilitates content placement on the webpage.
CSS also makes responsive design possible.
Demonstration
Nevada Digital Newspaper Project Website
Some background
Grant funded project
Reports project progress
Promotes project
Showcases project accomplishments
Engages community
Provides information to researchers
Static website works well
updates once a month on some pages
updates once a year on others
https://nvdnp.wordpress.com/
NvDNP Website Page Customization
Content structuring
Tables
<table>
<tbody>
<tr>
<td style="background-color: #282828;" colspan="3"><a
href="https://nvdnp.wordpress.com/nevada-
history/preserving-the-past/" rel="attachment wp-att-
2368"><img class="aligncenter wp-image-2368"
src="https://nvdnp.files.wordpress.com/2018/01/preserving-
the-past5.jpg?w=300" alt="" width="986" height="260"
/></a></td>
</tr>
[…]
</tbody>
</table>
Styling
Text and tables
border
border-radius
text-align
color
font-size
font-weight
vertical-align
background-color
rowspan
colspan
margin
padding
Getting started
Template selection Theme customization
Customizethemeonagloballevel
Site identity
Site title and tagline
Favicon
Jumbotron
Logo
Opted-out; header becomes too busy.
Instead, used for favicon.
Key elements
Header
Footer
Each of the header elements is
customizable and independent
Each of the footer elements is
customizable and independent
Creating pages
Standard template page
Pure text editor with limited
features
No custom CSS applied
Creating pages
Customized pages
Template page customized with inline
CSS for more dramatic layout and
more visual content placement
Front end Back end
Custom coding
https://nvdnp.wordpress.com/nevada-history/preserving-the-past/
<h2 style="text-align:center;"><strong>NEVADA NEWSPAPERS</strong></h2>
“Like most mining towns, Austin struggles for two or three miles down a deep crooked canyon . . Hundreds and hundreds of apertures
surrounded by piles of reddish earth attest to the industry of searchers for silver ore. . Far down the hillside little dwellings of stone, brick,
wood, and adobe are curiously niched and scattered . . . At night the brilliantly lighted drinking and gambling saloons, with open fronts, are
filled with a motley crowd, Women conduct the games at several monte tables, shuffling the cards and handing the piles of silver coin with
the unruffled serenity of professional gamblers . . .” <strong><em>Reese River Reveille</em></strong>, September 5, 1865.
<table>
<tbody>
<tr>
<td style="background-color:#282828;text-align:center;"><a href="https://library.unr.edu/DigiColl/Item/spphotos/3521" target="_blank"
rel="attachment noopener wp-att-2270"><img class="alignnone size-medium wp-image-2270"
src="https://nvdnp.files.wordpress.com/2018/01/austin_nev_1870s1.jpg?w=300" alt="" width="300" height="240" /></a>
<span style="color:#ffffff;">Austin, NV (1870s)</span></td>
<td style="background-color:#282828;text-align:center;"><a href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/15836/rec/6"
target="_blank" rel="attachment noopener wp-att-2271"><img class="alignnone size-medium wp-image-2271"
src="https://nvdnp.files.wordpress.com/2018/01/austin_nev_1800-1900s1.jpg?w=300" alt="" width="300" height="240" /></a>
<span style="color:#ffffff;">Austin, NV (1800s-1900s)</span></td>
<td style="background-color:#282828;vertical-align:middle;text-align:center;"><a
href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/21751/rec/1" target="_blank" rel="attachment noopener wp-att-2272"><img
class="alignnone size-medium wp-image-2272" src="https://nvdnp.files.wordpress.com/2018/01/austin_nev_1920s1.jpg?w=300" alt=""
width="300" height="240" /></a>
<span style="color:#ffffff;">Austin, NV (1920s)</span></td>
</tr>
</tbody>
</table>
“In colonizing a new and remote district, among the earliest wants that manifest themselves among the American people is a local paper.”
<strong><em>The White Pines News</em></strong>, initial issue December 26, 1868.
Front end
Back end
Inline HTML and Inline CSS allow escape
from framed templates
Custom coding
https://nvdnp.wordpress.com/nevada-history/eureka/
Back end<table style="width:100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:31%;background-color:#eaecee;border-right:solid #d7d7d7 1px;" rowspan="3"><strong>Quick early facts</strong>
<strong>1864</strong> Eureka was settled by a five-person group of silver prospectors from Austin
<strong>1869 </strong>The first ore smelter was constructed
<strong>1873 </strong>Eureka County was formed from parts of adjacent Lander, Elko, and White Pine Counties and became the county seat.
<strong>1878</strong> Boom years for Eureka - population reached 9,000-10,000 people
<strong>1879</strong> Eureka County Court House was built
<strong>1879</strong> Eureka Sentinel Newspaper Building opened
<strong>1880</strong> Eureka Opera House was built
<strong>1882</strong> Peak of mining production
<strong>1887 </strong>Raine’s Market and Wildlife Museum built
<strong>1887</strong> Jackson House Hotel built
<strong>1891</strong> Mining depression - major mines shut down
<strong><i>Eureka Sentinel </i>title changes</strong>
<strong>1870-1871 </strong><a href="https://chroniclingamerica.loc.gov/lccn/sn86076203/" target="_blank" rel="noopener">The Eureka Sentinel</a>
<strong>1871-1887</strong><a href="https://chroniclingamerica.loc.gov/lccn/sn84022044/" target="_blank" rel="noopener"> Eureka Daily Sentinel</a>
<strong>1887-1902</strong> <a href="https://chroniclingamerica.loc.gov/lccn/sn86076200/" target="_blank" rel="noopener">Eureka Weekly Sentinel</a>
<strong>1902-current</strong> <a href="https://chroniclingamerica.loc.gov/lccn/sn86076201/" target="_blank" rel="noopener">The Eureka Sentinel</a></td>
<td style="vertical-align:middle;background-color:transparent;width:23%;">
<p style="text-align:center;"><em><a href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/21746/rec/7" target="_blank" rel="attachment noopener wp-att-2545"><img class="alignnone size-medium wp-image-2545"
src="https://nvdnp.files.wordpress.com/2018/01/eureka_nev_1853.jpg?w=300" alt="" width="300" height="193" /></a>Panorama of Eureka (1853)</em></p>
</td>
<td style="vertical-align:middle;background-color:transparent;width:23%;">
<p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/7430" target="_blank" rel="attachment noopener wp-att-2552"><img class="alignnone size-medium wp-image-2552"
src="https://nvdnp.files.wordpress.com/2018/01/mainstreureka-1870s.jpg?w=300" alt="" width="300" height="193" /></a>Main Street (1870s)</em></p>
</td>
<td style="vertical-align:middle;background-color:transparent;">
<p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/7613" target="_blank" rel="attachment noopener wp-att-2553"><img class="alignnone size-medium wp-image-2553"
src="https://nvdnp.files.wordpress.com/2018/01/store-eureka1870s.jpg?w=300" alt="" width="300" height="193" /></a>P.H.Hjul Store (1870s)</em></p>
</td>
</tr>
<tr>
<td style="vertical-align:middle;background-color:transparent;">
<p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/6756" target="_blank" rel="attachment noopener wp-att-2550"><img class="alignnone size-medium wp-image-2550"
src="https://nvdnp.files.wordpress.com/2018/01/eureka1870s.jpg?w=300" alt="" width="300" height="193" /></a>C.H.Block (1870s)</em></p>
</td>
<td style="vertical-align:middle;background-color:transparent;">
<p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/6822" target="_blank" rel="attachment noopener wp-att-2549"><img class="alignnone size-medium wp-image-2549"
src="https://nvdnp.files.wordpress.com/2018/01/eureka1870-1880s.jpg?w=300" alt="" width="300" height="193" /></a>Panorama of Eureka (1870s)</em></p>
</td>
<td style="vertical-align:middle;background-color:transparent;">
<p style="text-align:center;"><em><a href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/15031/rec/12" target="_blank" rel="attachment noopener wp-att-2546"><img class="alignnone size-medium wp-image-2546"
src="https://nvdnp.files.wordpress.com/2018/01/eureka_nevada_1880s.jpg?w=300" alt="" width="300" height="193" /></a>The Fire Station (1880s)</em></p>
</td>
</tr>
Front end
Inline HTML and Inline CSS allow escape
from framed templates
Custom coding
https://nvdnp.wordpress.com/newspapers/first-cycle/
Back end
Front end
<table style="width: 100%;"><!-- CARSON DAILY APPEAL -->
<tbody>
<tr>
<td style="text-align: center;"><a href="http://chroniclingamerica.loc.gov/lccn/sn84022040/" target="_blank" rel="noopener"><img class="alignnone wp-image-549" style="border-radius: 7px;"
src="https://nvdnp.files.wordpress.com/2016/09/carson-daily-appeal.png?w=300" alt="carson-daily-appeal" width="517" height="50" /></a></td>
</tr>
<tr>
<td style="text-align: justify;">
<p style="text-align: right;"><span style="color: #000000;"><strong>TIME SPAN: 1866-1870<span style="color: #999999;"> |</span> </strong><strong>Place of publication: Carson City, NV</strong></span></p>
Founded in 1865, the<em> Carson Daily Appeal</em> was a daily newspaper published in Carson City, the capitol of the Nevada territory in 1861 and state capitol in 1864. The <em>Carson Daily Appeal</em>
began publication on May 16, 1865, as a Republican newspaper owned by E. F. McElwain, J. Barrett, and Marshall Robinson. [<a href="http://chroniclingamerica.loc.gov/lccn/sn84022040/" target="_blank"
rel="noopener">read more</a>]
&nbsp;</td>
</tr>
<!-- END CARSON DAILY APPEAL --><!-- DAILY STATE REGISTER -->
<tr>
<td style="text-align: center;"><a href="http://chroniclingamerica.loc.gov/lccn/sn84020345/" target="_blank" rel="noopener"><img class="alignnone wp-image-561" style="border-radius: 7px;"
src="https://nvdnp.files.wordpress.com/2016/09/daily-state-register.png?w=300" alt="daily-state-register" width="517" height="62" /></a></td>
</tr>
<tr>
<td style="text-align: justify;">
<p style="text-align: right;"><span style="color: #000000;"><strong>TIME SPAN: 1870-1872<span style="color: #999999;"> |</span> </strong><strong>Place of publication: Carson City, NV</strong></span></p>
Founded in 1865, the<em> Carson Daily Appeal</em> was a daily newspaper published in Carson City, the capitol of the Nevada territory in 1861 and state capitol in 1864. The <em>Carson Daily Appeal</em>
began publication on May 16, 1865 [...] The new owners of the <em>Appeal</em> renamed the paper to <em>Daily State Register</em> and changed its politics to Democratic... [<a
href="http://chroniclingamerica.loc.gov/lccn/sn84020345/" target="_blank" rel="noopener">read more</a>]
&nbsp;</td>
</tr>
<!-- END DAILY STATE REGISTER --></tbody>
<!-- NEW DAILY APPEAL -->
<tbody>
<tr>
<td style="text-align: center;"><a href="http://chroniclingamerica.loc.gov/lccn/sn86076182/" target="_blank" rel="noopener"><img class="alignnone wp-image-594" style="border-radius: 7px;"
src="https://nvdnp.files.wordpress.com/2016/09/new-daily-appeal.png?w=300" alt="new-daily-appeal" width="522" height="54" /></a></td>
</tr>
<tr>
<td style="text-align: justify;">
<p style="text-align: right;"><span style="color: #000000;"><strong>TIME SPAN: 1872-1873<span style="color: #999999;"> |</span> </strong><strong>Place of publication: Carson City, NV</strong></span></p>
Founded in 1865, the<em> Carson Daily Appeal</em> was a daily newspaper published in Carson City, the capitol of the Nevada territory in 1861 and state capitol in 1864. he <em>Carson Daily Appeal</em>
began publication on May 16, 1865 [...] In 1872, Mighels returned to Carson City, and with financial backing from John Percival Jones, a Republican candidate for U.S. Senate, he started the <em>New Daily
Appeal.</em> [...] [<a href="http://chroniclingamerica.loc.gov/lccn/sn86076182/" target="_blank" rel="noopener">read more</a>]
&nbsp;</td>
</tr>
<!-- END NEW DAILY APPEAL --></tbody>
Navigation
Main menu
Back end
Front end
Desktop
Mobile
Navigation
Side menu
Front end
https://nvdnp.wordpress.com/newspapers/title-changes/
https://nvdnp.wordpress.com/the-project/nvdnp-news/
Back end
Navigation
Sitemap
Front end
Back end
Visiting Digital Collections Librarian
University of Nevada - Las Vegas
University Libraries
Tel: 702-895-2310
marina.georgieva@unlv.edu
www.marina-expertise.com
Thank you!
Questions?

Building websites and leading librarians to a new level of project engagement

  • 1.
    Building websites Leading librariansto a new level of project engagement Marina Georgieva Visiting Digital Collections Librarian | University of Nevada - Las Vegas 2018 LITA Forum - Minneapolis, MN
  • 2.
    Topics Website elements site identity header |footer navigation site body Types of websites static dynamic Information architecture site content functionality Tools for static web design CMS coding software graphic design software Technologies for static web design HTML | CSS
  • 3.
    Demonstration Get started template selection customization Site identity favicon jumbotron title| tagline Key elements header footer Creating pages template pages content placement Custom coding inline HTML inline CSS escape from template frames Navigation main menu side menu sitemap
  • 4.
  • 5.
    Types of websites Staticwebsites Features HTML | CSS driven Browsing only Basic and easy to create No database | no web programming Pages with fixed content Updates happen manually Great for Small websites Rigid content Small team Novice Example:https://nvdnp.wordpress.com/ Dynamic websites Features Database driven Searching feature Require team of developers Require web programming HTML | CSS | PHP | JavaSript Dynamic (interactive) pages Automated updates Great for Large websites Constantly changing content Change design easily Easier to manage Example:https://www.vitacost.com/
  • 6.
    Website elements Site identity Logo Favicon Jumbotron Colorpalette Consistent style Header and footer Header Container for some site identity elements Main navigation Search bar Footer Contact details Quick links Navigation Main navigation Side navigation Landing pages Sitemap Site body All site pages All unique site content Most updated section
  • 7.
    Website elements button buttonbutton button button TOP NAVIGATION button button button SIDE NAVIGATION content content FOOTER HEADER logo jumbotron FAVICON www.yoursite.com
  • 8.
    Information architecture Content organization structuringthe information in meaningful way to improve the usability Labelling systems describing the categories with explicit labels to improve browsing experience Navigation systems how users interact with the content and move through information Search systems how users search for information
  • 9.
    Tools for staticweb design Coding software Notepad ++ Oxygen SublimeText TextMate Content Management System WordPress Drupal Joomla Wix | web-builder, not pure CMS Graphic Design Software Photoshop CorelDraw Pixlr | free browser-based
  • 10.
    WordPress overview Some advantages Easyto start Quick results No programming skills to start designing Built-in layout templates and themes Built-in features for website key elements site identity, navigation, content organization Customizable on all levels navigation, pages, site identity Greatest of all! Millions of free tutorials! Community support Some stats Ranked as most popular CMS for 2017 Market share 59.9% Active websites 26+ million All websites 239+ million https://websitesetup.org/popular-cms/
  • 11.
    WordPress flavors Start forFREE! No fee WordPress hosting limited storage space 3 GB WordPress.com sub-domain yourproject.wordpress.com Limited templates | themes Standard plug-ins no option to add custom plug-ins Great option to start can upgrade later to paid WP plan
  • 12.
    WordPress flavors Or goPRO! Paid WordPress website Personal hosting | domain .com, .edu, .net, .org …. Sub-domain options Skills to set up WP on C-Panel Storage space size of your choice Custom plug-in install what works best for you Direct access to CSS modify the theme remove features you dislike Or do something in the middle! Paid WordPress plans Personalized hosting | domain purchased from WP .com, .edu, .net …. All perks that come with the selected plan https://wordpress.com/pricing/ Direct support from WordPress
  • 13.
    Technologies for staticweb design Cascading Style SheetsHypertext Markup Language Markup language for creating websites. Webpages are rendered in browsers and HTML is used to describe each element of the content (text, audio, graphics, links, video) so the web browser displays them correctly. Used for formatting the webpage layout. It describes how HTML elements are displayed on the website. It defines text styles, element sizes, changes layouts and facilitates content placement on the webpage. CSS also makes responsive design possible.
  • 14.
  • 15.
    Nevada Digital NewspaperProject Website Some background Grant funded project Reports project progress Promotes project Showcases project accomplishments Engages community Provides information to researchers Static website works well updates once a month on some pages updates once a year on others https://nvdnp.wordpress.com/
  • 16.
    NvDNP Website PageCustomization Content structuring Tables <table> <tbody> <tr> <td style="background-color: #282828;" colspan="3"><a href="https://nvdnp.wordpress.com/nevada- history/preserving-the-past/" rel="attachment wp-att- 2368"><img class="aligncenter wp-image-2368" src="https://nvdnp.files.wordpress.com/2018/01/preserving- the-past5.jpg?w=300" alt="" width="986" height="260" /></a></td> </tr> […] </tbody> </table> Styling Text and tables border border-radius text-align color font-size font-weight vertical-align background-color rowspan colspan margin padding
  • 17.
    Getting started Template selectionTheme customization Customizethemeonagloballevel
  • 18.
    Site identity Site titleand tagline Favicon Jumbotron Logo Opted-out; header becomes too busy. Instead, used for favicon.
  • 19.
    Key elements Header Footer Each ofthe header elements is customizable and independent Each of the footer elements is customizable and independent
  • 20.
    Creating pages Standard templatepage Pure text editor with limited features No custom CSS applied
  • 21.
    Creating pages Customized pages Templatepage customized with inline CSS for more dramatic layout and more visual content placement Front end Back end
  • 22.
    Custom coding https://nvdnp.wordpress.com/nevada-history/preserving-the-past/ <h2 style="text-align:center;"><strong>NEVADANEWSPAPERS</strong></h2> “Like most mining towns, Austin struggles for two or three miles down a deep crooked canyon . . Hundreds and hundreds of apertures surrounded by piles of reddish earth attest to the industry of searchers for silver ore. . Far down the hillside little dwellings of stone, brick, wood, and adobe are curiously niched and scattered . . . At night the brilliantly lighted drinking and gambling saloons, with open fronts, are filled with a motley crowd, Women conduct the games at several monte tables, shuffling the cards and handing the piles of silver coin with the unruffled serenity of professional gamblers . . .” <strong><em>Reese River Reveille</em></strong>, September 5, 1865. <table> <tbody> <tr> <td style="background-color:#282828;text-align:center;"><a href="https://library.unr.edu/DigiColl/Item/spphotos/3521" target="_blank" rel="attachment noopener wp-att-2270"><img class="alignnone size-medium wp-image-2270" src="https://nvdnp.files.wordpress.com/2018/01/austin_nev_1870s1.jpg?w=300" alt="" width="300" height="240" /></a> <span style="color:#ffffff;">Austin, NV (1870s)</span></td> <td style="background-color:#282828;text-align:center;"><a href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/15836/rec/6" target="_blank" rel="attachment noopener wp-att-2271"><img class="alignnone size-medium wp-image-2271" src="https://nvdnp.files.wordpress.com/2018/01/austin_nev_1800-1900s1.jpg?w=300" alt="" width="300" height="240" /></a> <span style="color:#ffffff;">Austin, NV (1800s-1900s)</span></td> <td style="background-color:#282828;vertical-align:middle;text-align:center;"><a href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/21751/rec/1" target="_blank" rel="attachment noopener wp-att-2272"><img class="alignnone size-medium wp-image-2272" src="https://nvdnp.files.wordpress.com/2018/01/austin_nev_1920s1.jpg?w=300" alt="" width="300" height="240" /></a> <span style="color:#ffffff;">Austin, NV (1920s)</span></td> </tr> </tbody> </table> “In colonizing a new and remote district, among the earliest wants that manifest themselves among the American people is a local paper.” <strong><em>The White Pines News</em></strong>, initial issue December 26, 1868. Front end Back end Inline HTML and Inline CSS allow escape from framed templates
  • 23.
    Custom coding https://nvdnp.wordpress.com/nevada-history/eureka/ Back end<tablestyle="width:100%;"> <tbody> <tr> <td style="vertical-align:top;width:31%;background-color:#eaecee;border-right:solid #d7d7d7 1px;" rowspan="3"><strong>Quick early facts</strong> <strong>1864</strong> Eureka was settled by a five-person group of silver prospectors from Austin <strong>1869 </strong>The first ore smelter was constructed <strong>1873 </strong>Eureka County was formed from parts of adjacent Lander, Elko, and White Pine Counties and became the county seat. <strong>1878</strong> Boom years for Eureka - population reached 9,000-10,000 people <strong>1879</strong> Eureka County Court House was built <strong>1879</strong> Eureka Sentinel Newspaper Building opened <strong>1880</strong> Eureka Opera House was built <strong>1882</strong> Peak of mining production <strong>1887 </strong>Raine’s Market and Wildlife Museum built <strong>1887</strong> Jackson House Hotel built <strong>1891</strong> Mining depression - major mines shut down <strong><i>Eureka Sentinel </i>title changes</strong> <strong>1870-1871 </strong><a href="https://chroniclingamerica.loc.gov/lccn/sn86076203/" target="_blank" rel="noopener">The Eureka Sentinel</a> <strong>1871-1887</strong><a href="https://chroniclingamerica.loc.gov/lccn/sn84022044/" target="_blank" rel="noopener"> Eureka Daily Sentinel</a> <strong>1887-1902</strong> <a href="https://chroniclingamerica.loc.gov/lccn/sn86076200/" target="_blank" rel="noopener">Eureka Weekly Sentinel</a> <strong>1902-current</strong> <a href="https://chroniclingamerica.loc.gov/lccn/sn86076201/" target="_blank" rel="noopener">The Eureka Sentinel</a></td> <td style="vertical-align:middle;background-color:transparent;width:23%;"> <p style="text-align:center;"><em><a href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/21746/rec/7" target="_blank" rel="attachment noopener wp-att-2545"><img class="alignnone size-medium wp-image-2545" src="https://nvdnp.files.wordpress.com/2018/01/eureka_nev_1853.jpg?w=300" alt="" width="300" height="193" /></a>Panorama of Eureka (1853)</em></p> </td> <td style="vertical-align:middle;background-color:transparent;width:23%;"> <p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/7430" target="_blank" rel="attachment noopener wp-att-2552"><img class="alignnone size-medium wp-image-2552" src="https://nvdnp.files.wordpress.com/2018/01/mainstreureka-1870s.jpg?w=300" alt="" width="300" height="193" /></a>Main Street (1870s)</em></p> </td> <td style="vertical-align:middle;background-color:transparent;"> <p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/7613" target="_blank" rel="attachment noopener wp-att-2553"><img class="alignnone size-medium wp-image-2553" src="https://nvdnp.files.wordpress.com/2018/01/store-eureka1870s.jpg?w=300" alt="" width="300" height="193" /></a>P.H.Hjul Store (1870s)</em></p> </td> </tr> <tr> <td style="vertical-align:middle;background-color:transparent;"> <p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/6756" target="_blank" rel="attachment noopener wp-att-2550"><img class="alignnone size-medium wp-image-2550" src="https://nvdnp.files.wordpress.com/2018/01/eureka1870s.jpg?w=300" alt="" width="300" height="193" /></a>C.H.Block (1870s)</em></p> </td> <td style="vertical-align:middle;background-color:transparent;"> <p style="text-align:center;"><em><a href="https://library.unr.edu/DigiColl/Item/spphotos/6822" target="_blank" rel="attachment noopener wp-att-2549"><img class="alignnone size-medium wp-image-2549" src="https://nvdnp.files.wordpress.com/2018/01/eureka1870-1880s.jpg?w=300" alt="" width="300" height="193" /></a>Panorama of Eureka (1870s)</em></p> </td> <td style="vertical-align:middle;background-color:transparent;"> <p style="text-align:center;"><em><a href="http://d.library.unlv.edu/cdm/singleitem/collection/pho/id/15031/rec/12" target="_blank" rel="attachment noopener wp-att-2546"><img class="alignnone size-medium wp-image-2546" src="https://nvdnp.files.wordpress.com/2018/01/eureka_nevada_1880s.jpg?w=300" alt="" width="300" height="193" /></a>The Fire Station (1880s)</em></p> </td> </tr> Front end Inline HTML and Inline CSS allow escape from framed templates
  • 24.
    Custom coding https://nvdnp.wordpress.com/newspapers/first-cycle/ Back end Frontend <table style="width: 100%;"><!-- CARSON DAILY APPEAL --> <tbody> <tr> <td style="text-align: center;"><a href="http://chroniclingamerica.loc.gov/lccn/sn84022040/" target="_blank" rel="noopener"><img class="alignnone wp-image-549" style="border-radius: 7px;" src="https://nvdnp.files.wordpress.com/2016/09/carson-daily-appeal.png?w=300" alt="carson-daily-appeal" width="517" height="50" /></a></td> </tr> <tr> <td style="text-align: justify;"> <p style="text-align: right;"><span style="color: #000000;"><strong>TIME SPAN: 1866-1870<span style="color: #999999;"> |</span> </strong><strong>Place of publication: Carson City, NV</strong></span></p> Founded in 1865, the<em> Carson Daily Appeal</em> was a daily newspaper published in Carson City, the capitol of the Nevada territory in 1861 and state capitol in 1864. The <em>Carson Daily Appeal</em> began publication on May 16, 1865, as a Republican newspaper owned by E. F. McElwain, J. Barrett, and Marshall Robinson. [<a href="http://chroniclingamerica.loc.gov/lccn/sn84022040/" target="_blank" rel="noopener">read more</a>] &nbsp;</td> </tr> <!-- END CARSON DAILY APPEAL --><!-- DAILY STATE REGISTER --> <tr> <td style="text-align: center;"><a href="http://chroniclingamerica.loc.gov/lccn/sn84020345/" target="_blank" rel="noopener"><img class="alignnone wp-image-561" style="border-radius: 7px;" src="https://nvdnp.files.wordpress.com/2016/09/daily-state-register.png?w=300" alt="daily-state-register" width="517" height="62" /></a></td> </tr> <tr> <td style="text-align: justify;"> <p style="text-align: right;"><span style="color: #000000;"><strong>TIME SPAN: 1870-1872<span style="color: #999999;"> |</span> </strong><strong>Place of publication: Carson City, NV</strong></span></p> Founded in 1865, the<em> Carson Daily Appeal</em> was a daily newspaper published in Carson City, the capitol of the Nevada territory in 1861 and state capitol in 1864. The <em>Carson Daily Appeal</em> began publication on May 16, 1865 [...] The new owners of the <em>Appeal</em> renamed the paper to <em>Daily State Register</em> and changed its politics to Democratic... [<a href="http://chroniclingamerica.loc.gov/lccn/sn84020345/" target="_blank" rel="noopener">read more</a>] &nbsp;</td> </tr> <!-- END DAILY STATE REGISTER --></tbody> <!-- NEW DAILY APPEAL --> <tbody> <tr> <td style="text-align: center;"><a href="http://chroniclingamerica.loc.gov/lccn/sn86076182/" target="_blank" rel="noopener"><img class="alignnone wp-image-594" style="border-radius: 7px;" src="https://nvdnp.files.wordpress.com/2016/09/new-daily-appeal.png?w=300" alt="new-daily-appeal" width="522" height="54" /></a></td> </tr> <tr> <td style="text-align: justify;"> <p style="text-align: right;"><span style="color: #000000;"><strong>TIME SPAN: 1872-1873<span style="color: #999999;"> |</span> </strong><strong>Place of publication: Carson City, NV</strong></span></p> Founded in 1865, the<em> Carson Daily Appeal</em> was a daily newspaper published in Carson City, the capitol of the Nevada territory in 1861 and state capitol in 1864. he <em>Carson Daily Appeal</em> began publication on May 16, 1865 [...] In 1872, Mighels returned to Carson City, and with financial backing from John Percival Jones, a Republican candidate for U.S. Senate, he started the <em>New Daily Appeal.</em> [...] [<a href="http://chroniclingamerica.loc.gov/lccn/sn86076182/" target="_blank" rel="noopener">read more</a>] &nbsp;</td> </tr> <!-- END NEW DAILY APPEAL --></tbody>
  • 25.
  • 26.
  • 27.
  • 28.
    Visiting Digital CollectionsLibrarian University of Nevada - Las Vegas University Libraries Tel: 702-895-2310 marina.georgieva@unlv.edu www.marina-expertise.com Thank you! Questions?

Editor's Notes

  • #2 Thanks for joining me for this session. It is dedicated to building static websites for library projects and how this can take librarians to a whole new level of project engagement. My name is Marina Georgieva and I’m a Digital Collections Librarian who faced a huge challenge of designing a website for a grant funded project. Today I’ll show you want I learned and how I did it.
  • #3 Let me briefly announce how our session is structured: during the first half I’ll cover the main concepts in web design and then I’ll demonstrate how I built the Nevada Digital Newspaper Project website from scratch with customization for most of the pages. Our agenda items are: (slide) Information Architecture is related to the underlying relationships between site content and functionality. IA is an important invisible element of each website that enhances UX and is not part of the user interface
  • #4 In the second part I’ll demonstrate how at UNLV we built a small and very informative website for the Nevada Digital Newspaper Project. and I will focus on the following areas (slide). During the demo part I’ll show you the front end and the back end of all these components.
  • #5 Let’s now learn some of the major web design concepts so we can successfully use them in our websites
  • #6 Static websites: HTML/CSS driven, no scripting. Direct edits to change content. Manual updates.
  • #7 Site identity is usually made by someone with graphic background as it relates to graphic elements and design. Consistent style for images and consistent pages. Typography (font colors, sizes and styles) must be consistent too. Header and footer are key elements that contain graphics that make the site distinguishable and also contain information that doesn’t below to any of the pages. Top or main navigation is very important for users to start browsing the site. All buttons must have descriptive labels that explicitly reveal the content of the pages. Think of it as the metadata of a site section. One specific word for each category. Shallow vs. deep navigation – generally recommended to have more shallow structure and fewer drop-down menus on the top navigation bar. Side navigation – used for specific content-heavy pages to help users quickly find what they need Landing pages – used when a whole new category is introduced. For ex. NV History Sitemap – great visual outline of the whole website with convenient links to each page. People can get idea of all sections and nested sub-sections
  • #8 Here’s a visual illustration of what I just discussed. These are the main components and they may vary from site to site. It’s important to stick to the main components of the websites as they improve the user experience. Not just that, users expect to see them and if they lack, this may create negative experience.
  • #9 IA helps us structure and organize the content of a website in a meaningful way to improve the website usability. IA directly builds the relationships between the content and the website functionalities. For big website this is usually done by librarians who specialize in information architecture and website usability.
  • #10 Whether you decide to design from scratch or use a content management system, you need to know what are the tools available for web designers. Just to name a few of the most popular ones….
  • #11 So, you’ve heard a lot about WordPress, right? Here are some stats from December 2017 ranking it #1 among other platforms. Why is it so popular? …. Next ‘Advantages’
  • #12 Who doesn’t like freebies? At UNLV we decided that the Nevada Digital Newspaper Project is a good candidate for a free WP website, because it’s grant funded and upon project completion the website will not be maintained. Free WP hosted website was perfect for our needs. Cannot move free WP website to self-hosted domain. No access to html, css files. If you consider moving to self-hosted domain, don’t go for free website, unless you want to rebuild from scratch.
  • #13 The C-Panel integrates w/ WordPress. Get help from your C-Panel support team to install and set it up.
  • #14 Regardless which WordPress option you’ll choose, if you goal is to get away from the templates and do something tailored to your taste and specific needs, you need to have a little background in HTML and CSS in order to accomplish the desired customization. Basic coding skills go a long way. Inserting tags will allow structuring pages in custom ways and applying inline CSS will help you further customize your content. CSS comes in 3 types: inline CSS (code applied directly to elements); internal CSS (code applies style to all elements on a webpage); external CSS (governs the style of all elements globally – in all pages). In WordPress we work on a smaller scale, so we apply style to the elements directly by using inline CSS
  • #15 Here we come to the demo part. I’m happy (and proud) to show you how I designed the Nevada Digital Newspaper website. WordPress is very self explanatory and once you see the back end of it and you have some basic programming skills, you’ll be able to do it yourself.