Scribd Logo
Upload

Welcome to Scribd!

  • Maquetación CSS

    Uploaded by

    porquero
    73 views19 pages
    Diapositivas de charla sobre CSS

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Diapositivas de charla sobre CSS

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    73 views19 pages

    Maquetación CSS

    Uploaded by

    porquero
    Diapositivas de charla sobre CSS

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    Maquetación

    Con CSS

    Cristian Riffo
    Temas a tratar
     Que es CSS
     Porqué CSS
     HTML
     Orden Lógico
     Normas y Accesibilidad
     Tablas Navegadores
     Qué debe saber un buen desarrollador web
     Ejemplos y Otros
     Links de Interés
    Que es CSS

    +
    Porqué CSS
     Separa Información del Estilo
     Fácil mantención
     Fácil manejo desde JavaScript
     Compatibilidad con dispositivos
     Accesibilidad (Personalización)
     Código HTML más limpio
     Programable
    HTML
     Evolución del HTML
     XHTML
    Orden Lógico

    <body>
    <div>
    <h1>
    <ul>
    <h2>
    contenido
    El formato no
    jerarquiza el contenido
    Normas y Accesibilidad
     W3C
     WAI – WCAG (Web Accessibility Initiative, Web Content
    Accessibility Guidelines)
     Contenido para todos
    › Sin CSS
    › Sin Javascript
    › Sin Flash
    › Sin Imágenes
    › Sin Periféricos
    › Sistemas Operativos
    Tablas
     Con tablas es más fácil
     ¿Porqué no?
     Tableless
     Divs vs Tablas
    Navegadores
     Navegadores del mercado
    › Firefox 2, 3
    › Internet Explorer 6, 7
    › Safari (Win, Mac)
     Móviles
    Separar contenedor de
    contenido
    Qué debe saber un buen
    desarrollador web
    Ejemplos y Otros
     CSS vs JavaScript
     CSS Zen garden
    Links de Interés
     porquero.blogspot.com
     www.guiaweb.gov.cl
     www.w3schools.com
     www.csszengarden.com
     delicious.com/popular/css
     www.mootools.net
     www.w3c.org
     developer.yahoo.com/yui/reset/
    Gracias

    cristian.riffo@nacionales.
    cl
    CSS vs JavaScript

    Comportamiento hover CSS/JavaScript

    JavaScript CSS
    Javascript
    Código html+javascript

    <ul>
    <li
    onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”
    onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”
    ><a href=“#”>Inicio</a></li>
    <li
    onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”
    onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”
    ><a href=“#”>Quienes Somos</a></li>
    <li
    onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”
    onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”
    ><a href=“#”>Contacto</a></li>
    <li
    onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”
    CSS
    Código html
    Código CSS

    <ul> li a:hover {
    <li><a href=“#”>Inicio</a></li>
    background-image:
    <li><a href=“#”>Quienes Somos</a></li>
    url(pub/imgs/img0.jpg);
    <li><a href=“#”>Contacto</a></li>
    }
    <li><a href=“#”>Clientes</a></li>
    </ul>
    CSS Zen garden
     Ver archivo

    You might also like