Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • La Web Se Mueve.

    Cargado por

    Alejandro Cerezo Lasne
    10 vistas89 páginas
    HTML5 y CSS3

    Título original

    La Web se mueve.

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    HTML5 y CSS3

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    10 vistas89 páginas

    La Web Se Mueve.

    Cargado por

    Alejandro Cerezo Lasne
    HTML5 y CSS3

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 89

    LA WEB SE MUEVE:

    CONOCE HTML5 & CSS3

    Javier Usobiaga BCNVisualSound 2011


    ¡HOLA!
    @htmlboy
    @martuishere
    Swwweet.com
    @savetheusers
    LA WEB SE

    MUEVE
    FUTURO
    CSS

    3
    http://swwweet.com/presentaciones/viajartiempo
    5
    HTML5
    ¿QUÉ ES HTML5?

    ✓Nuevos elementos, más semánticos


    ✓Un conjunto de APIs
    ✓Retrocompatible
    ✓Una nueva filosofía
    ¿SE PUEDE USAR YA?

    SÍ
    pero...
    ¿SE PUEDE USAR YA?

    ✓retrocompatibilidad
    Hay que preocuparse de la

    ✓aún
    Algunas tecnologías no están preparadas

    ✓accesible
    El contenido tiene que ser siempre

    ✓(polyfills)
    Se pueden complementar con javascript
    !DOCTYPE
    XHTML 1.1:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    HTML5:
    <!DOCTYPE html>
    CODIFICACIÓN
    XHTML 1.1:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    HTML5:
    <meta charset=utf-8>
    LINK / SCRIPT
    XHTML 1.1:
    <link rel="stylesheet" type="text/css" href="style-original.css"/>

    <script type="text/javascript" src="jquery.js"></script>

    HTML5:
    <link rel=stylesheet href=styles.css>

    <script src=jquery.js></script>
    NUEVA ESTRUCTURA

    <header>
    header

    header
    NUEVA ESTRUCTURA

    <nav>
    nav

    nav
    NUEVA ESTRUCTURA

    <article>
    article article article
    NUEVA ESTRUCTURA

    <section>
    section

    section
    NUEVA ESTRUCTURA

    <aside>
    aside
    NUEVA ESTRUCTURA

    <footer>
    footer
    NUEVA ESTRUCTURA

    <figure>
    FIGURE/FIGCAPTION

    <figure>
    <img src=foto.jpg alt="">
    <figcaption>
    Tortugas
    </figcaption>
    </figure>
    figure figure
    NUEVOS ELEMENTOS

    <video>
    <audio>
    video
    VIDEO

    <video src="video.???" > </video>


    VIDEO
    GUERRA DE FORMATOS

    Theora + Ogg 3.5+ 5.0+ 10.5+

    H264 + MP4 9.0+ 3.0+ 5.0+ 3.0+ 2.0+

    WebM 9.0+ 4.0+ 5.0+ 10.6+


    VIDEO

    <video controls>
    <source src="vid.mp4" type="video/mp4" >
    <source src="vid.ogv" type="video/ogg" >
    <p>
    Tu navegador no sorporta vídeo.
    </p>
    </video>
    VIDEO
    <video controls>
    <source src="vid.mp4" type="video/mp4" >
    <source src="vid.ogv" type="video/ogg" >
    <object type="application/x-shockwave-flash"
    data="player.swf?file=vid.mp4">
    <param name="vid" value="player.swf?file=vid.mp4">
    <a href="vid.mp4">Descargar vídeo</a>
    </object>
    </video>
    SOPORTE HTML5
    SOPORTE HTML5

    * última beta
    SOPORTE HTML5

    HTML5 SHIV
    (HTML5 para navegadores antiguos)

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
    3
    CSS3
    ¿QUÉ ES CSS3?

    ✓Nuevas posibilidades de decoración


    ✓Menos markup
    ✓Menos dependencia de javascript
    ✓Mayor control
    ¿SE PUEDE USAR YA?

    SÍ
    pero...
    ¿SE PUEDE USAR YA?

    ✓ No hay que devaluar la experiencia del


    usuario
    ✓branding, estructura...
    Cuidado con los elementos críticos:

    ✓ Pueden ser un premio


    ✓-webkit, -ms, -o
    Hay que utilizar “vendor prefixes”: -moz,
    ¿SE PUEDE USAR YA?

    ¿LAS PÁGINAS WEB TIENEN QUE


    EXPERIMENTARSE EXACTAMENTE
    IGUAL EN TODOS LOS NAVEGADORES?
    dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
    dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
    BACKGROUND
    MULTIPLE BACKGROUNDS:

    html{
    background: url("img/arena.png")
    no-repeat 70% 20%,
    url("img/texture.png")
    repeat left top;
    }
    multiple
    background

    multiple
    background
    RGBa Y HSLa
    RGBa = RGB + alpha
    #foo{
    background: rgba(0, 0, 0, .5);
    }

    #foo{
    background: rgba(255, 0, 0, .7);
    }
    RGBa Y HSLa
    HSLa = HSL + alpha
    #foo{
    background: hsla(324, 100%, 75%, .7);
    }

    #foo{
    background: hsla(324, 100%, 25%, .7);
    }
    RGBa

    RGBa
    RGBa

    RGBa
    RGBa Y HSLa
    html{
    background: url("img/arena.png")
    no-repeat 70% 20%,
    url("img/texture.png")
    repeat left top;
    }

    body{
    background: rgba(241, 238, 203, 0.7);
    }
    rgba(241, 238, 203, .7)
    rgba(5, 129, 121, .8)
    rgba(173, 165, 53, .8)
    @FONT-FACE
    PERMITE INCORPORAR TIPOGRAFÍAS NO
    INSTALADAS EN EL SISTEMA OPERATIVO

    @font-face {
    font-family: 'Lobster';
    src: url('Lobster.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    Lobster
    @FONT-FACE
    PERMITE INCORPORAR TIPOGRAFÍAS NO
    INSTALADAS EN EL SISTEMA OPERATIVO
    @font-face {
    font-family: 'Lobster';
    src: url('Lobster.eot?') format('eot'),
    url('Lobster.woff') format('woff'),
    url('Lobster.ttf') format('truetype'),
    url('Lobster.svg#webfont1MhCsZSr') format ('svg');
    font-weight: normal;
    font-style: normal;
    }

    Lobster
    @font-face

    @font-face
    @FONT-FACE
    Google Font Directory
    http://code.google.com/webfonts

    Fontsquirrel
    http://www.fontsquirrel.com/

    Typekit
    http://typekit.com/

    MyFonts
    http://new.myfonts.com/info/webfonts/
    TEXT-SHADOW
    h1{
    text-shadow: 3px 3px 5px black;
    }
    Doc Brown
    h1{
    text-shadow: 5px 5px 0px blue;
    }

    Marty McFly
    TEXT-SHADOW
    h1{
    text-shadow: 0 0 20px #FEFCC9,
    10px -10px 30px #FEEC85,
    -20px -20px 40px #FFAE34,
    20px -40px 50px #EC760C,
    -20px -60px 60px #CD4606,
    0 -80px 70px #973716,
    10px -90px 80px #451B0E;
    }
    text-shadow

    text-shadow

    text-shadow
    BOX SHADOW
    #foo{
    box-shadow: 5px 5px 10px black;
    }

    #foo{
    box-shadow: inset 3px 3px 10px black;
    }
    BOX SHADOW
    #foo{
    box-shadow: : 0 1px 0 #e87754,
                    0 2px 0 #bd4019,
                    0 3px 0 #ae3b17,
                  0 5px 0 #9f3615,
                    0 7px 0 #903113,
                    0 8px 1px rgba(0,0,0,.1),
                    0 0 5px rgba(0,0,0,.1),
                    0 10px 10px rgba(0,0,0,.2),
                    0 20px 20px rgba(0,0,0,.15);
    }
    box-shadow

    box-shadow

    box-shadow
    BORDER RADIUS
    #foo{
    border-radius: 10px;
    }

    #foo{
    border-radius: 50px 0 50px 0;
    }
    BORDER RADIUS

    #foo{
    border-radius: 9999px;
    }
    border-radius

    border-radius

    border-radius
    TRANSFORMS

    #foo{
    transform: rotate(45deg);
    }

    #foo{
    transform: scale(0.5);
    }
    TRANSFORMS

    #foo{
    transform: skew(45deg);
    }

    #foo{
    transform: translate(20px,-20px);
    }
    transform
    TRANSITIONS

    #foo{
    transition: 1.5s opacity ease-in-out;
    }
    TRANSITIONS
    nav li{
    width: 160px;
    transition: .3s width linear;
    }

    nav li:hover{
    width: 220px;
    }
    TRANSITIONS

    nav li span{
    transition: .6s transform ease-in-out;
    }

    nav li:hover span{


    transform: rotate(360deg);
    }
    SOPORTE CSS3
    IE8
    RECURSOS

    http://books.alistapart.com
    RECURSOS

    http://swwweet.com/presentaciones/html5hoy
    RECURSOS
    CURSO CSS3 EN PUNT MULTIMÈDIA

    15/2/2011 - 18/2/2011
    19:30 - 21:30

    39,50€ / 30,40€
    ¡GRACIAS!
    CRÉDITOS
    http://www.flickr.com/photos/kingdafy/500260659

    http://www.flickr.com/photos/mikeq314/4966121385

    http://www.flickr.com/photos/hoyvinmayvin/4310321648

    http://www.flickr.com/photos/hoyvinmayvin/4119535890

    http://www.flickr.com/photos/hoyvinmayvin/4065429187/

    También podría gustarte