Que es Diseño web

24
¿QUÉ ES EL DISEÑO WEB?

Transcript of Que es Diseño web

Page 1: Que es Diseño web

¿QUÉ ES EL DISEÑO WEB?

Page 2: Que es Diseño web

INTRODUCCIÓNEl diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Se lo considera dentro del Diseño Multimedial. El diseño de una página Web tiene la esencial misión de vincular al usuario con el vasto mundo informativo, de un modo agradable y eficiente.  Los contenidos no estandarizados dentro del Web y las facilidades que brinda la hipermedia permiten, además de acceder a la información de un modo entretenido, satisfacer los requerimientos y gustos de los más disímiles usuarios.

Page 3: Que es Diseño web

INTRODUCCIÓNEl Web debe diseñarse y programarse subordinando el software al control del usuario, a sus requerimientos organizativos y a sus niveles cognoscitivos. Las herramientas a utilizar (imágenes estáticas y animadas, iconos, vínculos, etc.) por el usuario deben ser claras y fáciles de manejar.  Ante el cúmulo de imágenes con que se comunica el 3W se hace necesaria la atención al diseño informacional. Existen normas en el diseño de las interfaces Web que resultan menospreciadas: el uso correcto del lenguaje, el valor semántico de títulos de Páginas Iníciales que en ocasiones no tienen correspondencia con su significado, así como la relación que debe tener el texto o icono vinculado con el significado que representa.  Deficiencias en este sentido crean ambigüedades en la información presentada. Es esencial tener un criterio de diseño antes de comenzar a crear un sitio, esto permitirá ajustarse a las necesidades informativas y comunicativas del que navegará por las páginas.

Page 4: Que es Diseño web

PROBLEMACon la evolución de la web 2.0 a los diseños web, no sólo se les pide que tengan un diseño atractivo, sino que su código tenga la calidad suficiente para aumentar la accesibilidad de la web, su promoción en buscadores y facilitar su usabilidad.

OBJETIVO

Se le dotará al alumno de una serie de recursos eminentemente prácticos y técnica de diseño de última generación para que pueda dar formato a cualquier elemento HTML de una página web con la mínima injerencia en su código y, de esta forma, aumentar la accesibilidad de esa web, poder mejorar fácilmente su promoción en buscadores y facilitar la gestión posterior de su código. Todo ello sin la necesidad de renunciar a un diseño elaborado y de calidad que sea atractivo para el visitante.

Page 5: Que es Diseño web

CONTENIDOSCAPITULO I.- Introducción al Diseño Web. CAPITULO II.- Importancia del Diseño WebCAPITULO III.- Estándares para la webCAPITULO IV.- Dreamweaver CS4

EVALUACIÓNFRECUENTE PARCIAL FINAL

Objetivos Específicosen actividades practicas

Objetivos Particularesal finalizar la unidad

Objetivos Generalesal finalizar la materia

Practicas Control de

actividades Trabajos extra clase Lecciones

Pruebas parciales Sustentación de

trabajos prácticos.

Examen teórico Funcionalidad del

proyecto final. Exposición del

proyecto.

Page 6: Que es Diseño web

CONTENIDOSCAPITULO I.- Introducción al Diseño Web. CAPITULO II.- Importancia del Diseño WebCAPITULO III.- Estándares para la webCAPITULO IV.- Dreamweaver CS6

EVALUACIÓNCAPITULOS I, II, III

(9 puntos)CAPITULO IV

(10 puntos)PROYECTO FINAL

(9 puntos) Practicas

4 Exposiciones

4 Participación

4 Trabajos en clase

4 Prueba

4 Asistencia

1

Sustentación de trabajos prácticos. 4

Trabajo en grupo 4

Exposiciones 4

Participación 4

Trabajos en clase 4

Prueba 5

Asistencia 1

Presentación Vinculación con la

sociedad. Solución de

problemas reales. Exposición del

proyecto.

Page 7: Que es Diseño web

INTERNETInternet ha trasformado las comunicaciones absolutas y hoy forma parte de la mayoría de negocios en el mundo entero.

Las primeras páginas Web tal como la conocemos hoy, aparecieron hace aproximadamente 20 años atrás, con la publicación de un documento acerca de partículas físicas del científico Paul Kunz de Stanford.

De manera resumida la cronología de Internet puede ser la siguiente:

1990: nace el primer proveedor comercial de acceso a Internet a través de discado, denominado "The World". 1991: Se lanza en el CERN Research Center, la primera World Wide Web, desarrollada por Tim Berners Lee.-Paul Kunz configura un servidor Web en el Stanford Linear Acelerador Center. - Apple Lanza Quick Time, software que posibilita ver películas en todo tipo de computadores, transformándose en estándar de la industria.  

Page 8: Que es Diseño web

