TECNOLOGIAS PARA LA INTEGRACION DE SOLUCIONES€¦ · La utilización de dispositivos móviles como teléfonos celulares o tabletas para navegar en Internet está creciendo a un ritmo

Facultad de Estadística e Informática

SISTEMAS WEB


BibliografíaLePage, P. (8 de junio de 2017). Web Fundamentals. Obtenido de Developers Google: https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=es-419

Marcotte, E. (25 de mayo de 2010). Responsive Web Design. Obtenido de A List Apart: https://alistapart.com/article/responsive-web-design/

Quesada, S. (13 de diciembre de 2913). Diferencias entre el diseño web adaptativo y responsivo. Obtenido de PuroMarketing: http://www.puromarketing.com/21/18837/entre-diseno-adaptativo-responsive.html

Socialmood. (2017). ¿Qué esel diseño Web Responsivo? Obtenido de 40 de fiebre: https://www.40defiebre.com/que-es/diseno-responsive/

W3C. (19 de junio de 2012). Media Queries. Obtenido de W3C Recomendation: https://www.w3.org/TR/css3-mediaqueries/

Wroblewski, L. (14 de marzo de 2012). Multi-Device Layout Patterns. Obtenido de LukeW Ideation + Design: https://www.lukew.com/ff/entry.asp?1514


IV. Metodologías y Lenguajes parael desarrollo de sistemas web.

• Diseño de presentación de aplicaciones Web• Hojas de estilo en cascada (CSS). • Tipos de selectores• Diseño Web Responsivo


Introducción▪ La utilización de dispositivos móviles como teléfonos celulares o

tabletas para navegar en Internet está creciendo a un ritmo muy acelerado, por lo que las paginas publicadas en la web, deben de estar optimizadas para mostrar contenido en estos dispositivos.


Introducción▪ Existe una gran variedad de diferentes tamaños de pantalla en los

teléfonos, tabletas, pantallas de escritorio, televisiones e incluso relojes o pulseras inteligentes.

▪ Estos tamaños de pantalla siempre están cambiando, de modo que es importante que los sitios web puedan adaptarse a cualquier tamaño de pantalla.


Diseño web responsivo▪El diseño web responsivo por su nombre en inglés Responsive Web Design, fue definido originalmente por el diseñador Ethan Marcotteen el año de 2010 mediante una serie de artículos en la publicación en línea especializada en diseño y desarrollo web A List Apart. Se define como:

El diseño web responsivo o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde computadoras de escritorio a tabletas y móviles.

Responsive Web Design por Ethan Marcotte (Marcotte, 2010). Disponible en https://alistapart.com/article/responsive-web-design/


Ejemplo diseño web responsivo


CaracterísticasPermite que los contenidos e imágenes sean fluidos adaptándose a cada pantalla.

Simplifica el diseño priorizando y seleccionando los elementos necesarios en pantallas pequeñas.

Cambia la apariencia de algunos elementos como menús o botones para adaptarse a su uso en dispositivos móviles.

Evita duplicar un contenido con distintas urls, para cada tipo de dispositivo.

Permite compartir los contenidos en una gran variedad de dispositivos.


Implementación del diseño web responsivo▪Usar la etiqueta meta viewport para controlar el ancho y el ajuste de la ventana de visualización del navegador.

▪ Incluir la propiedad width=device-width para hacer coincidir el ancho de la pantalla en pixeles independientes del dispositivo.

▪ Incluir la propiedad initial-scale=1 para establecer una relación de 1:1 entre los píxeles CSS y los píxeles independientes del dispositivo.

▪Utilizar las consultas de medios en CSS (media queries).

▪ Las media queries son parte de la especificación CSS3 de la W3C. Disponibledesde: http://www.w3.org/TR/css3-mediaqueries/


Valor de meta viewport width=device-widthPágina sin viewport establecido. Página con viewport establecido.


Ajuste del contenido a la ventana de visualización▪ Para ajustar el contenido a la ventana de visualización, se recomienda que:▪ No se utilicen elementos grandes con un ancho fijo.

▪ El contenido no tiene que depender del ancho de una ventana fijo en particular para mostrarse correctamente.

▪ Utilizar consultas (media) de CSS para aplicar distintos estilos para pantallas pequeñas y grandes.


Media queries en CSS3▪ Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.

▪ Pueden entenderse como filtros simples que se pueden aplicar a estilos de CSS. Facilitan el cambio de estilos según las características del dispositivo que representa el contenido, como el tipo de pantalla, el ancho, la altura, la orientación e incluso la resolución.


Componentes de Media queries▪ Las media queries contienen dos componentes:▪ Un media type, por ejemplo (screen),

▪ La consulta o query entre paréntesis, que especifica una característica o media feature a consultar, por ejemplo (max-device-width), seguida del valor destino, por ejemplo (480px).

