SlideShare ist ein Scribd-Unternehmen logo
1 von 107
Downloaden Sie, um offline zu lesen
HTML5 y CSS3:
cómo sacarles partido hoy
Jose Florido
Madrid · Martes 22 Septiembre 2009




FRONTDAYS                            www.frontdays.com
HTML5 y CSS3: cómo sacarles partido hoy                       FRONTDAYS



    Objetivo del curso

     Mostrar el potencial de los nuevos estándares, así como de los
     navegadores web de nueva generación y su uso hoy en día,
     logrando mantener nuestras páginas web compatibles con
     navegadores menos avanzados.
HTML5 y CSS3: cómo sacarles partido hoy            FRONTDAYS
                                                   FRONTDAYS




                                          HTML 5
HTML5 y CSS3: cómo sacarles partido hoy                           FRONTDAYS



    Primera parte: HTML5

       ‣ Historia

       ‣ Características

       ‣ Novedades

       ‣ APIs

       ‣ Ejercicio   práctico: creación de una página con HTML5
HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy   FRONTDAYS
                                             FRONTDAYS




                             HTML 5
                        Historia de HTML 5
HTML5 y CSS3: cómo sacarles partido hoy           FRONTDAYS



    Historia de HTML5




                                          HTML4
                                          1998
HTML5 y CSS3: cómo sacarles partido hoy          FRONTDAYS



    Historia de HTML5




                                      XHTML1
                                          2000
HTML5 y CSS3: cómo sacarles partido hoy          FRONTDAYS



    Historia de HTML5




                                      XHTML2
                                          2002
HTML5 y CSS3: cómo sacarles partido hoy            FRONTDAYS



    Historia de HTML5




                                          XForms
                                          2003
HTML5 y CSS3: cómo sacarles partido hoy           FRONTDAYS



    Historia de HTML5




                                          WHATG
                                          2004
HTML5 y CSS3: cómo sacarles partido hoy           FRONTDAYS



    Historia de HTML5




                                          HTML5
                                          2007
HTML5 y CSS3: cómo sacarles partido hoy                        FRONTDAYS



    Historia de HTML5

     Hoy día, las aplicacione web necesitan:

      ‣   Reproducir video y audio
      ‣   Acceso a recursos: webcam, micrófono, etc
      ‣   Trabajar offline
      ‣   3D
      ‣   Geolocalización
      ‣   Mejores subidas de ficheros
      ‣   Drag and drop
      ‣   Complejos elementos de interacción con formularios
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    Historia de HTML5

     ¿2022?

      ‣   Final Draft en Octubre 2009
      ‣   Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4
      ‣   Google Wave
      ‣   iPhone
HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy   FRONTDAYS
                                             FRONTDAYS




                       HTML 5
              Principales características
HTML5 y CSS3: cómo sacarles partido hoy             FRONTDAYS



    HTML5: Principales características




                             Compatibilidad
                         Evolución, no revolución
HTML5 y CSS3: cómo sacarles partido hoy            FRONTDAYS



    HTML5: Principales características




                                Utilidad
                       Resolver problemas reales
HTML5 y CSS3: cómo sacarles partido hoy     FRONTDAYS



    HTML5: Principales características




                      Interoperabilidad
            Definir el comportamiento de los UA
                     Gestión de errores
HTML5 y CSS3: cómo sacarles partido hoy     FRONTDAYS



    HTML5: Principales características




                  Acceso universal
        Independencia del medio, i18n, accesible
HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy     FRONTDAYS
                                               FRONTDAYS




                                    HTML 5
                                   Novedades
HTML5 y CSS3: cómo sacarles partido hoy                 FRONTDAYS



    HTML5: Novedades


     Doctype
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 y CSS3: cómo sacarles partido hoy                 FRONTDAYS



    HTML5: Novedades


     Doctype
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Novedades


     Doctype
     <!DOCTYPE html> :-)
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Novedades


     Tipos de contenido
      ‣   Metadata content
      ‣   Flow content
      ‣   Sectioning content
      ‣   Heading content
      ‣   Phrasing content
      ‣   Embedded content
      ‣   Interactive content
HTML5 y CSS3: cómo sacarles partido hoy                          FRONTDAYS



    HTML5: Novedades


     Metadata content
     define la presentación o el comportamiento del resto del
     documento, o relaciones del documento con otros documentos.

     base, command, link, meta, noscript, script, style, title
HTML5 y CSS3: cómo sacarles partido hoy                            FRONTDAYS



    HTML5: Novedades


     Flow content
     la mayoría de los elementos usados en el cuerpo de un documento
     son de tipo flow.

     a, abbr address, article aside, audio, dialog, div, fieldset, figure,
     footer, form, h1, h2, img, nav, p, script, section, select, small, span,
     strong, table, textarea, time, video,...
HTML5 y CSS3: cómo sacarles partido hoy                     FRONTDAYS



    HTML5: Novedades


     Sectioning content
     elementos que crean nuevas secciones en el documento

     article, aside, nav, section
HTML5 y CSS3: cómo sacarles partido hoy                FRONTDAYS



    HTML5: Novedades


     Heading content
     elementos que definen la cabecera de una sección

     h1, h2, h3, h4, h5, h6, hgroup
HTML5 y CSS3: cómo sacarles partido hoy                    FRONTDAYS



    HTML5: Novedades


     Phrasing content
     texto del documento junto con elementos que marcan el texto,
     dentro de un párrafo

     a, b, string, span, small, time, em,...
HTML5 y CSS3: cómo sacarles partido hoy                        FRONTDAYS



    HTML5: Novedades


     Embedded content
     elementos que importan otro recurso o contenido de otro
     vocabulario dentro del documento

     audio, canvas, embed, iframe, img, math, object, svg, video
HTML5 y CSS3: cómo sacarles partido hoy                        FRONTDAYS



    HTML5: Novedades


     Interactive content
     elementos destinados a interacción con el usuario

     a, audio, button, details, embed, iframe, img, input, keygen,
     label,menu, object, select, textarea, video
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Novedades


     Nuevos elementos
      ‣   Elementos estructurales
      ‣   Canvas
      ‣   Video
      ‣   Audio
