Taller HTML5

Esquema del curso

  1. Introducción a HTML y CSS.
  2. Introducción a Javascript.
  3. Programación gráfica con <canvas> y Javascript.
  4. Programación de aplicaciones estilo escritorio.
  5. HTML5 como sistema de desarrollo para aplicaciones móviles y de escritorio.

1. Introducción a HTML y CSS.

Definición

Hipertext Markup Language es un lenguage para anotar texto de manera que sea sintácticamente distinguible de ese texto. Es usado por los navegadores web para describir e interpretar documentos de texto, imágenes y sonido y presentarlos como páginas web audibles o visibles.

Historia

  • 1980 Tim Berners-Lee.
  • World Wide Web Consortium.
  • CSS + Javascript
  • HTML 4.01
  • XHTML.
  • AJAX y los desarrolladores haciendo aplicaciones con un lenguaje de marcado!!
  • HTML Semántico, CSS y el horror de las tablas.
  • 2005 HTML5

La historia antediluviana de HTML: http://atendesigngroup.com/blog/brief-history-of-html

HTML5 ~= HTML + JavaScript + CSS

HTML5 No es una sola cosa. Así como la web, es un gran hack de tecnologías que en principio no fueron diseñadas para trabajar juntas.

Una Introducción al marcado de documentos con HTML5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Este es el título de la página</title>
    </head>
    <body>
        <h1>Este es un encabezado</h1>
        <p>Y aquí va un parrafo</p>

        <h2>Otro encabezado de menor nivel</h2>
        <p>
            Y otro parrafo mas largo, con una imágen <img src="http://elsoftwarehamuerto.org/wp-content/uploads/2011/06/1-300x220.jpg">
            y un <a href="http://elsoftwarehamuerto.org" target="_blank">link</a>. Craft beer art party vice, mcsweeney's mlkshk wayfarers lo-fi helvetica vegan stumptown. Williamsburg echo park banh mi whatever +1, next level VHS four loko sartorial. Freegan letterpress shoreditch gluten-free you probably haven't heard of them, jean shorts sustainable tattooed williamsburg. Wayfarers readymade locavore trust fund, mlkshk shoreditch brooklyn artisan next level. Cosby sweater locavore jean shorts mustache. Williamsburg cred cliche PBR thundercats carles artisan freegan, cardigan american apparel. High life farm-to-table brooklyn, sartorial shoreditch aesthetic sustainable lomo pitchfork mustache salvia skateboard terry richardson banh mi scenester.
        </p>
    </body>
</html>

Servicios de validación de marcado

http://validator.w3.org/

Una herramienta indispensable

http://getfirebug.com/

Algunas etiquetas y propiedades (clásicas)

  • <!-- --> Comentario. Sirve para hacer en anotaciones en el documento que no serán visibles en el navegador

  • <a> El vinculo, la etiqueta que hizo posible la web.

    1
    2
    <a href="http://elsoftwarehamuerto.org" target="_blank">Abre un vinculo externo en una nueva ventana del explorador</a>  
    <a href="/contact".html">Abre un vinculo local en la misma ventana del navegador</a>
  • <img> Imágen.

    1
    <img src="http://www.templatesheaven.com/blog/wp-content/uploads/2009/03/html.jpg" alt="Homeless guy holding a sign that reads 'Will code HTML for food'">
  • <p> Un parrafo.

    1
    <p>Blah blah blah!<p>
  • <h1>, <h2>, ... ,<h6> Encabezados.

    1
    2
    <h1>1. Título</h1>  
    <h2>1.1. Subtítulo</h2>
  • <ol>, <ul> y <li> Listas

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ol>  
       <li>Una</li>  
       <li>Lista</li>  
       <li>Con</li>  
       <li>Números</li>  
    </ol>  


    <ol>  
       <li>Una</li>  
       <li>Lista</li>  
       <li>Con</li>  
       <li>Números</li>  
    </ol>
  • <div> y <span> son contenedores genéricos

    1
    2
    3
    4
    <div id="seccion_1"> ... </div>


    <span class="termino_glosario">...</span>
  • <form> e <input> Formularios, campos y botónes.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <form action="/submit.php" method="post" accept-charset="utf-8">
        <fieldset legend="Datos Personales">
            <div class="campo">
                <label for="nombres">Escriba sus nombres:</label>
                <input type="text" name="nombres">                
            </div>        
            <div class="campo">
                <label for="apelliidos">Escriba sus apellidos:</label>
                <input type="text" name="nombres">                
            </div>        
            <input type="submit" value="Enviar"></p>
        </fieldset>
    </form>
  • <table>

  • class y id

