0
HTML5 & CSS3
New things
Agenda
• HTML vs HTML5: New features
• CSS vs CSS3: New features
• Responsive Design core concepts
• Modernizr
HTML VS HTML5: NEW
FEATURES
HTML5 & CSS3
DOCTYPE
• HTML5
– <!DOCTYPE html>
• HTML
– <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "htt
p://www.w3...
<Figure>
• HTML5
– <figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something in...
“Type” – Links & Js
• HTML5
– Not necessary
• <script src="path/to/script.js"></script>
• HTML
– Necessary
• <script src="...
“” – ID’s & Classes
• HTML5
– Not necessary
• <p class=myClass id=someId>
• HTML
– Necessary
• <p class=“myClass” id=“some...
UL Editable
• HTML5
– <ul contenteditable=true>
• HTML
– N/A
Type=“Email”
• HTML5
– <input id="email" name="email" type="email"
/>
• HTML
– N/A
Placeholders
• HTML5
– <input name="email" type="email"
placeholder=“mail@domain.com" />
• HTML
– N/A
Semantic Tags
• HTML5
– <Nav>
– <Header>
– <Article>
• <Section>
– <Aside>
– <Footer>
• HTML
– N/A
Required
• HTML5
– <input type="text" name="someInput"
required>
• HTML
– N/A
Autofocus
• HTML5
– <input type="text" name="someInput"
placeholder="Douglas Quaid" required
autofocus>
• HTML
– N/A
Audio
• HTML5
– <audio autoplay="autoplay"
controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a hre...
Audio
• Supported formats
Video
• HTML5
– <video controls preload>
<source src=“video.ogv" type="video/ogg" />
<source src=“video.mp4" type="video/m...
Video
• Supported formats
Data Attributes
• HTML5
– <div id="myDiv" data-custom-attr="My
Value"> Text</div>
• HTML
– N/A
Demo
More help
• http://joshduck.com/periodic-table.html
CSS3 VS CSS: NEW FEATURES
HTML5 & CSS3
First Child
• CSS3
– #big_section p:first-child{ }
• CSS
– N/A
First Letter
• CSS3
– #p_line:first-letter{ }
• CSS
– N/A
Border Radius
• CSS3
– border-radius: 10px 90px 90px 10px;
• CSS
– N/A
Transition
• CSS3
– transition: width 2s, height 2s, color
3s, transform 2s, linear 2s;
• CSS
– N/A
Transformation
• CSS3
– transform:rotate(7deg);
– transform: translate(70px);
• CSS
– N/A
RESPONSIVE WEB DESIGN
HTML5 & CSS3
What is?
• “A website that responds to the device that
accesses it and delivers the appropriate
output for it uses respons...
What isn’t?
• A small website
• Different url’s for different devices
• Having 100% width elements
Viewports
• <meta name="viewport"
content="width=device-width, user-
scalable=false;">
Media Queries
• CSS3 module
• Adapt to conditions like screen resolution
• Breakpoint
– @media only screen and (max-device...
Examples
• Fixed Design: http://www.corvusart.com/
• Elastic Design: http://clearleft.com/
• Responsive Web Design: Demo
MODERNIZR
HTML5 & CSS3
Modernizr
• Use HTML5 on old browsers
• Simple: Add reference to the js file
• Download: www.modernizr.com
Links
• Lynda:
– Responsive Design Fundamentals
– CSS3 First Look
• www.modernizr.com
• www.html5test.com/compare/browser/...
Training Html5 -CSS3 New things
Upcoming SlideShare
Loading in...5
×

Training Html5 -CSS3 New things

2,111

Published on

This training helps you to know what are the new things in HTML5 & CSS3

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,111
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
203
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Sin embargo se deben seguir implementando validaciones cliente/servidor
  • Sin embargo se deben seguir implementando validaciones cliente/servidor
  • Razones para usarlasMayor claridad para los desarrolladoresMayor facilidad para trabajar con cssRegiones definidas para el SEOAyuda a las tecnologias de asistencia, como lectores de pantalla
  • Razones para usarlasMayor claridad para los desarrolladoresMayor facilidad para trabajar con cssRegiones definidas para el SEOAyuda a las tecnologias de asistencia, como lectores de pantalla
  • Razones para usarlasMayor claridad para los desarrolladoresMayor facilidad para trabajar con cssRegiones definidas para el SEOAyuda a las tecnologias de asistencia, como lectores de pantalla
  • Razones para usarlasMayor claridad para los desarrolladoresMayor facilidad para trabajar con cssRegiones definidas para el SEOAyuda a las tecnologias de asistencia, como lectores de pantalla
  • Razones para usarlasMayor claridad para los desarrolladoresMayor facilidad para trabajar con cssRegiones definidas para el SEOAyuda a las tecnologias de asistencia, como lectores de pantalla
  • Razones para usarlasMayor claridad para los desarrolladoresMayor facilidad para trabajar con cssRegiones definidas para el SEOAyuda a las tecnologias de asistencia, como lectores de pantalla
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • http://joshduck.com/periodic-table.html
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
  • Transcript of "Training Html5 -CSS3 New things"

    1. 1. HTML5 & CSS3 New things
    2. 2. Agenda • HTML vs HTML5: New features • CSS vs CSS3: New features • Responsive Design core concepts • Modernizr
    3. 3. HTML VS HTML5: NEW FEATURES HTML5 & CSS3
    4. 4. DOCTYPE • HTML5 – <!DOCTYPE html> • HTML – <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
    5. 5. <Figure> • HTML5 – <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> – </figure> • HTML – N/A
    6. 6. “Type” – Links & Js • HTML5 – Not necessary • <script src="path/to/script.js"></script> • HTML – Necessary • <script src="path/to/script.js“ type=“text/javascript”></script>
    7. 7. “” – ID’s & Classes • HTML5 – Not necessary • <p class=myClass id=someId> • HTML – Necessary • <p class=“myClass” id=“someId”>
    8. 8. UL Editable • HTML5 – <ul contenteditable=true> • HTML – N/A
    9. 9. Type=“Email” • HTML5 – <input id="email" name="email" type="email" /> • HTML – N/A
    10. 10. Placeholders • HTML5 – <input name="email" type="email" placeholder=“mail@domain.com" /> • HTML – N/A
    11. 11. Semantic Tags • HTML5 – <Nav> – <Header> – <Article> • <Section> – <Aside> – <Footer> • HTML – N/A
    12. 12. Required • HTML5 – <input type="text" name="someInput" required> • HTML – N/A
    13. 13. Autofocus • HTML5 – <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> • HTML – N/A
    14. 14. Audio • HTML5 – <audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> – </audio> • HTML – N/A
    15. 15. Audio • Supported formats
    16. 16. Video • HTML5 – <video controls preload> <source src=“video.ogv" type="video/ogg" /> <source src=“video.mp4" type="video/mp4”/> <p> Your browser is old. <a href=“video.mp4">Download this video instead.</a> </p> – </video> • HTML – N/A
    17. 17. Video • Supported formats
    18. 18. Data Attributes • HTML5 – <div id="myDiv" data-custom-attr="My Value"> Text</div> • HTML – N/A
    19. 19. Demo
    20. 20. More help • http://joshduck.com/periodic-table.html
    21. 21. CSS3 VS CSS: NEW FEATURES HTML5 & CSS3
    22. 22. First Child • CSS3 – #big_section p:first-child{ } • CSS – N/A
    23. 23. First Letter • CSS3 – #p_line:first-letter{ } • CSS – N/A
    24. 24. Border Radius • CSS3 – border-radius: 10px 90px 90px 10px; • CSS – N/A
    25. 25. Transition • CSS3 – transition: width 2s, height 2s, color 3s, transform 2s, linear 2s; • CSS – N/A
    26. 26. Transformation • CSS3 – transform:rotate(7deg); – transform: translate(70px); • CSS – N/A
    27. 27. RESPONSIVE WEB DESIGN HTML5 & CSS3
    28. 28. What is? • “A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.” https://itservices.stanford.edu/service/web/mobile/about/terminology
    29. 29. What isn’t? • A small website • Different url’s for different devices • Having 100% width elements
    30. 30. Viewports • <meta name="viewport" content="width=device-width, user- scalable=false;">
    31. 31. Media Queries • CSS3 module • Adapt to conditions like screen resolution • Breakpoint – @media only screen and (max-device-width: 480px) { }
    32. 32. Examples • Fixed Design: http://www.corvusart.com/ • Elastic Design: http://clearleft.com/ • Responsive Web Design: Demo
    33. 33. MODERNIZR HTML5 & CSS3
    34. 34. Modernizr • Use HTML5 on old browsers • Simple: Add reference to the js file • Download: www.modernizr.com
    35. 35. Links • Lynda: – Responsive Design Fundamentals – CSS3 First Look • www.modernizr.com • www.html5test.com/compare/browser/inde x.html • www.slideshare.net/Jim04
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×