La presente es una recopilación del Ier Cap. del libro Learning Web Design (O\'Reilly), que explica lo que se necesita saber para empezar un diseño web.

1. Curso de Diseño Web Karla Arosemena

2. Un poco de teoría…

3. Qué necesito aprender? Diseño web incluye las siguientes disciplinas Diseño Gráfico Diseño de Información / Arquitectura de Información Diseño de Interface HTML, hojas de estilo y producción gráfica Scripting y programación Multimedia

4. Qué necesito aprender? Diseño Gráfico El Web es un medio visual, por lo que requiere poner atención a la presentación y al diseño. Aspectos que se consideran Gráficas Fuente Colores Estructuras Adobe Photoshop

5. Qué necesito aprender? Diseño de Interface: cómo funciona la página? Conceptos Usabilidad: qué tan fácil los visitantes pueden lograr sus metas al usar el sitio web. Botones Links Navegación Dispositivos de presentación Organización

6. Qué necesito aprender? Producción de los documentos HTML y CSS Programación y Scripts Funcionalidades avanzadas Formularios Contenido dinámico Interacción Multimedia Sonido, vídeo, animación, Flash

7. WWWConsortium W3C Organización que regula el desarrollo de tecnologías web. Fundada en 1994 por Tim Berners-Lee Ve todo lo concerniente al protocolo HTTP, al desarrollo del HTML, y otra docenas de tecnologías y protocolos.

8. HTML/XHTML HTML: lenguaje usado para crear documentos web. No es un lenguaje de programación, sino de marcado *markup* XHTML: versión actualizada de HTML. En esencia el mismo lenguaje pero con reglas de sintaxis más estrictas. Tarea: Leer Cap. 10 (Estándares)

9. CSS -> Cascade Style Sheet Hojas de Estilo: describe cómo quieres que se vea el contenido de la pág. web (es decir, define la presentación del sitio web). Es conocido como el estándar para formatear texto y estructura de páginas. Provee métodos para controlar la apariencia de los documentos no solo en navegadores, sino también en otros medios, como impresora, móviles o pda’s.

10. JavaScript/Dom scripting No está relacionado con JAVA… Es un lenguaje para programar pequeños programas conocidos como “scripts”. Ej.: Validar entradas válidas en formularios Cambiar elementos de estilo en un sitio completo Recordar información sobre el usuario al navegador DOM: DocumentObjectModel Se refiere a los elementos web estandarizados que pueden ser accedidos y manipulados a través de JavaScript.

11. Programación del lado Servidor Algunos sitios son colecciones de páginas HTML y archivos de imágenes. Otros son sitios web comerciales poseen funcionalidades avanzadas como manejo de formularios, páginas web creadas dinámicamente, carros de compra, sistemas de manejo de contenido (cms), bases de datos, entre otros. Para esto se requiere lenguajes de programación para web: CGI Scripts (C+, Perl, Python), JSPs, PHP, VB.Net, ASP.Net, RubyonRails.

12. XML: Extensible MarkupLanguage No es un lenguaje específico, si no un conjunto de reglas para crear lenguajes de marcado. Se utiliza mucho para compartir data entre aplicaciones. Ej.: RSS Ej.: <receta_abuela> <ingredientes> <ingr1>tomate</ingr1> . . . </ingredientes> <instrucciones> </instrucciones> </receta_abuela>

13. Frontend’s y Backend’s Frontend Se refiere a todos los aspectos dentro del proceso de diseño que aparece o se relaciona directamente con el explorador o navegador. Tareas: Diseño gráfico Diseño de interface Diseño de información Producción del sitio (html, hojas de estilo y javascript) Backend Se refiere a los programas y scripts que trabajan del lado del servidor que permiten crear página dinámicas e interactivas. Tareas Diseño de información *en el servidor Procesar Formularios Procesar Bases de datos CMS Aplicaciones del lado servidor que usan Perl/CGI, PHP, ASP, JSP, RubyonRails, Java y otros lenguajes de programación.

14. AJAX: AsynchronousJavaScript and XML Nueva técnica para crear aplicaciones web interactivas. Permite cambiar instantáneamente contenido de una pág. web sin actualizar la pág. completa. Como aplicaciones de escritorio. RIA>Rich Internet Applications Copiar / Pegar / Mover

15. Flash Ventajas Gráfica de vectores Streaming Películas o animaciones empiezan a desplegarse rápidamente según se va descargando. Action Script: permite agregar comportamientos e interacción avanzada. Plug in altamente comercializado. Desventajas Debido a que requiere un plug in, las persona tienen que tener una idea de lo que significa. Software para crear Flash no es fácil de aprender. El contenido puede perderse en navegadores no gráficos.

16. Manos a la obra

17. Qué necesitamos? Además de una computadora con buenos recursos… Editor HTML Lo más optimo son los editores WYSIWYG (Dreamweaver) Servidor de prueba > XAMPP Apache: para almacenar pag. web. Mysql: para manejo de BD Servidor PHP: para correr aplicaciones PHP