Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Avance Curso

    Enviado por

    Jose Maria Navarro Flores
    13 visualizações18 páginas

    Título original

    AvanceCurso

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    13 visualizações18 páginas

    Avance Curso

    Enviado por

    Jose Maria Navarro Flores

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 18

    Tecnolog a Internet

    Antonio Mamani antonio.mq@gmail.com

    6 de febrero de 2014

    Responsive Web Design

    Contenido

    Responsive Web Design Nodejs RESTFull Oauth 2.0

    Tecnolog a Internet 2 / 18

    Responsive Web Design

    Repasando html5 y JavaScript

    1 2 3 4 5 6 7

    Cu al es la diferencia a grandes rasgos entre html5 y html? Cuando se utiliza el termino maquetaci on? Cu al es la funci on de un programador frontend? Cu al es la funci on de un programador backend? Podemos pasarle atributos al tag <html>? Qu e podemos denir dentro la etiqueta <head>? Para quienes es importante el tag <meta>?

    Tecnolog a Internet 3 / 18

    Responsive Web Design

    Ejemplo
    1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html > <html lang= " es " > <head > <meta charset= " iso-8859-1 " > <meta name= " description " content= " Ejemplo HTML5 " > <meta name= " keywords " content= " HTML5 , CSS3 , JavaScript " > <title > titulo del documento </title > <link rel= " stylesheet " href= " misestilos.css " > </head > <body > </body > </html >

    Tecnolog a Internet 4 / 18

    Responsive Web Design

    Responsive Web Design

    Un vistazo a los fundamentos del dise no de p aginas web responsivas Frameworks para el desarrollo de p aginas responsivas Procesarodes de CSS y sus sintaxis para componer estilos Preparar las herramientas para construir sitios web responsivos

    Tecnolog a Internet 5 / 18

    Responsive Web Design

    Responsive Web Design

    RWD b asicamente permite que un sitio web para responder o adaptarse a un tama no de visualizaci on diferente, mayor o menor, sin tener que congurar un dominio/subdominio espec co para las personas que utilizan dispositivos m oviles. La apariencia de la p agina web pueden ser mantenidos como para tener experiencias similares en diferentes tama nos de los dispositivos. Esto es posible con el uso de la viewport meta tag y CSS3 media queries.

    Tecnolog a Internet 6 / 18

    Responsive Web Design

    Viewport meta tag and CSS3 media queries

    Un sitio web que responsivo est a construido principalmente con dos componentes
    Viewport Meta Tag .- Esta etiqueta se coloca dentro de la etiqueta <head> y se utiliza para controlar la escala de la p agina web http://developer.apple.com/library/ios/#documentation/ AppleApplications/Reference/SafariWebContent/ UsingtheViewport/UsingtheViewport.html CSS3 Media queries .- Especica a los estilos par que muestren del tama no del viewport especicaso http://www.w3.org/TR/css3-mediaqueries/

    Tecnolog a Internet 7 / 18

    Responsive Web Design

    Ejemplo del Viewport Meta Tag

    Si a nadimos el siguiente Viewport Meta Tag con la escala inicial a 1 permitir a a la p agina Web escalar en un 100 por ciento del tama no de visualizaci on al abrirlo por primera vez.
    1 <meta name= " viewport " content= " width=device-width , initial-scale=1 " >

    Tecnolog a Internet 8 / 18

    Responsive Web Design

    Ejemplo de CSS3 Media Query

    El siguiente fragmento de c odigo muestra c omo podemos ocultar las im agenes cuando el tama no de la ventana esta entre 321 y 480 p xeles:
    1 2 3 @media screen and ( min-width: 321 px ) and ( max-width: 480 px ) { img { display: none; } }

    Tecnolog a Internet 9 / 18

    Responsive Web Design

    Ejemplos de sitios responsivos

    http://www.smashingmagazine.com/ http://mediaqueri.es

    Tecnolog a Internet 10 / 18

    Responsive Web Design

    Limitaciones del responsive web design

    Imagenes responsivas .- La w3c propone el tag picture para solucionar el problema, pero aun sigue en desarrollo http://www.w3.org/community/respimg/

    Tecnolog a Internet 11 / 18

    Responsive Web Design

    Introducci on RWD frameworks

    Existe varios frameworks

    Tecnolog a Internet 12 / 18

    Responsive Web Design

    Por qu e utilizar framewors?

    Ahorrar tiempo Comunidad y Extenciones Compatibilidad en los diferentes browser Documentaci on

    Tecnolog a Internet 13 / 18

    Responsive Web Design

    Frameworks que utilizaremos

    Skeleton .- http://www.getskeleton.com/ Bootstrap .- http://twitter.github.com/bootstrap/ Fundation .- http://foundation.zurb.com

    Tecnolog a Internet 14 / 18

    Responsive Web Design

    Algunos sitios utilizan estos frameworks


    Skeleton
    http://www.ourhivemind.com/

    Bootstrap
    http://living.is

    Fundation
    http://projection.pixar.com http://globalcloset.education.nationalgeographic.com/ www.getswizzle.com

    Tecnolog a Internet 15 / 18

    Responsive Web Design

    Contras de los frameworks

    C odigo Excesivo Curva de aprendisaje Poco exible

    Tecnolog a Internet 16 / 18

    Responsive Web Design

    Herramientas que utilizaremos

    Editores .- Aptana Browsers .- Firefox, Chrome, Explorer Plugins extras para ver dise nos responsivas

    Tecnolog a Internet 17 / 18

    Responsive Web Design

    Bookmarklets

    RWD demonstration http://jamus.co.uk/demos/rwd-demonstrations/ Responsinator http://www.responsinator.com/

    Tecnolog a Internet 18 / 18

    Você também pode gostar