separating content and layout, HTML CSS and some web history
Upcoming SlideShare
Loading in...5
×
 

separating content and layout, HTML CSS and some web history

on

  • 527 views

 

Statistics

Views

Total Views
527
Views on SlideShare
527
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

separating content and layout, HTML CSS and some web history separating content and layout, HTML CSS and some web history Presentation Transcript

  • Content and Layout Lon Barfield
  • Separating content and layout Bit of web history Content and layout on the web Why separation is a good thing But first...
  • The Large Hadron Collider
  • Million GBytes per second
  • The Higgs Boson - July 2012
  • Yes it’s Comic Sans!
  • The God particle the Devil’s typeface bancomicsans.com It would be nice to publish data without layout issues
  • Tim Berners-Lee CERN - 1989 10,000 scientists from over 100 countries It would be nice to publish data without layout issues World Wide Web - “Vague but exciting” info.cern.ch/hypertext/WWW/TheProject.html
  • Tim Berners-Lee CERN - 1989
  • Just content, no layout This chunk of text is a heading, etc. Headings, Text, Title, Quote, Abstract 20 Elements
  • Early web had no ‘design’
  • Designers v content purists ‘Tricks’ subverting the HTML tags spaces, blank images, H2 for titles Compromise - the centre tag HTML became content and layout
  • Nice HTML timeline more layout oriented tags still mixing content and layout broadcast.rackspace.com/blog/HTMLtimeline
  • Style sheets - CSS This is the content… <H1>Blah blah</H1> And this is how it should look... H1 {font-weight: bold; text-transform: uppercase;}
  • Advantages Accessibility - screen readers for the blind won’t start by reading the navigation bars Responsive design - information can adapt for small screens, printing etc.
  • Advantages cont. Better search indexing - Is the term in the title, the heading? Semantic web - what do things actually mean
  • Hands on - Zen Garden csszengarden.com en.wikipedia.org/wiki/CSS_Zen_Garden download HTML and CSS sample using the links, tweak and screen grab it
  • Taking a peek at the CSS The page using the CSS www.csszengarden.com/?cssfile=/210/210.css Just the CSS www.csszengarden.com/210/210.css