Let's face it.
-
Upload
adrian-kirsten -
Category
Design
-
view
206 -
download
0
description
Transcript of Let's face it.
![Page 1: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/1.jpg)
Aweh.
How do we get our sites ready for the future & dare I say… Web 3.0
![Page 2: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/2.jpg)
Let’s talk about some cool stuff
![Page 3: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/3.jpg)
HTML 5 = HTML + CSS + JS=
What is HTML 5?
![Page 4: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/4.jpg)
But the most important thing about
Is Semantics.
HTML 5 has lot’s of new features
![Page 5: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/5.jpg)
• The semantic web is all about giving the information you display on your website meaning and emphasis to machines.
• This allows them to process our information more intelligently and to make sense of it all.
WTF is semantics? And why is it important?
It’s true! Wikipedia says so!
![Page 6: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/6.jpg)
• Currently we give meaning and emphasis to our content through markup.
• Semantics in current HTML versions are flawed.
• HTML 5 makes semantic possibilities HUGE.
WTF is semantics? And why is it important?
![Page 7: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/7.jpg)
• lo
HTML 4 Markup
![Page 8: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/8.jpg)
• lo
The HTML 5 Way
![Page 9: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/9.jpg)
• Improves semantics• We use it already• Based on existing standards• Opens up information to
3rd party apps• Rich Google Snippets
The Microformat
![Page 10: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/10.jpg)
• hRecipe is a standardised microformat.• Google reads and supports it – Extracts the microformat data
into it’s search listings.• Nested microformats with the hReview• End Result – much friendlier snippets• Only one example of usage.
The Recipe Example
![Page 11: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/11.jpg)
• One site for all platforms• Great solution to feature phone vs smart phone issue
Responsive Design
![Page 12: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/12.jpg)
• Feature phones don’t support media queries.• Build feature phone base with normal CSS.• Use media queries & HTML5 data roles for
smart phone enhancements & themes.
.mobi site = Smart Phones & Feature Phones
And why is that?
![Page 13: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/13.jpg)
The nature of the web is such that sharing and republishing content is common – even encouraged
Embed Practically Anything!
![Page 14: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/14.jpg)
• =
Using oEmbed
![Page 15: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/15.jpg)
• =
Z0MG HAUW?!
![Page 16: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/16.jpg)
• =
oEmbed
![Page 17: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/17.jpg)
• Most of the major online services support it (218 at the time)
• Wordpress has oEmbed support• oEmbed is an open format• We can use it to make our ads embedable!
Tell me more!
![Page 18: Let's face it.](https://reader035.fdocuments.us/reader035/viewer/2022062405/5551d21db4c905922b8b523a/html5/thumbnails/18.jpg)
Die Einde.
*Tjirs