What the heck is HTML 5 CSS 3
- Slides: 65
What the heck is HTML 5 & CSS 3? An Introductory Workshop Johan Oberg Digital Scholarship and Services Librarian, Macalester College Ron Joslin Technology Coordinator & Instruction Librarian, Macalester College Leslie Mollner Reference Librarian, Macalester College Library Technology Conference 2012 – March 14, 2012
What we’ll be doing over the next two hours… q Brief review the development of HTML & CSS about it) q What is HTML 5? (and why should we be excited about it) q Build a basic web page w/ HTML 5 [ HANDS-ON ACTIVITY ] q What is CSS 3? (and why should we be excited about it) q Apply CSS 3 to our web page [ HANDS-ON ACTIVITY ] q Browser compatibility and other challenges q Show some tools & examples What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Session Goals: • Gain a better understanding of what HTML 5 and CSS 3 is and what to expect as it is more widely adopted • Start you thinking about how it could affect web development at your library What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
HTML 5 What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
1990 HTML 1991 - Tim Berners-Lee defines HTML Basic tags for simple text and formatting. 1995 – HTML 2. 0 First standardized version of html; included many of tags we are familiar with today. 1995 WHATWG formed - 1996 Begins development of what will become HTML 5 W 3 C Takes Over - 1998 W 3 C adopts WHATWG work and changes its name to HTML 5. DEVELOPMENT TIMELINE 1999 - HTML 4. 0 Stabilized the syntax and structure of Web authoring; still the standard today. 2000 – XHTML 1. 0 Designed to move HTML toward XML; strict rules and focus on structural markup 2004 - XHTML 2. 0 2005 HTML 5 TIMELINE HTML heavy focus on structure; not backwards compatible HTML 5 use increases – 2005 -2010 Many big players, including Apple, Google & Microsoft, increase support of HTML 5 2010 HTML 5 Completed- 2014 HTML 5 specifications are expected to be completed What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
So what is HTML 5? • It is the newest specification for HTML: merges HTML 4, XHTML 1. 0 and DOM Level 1 • It’s simplified coding will make web pages better structured, more meaningful, and device neutral. • It’s built-in APIs will change web pages into application development platforms. • It’s still evolving – expected to be fully completed in 2014! Most experts agree, HTML 5 should transform the web into a faster, leaner environment and better allow for the development of a richer user experience. What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Highlighting HTML 5 Features • • Cleaner, more consistent and descriptive code Backwards compatibility Local storage Native support for video and audio Smarter web forms Canvas 2 D drawing area Related applications What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Cleaner, More Consistent and Descriptive Code More semantic structural elements added What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
HTML 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 5 <meta charset="utf-8"> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Backwards Compatibility Works with HMTL 4 and earlier, XHMTL 1 and earlier, with some deprecation of elements What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Local Storage Apps can store info for offline use What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Native Support for Video, Audio What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Smarter Web Forms What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Now, it’s time to build our HTML 5 web page. What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Add HTML 5 Doctype & Charset & Some Structure What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>HTML 5</title> <link rel="stylesheet" href="style. css"> </head> <body> <div id="pagebody"> </div> </body> </html> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Add A Header & Some Navigation What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<header> <h 1>Prairie Land Library</h 1> <nav> <ul> <li>About Us</li> <li>Collections</li> <li>Services</li> </ul> </nav> </header> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Add Some Articles, a Section & Video What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<section> <article> <h 1>A Library Quilt</h 1> <img id="feature_image_1" src="quilt. jpg"/> <p>Content Goes Here</p> </article> <!-- more code goes here --> </section> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<section> <!-- code already here --> <article> <h 1>Meet A Librarian</h 1> <video width="490" height="276” controls="controls"> <source src="beth. mp 4" type="video mp 4" /> </video> </article> </section> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Add Some Asides & Audio What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<aside> <h 3>Today in the Library</h 3> <h 4>Library Marks Tennessee Williams’ Birthday, March 26</h 4> <p>Content goes here</p> </aside> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<aside> <h 3>Audio Mixer</h 3> <audio id="audio 1" controls="controls" title="Guitar" preload="preload" loop="loop"> <source src="guitar. ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio> <!-- more code goes here --> </aside> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<aside> <!-- code already here --> <audio controls="controls" title="Cool Congas" preload="preload" loop="loop"> <source src="cool. ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio> </aside> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Finally, Add a Footer What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
<footer> <h 2>About Us</h 2> <h 2>Collections</h 2> <h 2>Services</h 2> </footer> What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Try out your HTML 5 page! What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
CSS 3 What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
1990 CSS 1994 – CHSS Precursor to CSS, developed by Håkon Wium Lie 1996 – CSS Level 1 1995 CSS Level 1 becomes official through the W 3 C, developed by Lie & Bert Bos DEVELOPMENT TIMELINE 1998 – CSS Level 2 becomes official CSS 3 – 1998 CSS 3 starts to be developed 2000’s – CSS Level 2. 1 developed through the 2000's CSS 3 – 2000’s CSS 3 (& CSS 4!) TIMELINE Work continues on CSS 3 2005 2011 – CSS Level 2. 1 becomes official CSS 4 – 2009 2010 CSS 4 starts to be developed, Not supported by any browsers CSS 3 - 2011 CSS 3 Selectors, Namespaces & Color modules become official What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
So what is CSS 3? • It is the newest standard for CSS that will take over for CSS 2. 1 with backward compatibility • Modules, modules. CSS 3 has been split up into sections for easier updating in smaller chunks, Each module adds functionality to, and replaces part of, the CSS 2. 1 specification • Some modules are already completed, SVG (Scalable Vector Graphics), Media Queries and Namespaces • It’s still evolving – expected to be fully completed in ? What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Highlighting CSS 3 Features • • Selectors Color Opacity Transparency Borders Backgrounds Gradients Media Queries • • Multi-Column Layout Shadows @Font-Face WOFF Transitions Transforms Animation Box Sizing What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Progressive VS. Enhancement Graceful Degredation • Graceful degradation and progressive enhancement both consider how well a site works in a variety of browsers on a variety of devices • Graceful degradation focuses on building the website for the most advanced/capable browsers while older browsers just get by, often with poor performances • Progressive enhancement focuses on content first, the main reason web sites are created. Style and interactivity are layered on to enhance the site but are not required aspects for the content to be available to the user What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Vendor-Specific Prefixes or Extensions • Webkit - Safari, Chrome • Moz - Firefox, Gecko • Ms - Internet Explorer • 0 - Opera • Khtml - Konqueror What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Now, it’s time to make our HTML 5 web page look pretty with CSS 3. What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Background Gradient background: #275 e 87; /* fallback for older/unsupporting browsers */ background: -webkit-gradient(linear, 0 0, 0 70%, from(#31 a 7 de), to(#bde 1 f 1)); What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Border Radius border-top-left-radius: 9 px; border-top-right-radius: 9 px; What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Border Radius /* The border-radius property is supported in IE 9+, Firefox 4+, Chrome, Safari 5+, and Opera */ border-radius: 10 px; What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Border Radius border-top-left-radius: 7 px; border-top-right-radius: 7 px; What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Color & Opacity background-color: #31 a 7 de; color: #fff; opacity: 0. 7; What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Background Gradient background: #FFCCFF; background: -webkit-gradient(linear, 0 0, 0 70%, from(#ffaf 4 b), to(#ff 920 a)); What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Border Radius border-radius: 10 px; What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Box Shadow box-shadow: 10 px #000; What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Background Gradient background: #275 e 87; /* fallback for older/unsupporting browsers */ background: -webkit-gradient(linear, 0 0, 0 60%, from(#cfcfcf), to(#f 6 f 6 f 6)); What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Border Radius border-bottom-left-radius: 9 px; border-bottom-right-radius: 9 px; What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Browser Support Tools What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Browser Support Tools • • • HTML 5 Test CSS 3 Test When Can I Use. . . HTML 5 Please HTML 5 & CSS 3 Readiness HTML 5 & CSS 3 Support What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
HTML 5 Test What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
CSS 3 Test What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
When Can I Use… What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
HTML 5 Please What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
HTML 5 & CSS 3 Readiness What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
HTML 5 & CSS 3 Support What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Validator. nu What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
HTML 5 & CSS 3 Examples & Tools What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Questions? What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Thank You! What the Heck is HTML 5 & CSS 3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012
Lexique html css
Css html
Singkatan css html
Html css feladatok
What specifies the headings paragraphs images
Q.html
Css scoops
Html css
Html 글씨색
Html css
Css boşluk bırakma
Css lewis
Singkatan css html
Td vs th
Bay scissors looted
Why the heck not
Ulrich heck
Bro what the heck
Heck tate is wise and tolerant
How did heck tate behave on the witness stand
Ulrich heck
Bat tree snot ink looted mad gab
Html
Slidetodoc
Doctype html html head
Doctype html html head
12.html?title=
Làm thế nào để 102-1=99
Hát lên người ơi
Hổ đẻ mỗi lứa mấy con
đại từ thay thế
Vẽ hình chiếu vuông góc của vật thể sau
Quá trình desamine hóa có thể tạo ra
Công thức tiính động năng
Thế nào là mạng điện lắp đặt kiểu nổi
Hát kết hợp bộ gõ cơ thể
Tỉ lệ cơ thể trẻ em
Lời thề hippocrates
Dạng đột biến một nhiễm là
Vẽ hình chiếu đứng bằng cạnh của vật thể
Phản ứng thế ankan
Các môn thể thao bắt đầu bằng tiếng đua
Khi nào hổ mẹ dạy hổ con săn mồi
điện thế nghỉ
Nguyên nhân của sự mỏi cơ sinh 8
Trời xanh đây là của chúng ta thể thơ
Voi kéo gỗ như thế nào
Ng-html
Thiếu nhi thế giới liên hoan
Bảng số nguyên tố
Phối cảnh
Các châu lục và đại dương trên thế giới
Một số thể thơ truyền thống
Thế nào là hệ số cao nhất
Sơ đồ cơ thể người
Tư thế ngồi viết
đặc điểm cơ thể của người tối cổ
Cách giải mật thư tọa độ
Tư thế worm breton là gì
Bổ thể
ưu thế lai là gì
Thẻ vin
Cái miệng bé xinh thế chỉ nói điều hay thôi
Thơ thất ngôn tứ tuyệt đường luật
Các châu lục và đại dương trên thế giới
Từ ngữ thể hiện lòng nhân hậu