Documentación de todas las etiquetas disponibles

http://www.w3schools.com/http://www.w3schools.com/

Algunas etiquetas nuevas en HTML5

  • <section> Representa una sección de un documento.

  • <nav> Representa la sección de un documento que contiene los vinculos de navegación de un sitio

  • <article> Una composición auto-contenida como un artículo, página, aplicación, una entrada en un blog, etc.

  • <header> El encabezado de una sección.

  • <footer> La "pata" de una página o sección.

  • <time> Una hora o una fecha.

Mas info sobre etiquetas y semántica:

http://diveintohtml5.info/semantics.html

Algunas etiquetas nuevas en HTML5 (Para formularios/apps)

  • <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>

  • <progress value="75" max="100">3/4 complete</progress>

  • <input type="text" required />

  • <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" />

Mas info sobre formularios

http://diveintohtml5.info/forms.html#type-range

Etiquetas para multimedia

  • <video>

    1
    2
    3
    4
    5
    <video width="320" height="240" controls>
        <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
    </video>
  • <audio>

    1
    2
    3
    4
    5
    <audio controls="controls">
        <source src="song.ogg" type="audio/ogg" />
        <source src="song.mp3" type="audio/mp3" />
        Your browser does not support the audio tag.
    </audio>
  • http://jplayer.org/

  • <canvas>

  • <svg>

Mas Info

http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

Una Introducción a los estilos con CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html lang="es">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="style.css" type="text/css">

      <style type="text/css" media="screen">
         h1{
            color:#444444;
            font-family: "Helvetica Neue", "Helvetica", "Verdana", "Arial", "sans-serif";
            font-size: 22px;
         }

         .palabra_rara{
            color: #FF0000;
            font-weight: strong;
         }

         #segundo_parrafo{
            position:absolute;
            border: 1px solid #0000FF;
            top: 320px;
            left: 110px;
            width: 80px;
            height: 80px;
         }
      </style>
   </head>
   <body>
      <h1>El Título</h1>
      <p>Palabras, palabras, <span class="palabra_rara">sarbalap</span>, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras, palabras</p>
      <p id="segundo_parrafo">Palabras, palabras, palabras</p>
      <p>Palabras, palabras, <span class="palabra_rara">sarbalap</span>, palabras</p>
   </body>
</html>
  • Selectores

    1
    2
    3
    4
    5
    6
    p { /*...*/ }
    p span { /*...*/ }
    .azul { /*...*/ }
    span.azul { /*...*/ }
    #el_titulo { /*...*/ }
    #el_titulo h2 { /*...*/ }
  • Block vs Inline

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="el_div">lo que sea...</div>


    <span id="el_span">lo que sea...</div>


    /* OK: */
    #el_div{
      width:20px;
      height:40px;
    }


    /* NO OK: */
    #el_span{
      width:20px;
      height:40px;
    }
  • Posicion absoluta vs Document Flow (ver #segundo_parrafo en el ej de arriba)

  • Referencia: http://www.w3schools.com/css/http://www.w3schools.com/css/

Nuevo en CSS3

Selectores

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.row:nth-child(even) {
  background: #dde;
}

.row:nth-child(odd) {
  background: white;
}

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

:not(span) {
  display: block;
}  

h2:first-child { ... }

div.text &gt; div { ... }

h2 + header { ... } /* Un header que esté precedido de un h2*/

Fuentes

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

Gradientes, sombras, opacidad y esquinas redondas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav>
   <ul>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
   </ul>
</nav>

<header>
    <h1>El título</h1>
</header>

nav {
    background: rgba(0, 0, 0, 255, 0.75);
    color: rgba(255, 0, 0, 0.5);
    border-radius: 5px;
}

header{
    background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
    background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
}

Animaciones

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h1{
    color:#333333;
    font-family: "Helvetica Neue", "Helvetica", "Verdana", "Arial", "sans-serif";
    font-size: 22px;
    -moz-animation-duration:1s;
    -moz-animation-name: slidein;
}

@-moz-keyframes slidein{
    from{
       padding-left:100%;
       width: 300%;
    to{
       padding-left:0%;
       width: 100%;
    }
}

Ejercicio

Escriba el código HTML y CSS para el siguiente formulario:

Solución al ejercicio.zip

3 thoughts on “Taller HTML5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>