diseño web: qué necesitamos para empezar?
DESCRIPTION
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.TRANSCRIPT
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