html5 e css3 - 7 | webmaster & webdesigner

36
HTML5 e Css3 [7] Matteo Magni

Upload: matteo-magni

Post on 29-Nov-2014

1.243 views

Category:

Technology


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: HTML5 e Css3 - 7 | WebMaster & WebDesigner

HTML5 e Css3 [7]Matteo Magni

Page 2: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Form

Page 3: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Molto Lavoro!

● Layout● Validation● Suggest

More Javascript →

Page 4: HTML5 e Css3 - 7 | WebMaster & WebDesigner
Page 5: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Responsabilita' dei

Browser

Page 6: HTML5 e Css3 - 7 | WebMaster & WebDesigner

HTML5 WebForm

http://diveintohtml5.info/forms.html

Page 7: HTML5 e Css3 - 7 | WebMaster & WebDesigner

placeholder

<form>

  <input name="q" placeholder="Go to a Website">

  <input type="submit" value="Search">

</form>

Page 8: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 4.0+ 11.0+ 4.0+ 2.1+

Placeholder

Page 9: HTML5 e Css3 - 7 | WebMaster & WebDesigner

autofocus

<form>

  <input name="b">

  <input name="q" autofocus>

  <input name="c">

  <input type="submit" value="Search">

</form>

Page 10: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Autofocus

Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 3.0+ 10.0+ - 3.0+

Page 11: HTML5 e Css3 - 7 | WebMaster & WebDesigner

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>

Page 12: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Email addresses

<form>

  <input type="email">

  <input type="submit" value="Go">

</form>

Page 13: HTML5 e Css3 - 7 | WebMaster & WebDesigner
Page 14: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Web Addresses

<form>

  <input type="url">

  <input type="submit" value="Go">

</form>

Page 15: HTML5 e Css3 - 7 | WebMaster & WebDesigner
Page 16: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Number

<form>

    <input name="n" 

      type="number" 

      min="0" max="10" 

      step="2" value="6">

    <input type="submit" value="Go">

  </form>

Page 17: HTML5 e Css3 - 7 | WebMaster & WebDesigner
Page 18: HTML5 e Css3 - 7 | WebMaster & WebDesigner
Page 19: HTML5 e Css3 - 7 | WebMaster & WebDesigner

http://modernizr.com/

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s

browser.

Page 20: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Modernizr fa un test della presenza di oltre 20 features HTML5/CSS3, restituendo un

oggetto JavaScript e una serie di classi CSS che lo sviluppatore può utilizzare per avere

un quadro preciso delle funzionalità supportate dal browser che in quel

momento sta navigando le sue pagine

Page 21: HTML5 e Css3 - 7 | WebMaster & WebDesigner

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

Page 22: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Features

● CSS Reflections● CSS 2D Transforms● CSS 3D Transforms● Flexible Box Model● CSS Transitions● Geolocation API● Input Types● Input Attributes● localStorage● sessionStorage● Web Workers● applicationCache● SVG

● Inline SVG● SVG Clip paths● SMIL● Web SQL Database● IndexedDB● Web Sockets● hashchange Event● History Management● Drag and Drop● Cross-window Messaging● Touch Events

Page 23: HTML5 e Css3 - 7 | WebMaster & WebDesigner
Page 24: HTML5 e Css3 - 7 | WebMaster & WebDesigner

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 framework

http://jqueryui.com/spinner/

}

Page 25: HTML5 e Css3 - 7 | WebMaster & WebDesigner

range

<form>

    <input name="n" 

      type="range" 

      min="0" max="10" 

      step="2" value="6">

    <input type="submit" value="Go">

  </form>

Page 26: HTML5 e Css3 - 7 | WebMaster & WebDesigner

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>

Page 27: HTML5 e Css3 - 7 | WebMaster & WebDesigner

http://jqueryui.com/datepicker/

<script>  var i = document.createElement("input");  i.setAttribute("type", "date");  if (i.type == "text") {

//jquery ui datepicker  }</script>

Chrome

Chrome

Page 28: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Search

<form>

<input name="q" type="search">

<input type="submit" value="Find">

</form>

Page 29: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Chrome →

Safari →

Page 30: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Color

<form>

<input name="q" type="color">

<input type="submit" value="Send">

</form>

Page 31: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Chrome &

Page 32: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Validate

<form>  <input type="email">  <input type="submit" value="Go"></form>

Page 33: HTML5 e Css3 - 7 | WebMaster & WebDesigner

No Validate

<form novalidate>

  <input type="email" id="addr">

  <input type="submit" value="Subscribe">

</form>

Page 34: HTML5 e Css3 - 7 | WebMaster & WebDesigner

required

<form>  <input id="q" required>  <input type="submit" value="Search"></form>

Page 35: HTML5 e Css3 - 7 | WebMaster & WebDesigner

required

Page 36: HTML5 e Css3 - 7 | WebMaster & WebDesigner

Domande?

Slide:

http://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

[email protected]