Diseño Web Adaptativo Responsive Design. Del prototipo al HTML y CSS 1.

Slides:



Advertisements
Presentaciones similares
Escribir aquí el título de la WQ
Advertisements

Desarrollo de Sitios Web
Paginas Web.
Una página web es una fuente de información adaptada para la World Wide Web(WWW) y accesible mediante un navegador de Internet. Un sitio web es un conjunto.
Proyecto Portal Web APE
Construcción de Páginas WEB
Arquitectura de la información en sitios web y Usabilidad
Tu , un sitio web R e d d e P r o f e s o r e s I n n o v a d o r e s Módulo: Tu , un sitio web.
Lo que un usuario de Civil 3D necesita saber de MAP 3D y Raster Design (CI5831-V) Ing.Juan Carlos Serna A Division SIG - MicroCAD.
Framework Hexápodo PHP fácil, rápido y sin dolor
Interfaz de usuario Originalmente el termino interfaz surgió para referirse al trabajo realizado por algunos especialistas que construían aplicaciones.
CLASE 4: SLICES Y DISEÑO Tutorial de práctica. Ejercicio – Clase 4  Puntos importantes: 1. Evaluar el contenido 2. La navegación (menú) 3. Elementos.
Introducción al desarrollo de proyectos RIA.
Requerimientos para producir
1 Las hojas de estilo en cascada Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal utilizado para definir la presentación.
HTML/CSS Marcas básicas.
TALLER OpenCms Creación de un portal Fase de Análisis y Diseño Arquitectura de Información Diseño Gráfico Usabilidad y Accesibilidad Fase de Desarrollo.
Aplicando las Pautas ¡¡Comprendiéndolas!!. El espíritu “El poder de la Web está en su universalidad. Que todo el mundo pueda acceder, a pesar de la discapacidad,
Mi primera Web LA PANTALLA EL NAVEGADOR EL NAVEGADOR EL LENGUAJE EL LENGUAJE EL ASISTENTE EL ASISTENTE EL SERVIDOR EL SERVIDOR MÁS OPCIONES MÁS OPCIONES.
Web 2.0 y Medicina. Muy amigable para el usuario Rico en funciones Sin vergüenza para utilizar el color… pero mucho blanco Los logos son redondeados,
DESARROLLO DE APLICACIONES
3 PROGRAMAR EN UN LENGUAJE DE HIPERTEXTO L.I. OSWALDO MARTINEZ C. EDPW.
FACULTAD: Marketing CARRERA: Administracion de Empresas ASIGNATURA: GESTION DE INFORMACION WEB TÍTULO: TALLER AUTOR: DANILO NERVI PROFESOR: ERIKA ASCENCIO.
Grupo N° 5 Integrantes: Kathia Mariela Carrillo William Alexis Mendoza
Por principio un DIV, aunque su contenido sea muy pequeño ocupa todo el ancho de su padre generalmente el body, ya que son elementos de bloque. Recordar.
Launch with Confidence User Experience (UX) Diseñando una experiencia por y para los usuarios Presentado por: Rob [Senior Engineer]
BIENVENIDO A PREMIUMWEB. ORIENTADO HACIA LOS GERENTES.
ILIANA CORDOVA.
Accesibilidad y Usabilidad Web Mayo ¿Quiénes usan la web? Personas: Con computadoras de bajos recursos tecnológicos, que no poseen un mouse, parlantes.
Escuela: Colegio de bachilleres 20 del valle Materia: tecnología de la información y comunicación.
Gloria Legorreta García GRUPO:101.  Se conoce como Web Site al conjunto de páginas web enlazadas que muestran diferentes partes del mismo. En general.
Metodología para solución de problemas
Estudio de accesibilidad de la tienda online de adolfodominguez.com
DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 3: Etiquetas avanzadas Jose Miguel Vidagany Igual.
¿Qué es? Es una técnica de diseño que se basa en el uso de estructuras para adaptar el contenido de un sitio web a la pantalla del dispositivo que lo.
1 Arquitectura de navegación (Etapa de diseño de la aplicación) Diseño Gráfico de la IU – ENCARAR UN PROYETO DESDE LA IU 2. Definir resolución de pantalla.
INTRODUCCIÓN A LA INGENIERÍA DEL SOFTWARE
PREZI VS POWER POINT.
Cuenta con mas velocidad, así como optimización de cada una de las pestañas creadas de modo que una que tenga mucha carga no afecta a las demás, debido.
Líneas Horizontales Las líneas horizontales son de gran ayuda para separar secciones de texto o incluso como decoración. La etiqueta permite dibujar una.
José R. Oliveras Vélez Coordinador de Servicios Técnicos al Usuario Centro de Recursos para el Aprendizaje Universidad de Puerto Rico en Utuado.
Las webquest Silvia Gumiel Molina.
El Documento de Diseño Es el documento que se crea para reflejar las especificaciones del proyecto y puede servir para buscar inversores Sirve tanto.
Cristian Fonnegra Marin. DISEÑO WEB.

WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo.
CARLOS DANIEL VILLACIS MOLINA UNIVERSIDAD ECOTEC.
Sitios WEB HTML Dreamweaver Interfaz Instructor: Adbeel Cabnal.
CSS Cascading Style Sheets
Estructuras web De navegación Y Visual. Investigación de requerimientos ¿Qué es lo que quiere el cliente? – ¿Qué desea comunicar?, y ¿Cómo? – ¿Qué información.
Lenguaje de Programación Web Dinámico Multiplataforma Estándar abierto y accesible Elementos nuevos Retrocompatible Nueva filosofía de trabajo Impulsado.
HTML 5 Edgar Vázquez Ayala. Rolando Aarón Pérez Mandujano.
Pasos para elaborar Tablas en HTML Para empezar crearemos una tabla sencilla de dos filas y dos elementos. Vayamos por pasos: 1.En primer lugar ponemos.
Formas, Tablas, Numeración y viñetas, Imágenes y WordArt
Warm up Brainstorm as many verbs as you can remember. Put them into 3 lists: -AR-ER -IR.
Layouts adaptables Objetivo: - Probar distintas técnicas para modificar el diseño de una página, según en cuál tamaño de pantalla está siendo visualizada.
Workshop de Responsive Web Design Hernán Beati.
Scripts para elementos adaptables + Metodología
1     MARIANA COCINASOUL Sitio Web y estrategia de generación de marca personal 2.0 Viernes, 10 de abril de 2015   
Imágenes líquidas y navegación adaptable Objetivos: - Incoporar técnicas que permitan entregar distintas imágenes según dispositivo, y volverlas líquidas.
@josedlujan. Director de Desarrollo M.T.I. José Dimas Luján Castillo
Tecnologías Emergentes y los Negocios Unidad 4 – Diseño de Sites.
Soluciones en Internet.::BIENVENIDOS::.. Etapas de un Proyecto Web Prediseño Diseño Instalación y Prueba ¿Para que se publica el sitio? ¿Qué quiero que.
¿Qué es jQuery? jQuery es una librería gratuita y open source, que simplifica la creación de páginas web altamente interactivas. Funciona.
2.1 Conocer la terminología básica del software para diseñar una página Web
GUIA DE CSS 3 BASICA AUTOR: CARLOS BERBECI QUE ES CSS3 ? CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML.
Las fases del ciclo de la vida de desarrollo de sistemas
Herramientas digitales: Slid.es y Projeqt
Portafolios Electrónicos Creación de Portafolios Electrónicos Introducción a la Tecnología Educativa Prof. J. William Sandoval, MBA (MCT) Universidad de.
Web Intelligence El objetivo de esta guía, es proporcionar un esbozo del amplio mundo que es aprender a utilizar Web Intelligence. Esta guía no está diseñada.
Transcripción de la presentación:

Diseño Web Adaptativo Responsive Design. Del prototipo al HTML y CSS 1

¿Qué es? El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una filosofía de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

Web = diversidad

Optimizar no es igual a miniaturizar

Mr. Simon Collison http://colly.com/

Stephen Caver http://stephencaver.com/

Spark-Box http://seesparkbox.com/

Food Sense http://foodsense.is/

Illy Issimo http://us.illyissimo.com/

Media Queries http://www.mediaqueri.es

Necesitamos optimizar la interfaces a través de distintos dispositivos ¿Por qué? Distintas personas entran con distintos dispositivos La misma persona empieza tarea en un dispositivo, y la sigue en otro.

¿Como se hace? Usar Media Queries para lograr un diseño optimizado mediante layout y grillas flexibles, incluyendo tipografía y medios adaptados (fotos, videos, mapas, tablas, sliders) y navegación acorde al dispositivo.

Pero... seguimos aplicando el mismo Workflow lineal Cambió el contexto de uso de la web. Aprendimos nuevas técnicas, como Responsive Web Design. Pero... seguimos aplicando el mismo Workflow lineal

Workflow lineal (heredado de gráfica)

