El documento explica el diseño web responsivo (RWD), que permite que una interfaz se adapte a diferentes resoluciones de pantalla según el dispositivo. Describe la evolución de la web hacia diseños más interactivos y centrados en el usuario, así como las bases para el diseño responsivo como pensar primero en dispositivos móviles. También menciona pioneros del diseño responsivo como Ethan Marcotte y Luke Wroblewski.
Responsive Web Design - Diseño Sensible by @janogarciaJano Garcia
No es una presentación técnica, no habrá ejemplos de código.
El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos.
Estrategias de contenido y diseño Responsive email marketingOM Latam
Webinario amdia OM Latam sobre Estrategias de contenido y diseño responsive email marketing con Guido Boulay de Mailup y Guillermo Gomez Lavalle de ClickExperts.
En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía.
Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
Responsive Web Design - Diseño Sensible by @janogarciaJano Garcia
No es una presentación técnica, no habrá ejemplos de código.
El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos.
Estrategias de contenido y diseño Responsive email marketingOM Latam
Webinario amdia OM Latam sobre Estrategias de contenido y diseño responsive email marketing con Guido Boulay de Mailup y Guillermo Gomez Lavalle de ClickExperts.
En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía.
Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
Cómo prototipar exitosamente tu proyectoIxDA Mendoza
Los prototipos conectan la estructura y arquitectura con la superficie de un sitio web o aplicación móvil. Son representaciones visuales de una interfase que se utilizan para comunicar los detalles y lograr que todos los miembros de un proyecto tengan un entendimiento mutuo en lo que se está trabajando.
Comunicación corporativa medios on-line
Inmaculada del Rosal
Identidad corporativa y valor añadido
Master Diseño Industrial
Universidad Nebrija (Madrid)
Presentación del proyecto Jokte! en el marco de la Conferencia Internacional del Software Libre 2014.
Centro Cultural Borges, Buenos Aires, Argentina.
14-10-2014
Cómo prototipar exitosamente tu proyectoIxDA Mendoza
Los prototipos conectan la estructura y arquitectura con la superficie de un sitio web o aplicación móvil. Son representaciones visuales de una interfase que se utilizan para comunicar los detalles y lograr que todos los miembros de un proyecto tengan un entendimiento mutuo en lo que se está trabajando.
Comunicación corporativa medios on-line
Inmaculada del Rosal
Identidad corporativa y valor añadido
Master Diseño Industrial
Universidad Nebrija (Madrid)
Presentación del proyecto Jokte! en el marco de la Conferencia Internacional del Software Libre 2014.
Centro Cultural Borges, Buenos Aires, Argentina.
14-10-2014
Avances de Joomla y Jokte. Razones y objetivos de Jokte, fork de Joomla. Presentación en el II Encuentro de Tecnologías Web y Móviles. Universidad Católica de Chile. Mayo 2013
La Unidad Eudista de Espiritualidad se complace en poner a su disposición el siguiente Triduo Eudista, que tiene como propósito ofrecer tres breves meditaciones sobre Jesucristo Sumo y Eterno Sacerdote, el Sagrado Corazón de Jesús y el Inmaculado Corazón de María. En cada día encuentran una oración inicial, una meditación y una oración final.
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...JAVIER SOLIS NOYOLA
El Mtro. JAVIER SOLIS NOYOLA crea y desarrolla el “ROMPECABEZAS DE ECUACIONES DE 1ER. GRADO OLIMPIADA DE PARÍS 2024”. Esta actividad de aprendizaje propone retos de cálculo algebraico mediante ecuaciones de 1er. grado, y viso-espacialidad, lo cual dará la oportunidad de formar un rompecabezas. La intención didáctica de esta actividad de aprendizaje es, promover los pensamientos lógicos (convergente) y creativo (divergente o lateral), mediante modelos mentales de: atención, memoria, imaginación, percepción (Geométrica y conceptual), perspicacia, inferencia, viso-espacialidad. Esta actividad de aprendizaje es de enfoques lúdico y transversal, ya que integra diversas áreas del conocimiento, entre ellas: matemático, artístico, lenguaje, historia, y las neurociencias.
SEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptxOsiris Urbano
Evaluación de principales hallazgos de la Historia Clínica utiles en la orientación diagnóstica de Hemorragia Digestiva en el abordaje inicial del paciente.
Presentación de la conferencia sobre la basílica de San Pedro en el Vaticano realizada en el Ateneo Cultural y Mercantil de Onda el jueves 2 de mayo de 2024.
Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinaria). UCLMJuan Martín Martín
Examen de Selectividad de la EvAU de Geografía de junio de 2023 en Castilla La Mancha. UCLM . (Convocatoria ordinaria)
Más información en el Blog de Geografía de Juan Martín Martín
http://blogdegeografiadejuan.blogspot.com/
Este documento presenta un examen de geografía para el Acceso a la universidad (EVAU). Consta de cuatro secciones. La primera sección ofrece tres ejercicios prácticos sobre paisajes, mapas o hábitats. La segunda sección contiene preguntas teóricas sobre unidades de relieve, transporte o demografía. La tercera sección pide definir conceptos geográficos. La cuarta sección implica identificar elementos geográficos en un mapa. El examen evalúa conocimientos fundamentales de geografía.
1. Las historietas corresponden al personaje “Gaturro” creado por Nik http://www.gaturro.com
Miguel Tuyaré – http://www.migueltuyare.com.ar
2. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
RWD
WTF?
RAE “responsivo”: Traducción de
Perteneciente o relativo a “responsive”:
la respuesta sensible, receptivo
“Conjunto de técnicas de diseño y programación que facilitan a
una interfaz adaptarse a diversas resoluciones de pantalla según
sea el dispositivo que la contenga”.
Miguel Tuyaré – http://www.migueltuyare.com.ar
3. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
Web 1 PC USUARIO SUJETO PASIVO
Personas conectándose a la web
Web 2.0 PC APLICACIONES INTERACTÚAN
Personas conectándose a personas –
Redes sociales - Compartir
MOVILES CON EL USUARIO
Web 3.0 PC APLICACIONES INTERACTÚAN
Aplicaciones web conectándose a
aplicaciones web. MOVILES CON APLICACIONES Y CON EL
WEBS USUARIO
Web semántica
http://www.w3c.es/Presentaciones/2005/1018-WebSemanticaREBIUN-MA/
EVOLUCIÓN2
Miguel Tuyaré – http://www.migueltuyare.com.ar
4. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
BASES FUNDAMENTALES
Piensa en…
DISEÑAR PRIMERO
PARA MÓVILES
Miguel Tuyaré – http://www.migueltuyare.com.ar
5. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
TIPO DE MAQUETACIONES
- Ancho fijo en pixeles
- Dispositivos limitados
- Ancho en porcentajes
- Varios dispositivos
- Ancho en porcentajes y en pixeles
- Varios dispositivos
- Anchos en proporciones
- Todos los dispositivos
Mientras que el diseño fluido nos da un nivel de navegabilidad y usabilidad muy
bueno, el diseño responsivo nos da la excelencia ya que en vez de basarse en
porcentajes se basa en proporciones.
Miguel Tuyaré – http://www.migueltuyare.com.ar
6. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
¿QUIÉNES TIRARON LA PRIMERA PIEDRA?
Ethan Marcotte
- Fluids Grids – 2009
- Responsive Web Design - 2010
Luke Wroblewski
Diseñar primero para móviles
2009
Steven Champeon
Mejora progresiva
Otros
Javascript no obstructivo
Miguel Tuyaré – http://www.migueltuyare.com.ar
7. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
CREANDO UN RWD
• Bootstrap
• Simplegrid
• Porcentajes
• 960gs
• Unidades EM
• InuitCSS
• Frameworks flexibles
• Skeleton
• Less Framework 4
• Gumby
• Escalamiento CSS
• Recorte CSS
• Composición con capas
• Javascript -> Ethan Marcotte http://unstoppablerobotninja.com
Ejemplos:
<link rel="stylesheet" media="screen
and (device-height: 600px)" />
Media type: screen, print, tv,
speach, braille, etc. @media screen and (min-width: 400px)
and (max-width: 700px) { … }
@media screen and (device-width: 800px)
http://www.w3.org/TR/css3-mediaqueries/ { … }
Miguel Tuyaré – http://www.migueltuyare.com.ar
8. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
• Diseño enfocado en el usuario
Sujeto y objeto del diseño
Estudiarlo - Conocerlo
• Navegabilidad
Responsiva/Fluida/Fija
• Interactividad
http://es.wikipedia.org/wiki/Interactividad
• Semántica
http://www.w3c.es/Divulgacion/GuiasBreves/WebSemantica NO OLVIDAR
• Medios Claves del diseño web
PC, Móviles, Video, Impresión
• Usabilidad
http://es.wikipedia.org/wiki/Usabilidad
• Accesibilidad
http://es.wikipedia.org/wiki/Accesibilidad_web
• Funcionalidades
Disposición – Menús – Contenidos
• Escalabilidad – Mejora progresiva
A mejor dispositivo, mejor visión
• Estética
Patrones de colores, distribución, etc.
• SEO
http://es.wikipedia.org/wiki/Posicionamiento_en_buscadores
• Calidad de la información
“el contenido precede al diseño. Éste, en la ausencia de contenido, no es
diseño, es simple decoración”. Jeffrey Zeldman (fundador de “A List
Apart”)
Miguel Tuyaré – http://www.migueltuyare.com.ar
9. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
REFERENCIAS
Ethan Marcotte:
“Responsive Web Design” – “A List Apart” - http://www.alistapart.com/articles/responsive-web-design/ (en inglés)
“Responsive Web Design” - “A List Apart” - http://diseñowebresponsivo.com.ar/ (en español)
Ethan Marcotte:
“Fluid grids” – “A List Apart” - http://www.alistapart.com/articles/fluidgrids/ (en inglés)
John All Shopp
“A Dao of Web Design” - http://www.alistapart.com/articles/dao/ (en inglés)
Luke Wroblewski
“Mobile First” - http://www.lukew.com/ff/entry.asp?933 (en inglés)
Mejora progresiva
http://es.wikipedia.org/wiki/Mejora_progresiva
Javascript no obstructivo
http://es.wikipedia.org/wiki/JavaScript_no_obstructivo
Bajate este tutorial completo:
http://jnightchile.cl/programa/taller-tecnología-responsive.html
Miguel Tuyaré – http://www.migueltuyare.com.ar
10. DISEÑO WEB RESPONSIVO – RWD – Juuntos.NET
Tomás S. Elliot
"son de diferente clase el objetivo que un hombre se fija en su formación para ganarse la
vida y el objetivo que se fija al trabajar para desarrollar y cultivar su inteligencia y su
sensibilidad. El primero es un objetivo en cuya realización hay que mantener
conscientemente presentes tanto el fin como los medios. Se decide primero el campo
general de actividad en el que se quiere encontrar empleo y se siguen luego los cursos de
instrucción establecidos o comúnmente aceptados como preparación adecuada para ese
empleo. Pero para cultivar las posibilidades y facultades que tienden a completar nuestra
educación, al margen de nuestras ocupaciones profesionales, es preciso el desinterés: hay
que seguir los estudios por los estudios en sí...“
El balance entre estas dos actividades hecho con felicidad es el secreto para mantener
nuestro espíritu bien alto y "aceitado". Por eso, a no desesperarse y a tener en cuenta que
en estos casos "siempre seremos principiantes".
GRACIAS – CALTU - AGUIJE
J!Night Chile 2012 – Juuntos con Jokte!
Miguel Tuyaré – http://www.migueltuyare.com.ar