INTERNET1994: Linus Torvalds lanza la versión 1.0 del Kernel de Linux. - Marc Andreesen y Jin Clark fundan Netscape Communications. - Nace el comercio electrónico por medio de Internet.- La primera cyber-radio, RTFM, transmite desde Las Vegas. - En Julio se crea el Word Wide Web Consortium (W3C) con el objeto de trabajar en pos de la estandarización de sistemas aplicados a la Web.

1995: Microsoft lanza su browser Internet Exporer, y Windows 95. Real Audio es lanzado al mercado.

1996: comienza la "guerra de los Browser entre Netscape y Microsoft.

1998: Netscape hace público el código fuente de su navegador.   2000: se lanza un masivo ataque hacker contra los sitios mas grandes, incluyendo Yahoo, Amazon y Ebay.   2001: Napster es forzada a suspender su servicio. - Aparecen nuevos dominios: .biz e .info entre otros.

Page 9: Que es Diseño web

COMO FUNCIONA WWWLa red o www de World Wide Web, es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través de Internet, es decir, la web es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro punto de vista, una forma gráfica de explorar Internet.

Como en las demás aplicaciones de Internet hay interacción entre un Cliente y un Servidor: el protocolo de comunicación que se utiliza es el famoso HTTP (Hyper Text Transfer Protocol) y los documentos que se suban a la red deben tener un formato especial llamado HTML (Hyper Text Makeup Language). Los clientes de la red representan la interfaz entre el usuario y el sistema. Las principales funciones que desempeñan son:

-Recibir órdenes del usuario. -Solicitar documentos al Servidor. -Interpretar el formato y presentarlo al autor.

Page 10: Que es Diseño web

COMO FUNCIONA WWWLa web fue creada en 1989 en un instituto de investigación de Suiza.

Es importante saber que web o www no son sinónimo de Internet, la web es un subconjunto de Internet que consiste en páginas a las que se puede acceder usando un navegador. Internet es la red de redes donde reside toda la información. Tanto el correo electrónico, como FTPs, juegos, etc. son parte de Internet, pero no de la Web.

Para buscar hipertexto se utilizan programas llamados buscadores web que recuperan información (llamados documentos o páginas web) de los servidores web y muestran en la pantalla del ordenador de la persona que está buscando la información gráfica, textual o video e incluso audio.

La web se ha convertido en un medio muy popular de publicar información en Internet, y con el desarrollo del protocolo de transferencia segura (secured server protocol (https)), la web es ahora un medio de comercio electrónico donde los consumidores pueden escoger sus productos on-line y realizar sus compras utilizando la información de sus tarjetas bancarias de forma segura.

Page 11: Que es Diseño web

NAVEGADORESNavegadores.- Para poder visualizar todo esto se han creado programas llamados Browser, un nombre que proviene del inglés "to browse", fluir. En castellano hemos adoptado el término "navegadores".

Actualmente existe una competencia entre los navegadores más utilizados que son: Mozilla Firefox, Internet Explorer, Opera, Safari y Google Chrome.

En la guerra y el amor todo vale. Y que mejor ejemplo que el mercado de los navegadores. Los contrincantes no se dan tregua. Versión tras versión, beta tras beta, van mejorando, evolucionando e innovando en todos los aspectos: velocidad, seguridad, rendimiento, funcionalidad, … Para felicidad de nosotros, los usuarios, que cada vez mas tenemos una mejor experiencia en nuestro diario navegar por Internet.

Page 12: Que es Diseño web

El 71% de los usuarios utilizan la última versión disponible de sus navegadores.

Este es un dato muy positivo para las propias compañías creadoras y también para los desarrolladores, que ven así como cada vez más personas están “a la última”, con las facilidades que eso supone a la hora de programar y presentar software para un público más amplio y sin problemas de compatibilidades. Como se puede ver en la gráfica los dos navegadores que presentan un porcentaje más alto de actualización son Google Chrome y Firefox. Esto no es ninguna sorpresa, puesto que ya todos conocemos los mecanismos que ambos presentan para poder ser notificados automáticamente de la existencia de nuevas versiones y de que éstas se actualicen de forma automática.

Como dato curioso destacar que las dos últimas posiciones están reservadas para Safari e Internet Explorer, concretamente los dos únicos navegadores que vienen por defecto con algún sistema operativo. Quizás IE 9 ayude a incrementar ese porcentaje pero mientras tanto seguro que seguirán ocupando el farolillo rojo de esta peculiar clasificación.

Page 13: Que es Diseño web

Fuente: http://gs.statcounter.com/

Page 14: Que es Diseño web

COMO ELEGIR UN NAVEGADOR

RAPIDEZ

FIABILIDAD

SEGURIDAD

INTANGIBLES

Page 15: Que es Diseño web

Lo mejor y lo peor

Lo mejor: Es muy rápido y consume poca memoria. Las páginas web cargan más deprisa y se pueden abrir muchas pestañas a la vez, sin que se agote la memoria del ordenador. Interfaz simple y minimalista. Tras arrancarlo aparece una ventana y ya se puede navegar. Todo lo superfluo se ha eliminado, de modo que hasta los principiantes lo encontrarán fácil de usar. Robusto y seguro. Se pueden hacer varias cosas a la vez, y si una página web «se rompe» no afecta a otras ventanas o pestañas, que continúan funcionando de forma independiente.

