Presentación de Javier Arques para el Frontenders Valencia del 11 de abril de 2013. Una introducción al Responsive Web Design con ejemplos prácticos.
Web de ejemplo:
http://servidordeprueba.net/webs/responsive-talk/
Ficheros de ejemplo:
https://github.com/frontenders/responsive-talk
Frontenders: http://valencia.frontenders.me/
Presentacion Iniciación al Responsive Web DesignGeekia
Este documento resume una presentación sobre el diseño web responsivo (responsive web design). Explica que el diseño web responsivo permite que los sitios web se adapten a diferentes dispositivos mediante el uso de layouts fluidos, imágenes flexibles, y queries de medios. También recomienda comenzar con un enfoque mobile-first y utilizar breakpoints basados en el contenido en lugar de los tamaños de pantalla de los dispositivos.
El trafico web se ha duplicado anualmente en los ultimos años, y la masificación de los moviles han convertido en obsoletos nuestros sitios web debido a que no ofrecen muy buena experiencia , causando perdida de usuarios y/o clientes, se parte de la necesidad de transformación de la web aprendiendo "Responsive Design
El documento habla sobre los patrones de diseño responsive y media queries. Explica que el diseño responsive permite adaptar un sitio web a diferentes dispositivos como ordenadores, tablets y teléfonos. Utiliza hojas de estilo CSS y media queries para detectar el ancho del dispositivo y aplicar estilos condicionales. Describe patrones como mobile first, mostly fluid, layout shifter y column drop que reorganizan el diseño cuando cambia el ancho de la pantalla.
Este documento proporciona información sobre cómo insertar imágenes en páginas web utilizando la etiqueta <img> y sus atributos src, alt, border, width y height. Explica que la etiqueta <img> no requiere etiqueta de cierre y que el atributo src especifica la ruta de la imagen, el atributo alt proporciona un texto alternativo, border establece un borde, y width y height permiten modificar el tamaño de la imagen mostrada en el navegador.
El documento habla sobre las imágenes en las páginas web. Explica que las imágenes mejoran la apariencia y proporcionan información visual. Luego describe los atributos img src, alt, border, width y height que controlan la fuente, texto alternativo, borde, ancho y alto de las imágenes.
Este documento presenta un resumen de las características básicas de las imágenes en las páginas web, incluyendo cómo insertar imágenes, agregar texto alternativo, establecer bordes, modificar el tamaño y alinear imágenes. También incluye el código HTML de una página web de muestra creada por dos estudiantes que utiliza varias de estas características de imágenes.
Este documento presenta un resumen de las características básicas de las imágenes en las páginas web, incluyendo cómo insertar imágenes, agregar texto alternativo, establecer bordes, modificar el tamaño y alinear imágenes. También incluye el código HTML de un sitio web corporativo que utiliza varias imágenes con estas características.
Este documento presenta los conceptos clave del diseño web responsivo. Explica que el diseño web responsivo implica crear sitios web flexibles que se adaptan a diferentes dispositivos mediante el uso de una retícula fluida, imágenes flexibles y consultas de medios. También enfatiza el enfoque "mobile first" para diseñar primero para dispositivos móviles y luego ampliar la experiencia para pantallas más grandes.
Presentacion Iniciación al Responsive Web DesignGeekia
Este documento resume una presentación sobre el diseño web responsivo (responsive web design). Explica que el diseño web responsivo permite que los sitios web se adapten a diferentes dispositivos mediante el uso de layouts fluidos, imágenes flexibles, y queries de medios. También recomienda comenzar con un enfoque mobile-first y utilizar breakpoints basados en el contenido en lugar de los tamaños de pantalla de los dispositivos.
El trafico web se ha duplicado anualmente en los ultimos años, y la masificación de los moviles han convertido en obsoletos nuestros sitios web debido a que no ofrecen muy buena experiencia , causando perdida de usuarios y/o clientes, se parte de la necesidad de transformación de la web aprendiendo "Responsive Design
El documento habla sobre los patrones de diseño responsive y media queries. Explica que el diseño responsive permite adaptar un sitio web a diferentes dispositivos como ordenadores, tablets y teléfonos. Utiliza hojas de estilo CSS y media queries para detectar el ancho del dispositivo y aplicar estilos condicionales. Describe patrones como mobile first, mostly fluid, layout shifter y column drop que reorganizan el diseño cuando cambia el ancho de la pantalla.
Este documento proporciona información sobre cómo insertar imágenes en páginas web utilizando la etiqueta <img> y sus atributos src, alt, border, width y height. Explica que la etiqueta <img> no requiere etiqueta de cierre y que el atributo src especifica la ruta de la imagen, el atributo alt proporciona un texto alternativo, border establece un borde, y width y height permiten modificar el tamaño de la imagen mostrada en el navegador.
El documento habla sobre las imágenes en las páginas web. Explica que las imágenes mejoran la apariencia y proporcionan información visual. Luego describe los atributos img src, alt, border, width y height que controlan la fuente, texto alternativo, borde, ancho y alto de las imágenes.
Este documento presenta un resumen de las características básicas de las imágenes en las páginas web, incluyendo cómo insertar imágenes, agregar texto alternativo, establecer bordes, modificar el tamaño y alinear imágenes. También incluye el código HTML de una página web de muestra creada por dos estudiantes que utiliza varias de estas características de imágenes.
Este documento presenta un resumen de las características básicas de las imágenes en las páginas web, incluyendo cómo insertar imágenes, agregar texto alternativo, establecer bordes, modificar el tamaño y alinear imágenes. También incluye el código HTML de un sitio web corporativo que utiliza varias imágenes con estas características.
Este documento presenta los conceptos clave del diseño web responsivo. Explica que el diseño web responsivo implica crear sitios web flexibles que se adaptan a diferentes dispositivos mediante el uso de una retícula fluida, imágenes flexibles y consultas de medios. También enfatiza el enfoque "mobile first" para diseñar primero para dispositivos móviles y luego ampliar la experiencia para pantallas más grandes.
Front end basics - Responsive Web DesignNadal Soler
Este documento habla sobre diseño web responsivo (RWD). Explica que RWD usa una retícula flexible, imágenes flexibles y consultas de medios CSS3 para adaptar sitios web a diferentes dispositivos. Detalla los ingredientes clave de RWD como retícula flexible basada en porcentajes, encapsular imágenes dentro de contenedores de ancho porcentual, y usar consultas de medios para aplicar estilos condicionales. El objetivo final de RWD es mejorar la experiencia del usuario al crear sitios adaptables a diferentes pantallas.
El documento describe las ventajas de usar HTML5 y CSS3. HTML5 hace el código más semántico y simple, mejorando la usabilidad, rendimiento y compatibilidad con dispositivos móviles. CSS3 agrega nuevas capacidades como fuentes personalizadas, efectos visuales, animaciones y diseños adaptables. Juntos permiten crear sitios y aplicaciones más avanzadas.
Este documento presenta una introducción a los estándares de la Web 2.0. Explica que los estándares web son un conjunto de recomendaciones para crear y interpretar documentos web. Los objetivos de los estándares de la Web 2.0 incluyen crear una web accesible para más personas y dispositivos, mejorar la experiencia del usuario y promover la consistencia visual. Algunos servicios asociados con la Web 2.0 son blogs, wikis y redes sociales.
Este documento presenta la filosofía del diseño web adaptable o responsive design. Explica que con el aumento de dispositivos conectados a Internet, es necesario crear sitios web que se adapten a diferentes tamaños de pantalla. Define el responsive design como una filosofía que permite que un mismo sitio web se vea bien en todo tipo de dispositivo sin importar las resoluciones o tamaños, gracias a técnicas como media queries, proporciones flexibles y elementos adaptables. Finalmente, recomienda herramientas como frameworks front-end como Bootstrap para facilit
Hacia una Metodología de Diseño Web ResponsiveHernan Beati
Exploramos las distintas metodologías de diseño web Responsive existentes a fines de 2013 y proponemos una etapa de diseño iterativa, basada en los contenidos, y con el enfoque de bocetar de mayor a menor y codificar de menor a mayor.
Estandares Web, Accesibilidad y Usabilidadricardogil
El documento habla sobre la historia y evolución de la web desde su creación en 1989 hasta la actualidad. Comienza describiendo los estándares web más importantes como XHTML, HTML, CSS y su importancia para que todos puedan acceder a la información de forma igual. Luego describe los principios de accesibilidad web y las ventajas de tener un sitio accesible. Finalmente, ofrece un curso sobre maquetación con estándares, accesibilidad y usabilidad web.
El documento describe términos clave relacionados con el desarrollo web como sitio web, hosting, dominio, DNS y FTP. Explica los componentes básicos de Dreamweaver como la vista de código y diseño, y cómo configurar un sitio en Dreamweaver incluyendo la página principal llamada "index". También resume los elementos básicos de HTML y la importancia de la etiqueta TITLE, y los pasos para subir un sitio web al servidor.
El documento contrasta las diferencias entre la Web 1.0, Web 2.0 y la Web semántica 3.0. La Web 1.0 era estática y emitía información de forma unidireccional, mientras que la Web 2.0 es más participativa y dinámica gracias a las redes sociales y contenido generado por los usuarios. La Web semántica 3.0 profundiza la Web 2.0 mediante el uso de agentes inteligentes y contenido estructurado semánticamente.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se creó en 1990 por Tim Berners-Lee en el CERN. Consiste en páginas web interconectadas mediante hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo. Los sitios web pueden ser estáticos o dinámicos y se diseñan para cargar rápidamente.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se creó en 1990 por Tim Berners-Lee en el CERN. Consiste en páginas web interconectadas mediante hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo y se visualizan a través de navegadores web.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se introdujo en 1990 en el CERN por Tim Berners-Lee. Consiste en páginas web interconectadas a través de hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo y se ven a través de un navegador.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se creó en 1990 por Tim Berners-Lee en el CERN. Consiste en páginas web interconectadas mediante hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo y se visualizan a través de navegadores.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se menciona que fue creada por Tim Berners-Lee en 1990 en el CERN. Explica las diferentes generaciones de páginas web y los protocolos y dominios utilizados. También describe elementos como hipertexto, navegadores, y cómo las páginas web permiten a las empresas compartir información.
Front-End, teoría, tecnologías, metodología, Aplicaciones online y offline. Guía completa para el diseño y desarrollo web 2.0 actualizada a Enero del 2016.
Este documento ofrece una introducción al diseño web responsive. Explica conceptos clave como arquitectura, ventajas e inconvenientes, ejemplos reales, puntos de ruptura y herramientas. También incluye secciones prácticas sobre cómo implementar diseño responsive utilizando CSS, Bootstrap y optimizando imágenes.
Este documento presenta una sesión de capacitación sobre tecnologías web. Cubre temas como navegadores, lenguaje HTML, correo electrónico, mensajería instantánea y aplicaciones de Google. Explica conceptos como Internet, navegadores, buscadores, lenguaje HTML y sus elementos básicos. También aborda temas de correo electrónico como direcciones de correo, cuidados y recomendaciones para evitar spam.
es un editor de imágenes online gratuito que permite realizar ediciones
básicas como recortar, rotar, ajustar tamaño, brillo, contraste, saturación, etc.
Algunas características:
- Subida de imágenes de hasta 5MB
- Recorte manual o automático
- Rotación
- Ajuste de tamaño
- Ajustes básicos de color (brillo, contraste, saturación)
- Vista previa en tiempo real
- Descarga en formato JPG
- Compartir en redes sociales
- Sin registro ni instalación
Este documento describe los principios del diseño web responsivo. Explica que el diseño web responsivo construye un sitio adaptable a múltiples dispositivos mediante el uso de una grilla flexible, imágenes flexibles y consultas de medios. También cubre estrategias de contenido, optimización de recursos y carga condicional para adaptarse a las limitaciones y capacidades de cada dispositivo.
Este documento presenta conceptos básicos sobre el diseño y maquetación de sitios web. Explica elementos como dominio, extensión de dominio, hosting, sistemas de gestión de contenidos, estructura de un sitio, cabecera, navegación, contenido y pie de página. Además, incluye consejos sobre el rastreo de ojos de los usuarios, plantillas, y estrategias para elegir palabras clave.
Más contenido relacionado
Similar a Responsive web design - frontenders Valencia
Front end basics - Responsive Web DesignNadal Soler
Este documento habla sobre diseño web responsivo (RWD). Explica que RWD usa una retícula flexible, imágenes flexibles y consultas de medios CSS3 para adaptar sitios web a diferentes dispositivos. Detalla los ingredientes clave de RWD como retícula flexible basada en porcentajes, encapsular imágenes dentro de contenedores de ancho porcentual, y usar consultas de medios para aplicar estilos condicionales. El objetivo final de RWD es mejorar la experiencia del usuario al crear sitios adaptables a diferentes pantallas.
El documento describe las ventajas de usar HTML5 y CSS3. HTML5 hace el código más semántico y simple, mejorando la usabilidad, rendimiento y compatibilidad con dispositivos móviles. CSS3 agrega nuevas capacidades como fuentes personalizadas, efectos visuales, animaciones y diseños adaptables. Juntos permiten crear sitios y aplicaciones más avanzadas.
Este documento presenta una introducción a los estándares de la Web 2.0. Explica que los estándares web son un conjunto de recomendaciones para crear y interpretar documentos web. Los objetivos de los estándares de la Web 2.0 incluyen crear una web accesible para más personas y dispositivos, mejorar la experiencia del usuario y promover la consistencia visual. Algunos servicios asociados con la Web 2.0 son blogs, wikis y redes sociales.
Este documento presenta la filosofía del diseño web adaptable o responsive design. Explica que con el aumento de dispositivos conectados a Internet, es necesario crear sitios web que se adapten a diferentes tamaños de pantalla. Define el responsive design como una filosofía que permite que un mismo sitio web se vea bien en todo tipo de dispositivo sin importar las resoluciones o tamaños, gracias a técnicas como media queries, proporciones flexibles y elementos adaptables. Finalmente, recomienda herramientas como frameworks front-end como Bootstrap para facilit
Hacia una Metodología de Diseño Web ResponsiveHernan Beati
Exploramos las distintas metodologías de diseño web Responsive existentes a fines de 2013 y proponemos una etapa de diseño iterativa, basada en los contenidos, y con el enfoque de bocetar de mayor a menor y codificar de menor a mayor.
Estandares Web, Accesibilidad y Usabilidadricardogil
El documento habla sobre la historia y evolución de la web desde su creación en 1989 hasta la actualidad. Comienza describiendo los estándares web más importantes como XHTML, HTML, CSS y su importancia para que todos puedan acceder a la información de forma igual. Luego describe los principios de accesibilidad web y las ventajas de tener un sitio accesible. Finalmente, ofrece un curso sobre maquetación con estándares, accesibilidad y usabilidad web.
El documento describe términos clave relacionados con el desarrollo web como sitio web, hosting, dominio, DNS y FTP. Explica los componentes básicos de Dreamweaver como la vista de código y diseño, y cómo configurar un sitio en Dreamweaver incluyendo la página principal llamada "index". También resume los elementos básicos de HTML y la importancia de la etiqueta TITLE, y los pasos para subir un sitio web al servidor.
El documento contrasta las diferencias entre la Web 1.0, Web 2.0 y la Web semántica 3.0. La Web 1.0 era estática y emitía información de forma unidireccional, mientras que la Web 2.0 es más participativa y dinámica gracias a las redes sociales y contenido generado por los usuarios. La Web semántica 3.0 profundiza la Web 2.0 mediante el uso de agentes inteligentes y contenido estructurado semánticamente.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se creó en 1990 por Tim Berners-Lee en el CERN. Consiste en páginas web interconectadas mediante hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo. Los sitios web pueden ser estáticos o dinámicos y se diseñan para cargar rápidamente.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se creó en 1990 por Tim Berners-Lee en el CERN. Consiste en páginas web interconectadas mediante hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo y se visualizan a través de navegadores web.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se introdujo en 1990 en el CERN por Tim Berners-Lee. Consiste en páginas web interconectadas a través de hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo y se ven a través de un navegador.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se creó en 1990 por Tim Berners-Lee en el CERN. Consiste en páginas web interconectadas mediante hipervínculos que permiten a los usuarios navegar de forma no lineal. Las páginas web contienen texto, imágenes, sonido y vídeo y se visualizan a través de navegadores.
Este documento describe la historia y el funcionamiento de la World Wide Web. Se menciona que fue creada por Tim Berners-Lee en 1990 en el CERN. Explica las diferentes generaciones de páginas web y los protocolos y dominios utilizados. También describe elementos como hipertexto, navegadores, y cómo las páginas web permiten a las empresas compartir información.
Front-End, teoría, tecnologías, metodología, Aplicaciones online y offline. Guía completa para el diseño y desarrollo web 2.0 actualizada a Enero del 2016.
Este documento ofrece una introducción al diseño web responsive. Explica conceptos clave como arquitectura, ventajas e inconvenientes, ejemplos reales, puntos de ruptura y herramientas. También incluye secciones prácticas sobre cómo implementar diseño responsive utilizando CSS, Bootstrap y optimizando imágenes.
Este documento presenta una sesión de capacitación sobre tecnologías web. Cubre temas como navegadores, lenguaje HTML, correo electrónico, mensajería instantánea y aplicaciones de Google. Explica conceptos como Internet, navegadores, buscadores, lenguaje HTML y sus elementos básicos. También aborda temas de correo electrónico como direcciones de correo, cuidados y recomendaciones para evitar spam.
es un editor de imágenes online gratuito que permite realizar ediciones
básicas como recortar, rotar, ajustar tamaño, brillo, contraste, saturación, etc.
Algunas características:
- Subida de imágenes de hasta 5MB
- Recorte manual o automático
- Rotación
- Ajuste de tamaño
- Ajustes básicos de color (brillo, contraste, saturación)
- Vista previa en tiempo real
- Descarga en formato JPG
- Compartir en redes sociales
- Sin registro ni instalación
Este documento describe los principios del diseño web responsivo. Explica que el diseño web responsivo construye un sitio adaptable a múltiples dispositivos mediante el uso de una grilla flexible, imágenes flexibles y consultas de medios. También cubre estrategias de contenido, optimización de recursos y carga condicional para adaptarse a las limitaciones y capacidades de cada dispositivo.
Este documento presenta conceptos básicos sobre el diseño y maquetación de sitios web. Explica elementos como dominio, extensión de dominio, hosting, sistemas de gestión de contenidos, estructura de un sitio, cabecera, navegación, contenido y pie de página. Además, incluye consejos sobre el rastreo de ojos de los usuarios, plantillas, y estrategias para elegir palabras clave.
Similar a Responsive web design - frontenders Valencia (20)
5. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
URL y HTML propio
6. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
Google ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor UI/UX
URL y HTML propio misma URL y HTML
7. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
Google ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor UI/UX
URL y HTML propio misma URL y HTML misma URL
HTML&CSS propio
Igual que DEDICADA
Más código
Detección del
dispositivo en el servidor
15. FLEXIBILIZA TU LAYOUT
Contenido fluido (%)
Tamaño en porcentaje = tamaño/total x 100
300px / 960px x 100 = 31.25%
box-sizing: border-box. Incluye el padding y el
borde en el ancho total (IE8+)
26. SERVER RESPONSIVE IMAGES
.htaccess
para redireccionar todas las
imágenes a adaptive-images.php
adaptive-images.php
creará las imágenes y las cacheará
javascript
creará una cookie que guarde el
tamaño de tu pantalla
http://adaptive-images.com/
30. width (permite min,max)
@media screen and (min-width: 400px)
and (max-width: 700px) { … }
device width (permite min,max)
@media screen and (device-width:
800px) { … }
orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
MEDIA TYPES MEDIA FEATURES
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv
31. TAMAÑOS BÁSICOS
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
47. Responsive Web Design por Ethan Marcotte http://alistapart.com/article/responsive-web-
design
SIXREVISIONS: A comparison of Methods for Building Mobile-Opimized Websites http://
sixrevisions.com/mobile/methods-mobile-websites/
MASHABLE: 85 Top Responsive Web Design Tools de Mashable http://mashable.com/
2013/03/18/web-design-tools/
The Responsinator (testing): http://www.responsinator.com/
RESS: Responsive Design + Server Side Components http://www.lukew.com/ff/entry.asp?
1392
RECURSOS