Diseño de Sitios Web y Maquetación HTML

CLASE 1

Introducción al HTML

Breve reseña histórica

¿Qué es lenguaje HTML?

Contenido y organización

Reglas y sintaxis en HTML

Estructura básica en HTML

Propiedades generales de los elementos y objetos en HTML

Etiquetas básicas para comenzar a maquetar

Uso de CSS Hojas de Estilo en Cascada (Cascading Style Sheets) #1

Identificando elementos para posicionar con CSS, usos de Class e Id

Introducción a las Hojas de Estilo en Cascada o CSS. Porqué separar la presentación del contenido en HTML vía CSS

Sintaxis básica de código CSS. Selector, propiedad, valor

 

CLASE 2

¿Qué es el DOM?

Extensiones para los navegadores que ayudan a visualizar del DOM, el código HTML, CSS y Javascript

Las herramientas más comunes para analizar, inspeccionar, monitorizar y depurar el contenido Web, cómo utilizarlas y por qué son una herramienta indispensable para la maquetación

Qué es una página dinámica y cómo generar una maqueta optimizada para la carga de contenido

Formato, manipulación de Texto (Fonts) en HTML

Pensando en las Tipografías de nuestros proyectos Web. Safe Fonts. Web Fonts.

 

CLASE 3

Elementos HTML (Tags). Propiedades y usos #1

Manejo de Listas ordenadas y no ordenadas. Tags OL / UL, por qué son inevitables a la hora de manejar contenido dinámico

Utilizando imágenes en la Web. Tag IMG

Característica de los distintos formatos: JPEG, GIF, PNG Transparente

Uso básico de Photoshop para maquetación: uso de slices, herramientas de recorte, cómo exportar imágenes para la optimización de las páginas

Insertando imágenes en las páginas

Resolución de imágenes para diseño Web

Manipulando las propiedades de las imágenes

Combinado el texto y las imágenes, introducción a la propiedad Float

Utilización de background

 

CLASE 4

Elementos HTML (Tags). Propiedades y usos #2

Utilización de vínculos (Links). Tag A

Enlazando a páginas internas y externas

Vínculos absolutos y relativos

Utilizando imágenes como links

Utilizando anclajes (Anchors)

Definiendo el destino de un link (Target)

 

CLASE 5

Empezando a pensar globalmente: de lo general a lo particular

Cómo empezar a estructurar nuestra página para que sea semántica y optimizada para buscadores

Herramientas para validar el código HTML

Reglas concretas para generar código válido

Importancia del orden de los elementos y cómo organizarlos dentro de la página

Importancia sobre el orden de las carpetas para SEO

 

CLASE 6

Uso de CSS Hojas de Estilo en Cascada (Cascading Style Sheets) #2

Usos de Hojas de Estilo. Internas, Externas e Inline

Aplicando estilo a elementos HTML vía Clases (class), IDs y TAGs

Definiendo estilos para texto.

Manipulando las propiedades del texto: color, fondo, alineación, espaciado interlinea e interletra, etc

Definiendo estilos para links. Manipulando links vía CSS. Clases y pseudoclases. Qué pseudoclases son compatibles con todos los navegadores

Definiendo estilos para backgrounds

Cuándo utilizar tablas y cómo darles estilo

 

 

CLASE 7

Uso de CSS para estructurar mi sitio (diseño Tableless)

Aplicando formato a la estructura de las páginas.

El elemento DIV. Estructurando una página con columnas utilizando DIV y CSS (diseño sin Tablas)

Definiendo estilos para bloques de elementos HTML. Estructura Semántica

Propiedades de los elementos HTML: bordes, alineación, color, fondo, margen externo, margen interno, etc.

Las propiedades Float, Clear, Margin y Padding, cómo usarlas combinadas y que se vean bien en todos los navegadores. Cuáles son los errores más comunes al usar estas propiedades y cómo las interpretan los distintos navegadores.

 

CLASE 8

Del PSD al HTML Definiendo la estructura desde la maqueta. Photoshop CS4

Diseñando para Web. Elementos y criterios básicos. Organización y ubicación de los objetos

Cuestiones a tener en cuenta cuando nos entregan un PSD

Errores comunes en los PSD.

Como transformamos un PSD en lenguaje HTML

Compresión de imágenes y diferencias entre los distintos formatos aplicados a un diseño específico

 

CLASE 9

Manejo de formatos multimedia soportados por los navegadores. Audio y Video online

Masivización del uso del video online de la mano de Youtube (on demand), Vimeo (streaming), etc. Como trabajar con contenido online multimedia en nuestra Web.

Utilización de Flash Video Encoder, compresiones y relación tamaño/calidad. Uso de video en nuestras páginas Web alojados en nuestro servidor

Elementos multimedia en HTML (Mp3, Wmv, Mov, Object, etc).

 

CLASE 10

Introducción al uso de Framework jQuery

Agregando interactividad a las páginas sin necesidad de elementos Flash

Usos de Plugins (librerías) JavaScript en HTML para mejorar navegabilidad

Introducción al uso de jQuery

Aplicando Plugins jQuery de Slides, Lightbox y Accordion

 

CLASE 11

CSS en formularios

Aplicando estilo a formularios. Tag FORM

Definiendo estilos para FORM TAGS (Text field, Text Area, Checkboxes, Radio Buttons, Drop down menu, etc.)

FTP para publicar páginas web

Registro del dominio para nuestro proyecto

Servidor y hosting ¿Qué configuración necesito para mi proyecto?

Utilizando FTP para publicar las páginas

Reuniendo la información necesaria para publicar las páginas

Publicación de nuestro sitio terminado

Uso de clientes FTP populares (File Zilla y Dreamweaver)

 

CLASE 12

Práctica de maquetado y repaso general

 

Repaso general de los conceptos principales vertidos en el curso realizando un proyecto de Maquetación de PSD a HTML con proyecto de la cátedra.

- Presentar DNI (original y fotocopia).

- No es necesario secundario completo.

 

- Horario de Inscripción: Lunes a Viernes de 9 a 19 hs

• Nueva Escuela de Diseño y Comunicación Sede Principal | Av. Callao 67, entre Av. Rivadavia y Bartolomé Mitre.