Code For Every Librarian

CSS – HTML – JavaScript

This post contains content from a presentation I did with Cheryl Wolfe, Web Services Administrator, Tampa-Hillsborough County Public Library titled Code For Every Librarian at the Florida Library Association Conference 2016.

HTML

  • Hypertext Markup Language
  • Turn text into images, links, and more
  • Use to build webpages and Web content

HTML Examples

Text

<b>Bold</b> also <strong>Bold</strong>
<i>Italics</i> also <em>Italics</em>

<h1>Heading 1</h1>

<p>Paragraph text with full break.</p>
<br> or <br /> for a line break.

Images

<img src=“image.jpg” border=0 alt=“image subject in words” />

Links

<a href=“new-page.html” >Link text</a>
<a href=“new-page.html” ><img src=“go.jpg” border=0 alt=“Go” /></a>

Structure

<div id=“unique-name”>Content goes here.</div>
<span font-color=“#FF0000;”>Red text here.</span>

Tables

<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
</table>

Row 1 Cell 1 Row 1 Cell 2
Comments
<!-- Start LibAnswers Chat Widget -->
 <div id="libchat_74ba5f"></div>
<!-- End Widget -->
Comment Out
<!-- Temporary Email Link
 <a href="mailto:library@erau.edu">library@erau.edu</a>
-->
Navigation List

<nav>
<ul class=”primary-nav”>
<li><a href=”/hcplc/books/”>Books &amp; More</a></li>
<li><a href=”/hcplc/research/”>Learning &amp; Research</a></li>
<li><a href=”/hcplc/events/”>Events &amp; Classes</a></li>
<li><a href=”/hcplc/services/”>Services</a></li>
<li><a href=”/hcplc/locations/”>Locations</a></li>
<li><a href=”/hcplc/using/”>Using the Library</a></li>
</ul>
</nav>

CSS

  • Cascading Style Sheets
  • Apply styles to HTML
  • Use to style and design webpages

CSS Examples

