diseño web: qué necesitamos para empezar?

Curso de Diseño WebKarla Arosemena

UN POCO DE TEORÍA…

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

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

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

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

WWW Consortium

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.

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)

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.

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: Document Object Model Se refiere a los elementos web estandarizados

que pueden ser accedidos y manipulados a través de JavaScript.

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, Ruby on Rails.

XML: Extensible Markup Language 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>

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, Ruby on Rails, Java y otros lenguajes de programación.

AJAX: Asynchronous JavaScript 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

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.

MANOS A LA OBRA

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