Diseño de Sitios Web y Maquetación HTML

Nueva Escuela de Diseño y Comunicación

Curso y Capacitación
Duración 3 meses
Presencial

Recibir más información

(*) Campos obligatorios
Al hacer click en Enviar, acepto los Términos y Condiciones

OBJETIVO:

El objetivo principal del curso es la capacitación en el lenguaje HTML, diseñando páginas tableless (sin tablas), con elementos DIVs y CSS (Cascading Style Sheets, Hojas de Estilo en Cascada). En la actualidad CSS es imprescindible para todos los profesionales que quieran desarrollarse en el campo del diseño web.

DIRIGIDO A:

A toda aquella persona que desee aprender a diseñar HTML semántico, generando código válido y compatible con los exploradores standards del mercado internacional. Incorporar a su proyecto trabajo con video online y archivos multimedia. Dar los primeros pasos en el uso del framework jQuery para lograr mayor impacto. Gestionar su propio sitio Web, desde el registro del dominio, subidas vía FTP al servidor, manejo y control de casillas de emails y demás herramientas del servicio de Hosting.

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.)