▪ Especificación W3C de Media Features. Disponible desde: http://www.w3.org/TR/css3-mediaqueries/#media1


Aplicación de Media queries▪ Además del uso del atributo media en el vínculo de la hoja de estilo, hay dos modos de aplicar consultas de medios que se pueden incorporar en un archivo CSS:▪ @media

▪ @import

Es importante remarcar que la lógica que se aplica a las consultas de medios no es mutuamente exclusiva y se aplica cualquier filtro que cumpla los criterios del bloque CSS resultante usando las

reglas de prioridad estándar en CSS.


Media queries en CSS más usadas▪ Aunque hay varios elementos diferentes por los que podemos consultar, los que se usan con mayor frecuencia para el diseño web adaptable son▪ min-width

▪ max-width

▪ min-height

▪ max-height

▪ orientation=portrait

▪ orientation=landscape


Unidades relativas Vs unidades absolutas


Elegir puntos de interrupción▪Crear puntos de interrupción basados en el contenido, nunca en dispositivos,

productos o marcas en particular.

▪Diseñar primero para el dispositivo móvil más pequeño, y luego mejora la experiencia cuando un estado mucho más real de pantalla esté disponible.

▪Procurar que las líneas de texto tengan un máximo de 70 u 80 caracteres para optimizar el texto para la lectura.*

▪Tomar puntos de interrupción de menor importancia cuando sea necesario.

*La teoría de la legibilidad clásica sugiere que una columna ideal debe tener entre 70 y 80 caracteres por línea (entre 8 y 10 palabras en inglés).


Herramientas de desarrollo▪La mayoría de navegadores incorporan una serie de herramientas para el desarrollador de sitios web con diseño responsivo:

▪Permiten visualizar la página web en distintos puntos de interrupción definidos.

▪Permite inspeccionar las reglas CSS aplicadas a un elemento en específico.

▪Permite modificar en tiempo de ejecución reglas CSS y visualizar los cambios


Herramientas de desarrollo


Patrones de diseño web responsivo▪ La mayoría de los diseños que se usan en las páginas web receptivas se pueden categorizar dentro de cinco clases de patrones:▪ mostly fluid

▪ column drop

▪ layout shifter

▪ tiny tweaks

▪ off canvas

mostly fluidcolumn drop

layout shiftertiny tweaks

off canvas


Elegir puntos de interrupciónEjemplos:

▪Google.com

▪Unocero.com

▪Netflix.com

▪UV.mx

▪ Slaprim.org


Diseño web responsivo y el llamado adaptativo

▪ Como se ha mencionado, el diseño web responsivo, reestructura los elementos de la web para optimizar todo el espacio disponible en la pantalla del dispositivo y ofrecer una excelente experiencia de usuario.

▪ Esto se consigue estableciendo medidas de ancho y márgenes de diseño proporcionales, en lugar de establecer valores absolutos o fijos en pixeles.

▪ También se necesita utilizar media queries y hojas de estilo para establecer las reglas CSS correspondientes para cada tamaño de pantalla.

▪ Por otro lado, el diseño web adaptativo, no es tan flexible como el responsivo.

▪ Utiliza tamaños de pantalla preestablecidos; es decir, cada elemento tiene un tamaño fijo en un punto de interrupción definido.

▪ Este no se modifica hasta que se cambia el tamaño de pantalla y se coincide con el siguiente punto de interrupción.

▪ También se necesita utilizar media queries y hojas de estilo para establecer las reglas CSS correspondientes para cada tamaño de pantalla.

Un diseño web responsivo es más recomendable que un diseño adaptativo pues abarca un mayor número de

dispositivos, aunque su desarrollo pudiera tomar más tiempo en realizarse.


Aplicación en tu página personal


Aplicar un diseño responsivo 1. Definir la estructura de la página.

2. Definir puntos de interrupción.

3. Integrar la información de la página HTML en bloques (div, header, footer).

4. Definir las reglas en la hoja de estilos en cascada (CSS).


Aplicar un diseño responsivo

<html lang="es-MX"><head>

<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="UV, Universidad, Informática, FEI" /><meta name="description" content="Sistemas Web" /><meta name="author" content="[email protected]" />

<title>Mi página Personal</title>

<link rel="shortcut icon" href="imagenes/favicon.ico"/>

<link rel="stylesheet" type="text/css" href="css/miestilo.css">

</head><body>

<header class="cabecera">Cabecera</header><div class="contenido-cuerpo">

<div class="col">Columna 1</div><div class="col">Columna 2</div><div class="col">Columna 3</div>

</div><footer class="mifooter">Footer</footer>

</body>


GRACIAS POR SU ATENCIÓN

Documents

TECNOLOGIAS PARA LA INTEGRACION DE SOLUCIONES€¦ · La utilización de dispositivos móviles como teléfonos celulares o tabletas para navegar en Internet está creciendo a un ritmo