UNIDAD I: INTRODUCCIÓN AL DISEÑO WEB. DESARROLLO DE ENTORNOS WEB ING. EDWIN CAYO M. ¿Qué ES EL DISEÑO WEB ? Diseño Web Sitios Web Actividad Mantenimiento Planificación Implementación Diseño Es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web. No es simplemente la implementación del diseño convencional ya que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y experiencia de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la información; interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda. A menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del proceso de diseño, aunque existen algunos diseñadores independientes que trabajan solos. NACIMIENTO DEL DISEÑO WEB El primer servidor web fue puesto en línea en agosto de 1991, no era tan rápido, sin embargo las transmisión de datos e información entre computadoras era bastante eficiente, lo que lo llevó a ser utilizado por científicos, médicos, educadores, el gobierno y principalmente militares para transferir información eficiente dentro de un grupo especificado. En los años 90 fué presentado al público, Mosaic, un programa explorador gratuito, Mosaic fué el primer navegador comercial que permitió el acceso del público a los contenidos en línea. Fué diseñado por Marc Andeesen y Eric Bina, LENGUAJES DE PROGRAMACIÓN HTML Es un lenguaje estático para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup Language, en español Lenguaje de Marcas Hipertextuales). Desarrollado por el World Wide Web Consortium (W3C). Los archivos pueden tener las extensiones (htm, html). Ventajas Sencillo que permite describir hipertexto. Texto presentado de forma estructurada y agradable. Despliegue rápido. Lenguaje de fácil aprendizaje. Lo admiten todos los exploradores. Desventajas Lenguaje estático. La interpretación de cada navegador puede ser diferente. El diseño es más lento. SINTAXIS <html> (Inicio del documento HTML) <head> ( Cabecera ) </head> <body> ( Cuerpo ) </body> </html> <b> </b> Negrita <p> </p> Definir parrafo <etiqueta> Apertura de la etiqueta </etiqueta> Cierre de la etiqueta LENGUAJES DE PROGRAMACIÓN JAVASCRIPT Fue creado por Communications. Brendan Eich en la empresa Netscape Ventajas Lenguaje de scripting seguro y fiable. Los script tienen capacidades limitadas, por razones de seguridad. Desventajas Código visible por cualquier usuario. El código debe descargarse completamente. Puede poner en riesgo la seguridad del sitio SINTAXIS <script type="text/javascript"> ... </script> LENGUAJES DE PROGRAMACIÓN PHP Surgió en 1995, desarrollado por PHP Group. Ventajas Muy fácil de aprender. Se caracteriza por ser un lenguaje muy rápido. Soporta en cierta medida la orientación a objeto. Clases y herencia. Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras. Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. Desventajas Se necesita instalar un servidor web. SINTAXIS <? $mensaje = “Hola”; echo $mensaje; ?> También <?php $mensaje = “Hola”; echo $mensaje; ?> HERRAMIENTAS A UTILIZAR Sublime Text Editor de HTML, CCS, PHP Creadores de paginas Web (Opcional) Dreamweaver: Creador de paginas web muy potente e intuitivo Navegador Firefox / Chrome MAPAS DE NAVEGACIÓN Son los que proporcionan una representación esquemática de la estructura del hipertexto, indicando los principales conceptos incluidos en el espacio de la información y las interrelaciones que existen entre ellos. Un mapa es, por ejemplo, una representación completa (o resumida) del sitio. ACTIVIDAD Investigar como planificar y diseñar un sitio web