Training Html5 -CSS3 New things

2,454 views
2,343 views

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,454
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
213
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.
  • 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

    ×