• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 e Css3 - 7 | WebMaster & WebDesigner
 

HTML5 e Css3 - 7 | WebMaster & WebDesigner

on

  • 658 views

Settima lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Settima lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Statistics

Views

Total Views
658
Views on SlideShare
658
Embed Views
0

Actions

Likes
0
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 e Css3 - 7 | WebMaster & WebDesigner HTML5 e Css3 - 7 | WebMaster & WebDesigner Presentation Transcript

    • HTML5 e Css3 [7]Matteo Magni
    • Form
    • Molto Lavoro!● Layout● Validation● Suggest More Javascript →
    • Responsabilita dei Browser
    • HTML5 WebFormhttp://diveintohtml5.info/forms.html
    • placeholder<form>  <input name="q" placeholder="Go to a Website">  <input type="submit" value="Search"></form>
    • Placeholder Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 4.0+ 11.0+ 4.0+ 2.1+
    • autofocus<form>  <input name="b">  <input name="q" autofocus>  <input name="c">  <input type="submit" value="Search"></form>
    • Autofocus Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 3.0+ 10.0+ - 3.0+
    • Js Or jQuery<script>$(document).ready(function() {  if (!("autofocus" in document.createElement("input"))) {      $("#q").focus();  }});</script><form name="f">  <input id="q" autofocus>  <input type="submit" value="Go"></form>
    • Email addresses<form>  <input type="email">  <input type="submit" value="Go"></form>
    • Web Addresses<form>  <input type="url">  <input type="submit" value="Go"></form>
    • Number<form>    <input name="n"       type="number"       min="0" max="10"       step="2" value="6">    <input type="submit" value="Go">  </form>
    • http://modernizr.com/Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
    • Modernizr fa un test della presenza di oltre 20 features HTML5/CSS3, restituendo unoggetto JavaScript e una serie di classi CSSche lo sviluppatore può utilizzare per avere un quadro preciso delle funzionalità supportate dal browser che in quel momento sta navigando le sue pagine
    • Features● @font-face ● border-image● Canvas ● border-radius● Canvas Text ● box-shadow● WebGL ● text-shadow● HTML5 Audio ● Multiple backgrounds● HTML5 Audio formats ● background-size● HTML5 Video ● opacity● HTML5 Video formats ● CSS Animations● rgba() ● CSS Columns● Hsla() ● CSS Gradients
    • Features● CSS Reflections ● Inline SVG● CSS 2D Transforms ● SVG Clip paths● CSS 3D Transforms ● SMIL● Flexible Box Model● CSS Transitions ● Web SQL Database● Geolocation API ● IndexedDB● Input Types ● Web Sockets● Input Attributes ● hashchange Event● localStorage ● History Management● sessionStorage● Web Workers ● Drag and Drop● applicationCache ● Cross-window Messaging● SVG ● Touch Events
    • Use Modernizr<script src="/js/modernizr.js"></script>if (!Modernizr.inputtypes.number) {  // no native support for type=number fields  // maybe try jQuery or some other JavaScript frameworkhttp://jqueryui.com/spinner/}
    • range<form>    <input name="n"       type="range"       min="0" max="10"       step="2" value="6">    <input type="submit" value="Go">  </form>
    • Date<form>        <input type="date"><br/>        <input type="datetime"><br/>        <input type="datetime­local"><br/>        <input type="month"><br/>        <input type="week"><br/>        <input type="time"><br/>        <input type="submit" value="Go"></form>
    • <script>  var i = document.createElement("input");  i.setAttribute("type", "date");  if (i.type == "text") { //jquery ui datepicker  } http://jqueryui.com/datepicker/</script> Chrome Chrome
    • Search<form><input name="q" type="search"><input type="submit" value="Find"></form>
    • Chrome →Safari →
    • Color<form><input name="q" type="color"><input type="submit" value="Send"></form>
    • Chrome &
    • Validate<form>  <input type="email">  <input type="submit" value="Go"></form>
    • No Validate<form novalidate>  <input type="email" id="addr">  <input type="submit" value="Subscribe"></form>
    • required<form>  <input id="q" required>  <input type="submit" value="Search"></form>
    • required
    • Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me