9
WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

Embed Size (px)

Citation preview

Page 1: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

WEB Y

MULTIMEDIAINTEGRANTES:

Piero Álvarez

Milena Gómez

Cristhian Rodríguez

Mónica Pasaca

Andrea Deleg

Veronica Castillo

Page 2: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

RESOLUCION WEB- ¿Cùal es la resolución adaptable para una pagina web?

- ¿Por que es adaptable una pagina web?

- Tamaño especifico de una pagina web

- Responsive Design

Page 3: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

¿Cùal es la resolución adaptable para una pagina web?

• 1024x768 píxeles Es la resolución actual más común. En principio hay que optimizar para tu audiencia, así que esta resolución cambiará en el futuro.

• NO diseñes únicamente para una resolución. El tamaño de pantalla cambia entre los usuarios. Las variaciones son incluso mayores, desde el momento en que no siempre se maximizan los navegadores.

• Utiliza una estructura líquida. Que se ajuste a la visualización del usuario.

Actualmente el 60% de todos los monitores están configurados a 1024x768 píxeles, y un 17% usan 800x600 píxeles. Otro 18% de usuario utiliza resoluciones iguales o mayores a 1280x1024 píxeles.

El porcentaje de grandes resoluciones está creciendo. A partir de 1600x1200 píxeles.

Tu página debería funcionar y verse bien al cambiar entre resoluciones.

Page 4: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

¿Por que es adaptable una pagina web?

Hay tres características técnicas que suponen el eje de un diseño web con estas capacidades:

Consultas de tipos de medios y listeners de consulta de tipos de medios

Un diseño de página flexible, basado en cuadrícula, que utilice tamaños relativos

Contenidos e imágenes flexibles aplicando cambios de escala dinámicos o mediante CSS

Page 5: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

- Los diseños web realmente adaptativos exigen la implementación de estas tres técnicas.

- El punto clave es la adaptación a las necesidades del usuario y las capacidades del dispositivo. Supongamos un usuario de un dispositivo móvil que visita nuestro sitio web con una pantalla pequeña. Tener en cuenta las necesidades del usuario no significa simplemente adaptar el contenido al tamaño de la pantalla, sino considerar también lo que va a querer hacer este usuario en primer lugar cuando visite nuestro sitio web y después mostrarle el contenido en función de ese criterio. Quizás tengamos que presentar la información en un orden distinto. No debemos suponer que el usuario no va a querer acceder a toda la información del sitio web porque utiliza el móvil.

Page 6: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

Tamaño especifico de una pagina web

El tamaño (peso) de las páginas es crítico: la velocidad con la cual las páginas pueden ser descargadas y ser mostradas.

El tiempo de cuanto tardan las peticiones de un usuario en llegar a su pantalla ha sido el tema de muchas pruebas con usuarios en los últimos años. En general, tiempo de carga debe ser menos de 10 segundos para tener la atención del usuario; si no, el usuario cancelará la sesión.

Los estudios del peso de carga de la página también han probado que los websites que son más rápidos, consiguen más tráfico.

Page 7: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

¿Cómo deben ser las páginas?La página debe tener el tamaño que se puede descargar en el plazo de 10 segundos, asumimos que la mayoría de los usuarios tendrán acceso a un web de la Red con un módem, puesto que esta es la situación típica en la mayoría de los casos.• Los Web deben de ser de un tamaño menor de 150 KB

donde sea posible.• Además, cualquier archivo más grande de sobre 250

KB debe ser separado hacia fuera y ser identificado al usuario como un archivo grande, preferiblemente con una indicación de aproximadamente como es de grande.

• El tamaño total de la página incluye el tamaño de todos los gráficos utilizados, puesto que tendrán que ser descargados, también, a menos que se estén reutilizando

Page 8: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

Responsive Design

¿Cómo funciona el responsive web design?• En lugar de construir una website para cada tipo de dispositivo

(smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).

• Es fácil de manejar ya que solamente trabajas sobre una website y los resultados serán uniformes en todas las plataformas sin distorsiones en las imágenes o texto. Además, ahorras tiempo y dinero al desarrollar una vez y un pago único de hosting.

Page 9: WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo

¿Qué pasa con el posicionamiento web?• Una web creada con responsive web design mejora el SEO, las búsquedas a través de

dispositivos móviles son diferente a las que se realizan desde un ordenador de escritorio por lo que tener una versión móvil de tu web es bueno, tener una con responsive design es aún mejor, sobre todo porque cuantos más dispositivos alcances a cubrir más tráfico generará tu web. Tan simple como eso. Además, buscadores como Google ya están priorizando en el ránking a las websites móviles en búsquedas móviles, como es lógico.

• La alternativa es hacerlo tú mismo, para ello existe una nueva propuesta en editores web, esta vez, responsive: Zeendo. Se trata de una plataforma basada en cloud computing, de forma que todo el trabajo está siempre online y se puede continuar el proceso de edición de la nueva web sin perder ningún cambio, sin tener que descargar ningún tipo de software, y así, desde cualquier lugar, a cualquier hora. Pero sin duda, lo más importante es que está concebido para cualquier usuario sin conocimientos de programación.

¿Cómo funcionan los editores web para responsive design?• A partir de plantillas personalizables creadas en HTML5 y CSS3 con fluid grids que re-colocan los

elementos de la web, dependiendo del espacio disponible según la resolución de pantalla. De esta forma discriminan elementos, texto, pestañas del menú, reducen las imágenes de manera que la navegación sea fluida, intuitiva y se enriquezca la experiencia de usuario.