DISEÑO WEB i

DISEÑO WEB I

Sesión 2

Maestro. ISI Jéber G. Martínez Ríos

Universo Web• ¿Qué es Internet?

• Nace en la Guerra Fría, en los 60s.• ARPANET• Hello World!• Surgimiento de ISPs en los 80s.• Es el nombre propio con el que se refiere a una red

descentralizada de computadoras interconectadas en el mundo.

Servidores• Servers+Clients. Servidores+Clientes• IP. Internet Protocol.• Domains. Dominios.• Web Hosting

Navegadores• Browsers o Navegadores.• W3C y los engorrosos estándares.• Internet Explorer 6 (el peor de todos en la historia).

• Otras opciones como Google Chrome, Mozilla Firefox, Opera y otros.

• También los móviles y sistemas de videojuegos tienen sus browsers.

Terminología 101 - Sitios• Sitio/Portal/Micrositios• URL• Homepage• SEO

Diseño Web• Evolución de la Web• Paradigma diferente a Diseño Gráfico• Layout• Rollovers• Resolución de imagen• Resolución de pantalla• Sitios Fijos VS Sitios Líquidos

Diseño Web• Resolución de pantalla

• 800x600• 1024x768• 1366x768• 1280x1024• 1280x800

Diseño Responsivo• El diseño responsivo es un diseño que responde al tamaño del dispositivo desde el que se está visualizando la web, adaptando las dimensiones del contenido y mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte.

Diseño Responsivo

Diseño Responsivo

• La tendencia en el mundo de las páginas web es que el usuario cada vez más acceda desde dispositivos móviles como teléfonos o tablets.

• Las estadísticas de 2012 arrojan un porcentaje esclarecedor: el 40% de los usuarios que visitaron webs el año pasado lo hicieron desde un dispositivo móvil y un 25% de las compras en internet se realizan ya desde el teléfono.

Diseño ResponsivoAplicando el diseño responsivo desde la creación de una nueva web se consiguen varios objetivos. • Se reducen costes de desarrollo.

• Baja el rebote de usuarios.

• Se mejoran los resultados de conversión.

• Permite desarrollar una estrategia de marketing sobre la web unificada para todos los soportes, haciendo que esta sea más sólida y mejorando su efectividad.

Usabilidad• La usabilidad es la cualidad que tiene un producto o

servicio para ser usado con facilidad; el término se utiliza para referirse a la medida en la que un dispositivo, un sistema o una aplicación resultan fáciles de usar.

• La usabilidad es un atributo que está determinado por múltiples factores, como son la interfaz de usuario, los tipos de usuarios, las necesidades específicas de uso y el contexto de interacción.

Usabilidad• Con frecuencia se emplea el término de usabilidad para referirse

a los métodos aplicados en el diseño la experiencia del usuario.

• Cabe señalar que aunque en las dos últimas décadas Internet cambió en forma significativa, la definición básica que hizo el experto Jakob Nielsen*, sigue vigente:

• “La usabilidad es un atributo relacionado con la facilidad de uso. Más específicamente, se refiere a la rapidez con que se puede aprender a utilizar algo, la eficiencia al utilizarlo, cuán memorable es, cuál es su grado de propensión al error y cuánto le gusta a los usuarios”.

Accesibilidad• Se refiere a qué tan accesible es el sitio para

personas con discapacidades que también utilizan la Web, como personas ciegas, con problemas de artritis, o que no ven bien los colores.

Analytics• Significa los datos que arroja su sitio con respecto a

sus visitantes, qué navegador utilizan, resolución de pantalla, cuánto tiempo pasan en su sitio y otra información que en la buena teoría, le debe de ayudar para ir adoptando su estrategia Web.

• El programa que más se usa es Google Analytics.

Programación• HTML• CSS• JavaScript

• jQuery• MooTools

• PHP• ASP• MySQL

Java y Javascript• Java: Lenguaje de programación de alto nivel; nivel

alto significa que el lenguaje se ejecuta por medio de un compilador que es el que interpreta entre lo que un programador "escribe" como código y lo que la máquina entiende como lenguaje máquina.

• JavaScript: Lenguaje de scripts influenciado en Java, Perl y otros. Tiene un gran uso en la Web para efectos de interactividad.

jQuery• Es una librería de JavaScript que simplifica el

scripting en HTML y permite manipular el CSS directamente; actualmente el 30% de los 10,000 sitios más populares del mundo lo utilizan y dicho número va en aumento.

• Es sumamente dinámico, interactivo y fácil de implementar y existe un arsenal de tutoriales u ejemplos por toda la Web de manera gratuita.

Triada Perfecta• HTMLProvee Estructura

• CSSDa Diseño

• JavaScriptDa Funcionalidad

…• Blog. Para checar…http://www.menteinteractiva.com/school

• Mi email personal es:correo@menteinteractiva.com