Linea de tiempo de tecnologias Web


  • 1991 HTML
  • 1994 HTML 2
  • 1996 CSS 1 + JavaScript
  • 1997 HTML 4
  • 1998 CSS 2
  • 2000 XHTML 1
  • 2002 Diseño web Tableless
  • 2005 AJAX
  • 2009 HTML 5

HTML5 ~= HTML + CSS + JS

¿Porque HTML5?

  • SmartPhones comandan el uso de internet
  • Mejores estadares y soporte
  • Más caracteristicas y especificaciones

SPA y HTML5

  • SPA: aplicaciones sola página
  • El ecosistema de SPA es grande
  • HTML5 es uno de los muchos aspectos de SPA

SPA Ecosystem

Semantica & Markup

Elementos con más significado

HTML5 Semantics & Markup

HTML5

Mejores etiquetas semánticas


<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <figure>
    <img src="..."/>
    <figcaption>Chart 1.1</figcaption>
  </figure>

  <footer>
   Copyright ©
<time datetime="2010-11-08">2010</time>. </footer> </body>

HTML5

Markup para aplicaciones


<input list="cars"/>
<datalist id="cars">
  <option value="BMW"/>
  <option value="Ford"/>
  <option value="Volvo"/>
</datalist>


  
<details>
  <summary>HTML 5</summary>
  This slide deck teaches you everything you need to know about HTML 5.
</details>
HTML 5This slide deck teaches you everything you need to know about HTML 5.
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is: A+
<progress>working...</progress> Download is: working...
<progress value="75" max="100">3/4 complete</progress> Goal is: 3/4 complete

HTML5

Nuevos tipos de formulario


<style>
  [required] {
    border-color: #88a;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
  }
  :invalid {
    border-color: #e88;
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  }
</style>
<input type="text" required />

<input type="email" value="some@email.com" />

<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

<input type="range" min="0" max="50" value="10" />

<input type="search" results="10" placeholder="Search..." />

<input type="tel"  placeholder="(555) 555-5555"
         pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

<input type="color" placeholder="e.g. #bbbbbb" />

<input type="number" step="1" min="-5" max="10" value="0" />

HTML5

Tipos de campos de formulario en smarthphones


type="text"
android keyboard on input type text
Android
type="number"
android keyboard on input type number
Android
type="email"
iphone keyboard on input type email
iPhone
type="tel"
iphone keyboard on input type tel
iPhone

Graficos / Multimedia

2D & 3D

HTML5 3D & Effects HTML5 Multimedia

HTML5, JS

Audio + Video


<audio id="audio" src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;
<video id="video" src="movie.webm" autoplay controls></video>
document.getElementById("clip").play();

HTML5, JS

Canvas 2D


<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

HTML5, JS

Canvas 3D (WebGL)


<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var gl = document.getElementById("canvas").getContext("experimental-webgl");
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...
</script>
            

HTML5

Inline SVG


<html>
  <svg width="300px" height="300px">
    <defs>
      <linearGradient id="myGradient" x1="0%" y1="100%" x2="100%" y2="0%">
        <stop offset="5%" stop-color="red"></stop>
        <stop offset="95%" stop-color="blue" stop-opacity="0.5"></stop>
      </linearGradient>
    </defs>
    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 
        fill="url(#myGradient)" onmousedown="alert('hello');"/>
  </svg>
</html>

HTML5

Inline SVG



CSS3

Presentación & Estilos

HTML5 Styling

CSS3

Selectores

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}
Row 1
Row 2
Row 3
Row 4

Image-like display

div {
  display: inline-block;
}

Atributos específicos

input[type="text"] {
  background: #eee;
}

Negación

:not(.box) {
  color: #00c;
}
:not(span) {
  display: block;
}

Selección más específica

h2:first-child { ... }

div.text > div { ... }
h2 + header { ... }

CSS3

Webfonts


@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}

@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}

header {
  font-family: 'LeagueGothic';
}
Familia de tipografia LeagueGothic

CSS3

Text wrapping


div {
  text-overflow: ellipsis;
}
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

CSS3

Columnas


-webkit-column-count: 2; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...

CSS3

Texto stroke


div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px; 
}
Ejemplo texto stroke

CSS3

Opacidad


  color: rgba(255, 0, 0, 0.75); 
  background: rgba(0, 0, 255, 0.75); 
Opacidad independiente

CSS3

Hue/saturación/ilimunación color


color: hsla(
  128 
  74% 
  33% 
  1.00 
        
Ejemplo HSL

CSS3

Esquinas redondeadas


              face: border-radius: 0px; 
              left eye: border-radius: 0px; 
              right eye: border-radius: 0px; 
              base white: border-radius: 0px; 
              mouth: border-radius: 0px; 
              nose: border-radius: 0px; 
              left black eye: border-radius: 0px; 
              right black eye: border-radius: 0px; 
            

CSS3

Degradados


background-image: linear-gradient(top, #00abeb 0%, #fff 50%,
                            #66cc00 50%, #fff 100%);

background-image: radial-gradient(center, circle cover, red, #000 40%);
                                                        

CSS3

Sombras


text-shadow:
  rgba(64, 64, 64, 0.5)
  0px 
  0px 
  0px; 

box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
Ejemplo sombras

Referencias


<Gracias!>