HTML5 y CSS3: cómo sacarles partido hoy                        FRONTDAYS



    HTML5: Novedades


     Elementos estructurales I
     section representa una sección del documento. Junto con h1, h2,...,
     h6 indica la estructura del documento.

     article representa una pieza de contenido independiente dentro de
     un documento.

     aside representa una pieza de contenido que esta menos
     relacionada con el resto de la página.
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    HTML5: Novedades


     Elementos estructurales II
     hgroup representa el encabezado de una sección. Agrupa varios
     elementos h1 - h6.

     header representa la cabecera de un documento o sección.

     footer representa el pie de una sección y puede contener
     información sobre el autor, copyright, etc.
HTML5 y CSS3: cómo sacarles partido hoy                                 FRONTDAYS



    HTML5: Novedades
     <article>
       <hgroup>
         <h1>Apples</h1>
         <h2>Tasty, delicious fruit!</h2>
       </hgroup>
       <p>The apple is the pomaceous fruit of the apple tree.</p>
       <section>
         <h1>Red Delicious</h1>
         <p>These bright red apples are the most common found in many
         supermarkets.</p>
       </section>
       <section>
         <h1>Granny Smith</h1>
         <p>These juicy, green apples make a great filling for
         apple pies.</p>
       </section>
     </article>
HTML5 y CSS3: cómo sacarles partido hoy                       FRONTDAYS



    HTML5: Novedades


     Elementos estructurales III
     nav representa una sección del documento que contiene
     navegación

     dialog usado para marcar una conversación

     figure usado para asociar una description textual o subtítulos a
     algún elemento embedido, como vídeos o imágenes.
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    HTML5: Novedades
     <body>
       <header>
       <h1>Web page</h1>
         <nav>
            <h1>Navigation</h1>
            <ul>
              <li><a href="articles.html">Articles</a></li>
              <li><a href="today.html">Today</a></li>
              <li><a href="successes.html">Successes</a></li>
            </ul>
         </nav>
       </header>

       <article>
         <p>...page content would be here...</p>
       </article>

       <footer>
         <p>Copyright © 2006 The Example Company</p>
         <p><a href="about.html">About</a> -
           <a href="policy.html">Privacy Policy</a> -
           <a href="contact.html">Contact Us</a></p>
       </footer>
     </body>
HTML5 y CSS3: cómo sacarles partido hoy                       FRONTDAYS



    HTML5: Novedades


     Nuevos elementos
     canvas crea un lienzo donde es posible crear gráficos u otras
     imágenes visuales al vuelo, mediante scripting.
HTML5 y CSS3: cómo sacarles partido hoy                FRONTDAYS



    HTML5: Novedades


     Canvas - accesibilidad

     Contenido alternativo
     <canvas id="a_canvas" width="400" height="300">
       <p>Ops! No canvas support, bad browser!</p>
     </canvas>



     Problemas de accesibilidad
HTML5 y CSS3: cómo sacarles partido hoy         FRONTDAYS



    HTML5: Novedades


     Canvas - soporte

     Soporte extenso por parte de navegadores




     * IE utilizando la librería excanvas.js
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Novedades


     Canvas - aplicaciones

     Efectos y transformaciones (Demo)
     Animaciones (Demo)
     Tipografías (Cufón)
HTML5 y CSS3: cómo sacarles partido hoy                     FRONTDAYS



    HTML5: Novedades


     Nuevos elementos
     video un método único para insertar video en la web.
HTML5 y CSS3: cómo sacarles partido hoy            FRONTDAYS



    HTML5: Novedades


     Video - atributos

     <video src="http://www.test.com/video.wmv">
     your browser does not support the video tag
     </video>



     Atributos

       ‣ poster
       ‣ autobuffer
       ‣ autoplay
       ‣ loop
       ‣ controls
HTML5 y CSS3: cómo sacarles partido hoy        FRONTDAYS



    HTML5: Novedades


     Video - formato / codecs

       ‣ Ogg Theora (Chrome, Firefox, Opera)
       ‣ H.264 (Chrome, Safari)
HTML5 y CSS3: cómo sacarles partido hoy                      FRONTDAYS



    HTML5: Novedades


     Video - soporte

     Soportado por las últimas versiones de casi todos los
     navegadores, excepto IE
HTML5 y CSS3: cómo sacarles partido hoy             FRONTDAYS



    HTML5: Novedades


     Video - degradación grácil
     <video controls>
     <source src="zombie.ogg" type="video/ogg"/>
     <source src="zombie.mp4" type="video/mp4"/>
     <embed src="http://blip.tv/play/AYGLzBmU8hw"
       type="application/x-shockwave-flash"
       width="500" height="396"
       allowscriptaccess="always"
       allowfullscreen="true"/>
     </video>
HTML5 y CSS3: cómo sacarles partido hoy                     FRONTDAYS



    HTML5: Novedades


     Nuevos elementos
     audio un método único para insertar audio en la web.
HTML5 y CSS3: cómo sacarles partido hoy                             FRONTDAYS



    HTML5: Novedades


     Audio - atributos

     <audio src="http://www.test.com/video.wmv" controls></audio>



     Atributos

       ‣ autobuffer
       ‣ autoplay
       ‣ loop
       ‣ controls
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Novedades


     Audio - demo

     HTML5 Audio player
HTML5 y CSS3: cómo sacarles partido hoy                      FRONTDAYS



    HTML5: Novedades


     Audio - soporte

     Soportado por las últimas versiones de casi todos los
     navegadores, excepto IE
HTML5 y CSS3: cómo sacarles partido hoy                  FRONTDAYS



    HTML5: Novedades


     Nuevos reglas para el código

     En HTML4 / XHTML1:

     <li>
       <p><a href="http://www.google.com">Ir a google.com</a></p>
       <a href="http://www.google.com"><img src="" alt="logo de
     Google" /></a>
     </li>
HTML5 y CSS3: cómo sacarles partido hoy         FRONTDAYS



    HTML5: Novedades


     Nuevos reglas para el código

     En HTML5:

     <li>
       <a href="http://www.google.com">
          <p>Ir a google.com</p>
          <img src="" alt="logo de Google" />
       </a>
     </li>
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Novedades


     Elementos que desaparecen
     basefont             frameset
     big                  noframes
     center               acronym
     font                 applet
     s                    isindex
     strike               dir
     tt
     u
     frame
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Novedades


     Forms
     Opera 10 demo
HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy       FRONTDAYS
                                                 FRONTDAYS




                                        HTML 5
                                         APIs
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    HTML5: APIs


     APIs en navegadores
      ‣   getElementsByClassName
      ‣   querySelector
      ‣   Almacenamiento de datos en el cliente, por sesión y persistente
      ‣   Mensajes entre documentos
      ‣   Drag-and-drop