Lo peor:

Posibles incompatibilidades debido a que es muy nuevo. Algunas páginas web antiguas pueden no verse correctamente con Chrome, hasta que sus propietarios las arreglen o rediseñen un poco. Extensiones en crecimiento: Al ser un navegador nuevo sus extensiones no llegan a ser la misma cantidad que las de firefox (navegador actualmente con la mayor cantidad de extensiones).

Page 16: Que es Diseño web

Lo mejor y lo peorLo mejor: Gran cantidad de extensiones y plug-ins. Son pequeños programas que amplían las funciones del navegador, desarrollados por programadores independientes.

Literalmente hay cientos y permiten tener un «Firefox a medida». Cumple sobradamente los estándares Web. Es uno de los navegadores más respetuosos con las «reglas de la Web», los lenguajes en que están escritas las páginas de Internet.

Multiplataforma, sirve para cualquier sistema operativo. Las personas que utilizan diversos tipos de ordenadores pueden emplear el mismo navegador en todos ellos.

Lo peor:

Consume demasiada memoria. Si al navegar se abren muchas pestañas o ventanas el rendimiento cae en picado; es un problema pendiente de solucionar en próximas versiones.

Rendimiento y estabilidad. Incluso las versiones «finales» adolecen de cierta inestabilidad que provoca cuelgues y estropicios al visitar ciertos sitios web o forzar un poco su funcionamiento.

Vulnerabilidades, que son rápidamente corregidas. Aunque se descubren a menudo fallos de seguridad, a las 24 horas suele publicarse un parche para resolver el problema.

Page 17: Que es Diseño web

Lo mejor y lo peor

Lo mejor: En velocidad, es uno de los mas recomendados.No recarga la página, cuanto uno retrocede.Buen manejo de pestañas. Cuenta con un cliente IRC (para Chat) interno. Posibilidad de personalizar las hojas de estilo. Sistema de descarga. Cliente de correo electrónico interno. Lector de noticias interno.

Lo peor:

Un poco mas lento en cargar paginas con Flash que otros navegadores. Incompatibilidad con algunas paginas.

Page 18: Que es Diseño web

Lo mejor y lo peor

Lo mejor:

Es el más difundido, todas las webs funcionan correctamente con él. Su

privilegiada posición en el mercado durante años ha hecho que cualquier página

web se compruebe siempre para su funcionamiento en Explorer, porque es el que

usa la mayor parte de los visitantes.

Integración con Windows. Está en la propia naturaleza de Explorer ser parte de

la experiencia del usuario en cualquier momento, de modo que muchas

aplicaciones Windows utilizan partes del navegador para funcionar, creando una

experiencia suave y uniforme.

Extensiones, componentes ActiveX. (ActiveX es una tecnología de Microsoft

para el desarrollo de páginas dinámicas.) Los programadores pueden añadir

funciones a Explorer para realizar diversas tareas especializadas, haciéndolo así

más versátil.

Page 19: Que es Diseño web

Lo mejor y lo peor

Lo peor:

Vulnerabilidades, que tardan en corregirse. Los constantes agujeros de

seguridad de Explorer son ya una tradición, y como promedio tardan unos nueve

días en ser corregidos mediante una revisión o parche.

Pobre gestión de los estándares Web. Tradicionalmente Microsoft ha

«reinventado» los estándares a su conveniencia, de modo que quienes crean las

páginas web han de tratar a Explorer como un si fuera «caso especial», toda una

pérdida de tiempo y recursos.

Ciclo de versiones y revisiones lento. Antiguamente considerado una ventaja,

hoy en día no se entiende que entre versión y versión de un programa de este tipo

transcurran en ocasiones varios años. Esto ha mejorado algo en Explorer 8 y 9.

Page 20: Que es Diseño web

Fuente: http://gs.statcounter.com/

Page 21: Que es Diseño web

Fuente: http://gs.statcounter.com/

Page 22: Que es Diseño web

Conclusiones

Las conclusiones a las que llega el estudio realizado sobre Google Chrome 9, Firefox

3.6 e Internet Explorer 8, ejecutando el test de rendimiento para navegadores

SunSpider JavaScript Benchmark 0.9.1 con cada uno, son que el navegador más

rápido y con mejor accesibilidad de las páginas web es Chrome. En lo referente a

opciones de seguridad y privacidad, extensiones, personalización y modo parental

es Firefox.

Page 24: Que es Diseño web

Tarea

Instalar los 4 navegadores recomendados y realizar un análisis comparativo entre

ellos utilizando las cuatro características vistas en clase para escoger el mejor

navegador, hagan las pruebas necesarias, capturen pantallas y expongan sus

conclusiones, el trabajo será presentado en grupos de 4 integrantes en

formato .PDF