html5 e css3 - 7 | webmaster & webdesigner

of 36/36
HTML5 e Css3 [7] Matteo Magni

Post on 29-Nov-2014

1.233 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

Settima lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

TRANSCRIPT

  • 1. HTML5 e Css3 [7]Matteo Magni
  • 2. Form
  • 3. Molto Lavoro! Layout Validation SuggestMore Javascript
  • 4. ResponsabilitadeiBrowser
  • 5. HTML5 WebFormhttp://diveintohtml5.info/forms.html
  • 6. placeholder
  • 7. SupportIE FIREFOX SAFARI CHROME OPERA IPHONEANDROID10.0+ 4.0+ 4.0+ 4.0+ 11.0+4.0+ 2.1+Placeholder
  • 8. autofocus
  • 9. AutofocusSupportIE FIREFOX SAFARI CHROME OPERA IPHONEANDROID10.0+ 4.0+ 4.0+ 3.0+ 10.0+ -3.0+
  • 10. Js Or jQuery
  • 11. Email addresses
  • 12. Web Addresses
  • 13. Number
  • 14. http://modernizr.com/Modernizr is a JavaScript library that detectsHTML5 and CSS3 features in the usersbrowser.
  • 15. Modernizr fa un test della presenza di oltre20 features HTML5/CSS3, restituendo unoggetto JavaScript e una serie di classi CSSche lo sviluppatore pu utilizzare per avereun quadro preciso delle funzionalitsupportate dal browser che in quelmomento sta navigando le sue pagine
  • 16. Features @font-face Canvas Canvas Text WebGL HTML5 Audio HTML5 Audio formats HTML5 Video HTML5 Video formats rgba() Hsla() border-image border-radius box-shadow text-shadow Multiple backgrounds background-size opacity CSS Animations CSS Columns CSS Gradients
  • 17. FeaturesCSS Reflections CSS 2D Transforms CSS 3D Transforms Flexible Box Model CSS Transitions Geolocation APIInput Types Input Attributes localStorage sessionStorage Web Workers applicationCache SVGInline SVGSVG Clip pathsSMILWeb SQL DatabaseIndexedDBWeb Socketshashchange EventHistory ManagementDrag and DropCross-window MessagingTouch Events
  • 18. Use Modernizrif(!Modernizr.inputtypes.number){//nonativesupportfortype=numberfields//maybetryjQueryorsomeotherJavaScriptframeworkhttp://jqueryui.com/spinner/}
  • 19. range
  • 20. Date





  • 21. http://jqueryui.com/datepicker/ChromeChrome
  • 22. Search
  • 23. Chrome Safari
  • 24. Color
  • 25. Chrome &
  • 26. Validate
  • 27. No Validate
  • 28. required
  • 29. required
  • 30. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:[email protected]