HTML5 y CSS3: cómo sacarles partido hoy             FRONTDAYS



    HTML5: APIs


     getElementsByClassName(“abrir”)
     <li id="uno">
       <p>Link 1</p>
       <a href="#" class="abrir">Abrir link 1</a>
     </li>
     <li id="dos">
       <p>Link 2</p>
       <a href="#" class="abrir">Abrir link 2</a>
     </li>
     <li id="tres">
       <p>Link 3</p>
       <a href="#" class="abrir">Abrir link 3</a>
     </li>
HTML5 y CSS3: cómo sacarles partido hoy             FRONTDAYS



    HTML5: APIs


     querySelector(“#dos .abrir”)
     <li id="uno">
       <p>Link 1</p>
       <a href="#" class="abrir">Abrir link 1</a>
     </li>
     <li id="dos">
       <p>Link 2</p>
       <a href="#" class="abrir">Abrir link 2</a>
     </li>
     <li id="tres">
       <p>Link 3</p>
       <a href="#" class="abrir">Abrir link 3</a>
     </li>
HTML5 y CSS3: cómo sacarles partido hoy                       FRONTDAYS



    HTML5: APIs


     Almacenamiento de datos en el cliente, por sesión y persistente

      ‣ Aplicaciones web offline

      ‣ Menor latencia

      ‣ Mejor rendimiento

      ‣ Mayor privacidad

      ‣ Safari Notes demo
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: APIs


     Mensajes entre documentos

      ‣ Cross-domain

      ‣ Sin necesidad de configuración

      ‣ postMessage()

      ‣ John Resig´s messaging demo
HTML5 y CSS3: cómo sacarles partido hoy                                 FRONTDAYS



    HTML5: APIs


     Drag-and-drop

      ‣ Drag and drop nativo del sistema

      ‣ Arrastrar objetos al navegador y entre ventanas del navegador

      ‣ Drag-and-drop demo

      ‣ 280 slides video demo
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Ejercicio


     Estructura
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Ejercicio


     HTML4
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    HTML5: Ejercicio


     HTML5
HTML5 y CSS3: cómo sacarles partido hoy           FRONTDAYS
                                                  FRONTDAYS




                                          CSS 3
HTML5 y CSS3: cómo sacarles partido hoy                          FRONTDAYS



    Segunda parte: CSS3

       ‣ Historia

       ‣ Selectores

       ‣ Módulos      y nuevas propiedades
       ‣ Ejercicio   práctico: aplicación de CSS3 a una página
HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy     FRONTDAYS
                                               FRONTDAYS




                                CSS 3
                           Historia de CSS 3
HTML5 y CSS3: cómo sacarles partido hoy          FRONTDAYS



    Historia de CSS3




                                          CSS1
                                          1996
HTML5 y CSS3: cómo sacarles partido hoy          FRONTDAYS



    Historia de CSS3




                                          CSS2
                                          1998
HTML5 y CSS3: cómo sacarles partido hoy          FRONTDAYS



    Historia de CSS3




                                          CSS3
                               2000 (WD)
HTML5 y CSS3: cómo sacarles partido hoy            FRONTDAYS



    Historia de CSS3




                                          CSS2.1
                               2002 (WD)
HTML5 y CSS3: cómo sacarles partido hoy             FRONTDAYS



    CSS3: Principios




                            Compatibilidad
                      Hacia delante y hacia atrás
HTML5 y CSS3: cómo sacarles partido hoy          FRONTDAYS



    CSS3: Principios




                      Complementariedad
                   Cambiar CSS si cambiar HTML
HTML5 y CSS3: cómo sacarles partido hoy            FRONTDAYS



    CSS3: Principios




                          Independencia
                  De plataforma y de dispositivo
HTML5 y CSS3: cómo sacarles partido hoy             FRONTDAYS



    CSS3: Principios




                Simplicidad, flexibilidad, riqueza
                       Sencillo y potente
HTML5 y CSS3: cómo sacarles partido hoy              FRONTDAYS



    CSS3: Principios




                              Accesibilidad
                      Posibilitar acceso universal
HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy       FRONTDAYS
                                                 FRONTDAYS




                                      CSS 3
                                    Selectores
HTML5 y CSS3: cómo sacarles partido hoy                               FRONTDAYS



    CSS3: Selectores


     Selectores en CSS1
      ‣   de elemento: h1 { color: red; }
      ‣   de clase: h1.alert { color: red; }
      ‣   de ID: #alert { color: red; }
      ‣   descendientes y contextuales: h1 em { color: red; }
      ‣   pseudo-clases: a:link, a:visited, a:active, :first-line, :first-letter
      ‣   comodín: div * p
HTML5 y CSS3: cómo sacarles partido hoy                            FRONTDAYS



    CSS3: Selectores


     Selectores en CSS2
      ‣   selector universal (*): blockquote * { ... }
      ‣   de atributo: a[href="http://www.google.com/"] { ... }
      ‣   más pseudo-clases: :first-child, :hover, :focus, :active, :lang,
          :before, :after
      ‣   de hijos: div > p { ... }
      ‣   de hermanos: h1 + h2 { ... }
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    CSS3: Selectores


     Selectores en CSS1 y CSS2
      ‣   body > ol > li p
HTML5 y CSS3: cómo sacarles partido hoy                        FRONTDAYS



    CSS3: Selectores


     Selectores en CSS1 y CSS2
      ‣   body > ol > li p - Selecciona cualquier elemento p que es
          descendiente de un elemento li que es hijo de un elemento ol que es
          hijo de un elemento body.
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    CSS3: Selectores


     Selectores en CSS1 y CSS2
      ‣   p > * > em
HTML5 y CSS3: cómo sacarles partido hoy                        FRONTDAYS



    CSS3: Selectores


     Selectores en CSS1 y CSS2
      ‣   p > * > em - Selecciona cualquier elemento em que es hijo de
          cualquier elemento que es hijo de un elemento p.
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    CSS3: Selectores


     Selectores en CSS1 y CSS2
      ‣   a[title~="Mail"]
HTML5 y CSS3: cómo sacarles partido hoy                          FRONTDAYS



    CSS3: Selectores


     Selectores en CSS1 y CSS2
      ‣   a[title~="Mail"] - Selecciona cualquier elemento a con un atributo
          title que contiene la palabra Mail.
HTML5 y CSS3: cómo sacarles partido hoy    FRONTDAYS



    CSS3: Selectores


     Selectores en CSS3 I
      ‣   nuevos selectores de atributo:

          comienzo del atributo
            a[href^="ftp:"] { ... }
          final del atributo
            a[href$=".edu"] { ... }
          cualquier cadena contenido
            img[src*="photos"] { ... }
HTML5 y CSS3: cómo sacarles partido hoy                          FRONTDAYS



    CSS3: Selectores


     Selectores en CSS3 II
      ‣   nuevas pseudo-clases:
          :enabled, :disabled, :checked

          Permiten cambiar la apariencia de los inputs de formulario,
          según su estado. No soportadas en IE7 ni en IE8
HTML5 CSS3: cómo sacarles partido
HTML5yyCSS3: cómo sacarles partido hoy hoy       FRONTDAYS
                                                 FRONTDAYS




                                        CSS 3
                                       Módulos
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    CSS3: Módulos


     Algunos otros módulos de CSS3
      ‣   Colores
      ‣   Modelo de caja
      ‣   Fondos y bordes
      ‣   Tipografía y efectos de texto
      ‣   Layout multicolumna
      ‣   Animaciones y transiciones
HTML5 y CSS3: cómo sacarles partido hoy                  FRONTDAYS



    CSS3: Colores


     Colores en CSS2
      ‣   Hexadecimal - #RRGGBB
      ‣   Hexadecimal, shorthand - #RGB
      ‣   RGB- rgb(red, green, blue)
      ‣   Nombres de colores - white, red, black, etc.
HTML5 y CSS3: cómo sacarles partido hoy                    FRONTDAYS



    CSS3: Colores


     Nuevos formatos de colores en CSS3
      ‣   HLS - hsl(hue, saturation, lightness)
      ‣   CMYK - cmyk(cyan, magenta, yellow, black)
      ‣   HLSA - hlsa(hue, saturation, lightness, alpha)
      ‣   RGBA - rgba(red, green, blue, alpha)
HTML5 y CSS3: cómo sacarles partido hoy                           FRONTDAYS



    CSS3: Colores


     Formato HLS
      ‣   Intensidad, luz y saturación
      ‣   Sencillo de manipular
      ‣   Existente en programas de edición de imágenes, como Adobe
          Photoshop
      ‣   Adecuado para crear paletas de colores: sólo tienes que elegir el
          color básico y no sus variantes claras/oscuras
HTML5 y CSS3: cómo sacarles partido hoy                       FRONTDAYS



    CSS3: Colores


     Formato CMYK
      ‣   Cyan, magenta, amarillo y negro
      ‣   Formato muy bien conocido por los diseñadores
      ‣   Nos permite definir cómo nuestros colores serán impresos
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    CSS3: Colores


     Formatos RGBA y HSLA
      ‣   Añaden un cuarto parámetro: alpha
      ‣   El canal alpha define la transparencia del color, va de 0
          (totalmente transparente) a 1 (totalmente opaco)
      ‣   La adición del canal alpha ofrece muchas nuevas posibilidades a
          los diseñadores visuales.
HTML5 y CSS3: cómo sacarles partido hoy             FRONTDAYS



    CSS3: Colores


     Si no hay soporte RGBA
     
 background-color: rgb(0%, 0%, 100%);
     
 background-color: rgba(0%, 0%, 100%, 0.5);
HTML5 y CSS3: cómo sacarles partido hoy                          FRONTDAYS



    CSS3: Colores


     RGBA y HSLA vs OPACITY
      ‣   Opacity es una propiedad de CSS3 que modifica la transparencia
          de todo el elemento. Por ejemplo un párrafo con opacity: 0.5
          tendría su fondo semitrans, pero también su contenido (texto)
      ‣   El canal alpha nos permite modificar la transparencia del color de
          fondo del elemento, con lo que el contenido del elemento no se
          vería afectado.
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    CSS3: Colores


     Soporte en navegadores
      ‣   Las últimas versiones de Safari, Opera, Firefox y Chrome
          soportan HSL, HSLA y RGBA
      ‣   IE no soporta ninguno de los nuevos formatos
      ‣   Ningún navegador soporta aún CMYK
HTML5 y CSS3: cómo sacarles partido hoy                           FRONTDAYS



    CSS3: Modelo de caja


     Modelo de caja
      ‣   IE box model
      ‣   W3C box model
      ‣   Nueva propiedad: box-sizing: content-box / border-box

     Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    CSS3: Fondos y bordes


     Fondos y bordes
      ‣   Degradados
      ‣   Bordes redondeados
      ‣   Sombras
      ‣   Imágenes de borde
      ‣   Imágenes de fondo
HTML5 y CSS3: cómo sacarles partido hoy                     FRONTDAYS



    CSS3: Fondos y bordes


     Degradados
     background: -webkit-gradient(linear, 0 0, 100% 100%,
     from(#d0d0d0), to(#ffffff));

     background: -moz-linear-gradient(20% center, 30% center,
     from(blue), to (yellow)) no-repeat;

     Soportado por Safari y firefox.
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    CSS3: Fondos y bordes


     Bordes redondeados
     -moz-border-radius-topleft / -webkit-border-top-left-radius
     -moz-border-radius-topright / -webkit-border-top-right-radius
     -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
     -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    CSS3: Fondos y bordes


     Sombras (de caja)
     box-shadow: 10px 10px 5px #888;
HTML5 y CSS3: cómo sacarles partido hoy   FRONTDAYS



    CSS3: Fondos y bordes


     Imágenes de borde
     border-image:
     border-corner-image:
HTML5 y CSS3: cómo sacarles partido hoy                         FRONTDAYS



    CSS3: Fondos y bordes


     Imágenes de fondo
     Tamaño
     -o-background-size, -webkit-background-size, -khtml-background-size,
     -moz-background-size


     Múltiples imágenes de fondo
     background: url(img1.gif) top left no-repeat, url(img2.gif) bottom
     left no-repeat;

     Soportado por Safari
HTML5 y CSS3: cómo sacarles partido hoy                          FRONTDAYS



    CSS3: Layout multicolumna


     Layout multicolumna
      ‣   Número de columnas
      ‣   Separacón entre columnas
      ‣   Bordes separadores

       -moz-column-count                  -webkit-column-count
       -moz-column-width                  -webkit-column-width
       -moz-column-gap                    -webkit-column-gap
HTML5 y CSS3: cómo sacarles partido hoy     FRONTDAYS



    CSS3: Tipografía y efectos de texto


     Tipografía y efectos de texto
      ‣   Sombras en texto
      ‣   Uso de tipografías (@font-face)
¡Muchas gracias por venir!
FRONTDAYS
Los mejores cursos en desarrollo frontend
impartidos por los mejores profesionales




  www.frontdays.com

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
 
Elementos de html5 y css3
Elementos de html5 y css3Elementos de html5 y css3
Elementos de html5 y css3
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
Seminario html5
Seminario html5Seminario html5
Seminario html5
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
 
Maquetación web con html5
Maquetación web con html5Maquetación web con html5
Maquetación web con html5
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Ria 03-html5-css3
Ria 03-html5-css3Ria 03-html5-css3
Ria 03-html5-css3
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Todo sobre HTML5
Todo sobre HTML5Todo sobre HTML5
Todo sobre HTML5
 
Html 5 presente y futuro de la web
Html 5 presente y futuro de la webHtml 5 presente y futuro de la web
Html 5 presente y futuro de la web
 
Taller de Maquetación Web
Taller de Maquetación WebTaller de Maquetación Web
Taller de Maquetación Web
 
Html+css 2013
Html+css 2013Html+css 2013
Html+css 2013
 
Conoce HTML5 y CSS3
Conoce HTML5 y CSS3Conoce HTML5 y CSS3
Conoce HTML5 y CSS3
 
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
 
Taller maquetacion web
Taller maquetacion webTaller maquetacion web
Taller maquetacion web
 

Andere mochten auch

Primer Paquete Económico 2017 Zacatecas (2/9)
Primer Paquete Económico 2017 Zacatecas (2/9)Primer Paquete Económico 2017 Zacatecas (2/9)
Primer Paquete Económico 2017 Zacatecas (2/9)Zacatecas TresPuntoCero
 
Gfpi f-019 guia de aprendizaje 01 tda orientar fpi
Gfpi f-019 guia de aprendizaje 01 tda orientar fpiGfpi f-019 guia de aprendizaje 01 tda orientar fpi
Gfpi f-019 guia de aprendizaje 01 tda orientar fpilisbet bravo
 
JULIOPARI - Elaborando un Plan de Negocios
JULIOPARI - Elaborando un Plan de NegociosJULIOPARI - Elaborando un Plan de Negocios
JULIOPARI - Elaborando un Plan de NegociosJulio Pari
 
El emprendedor y el empresario profesional cert
El emprendedor y el empresario profesional certEl emprendedor y el empresario profesional cert
El emprendedor y el empresario profesional certMaestros Online
 
Onderzoeksrapport acrs v3.0_definitief
Onderzoeksrapport acrs v3.0_definitiefOnderzoeksrapport acrs v3.0_definitief
Onderzoeksrapport acrs v3.0_definitiefrloggen
 
Como hacer un plan de negocios
Como hacer un plan de negociosComo hacer un plan de negocios
Como hacer un plan de negociosXPINNERPablo
 
Schrijven voor het web
Schrijven voor het webSchrijven voor het web
Schrijven voor het webSimone Levie
 
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA... ..
 
Estrategias competitivas básicas
Estrategias competitivas básicasEstrategias competitivas básicas
Estrategias competitivas básicasLarryJimenez
 
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda..... ..
 
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3... ..
 
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA... ..
 
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA... ..
 
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2... ..
 

Andere mochten auch (20)

Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Speciale 2. udgave
Speciale 2. udgaveSpeciale 2. udgave
Speciale 2. udgave
 
Pensamiento Critico
Pensamiento CriticoPensamiento Critico
Pensamiento Critico
 
Primer Paquete Económico 2017 Zacatecas (2/9)
Primer Paquete Económico 2017 Zacatecas (2/9)Primer Paquete Económico 2017 Zacatecas (2/9)
Primer Paquete Económico 2017 Zacatecas (2/9)
 
Gfpi f-019 guia de aprendizaje 01 tda orientar fpi
Gfpi f-019 guia de aprendizaje 01 tda orientar fpiGfpi f-019 guia de aprendizaje 01 tda orientar fpi
Gfpi f-019 guia de aprendizaje 01 tda orientar fpi
 
JULIOPARI - Elaborando un Plan de Negocios
JULIOPARI - Elaborando un Plan de NegociosJULIOPARI - Elaborando un Plan de Negocios
JULIOPARI - Elaborando un Plan de Negocios
 
El emprendedor y el empresario profesional cert
El emprendedor y el empresario profesional certEl emprendedor y el empresario profesional cert
El emprendedor y el empresario profesional cert
 
Onderzoeksrapport acrs v3.0_definitief
Onderzoeksrapport acrs v3.0_definitiefOnderzoeksrapport acrs v3.0_definitief
Onderzoeksrapport acrs v3.0_definitief
 
Como hacer un plan de negocios
Como hacer un plan de negociosComo hacer un plan de negocios
Como hacer un plan de negocios
 
Schrijven voor het web
Schrijven voor het webSchrijven voor het web
Schrijven voor het web
 
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.
Evidence: Describing my kitchen. ENGLISH DOT WORKS 2. SENA.
 
Estrategias competitivas básicas
Estrategias competitivas básicasEstrategias competitivas básicas
Estrategias competitivas básicas
 
Cápsula 1. estudios de mercado
Cápsula 1. estudios de mercadoCápsula 1. estudios de mercado
Cápsula 1. estudios de mercado
 
Rodriguez alvarez
Rodriguez alvarezRodriguez alvarez
Rodriguez alvarez
 
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...
2. describing cities and places. ENGLISH DOT WORKS 2. SENA. semana 4 acitivda...
 
Capacitacion y adiestramiento
Capacitacion y adiestramientoCapacitacion y adiestramiento
Capacitacion y adiestramiento
 
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.
3.Evidence: Getting to Bogota.ENGLISH DOT WORKS 2. SENA.semana 4 actividad 3.
 
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.
Evidence: Going to the restaurant . ENGLISH DOT WORKS 2. SENA.
 
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.
Evidence: I can’t believe it.ENGLISH DOT WORKS 2. semana 3 actividad 1.SENA.
 
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.
Evidence: Memorable moments.ENGLISH DOT WORKS 2. SENA. semana 2 actividad 2.
 

Ähnlich wie HTML5 y CSS3: como sacarles partido hoy (20)

mejorando la web guia de html 5
mejorando la web guia de html 5mejorando la web guia de html 5
mejorando la web guia de html 5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
HTML5
HTML5HTML5
HTML5
 
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
 
Importancia html5
Importancia html5Importancia html5
Importancia html5
 
Trabajo de html
Trabajo de htmlTrabajo de html
Trabajo de html
 
HTML5
HTML5HTML5
HTML5
 
Guía HTML5
Guía HTML5Guía HTML5
Guía HTML5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
guia html 5
guia html 5guia html 5
guia html 5
 
Html5
Html5Html5
Html5
 
&lt;guía> HTML 5 - El Presente de la Web
&lt;guía> HTML 5 - El Presente de la Web&lt;guía> HTML 5 - El Presente de la Web
&lt;guía> HTML 5 - El Presente de la Web
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Guía html5
Guía html5Guía html5
Guía html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Mejorandolaweb guia-html5
Mejorandolaweb guia-html5Mejorandolaweb guia-html5
Mejorandolaweb guia-html5
 
Atix19
Atix19Atix19
Atix19
 

Kürzlich hochgeladen

Calculadora cientifica corregida para enviar.docx
Calculadora cientifica  corregida para enviar.docxCalculadora cientifica  corregida para enviar.docx
Calculadora cientifica corregida para enviar.docxzoecaicedosalazar
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Taller de tecnología conclucion tonotoss
Taller de tecnología conclucion tonotossTaller de tecnología conclucion tonotoss
Taller de tecnología conclucion tonotossgijhonpa
 
Trabajo de Electricidad y Electrónica grado 10-3
Trabajo de Electricidad y Electrónica grado 10-3Trabajo de Electricidad y Electrónica grado 10-3
Trabajo de Electricidad y Electrónica grado 10-3wwwcuentanuevacom
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5CamilaCordoba30
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu softwareFrancisco Javier Barrena
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
taller de la electricidad y electrónica
taller de  la electricidad y electrónicataller de  la electricidad y electrónica
taller de la electricidad y electrónicaErickAlegria3
 
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOSDESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOSreinamanuela20
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 

Kürzlich hochgeladen (20)

Calculadora cientifica corregida para enviar.docx
Calculadora cientifica  corregida para enviar.docxCalculadora cientifica  corregida para enviar.docx
Calculadora cientifica corregida para enviar.docx
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Taller de tecnología conclucion tonotoss
Taller de tecnología conclucion tonotossTaller de tecnología conclucion tonotoss
Taller de tecnología conclucion tonotoss
 
Trabajo de Electricidad y Electrónica grado 10-3
Trabajo de Electricidad y Electrónica grado 10-3Trabajo de Electricidad y Electrónica grado 10-3
Trabajo de Electricidad y Electrónica grado 10-3
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
taller de la electricidad y electrónica
taller de  la electricidad y electrónicataller de  la electricidad y electrónica
taller de la electricidad y electrónica
 
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOSDESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 

HTML5 y CSS3: como sacarles partido hoy

  • 1. HTML5 y CSS3: cómo sacarles partido hoy Jose Florido Madrid · Martes 22 Septiembre 2009 FRONTDAYS www.frontdays.com
  • 2. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Objetivo del curso Mostrar el potencial de los nuevos estándares, así como de los navegadores web de nueva generación y su uso hoy en día, logrando mantener nuestras páginas web compatibles con navegadores menos avanzados.
  • 3. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS FRONTDAYS HTML 5
  • 4. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Primera parte: HTML5 ‣ Historia ‣ Características ‣ Novedades ‣ APIs ‣ Ejercicio práctico: creación de una página con HTML5
  • 5. HTML5 CSS3: cómo sacarles partido HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS FRONTDAYS HTML 5 Historia de HTML 5
  • 6. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 HTML4 1998
  • 7. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 XHTML1 2000
  • 8. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 XHTML2 2002
  • 9. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 XForms 2003
  • 10. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 WHATG 2004
  • 11. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 HTML5 2007
  • 12. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 Hoy día, las aplicacione web necesitan: ‣ Reproducir video y audio ‣ Acceso a recursos: webcam, micrófono, etc ‣ Trabajar offline ‣ 3D ‣ Geolocalización ‣ Mejores subidas de ficheros ‣ Drag and drop ‣ Complejos elementos de interacción con formularios
  • 13. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de HTML5 ¿2022? ‣ Final Draft en Octubre 2009 ‣ Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4 ‣ Google Wave ‣ iPhone
  • 14. HTML5 CSS3: cómo sacarles partido HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS FRONTDAYS HTML 5 Principales características
  • 15. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Principales características Compatibilidad Evolución, no revolución
  • 16. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Principales características Utilidad Resolver problemas reales
  • 17. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Principales características Interoperabilidad Definir el comportamiento de los UA Gestión de errores
  • 18. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Principales características Acceso universal Independencia del medio, i18n, accesible
  • 19. HTML5 CSS3: cómo sacarles partido HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS FRONTDAYS HTML 5 Novedades
  • 20. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 21. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 22. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Doctype <!DOCTYPE html> :-)
  • 23. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Tipos de contenido ‣ Metadata content ‣ Flow content ‣ Sectioning content ‣ Heading content ‣ Phrasing content ‣ Embedded content ‣ Interactive content
  • 24. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Metadata content define la presentación o el comportamiento del resto del documento, o relaciones del documento con otros documentos. base, command, link, meta, noscript, script, style, title
  • 25. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Flow content la mayoría de los elementos usados en el cuerpo de un documento son de tipo flow. a, abbr address, article aside, audio, dialog, div, fieldset, figure, footer, form, h1, h2, img, nav, p, script, section, select, small, span, strong, table, textarea, time, video,...
  • 26. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Sectioning content elementos que crean nuevas secciones en el documento article, aside, nav, section
  • 27. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Heading content elementos que definen la cabecera de una sección h1, h2, h3, h4, h5, h6, hgroup
  • 28. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Phrasing content texto del documento junto con elementos que marcan el texto, dentro de un párrafo a, b, string, span, small, time, em,...
  • 29. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Embedded content elementos que importan otro recurso o contenido de otro vocabulario dentro del documento audio, canvas, embed, iframe, img, math, object, svg, video
  • 30. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Interactive content elementos destinados a interacción con el usuario a, audio, button, details, embed, iframe, img, input, keygen, label,menu, object, select, textarea, video
  • 31. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Nuevos elementos ‣ Elementos estructurales ‣ Canvas ‣ Video ‣ Audio
  • 32. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Elementos estructurales I section representa una sección del documento. Junto con h1, h2,..., h6 indica la estructura del documento. article representa una pieza de contenido independiente dentro de un documento. aside representa una pieza de contenido que esta menos relacionada con el resto de la página.
  • 33. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Elementos estructurales II hgroup representa el encabezado de una sección. Agrupa varios elementos h1 - h6. header representa la cabecera de un documento o sección. footer representa el pie de una sección y puede contener información sobre el autor, copyright, etc.
  • 34. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>
  • 35. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Elementos estructurales III nav representa una sección del documento que contiene navegación dialog usado para marcar una conversación figure usado para asociar una description textual o subtítulos a algún elemento embedido, como vídeos o imágenes.
  • 36. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades <body> <header> <h1>Web page</h1> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Articles</a></li> <li><a href="today.html">Today</a></li> <li><a href="successes.html">Successes</a></li> </ul> </nav> </header> <article> <p>...page content would be here...</p> </article> <footer> <p>Copyright © 2006 The Example Company</p> <p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer> </body>
  • 37. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Nuevos elementos canvas crea un lienzo donde es posible crear gráficos u otras imágenes visuales al vuelo, mediante scripting.
  • 38. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Canvas - accesibilidad Contenido alternativo <canvas id="a_canvas" width="400" height="300"> <p>Ops! No canvas support, bad browser!</p> </canvas> Problemas de accesibilidad
  • 39. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Canvas - soporte Soporte extenso por parte de navegadores * IE utilizando la librería excanvas.js
  • 40. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Canvas - aplicaciones Efectos y transformaciones (Demo) Animaciones (Demo) Tipografías (Cufón)
  • 41. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Nuevos elementos video un método único para insertar video en la web.
  • 42. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Video - atributos <video src="http://www.test.com/video.wmv"> your browser does not support the video tag </video> Atributos ‣ poster ‣ autobuffer ‣ autoplay ‣ loop ‣ controls
  • 43. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Video - formato / codecs ‣ Ogg Theora (Chrome, Firefox, Opera) ‣ H.264 (Chrome, Safari)
  • 44. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Video - soporte Soportado por las últimas versiones de casi todos los navegadores, excepto IE
  • 45. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Video - degradación grácil <video controls> <source src="zombie.ogg" type="video/ogg"/> <source src="zombie.mp4" type="video/mp4"/> <embed src="http://blip.tv/play/AYGLzBmU8hw" type="application/x-shockwave-flash" width="500" height="396" allowscriptaccess="always" allowfullscreen="true"/> </video>
  • 46. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Nuevos elementos audio un método único para insertar audio en la web.
  • 47. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Audio - atributos <audio src="http://www.test.com/video.wmv" controls></audio> Atributos ‣ autobuffer ‣ autoplay ‣ loop ‣ controls
  • 48. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Audio - demo HTML5 Audio player
  • 49. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Audio - soporte Soportado por las últimas versiones de casi todos los navegadores, excepto IE
  • 50. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Nuevos reglas para el código En HTML4 / XHTML1: <li> <p><a href="http://www.google.com">Ir a google.com</a></p> <a href="http://www.google.com"><img src="" alt="logo de Google" /></a> </li>
  • 51. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Nuevos reglas para el código En HTML5: <li> <a href="http://www.google.com"> <p>Ir a google.com</p> <img src="" alt="logo de Google" /> </a> </li>
  • 52. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Elementos que desaparecen basefont frameset big noframes center acronym font applet s isindex strike dir tt u frame
  • 53. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Novedades Forms Opera 10 demo
  • 54. HTML5 CSS3: cómo sacarles partido HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS FRONTDAYS HTML 5 APIs
  • 55. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: APIs APIs en navegadores ‣ getElementsByClassName ‣ querySelector ‣ Almacenamiento de datos en el cliente, por sesión y persistente ‣ Mensajes entre documentos ‣ Drag-and-drop
  • 56. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: APIs getElementsByClassName(“abrir”) <li id="uno"> <p>Link 1</p> <a href="#" class="abrir">Abrir link 1</a> </li> <li id="dos"> <p>Link 2</p> <a href="#" class="abrir">Abrir link 2</a> </li> <li id="tres"> <p>Link 3</p> <a href="#" class="abrir">Abrir link 3</a> </li>
  • 57. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: APIs querySelector(“#dos .abrir”) <li id="uno"> <p>Link 1</p> <a href="#" class="abrir">Abrir link 1</a> </li> <li id="dos"> <p>Link 2</p> <a href="#" class="abrir">Abrir link 2</a> </li> <li id="tres"> <p>Link 3</p> <a href="#" class="abrir">Abrir link 3</a> </li>
  • 58. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: APIs Almacenamiento de datos en el cliente, por sesión y persistente ‣ Aplicaciones web offline ‣ Menor latencia ‣ Mejor rendimiento ‣ Mayor privacidad ‣ Safari Notes demo
  • 59. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: APIs Mensajes entre documentos ‣ Cross-domain ‣ Sin necesidad de configuración ‣ postMessage() ‣ John Resig´s messaging demo
  • 60. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: APIs Drag-and-drop ‣ Drag and drop nativo del sistema ‣ Arrastrar objetos al navegador y entre ventanas del navegador ‣ Drag-and-drop demo ‣ 280 slides video demo
  • 61. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Ejercicio Estructura
  • 62. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Ejercicio HTML4
  • 63. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS HTML5: Ejercicio HTML5
  • 64. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS FRONTDAYS CSS 3
  • 65. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Segunda parte: CSS3 ‣ Historia ‣ Selectores ‣ Módulos y nuevas propiedades ‣ Ejercicio práctico: aplicación de CSS3 a una página
  • 66. HTML5 CSS3: cómo sacarles partido HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS FRONTDAYS CSS 3 Historia de CSS 3
  • 67. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de CSS3 CSS1 1996
  • 68. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de CSS3 CSS2 1998
  • 69. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de CSS3 CSS3 2000 (WD)
  • 70. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS Historia de CSS3 CSS2.1 2002 (WD)
  • 71. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Principios Compatibilidad Hacia delante y hacia atrás
  • 72. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Principios Complementariedad Cambiar CSS si cambiar HTML
  • 73. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Principios Independencia De plataforma y de dispositivo
  • 74. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Principios Simplicidad, flexibilidad, riqueza Sencillo y potente
  • 75. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Principios Accesibilidad Posibilitar acceso universal
  • 76. HTML5 CSS3: cómo sacarles partido HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS FRONTDAYS CSS 3 Selectores
  • 77. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS1 ‣ de elemento: h1 { color: red; } ‣ de clase: h1.alert { color: red; } ‣ de ID: #alert { color: red; } ‣ descendientes y contextuales: h1 em { color: red; } ‣ pseudo-clases: a:link, a:visited, a:active, :first-line, :first-letter ‣ comodín: div * p
  • 78. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS2 ‣ selector universal (*): blockquote * { ... } ‣ de atributo: a[href="http://www.google.com/"] { ... } ‣ más pseudo-clases: :first-child, :hover, :focus, :active, :lang, :before, :after ‣ de hijos: div > p { ... } ‣ de hermanos: h1 + h2 { ... }
  • 79. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS1 y CSS2 ‣ body > ol > li p
  • 80. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS1 y CSS2 ‣ body > ol > li p - Selecciona cualquier elemento p que es descendiente de un elemento li que es hijo de un elemento ol que es hijo de un elemento body.
  • 81. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS1 y CSS2 ‣ p > * > em
  • 82. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS1 y CSS2 ‣ p > * > em - Selecciona cualquier elemento em que es hijo de cualquier elemento que es hijo de un elemento p.
  • 83. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS1 y CSS2 ‣ a[title~="Mail"]
  • 84. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS1 y CSS2 ‣ a[title~="Mail"] - Selecciona cualquier elemento a con un atributo title que contiene la palabra Mail.
  • 85. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS3 I ‣ nuevos selectores de atributo: comienzo del atributo a[href^="ftp:"] { ... } final del atributo a[href$=".edu"] { ... } cualquier cadena contenido img[src*="photos"] { ... }
  • 86. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Selectores Selectores en CSS3 II ‣ nuevas pseudo-clases: :enabled, :disabled, :checked Permiten cambiar la apariencia de los inputs de formulario, según su estado. No soportadas en IE7 ni en IE8
  • 87. HTML5 CSS3: cómo sacarles partido HTML5yyCSS3: cómo sacarles partido hoy hoy FRONTDAYS FRONTDAYS CSS 3 Módulos
  • 88. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Módulos Algunos otros módulos de CSS3 ‣ Colores ‣ Modelo de caja ‣ Fondos y bordes ‣ Tipografía y efectos de texto ‣ Layout multicolumna ‣ Animaciones y transiciones
  • 89. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores Colores en CSS2 ‣ Hexadecimal - #RRGGBB ‣ Hexadecimal, shorthand - #RGB ‣ RGB- rgb(red, green, blue) ‣ Nombres de colores - white, red, black, etc.
  • 90. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores Nuevos formatos de colores en CSS3 ‣ HLS - hsl(hue, saturation, lightness) ‣ CMYK - cmyk(cyan, magenta, yellow, black) ‣ HLSA - hlsa(hue, saturation, lightness, alpha) ‣ RGBA - rgba(red, green, blue, alpha)
  • 91. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores Formato HLS ‣ Intensidad, luz y saturación ‣ Sencillo de manipular ‣ Existente en programas de edición de imágenes, como Adobe Photoshop ‣ Adecuado para crear paletas de colores: sólo tienes que elegir el color básico y no sus variantes claras/oscuras
  • 92. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores Formato CMYK ‣ Cyan, magenta, amarillo y negro ‣ Formato muy bien conocido por los diseñadores ‣ Nos permite definir cómo nuestros colores serán impresos
  • 93. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores Formatos RGBA y HSLA ‣ Añaden un cuarto parámetro: alpha ‣ El canal alpha define la transparencia del color, va de 0 (totalmente transparente) a 1 (totalmente opaco) ‣ La adición del canal alpha ofrece muchas nuevas posibilidades a los diseñadores visuales.
  • 94. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores Si no hay soporte RGBA background-color: rgb(0%, 0%, 100%); background-color: rgba(0%, 0%, 100%, 0.5);
  • 95. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores RGBA y HSLA vs OPACITY ‣ Opacity es una propiedad de CSS3 que modifica la transparencia de todo el elemento. Por ejemplo un párrafo con opacity: 0.5 tendría su fondo semitrans, pero también su contenido (texto) ‣ El canal alpha nos permite modificar la transparencia del color de fondo del elemento, con lo que el contenido del elemento no se vería afectado.
  • 96. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Colores Soporte en navegadores ‣ Las últimas versiones de Safari, Opera, Firefox y Chrome soportan HSL, HSLA y RGBA ‣ IE no soporta ninguno de los nuevos formatos ‣ Ningún navegador soporta aún CMYK
  • 97. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Modelo de caja Modelo de caja ‣ IE box model ‣ W3C box model ‣ Nueva propiedad: box-sizing: content-box / border-box Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
  • 98. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Fondos y bordes Fondos y bordes ‣ Degradados ‣ Bordes redondeados ‣ Sombras ‣ Imágenes de borde ‣ Imágenes de fondo
  • 99. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Fondos y bordes Degradados background: -webkit-gradient(linear, 0 0, 100% 100%, from(#d0d0d0), to(#ffffff)); background: -moz-linear-gradient(20% center, 30% center, from(blue), to (yellow)) no-repeat; Soportado por Safari y firefox.
  • 100. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Fondos y bordes Bordes redondeados -moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
  • 101. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Fondos y bordes Sombras (de caja) box-shadow: 10px 10px 5px #888;
  • 102. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Fondos y bordes Imágenes de borde border-image: border-corner-image:
  • 103. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Fondos y bordes Imágenes de fondo Tamaño -o-background-size, -webkit-background-size, -khtml-background-size, -moz-background-size Múltiples imágenes de fondo background: url(img1.gif) top left no-repeat, url(img2.gif) bottom left no-repeat; Soportado por Safari
  • 104. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Layout multicolumna Layout multicolumna ‣ Número de columnas ‣ Separacón entre columnas ‣ Bordes separadores -moz-column-count -webkit-column-count -moz-column-width -webkit-column-width -moz-column-gap -webkit-column-gap
  • 105. HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS CSS3: Tipografía y efectos de texto Tipografía y efectos de texto ‣ Sombras en texto ‣ Uso de tipografías (@font-face)
  • 107. FRONTDAYS Los mejores cursos en desarrollo frontend impartidos por los mejores profesionales www.frontdays.com