Análisis de Workflows Responsive

Workflow de Viljami Salminen http://viljamis.com/blog/2012/responsive-workflow/

Workflow de Pon Kattera http://www.slideshare.net/pkattera/design-process-for-responsive-web-design

Workflow de Stephanie Rieger http://www.slideshare.net/yiibu/pragmatic-responsive-design

Dos enfoques para la etapa de Diseño Centrado en dispositivos Vs Centrado en contenidos

Centrado en dispositivos (insostenible) 1) Se hacía una lista de 5 o 6 dispositivos más vendidos 2) Se anotaba el ancho en pixeles de cada dispositivo 3) Se definían los breakpoints con una media querie en pixeles para cada resolución.

Ejemplo de gráfico de breakpoints (obsoleto)

Código de ejemplo (¡obsoleto!) para iPhone y iPad (no cubre Retina) @media screen and (max-width: 480px){ /* Aquí se diseñaba para iPhone */ } @media screen and (min-width: 481px) and (max-width: 1024px){ /* Aquí se diseñaba para Ipad */ } @media screen and (min-width:1025px){ /* Aquí se diseñaba para PC */ YO SOSTENIA ESTO EN 2011...

Centrado en contenidos (content-out) 1. Se evalúan los anchos de renglón del contenido. 2. Se hace una lista de anchos de ventana del navegador a los que ESE contenido ya no es legible. 3. Se hacen breakpoints en función de esos anchos (convertidos a em)

Código de ejemplo basado en contenidos @media screen and (max-width: 26em){ /* Primer Diseño */ } @media screen and (min-width: 26.01em) and (max-width: 37em){ /* Segundo diseño */ } @media screen and (min-width:37.01em){ /* Tercer diseño */

Esto implica trabajar con contenidos reales 1. Inventario de Contenidos (listado total). 2. Mapa del sitio. 3. Definición de tipos de Plantillas (para portadas, secciones, fichas de contenido, tipos de recursos multimediales).

Y que se puedan mostrar en 24 hs Entonces... necesitamos prototipos dinámicos, en HTML, con contenidos reales (no “lorem ipsum”...) Y que se puedan mostrar en 24 hs http://uxpin.com/

Metodología de Diseño

Primero, priorizamos contenidos 2 1 3

Con los contenidos priorizados para una plantilla, bocetamos de mayor a menor y codificamos de menor a mayor

Codificación Bocetado

Considerar qué deja de flotar en cada breakpoint Bocetar de mayor a menor Considerar qué deja de flotar en cada breakpoint

Usar grilla de 1000px de ancho, para que pueda pasarse a porcentajes fácilmente. http://www.gridsystemgenerator.com/

Acciones posibles: 1. Mantener igual (logo azul) 2. Dejar que se ajuste ancho en porcentaje (slider celeste) 3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises) 4. Ocultar 5. Mostrar

¿Cómo definir cada breakpoint? El contenido decide: estirar ventana hasta romper el diseño, y medir. MeasureIt (para Chrome y Firefox)

Repetir eso “n” veces... 1. Mantener igual (logo azul) 2. Dejar que se ajuste ancho en porcentaje (slider celeste) 3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises)

Probar cada boceto hasta extremos

Codificar de menor a mayor (Mobile First) HTML solo Flotar, estirar (CSS) Flotar, estirar (CSS)

No olvidar en el proceso...

Medir zonas de imágenes y hacer lista de tamaños Medirlas en extremo mínimo y máximo

“Una clase para cada medida” Ir haciendo listas por cada breakpoint de: -Tamaños de columnas, márgenes y paddings -Tamaños de tipografías -Tamaños de imágenes etc. “Una clase para cada medida” ¡Documentar! → Guía de estilo

¿Sistemas de Grillas? No, gracias (sirven para prototipar, no para producción)

Aaron Gustafson “I find Foundation, Bootstrap, and similar frameworks interesting from an educational standpoint, but I would never use one when building a production site. For prototyping a concept, sure, but to take one of these into production you need to be rigorous in your removal of unused CSS and JavaScript or you end up creating a heavy, slow experience for your users.”

Hacer tres variantes de diseño, no lleva el triple de tiempo! (¡pero el cliente no tiene por qué saberlo!)

Un caso: The Boston Globe http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/

960px

960px 768px

768px 600px

600px 480px

480px 320px

Paginas de interés http://www.responsivewebdesign.com.ar http://typecast.com/ http://uxpin.com/ https://www.youtube.com/watch?v=9YqfKENZEKM

Gracias