TecnologĂa Internet
Principios de diseĂąo para internet
resoluciones y dispositivos
ResoluciĂłn 30.5 centĂmetros = 12 pulgadas 1024 pixeles
38 centĂmetros = 15 pulgadas 1280 pixeles
lg
u 9p
1
s
a ad
1280 15 = 85.3 puntos por pulgada 1280 12 = 85.3 puntos por pulgada
NO HAy una mejor resolución para diseñar sitios web Lo que si hay son parámetros de usabilidad por los cuales guiarse a la hora de diseñar, pero lo principal es adaptar la resolución del sitio, pensando en el target de gente que usará el sitio. Estadísticas de Resolución de Pantalla Actualizadas de los Usuarios de Internet para 2016
LA RESOLUCIÓN DE PANTALLA Y EL ANCHO DE LA WEB La resolución óptima de tu página web 800, 1024, 1280. Con la aparición de los tablets y los smartphones el abanico de tamaños de pantalla se ha expandido considerablemente, apareciendo muchísimas dimensiones diferentes y rebajando incluso los porcentajes de los formatos más estándares.
Diseño responsive El diseño web responsive o diseño web adaptativo es una técnica de diseño web que prioriza la correcta visualización de una misma página en en distintos dispositivos: Desde ordenadores de escritorio a tablets o móviles. El diseño responsive se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo. No existe una resolución que sea dominante en el desarrollo web, por lo que nos deberemos de basar en las estadísticas y los requerimientos de nuestro proyecto. Deberemos de determinar nuestro “target” para saber cuales van a ser las resoluciones a las que preparar el diseño. Sin embargo a la hora de trabajar con responsive sí existen nas resoluciones “límite” que establecen la forma de concebir los diseños para los distintos tipos de dispositivos. Movil pequeño: (QVGA) 320x240px Móvil: (WVGA) 480x800px Tablet: 768x1024 / 768x1280px Ordenador pequeño: 1024x768px (960px) Ordenador doméstico: Más de 1280px
Diseño responsive (V) Es IMPOSIBLE realizar el testeo de una aplicación web móvil dado que no es posible tener todos los dispositivos reales para realizar pruebas. Existen webs más o menos fiables para realizar dichas pruebas. http://responsivetest.net/ http://mobiletest.me/ Algunos ejemplos de diseños adaptables o de ideas para realizar una página adaptable: http://mediaqueri.es/ http://www.awwwards.com/
RECURSOS Imagen
Texto
Hipervínculos Videos y animación
Sonido
el texto Leer en una pantalla de ordenador no es demasiado cómodo ni recomendable para nuestros ojos.
¿Entonces si necesitamos poner un texto que hacemos? el texto en una página web es un elemento fundamental que al menos debe ocupar el 50% de nuestra atención. Texto como elemento visual y de diseño Objetivo: ser legible longitud de las frases
Contraste: ser legible
Color links: ser legible NOTA: En Jimdo puedes utilizar el editor de estilos predeterminado que permite tener una combinación prestablecida de colore incluido el color del link
el texto Interlineado
Espacio en blanco
Tamaño
Alineación de textos
EL TEXTO Tipografía Títulos: selecciona una fuente que sea diferente al resto, destacada que dé un cierto dinamismo a la página. Párrafos y cuerpo del texto: escoge un tipo de letra que sea fácil de leer, como una sans serif. Menú de navegación: puedes escoger una de las fuentes anteriores o incluso una tercera que no rompa con la armonía del diseño. La longitud de la línea debe ser menor a 70 caracteres - con excepciones, como los blogs. En caso contrario, se pueden utilizar columnas para facilitar la lectura. El contraste entre el fondo y el tipo de letra debe ser suficiente para que se lea correctamente. El espacio en blanco ayuda a descansar la mirada y al mismo tiempo a concentrar la atención de nuestras visitas. Alinear los textos a la derecha es la forma más recomendada para un formato digital. El tamaño correcto de la letra empieza a partir de los 16 px. Pero debes ajustarlo en función del tipo de letra seleccionado. La tipografía debe ser seleccionada para diferenciar títulos, textos y navegación.
las imágenes Formatos: JPG
GIF PNG Mapas de bits
Vectoriales
La resolución: Cantidad de píxeles de la imagen • 300 dpi • 150 dpi • 72 dpi Bits: Bit unidad mínima de información que reconoce una computadora Más bits mayor profundidad de color = mejor imagen mayor peso
las imágenes Color: RGB Colores Luz
HEXADECIMALES Códigos
Función: Que se vea bien y que pese poco Debe ser óptima Color
Bits
Formato
La correcta combinación de estos aspectos son importantes para la optimización de la imagen
video animación y sonido • El sonido es un elemento multimedia. • Las animaciones permiten expresar algunos procesos. • El video es un elemento multimedia muy bueno para mostrar hechos reales, captando imagen y sonido a la vez Ejemplo: YOUTUBE – VIMEO-GOOGLEVIDEO- YAHOO-MYSPACE MPEG1-MPEG2-MPEG3 Calidad de imagen, compatibilidad Más utilizados y aceptados por diferentes aplicaciones Web, y diferentes redes sociales Mpeg. Es uno de los estándares de compresión de audio/video más utilizados.
Mayor calidad, mayor ancho de banda proporciona 720×486 pixeles de resolución, es decir, calidad TV.
MPEG-4
Calidad de video CD-ROM. Lentos, velocidad de transferencia limitada (1.5 Mbits) , resolución de 352×240.
MPEG-2
MPEG-1
Ventajas respecto a compatibilidad, compresión y calidad de la imagen. Lo soportan sitios como youtube, vimeo Tiene características de MPEG-1 y MPEG-2, expande MPEG-1 para soportar “objetos”audio/vídeo,contenid o 3D,
FLV. Desarrollado por Adobe permite ser incrustado en archivos flash (.swf) para presentaciones y aplicaciones multimedia. Es uno de los más soportados por sitios como: • YouTube • Antiguo Google Video • Reuters.com • Yahoo! Video • MySpace.