Curso de Diseo Web

Karla Arosemena

UN POCO DE TEORA

Qu necesito aprender?

Diseo web incluye las siguientes disciplinas

Diseo Grfico Diseo de Informacin / Arquitectura de Informacin Diseo de Interface HTML, hojas de estilo y produccin grfica Scripting y programacin Multimedia

Qu necesito aprender?

Diseo Grfico
El Web es un medio visual, por lo que requiere poner atencin a la presentacin y al diseo. Aspectos que se consideran

Grficas Fuente Colores Estructuras

Adobe Photoshop

Qu necesito aprender?

Diseo de Interface: cmo funciona la pgina?

Conceptos
Usabilidad:

qu tan fcil los visitantes pueden lograr sus metas al usar el sitio web.
Botones Links Navegacin Dispositivos de presentacin Organizacin

Qu necesito aprender?

Produccin de los documentos

HTML y CSS Funcionalidades avanzadas

Formularios
Contenido

Programacin y Scripts

dinmico Interaccin

Multimedia

Sonido, vdeo, animacin, Flash

WWW Consortium

W3C

Organizacin que regula el desarrollo de tecnologas web.

Fundada

en 1994 por Tim Berners-Lee

Ve todo lo concerniente al protocolo HTTP, al desarrollo del HTML, y otra docenas de tecnologas y protocolos.

HTML/XHTML

HTML: lenguaje usado para crear documentos web.

No es un lenguaje de programacin, sino de marcado *markup*

XHTML: versin actualizada de HTML. En esencia el mismo lenguaje pero con reglas de sintaxis ms estrictas. Tarea: Leer Cap. 10 (Estndares)

CSS -> Cascade Style Sheet

Hojas de Estilo: describe cmo quieres que se vea el contenido de la pg. web (es decir, define la presentacin del sitio web).
Es conocido como el estndar para formatear texto y estructura de pginas. Provee mtodos para controlar la apariencia de los documentos no solo en navegadores, sino tambin en otros medios, como impresora, mviles o pdas.

JavaScript/Dom scripting

No est relacionado con JAVA Es un lenguaje para programar pequeos programas conocidos como scripts.

Ej.:

Validar entradas vlidas en formularios Cambiar elementos de estilo en un sitio completo Recordar informacin sobre el usuario al navegador

DOM: Document Object Model

Se refiere a los elementos web estandarizados que pueden ser accedidos y manipulados a travs de JavaScript.

Programacin del lado Servidor

Algunos sitios son colecciones de pginas HTML y archivos de imgenes. Otros son sitios web comerciales poseen funcionalidades avanzadas como manejo de formularios, pginas web creadas dinmicamente, carros de compra, sistemas de manejo de contenido (cms), bases de datos, entre otros.

Para esto se requiere lenguajes de programacin para web: CGI Scripts (C+, Perl, Python), JSPs, PHP, VB.Net, ASP.Net, Ruby on Rails.

XML: Extensible Markup Language

No es un lenguaje especfico, 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>

Frontends y Backends
Frontend

Backend

Se refiere a todos los aspectos dentro del proceso de diseo que aparece o se relaciona directamente con el explorador o navegador. Tareas: Diseo grfico Diseo de interface Diseo de informacin Produccin del sitio (html, hojas de estilo y javascript)

Se refiere a los programas y scripts que trabajan del lado del servidor que permiten crear pgina dinmicas e interactivas. Tareas Diseo de informacin *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 programacin.

AJAX: Asynchronous JavaScript and XML

Nueva tcnica para crear aplicaciones web interactivas. Permite cambiar instantneamente contenido de una pg. web sin actualizar la pg. completa.

Como aplicaciones de escritorio. RIA>Rich Internet Applications

Copiar

/ Pegar / Mover

Flash

Ventajas

Desventajas

Grfica de vectores Streaming

Pelculas o animaciones empiezan a desplegarse rpidamente segn se va descargando. Action Script: permite agregar comportamientos e interaccin avanzada. Plug in altamente comercializado.

Debido a que requiere un plug in, las persona tienen que tener una idea de lo que significa. Software para crear Flash no es fcil de aprender. El contenido puede perderse en navegadores no grficos.

MANOS A LA OBRA

Qu necesitamos?

Adems de una computadora con buenos recursos

Editor HTML
Lo

ms 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