Change font size: { font-size: 14px; }
Change font color: { color: #09F; }
Change background color: { background-color: #A39161; }
Hide an element: { display: none; }
Mark as important: { display: none !important; }

Positioning

.float-left { float: left; }
.float-right { float: right; }

Responsive Typography

body { font-size: 100%; }
h1 { font-size: 150%; }
h2 { font-size: 125%; }
h3 { font-size: 110%; }
p { font-size: 100%; }
.note { font-size: 90%; font-style: italic; }

Media Queries with Grid Layout

@media all and (max-width: 59em)
{ .column-span2,.column-span3,.column-span4, .column-span5,.column-span6,.column-span7, .column-span8,.column-span9,.column-span10 { float:none; clear:both; margin: .5em 2.0833333333333%; width:auto; }

Background Image

body { background: #f5f5f5 url(/hcplc/images/topborder.png) repeat-x center top; }

JavaScript

  • Works with HTML and CSS
  • Most widely used language on the Web
  • Use to add dynamic and interactive elements to websites

JavaScript Examples

Inline JavaScript

<a href=”#” onclick=”window.open(‘chat.html’,’mywindow’,’width=500,
height=620′)”>Chat with Us</a>

External JavaScript

<script src=”/hcplc/tech/jscripts/hcplc_allpages.js” language=”javascript”></script>

Helpful Tips

How To Use a Browser’s Inspect Feature

You can examine a webpage’s code and content and experiment making changes right in your browser.  Right-click on a webpage and select “Inspect” in Chrome, Edge, and Internet Explorer, or “Inspect Element” in Firefox.

Useful Code Editing Tools

Notepad++ is useful for editing code.  It makes reading code easier by color-coding different parts of HTML, CSS, and JavaScript.  It also allows you to view code groupings and collapse sections of code.

Helpful Resources on the Web

Download and print the Helpful Resources PDF.

Codecademy – HTML and CSS – www.codecademy.com/en/tracks/htmlcss

W3Schools – HTML, CSS, and JavaScript – www.w3schools.com

Troubleshooting

Stack Overflow – http://stackoverflow.com

GitHub – https://github.com

CodePen – http://codepen.io

Free Coding Courses & Tutorials

Code.org – https://code.org
Codecademy – https://www.codecademy.com
Coursera – https://www.coursera.org
Free Code Camp – http://www.freecodecamp.com
Hour of Code – https://hourofcode.com/us
KhanAcademy – https://www.khanacademy.org
Lifehacker Learn to Code: The Full Beginner’s Guide – http://lifehacker.com/5744113/learn-to-code-the-full-beginners-guide

Paid Online Courses and Bootcamps

Bloc Apprenticeship – https://www.bloc.io
Code School – https://www.codeschool.com
Dev Bootcamp – http://devbootcamp.com
General Assembly – https://generalassemb.ly
Launch School – https://launchschool.com
Lrn app – https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677?mt=8
Lynda.com – http://www.lynda.com
Skillcrush – http://skillcrush.com
The Firehose Project – https://www.thefirehoseproject.com
Treehouse – https://teamtreehouse.com/join/now
Udacity – https://www.udacity.com
Udemy – https://www.udemy.com

2016 Library Conference Schedule

With 2016 just started, we are looking forward to this year’s batch of annual library conferences.  The list below covers large library technology conferences as well as the major conferences where technology will be discussed.

January #hashtag
8-12 ALA Midwinter Meeting, Boston, MA #ALAMW16
March
7-10 Code4Lib 2016, Philadelphia, PA #c4l16
8-12 Computers in Libraries 2016, Washington, DC #CILDC
16-17 Library Technology Conference 2016, St. Paul, MN #LTC2016
April
3-6 11th Annual ER&L Conference, Austin, TX #erl16
5-9 PLA Conference 2016, Denver, CO #PLA2016
14-15 DPLAfest 2016, Washington, DC #DPLAfest2016
June
12-14 SLA Annual Conference 2016, Philadelphia, PA #SLA2016
19-23 JCDL 2016, Newark, NJ #JCDL2016
23-28 ALA Annual Conference 2016, Orlando, FL #ALAAC16
August
13-19 IFLA World Library and Information Congress, Columbus, OH #wlic2016
October
14-18 ASIS&T Annual Meeting 2016, Copenhagen, Denmark @asist_org
31-11/5 Charleston Conference, Charleston, SC @chsconf

For more comprehensive lists, see Douglas Hasty’s Library Conference Planner website or D-Lib Magazine.

Common Library Technology Acronyms

Throughout your professional library reading you probably occasionally come across esoteric library technology acronyms.  It’s annoying to have to stop reading to look up their meanings.  To help prevent that, we present our list of common library technology acronyms.

These acronyms have been added to the Library Technology Acronyms page.

Anglo-American Cataloguing Rules, Second EditionAACR2 – Anglo-American Cataloguing Rules, Second Edition, a set of cataloging rules succeeded by Resource Description and Access (RDA).

COUNTER – Counting Online Usage of NeTworked Electronic Resources, standards for recording and reporting online usage statistics.

CAPTCHA – Completely Automated Public Turing Test to tell Computers and Humans Apart, a test that aims to protect web forms from entry by bots.

CSS – Cascading Style Sheets, a language used for describing the presentation of a web document (usually in HTML).

CSV – Comma-Separated Values, data items in table record consisting of one or more fields, separated by commas.

DDA – Demand Driven Acquisition, a system where an e-resources is purchased after a pre-specified number of uses trigger its purchase. Replaces Patron Driven Acquisition (PDA).

DOI – Digital Object Identifier, a persistent interoperable identifier under International Organization for Standardization standard ISO 26324.

DRM – Digital Rights Management,  access control technologies used to restrict access to certain rights-holders.

EDI – Electronic Data Interchange.

ERM – Electronic Resource Management, system used to track electronic resources such as databases, ebooks, and e-journals.

FRBR – Functional Requirements for Bibliographic Records,  model of metadata that includes four levels of representation: work, expression, manifestation, and item.

HTML – Hypertext Markup Language, a markup language for describing web documents.

ISO – International Organization for Standardization, independent developer of voluntary International Standards.

LDAP – Lightweight Directory Access Protocol, a method of user authentication.

LITA – Library and Information Technology Association is a division of the American Library Association (ALA).

LOCKSS – Lots of Copies Keep Stuff Safe,  multiple electronic backup system for preserving library materials.

MOOC – Massive Open Online Course, a web-based course, often with very large enrollments.

OA – Open Access.

OCLC – Online Computer Library Center, Inc., a nonprofit provider of library services for cataloging, discovery, and resource sharing.

PDA – Patron Driven Acquisition, see DDA (Demand-Driven Acquisition).

PURL – Persistent Uniform Resource Locator.

RDA – Resource Description and Access, a unified cataloging standard which is replacing AACR2 and based on FRBR (see above).

RDM – Research Data Management.

RFID – Radio Frequency Identification Technology, the wireless use of electromagnetic fields to transfer data from tags typically affixed to print library materials.

SaaS – Software as a Service.

SAML – Security Assertion Markup Language, XML standard for single sign-on (SSO).

SMS – Short Message Service, for sending text messages on mobile phones.

SSL – Secure Sockets Layer, a security technology for establishing an encrypted connection between a webserver and a browser, succeeded by Transport Layer Security (TLS).

SUSHI – Standardized Usage Statistics Harvesting Initiative.

TLS – Transport Layer Security, a security technology for establishing an encrypted connection between a webserver and a browser, replacing Secure Sockets Layer (SSL).

UX – User eXperience.

WCAG – Web Content Accessibility Guidelines.

XML – eXtensible Markup Language, a language for encoding documents in both a human-readable and  machine-readable text format.

XSL – eXtensible Stylesheet Language, a language used to transform and render XML documents.