cabezal
Temario del Curso

VIDEO 1 Duración 5:47
La Historia de Internet
Repasaremos brevemente la historia de la Internet. Conoceremos a Tim Berners Lee y sus principales aportes a nuestra web moderna. Los estándares del futuro HTML + CSS + JavaScript. Dónde está Flash, y el futuro de una web inclusiva.

VIDEO 2 Duración 6:45
Entrando en el lenguaje

Los lenguajes HTML y CSS desde cero. Para qué sirven y cuál es su función. Las partes de un documento para la Web. Los Selectores, qué son y para qué sirven.

VIDEO 3 Duración 9:29
Formatos, Navegadores y Trabajo
Los formatos de imágenes para trabajar en la Web, modo y resolución. Todo lo que debemos conocer sobre navegadores actuales, y cómo construir un Sitio Web que resulte efectivo.

VIDEO 4 Duración 5:27
Diseñando nuestro Sitio Web
Comenzamos a estructurar el diseño de nuestro Sitio Web dentro de un programa de diseño. Tomaremos como referencia una imagen de 980px de ancho. Construiremos nuestro sitio pensando en crear diferentes IDs para identificar cada sector.

VIDEO 5 Duración 7:31
El entorno de trabajo
Conocemos la interfaz de Dreamweaver. Escribiremos los primeros textos de prueba para ver como las vistas de Código y Diseño trabajan al unísono.

VIDEO 6 Duración 5:01
Flujo natural y elementos Inline y Block
Aprendemos sobre el flujo natural del documento HTML y los tipos de elementos que pueden encontrarse, Inline y Block.

VIDEO 7 Duración 8:27
Creando una Clase
Aprendemos como crear una clase y otorgarle a los textos un tamaño color y tipografía. Además veremos rápidamente la ventana de Definición de Regla desde donde estableceremos las reglas de CSS para nuestro documento.

VIDEO 8 Duración 4:43
Creando un ID
Aprendemos como crear un ID, el tipo de selector que nos servirá para establecer los diferentes sectores de nuestra página. Cada ID sólo puede ser utilizado una vez dentro del documento HTML.

VIDEO 9 Duración 2:31
Etiquetas HTML
Conocemos como modificar las etiquetas estándar que forman parte del lenguaje HTML. Estas etiquetas ya tienen características estéticas definidas por defecto, pero podremos modificarlas mediante reglas de CSS.

VIDEO 10 Duración 3:16
Creando un Compuesto
Este tipo de selector nos permite modificar las características estéticas de una etiqueta que se encuentra dentro de otra. Su uso será imprescindible cuando trabajemos los estilos del menú de navegación.

VIDEO 11 Duración 7:20
La propiedad Float
Esta elegante propiedad nos permite sacar a nuestros elementos del flujo natural del documento, haciéndolos flotar a la izquierda o a la derecha de su elemento contenedor. El manejo de esta propiedad requiere de bastante práctica, así que...¡a no desesperar!

VIDEO 12 Duración 4:08
Margin y Padding
Estas propiedades nos permiten darle rellenos y márgenes a nuestros elementos. No debemos olvidar que los valores que le asignemos, se sumarán al alto y al ancho que nuestro elemento ya tenga establecido.

VIDEO 13 Duración 4:50
Fondos
Vemos las posibilidades de enriquecer nuestra página con imágenes de fondo. De la misma manera que establecemos fondos para el "body", podremos establecer luego fondos para los distintos elementos contenedores de nuestra página.

VIDEO 14 Duración 6:29
Imágenes
Conocemos las formas de incorporar una imagen a nuestra página, como fondo de un contenedor o insertada dentro del código. Las precauciones que debemos tomar al modificarla externamente, y la creación de una zona activa.

VIDEO 15 Duración 9:24
Creando un Menú
Creamos nuestro primer menú en HTML. Veremos como convertir texto en botones y darle mediante reglas de CSS los estilos que queremos a los diferentes estadíos.

VIDEO 16 Duración 4:09
Tablas
Durante muchos años las tablas se utilizaron para crear sitios web completos y todo era muy caótico. Ahora las tablas se usan únicamente para ordenar textos que necesiten presentarse en forma tabular.

VIDEO 17 Duración 2:58
Tipografías
Hace muchos años, quienes trabajabamos para web disponíamos sólo de un puñado de tipografías para nuestros diseños. Hoy Google Fonts nos permite incluir una infinidad de nuevas y hermosas tipografías listas para usar.

VIDEO 18 Duración 4:24
Iframe
El Iframe o marco inline es una poderosa herramienta que nos permite embeber una página dentro de la nuestra. La integración de elementos de páginas externas como Facebook y Google se realizan utilizando el Iframe.

VIDEO 19 Duración 6:06
Unidades de medida
Conocemos cuales son las unidades de medida con las que debemos familiarizarnos en el diseño web. Estas unidades se dividen en Relativas y Absolutas, cada una tiene su función y su forma de actuar.

VIDEO 20 Duración 16:25
Categoría Bloque
Esta categoría nos presenta una ventana muy similar a la que ya conocemos como persiana de párrafo. Allí podremos darle al texto su alineación, sangría y otras características. También conoceremos la propiedad Display que nos ayudará a modificar el comportamiento natural de los elementos.

VIDEO 21 Duración 9:35
Position
Una de las propiedades más importantes en el diseño web. Nos entrega el control total sobre la posición de los elementos en la página. Static, relative, absolute y fixed, pueden provocar algún dolor de cabeza al comienzo, pero son maravillosas cuando se aprende a usarlas.

VIDEO 22 Duración 11:46
Categorías Posición y Extensiones
Vemos las opciones que faltan en la ventana de Posición: Visibility, Z-Index, Overflow y Clip. Además conoceremos las muy poco utilizadas Extensiones. Con esto cerramos nuestro recorrido por la ventana de Definición de Regla de Dreamweaver.

VIDEO 23 Duración 11:43
Armando el Sitio (Parte 1)
Iniciamos la transición de nuestro diseño a un verdadero sitio web exportando nuestra maqueta modelo y tomando en Photoshop las medidas de los elementos.

VIDEO 24 Duración 10:58
Armando el Sitio (Parte 2)
Continuamos armando nuestro cabezal. Agregaremos el logo de la empresa, sus datos de contacto y el botón con vínculo a la Fan Page de Facebook.

VIDEO 25 Duración 6:46
Armando el Sitio (Parte 3)
Avanzamos con el armado del menú. Aprendemos como lograr que nuestro contenedor tenga curvas redondeadas aplicando CSS3.

VIDEO 26 Duración 7:13
Armando el Sitio (Parte 4)
• Galería de fotos On Line.
Aprendemos la forma más fácil de incluir una galería de fotos en nuestro sitio web. Conocemos la herramienta on line que nos da el sitio Photosnack.

VIDEO 27 Duración 5:55
Armando el Sitio (Parte 5)
Incluimos un breve texto sobre la empresa y diferenciamos el cabezal h1 del texto de párrafo. Veremos un buen ejemplo de porqué es importante manejar las etiquetas dentro del código.

VIDEO 28 Duración 5:57
Armando el Sitio (Parte 6)
• Caja Me Gusta de Facebook
• Comentarios en el código
Veremos el sitio donde Facebook pone a disposición de los desarrolladores todas sus valiosas herramientas sociales y aprenderemos como integrar comentarios invisibles dentro del código.

VIDEO 29 Duración 6:09
Armando el Sitio (Parte 7)
• FileZilla
• Hosting Gratis
Conocemos FileZilla el programa que nos permitirá transferir los archivos a un servidor. Además, conocemos como habilitar un Hosting Gratuito con un dominio transitorio a donde subir nuestros archivos y testear nuestro sitio.

VIDEO 30 Duración 8:57
Armando el Sitio (Parte 8)
• Formulario de contacto
Integramos el formulario de contacto utilizando una valiosa herramienta on line que nos permite crear un formulario en forma fácil y gratuita.

VIDEO 31 Duración 7:23
Armando el Sitio (Parte 9)
Recta final de nuestra página, colocamos el pie con el logo y la información de la empresa.

VIDEO 32 Duración 6:12
Armando el Sitio (Parte 10)
Retocamos algunas cosas pendientes y le damos a nuestro menú los estilos para cada uno de los estadíos del botón. Usaremos lo que aprendimos sobre el selector compuesto.

VIDEO 33 Duración 10:09
Armando el Sitio (Parte 11)
• Favicon
• Etiquetas Meta
Aprendemos como hacer el pequeño ícono para la barra del navegador. Conocemos las Etiquetas Meta y la forma de crear las secciones interiores partiendo de nuestro index.

VIDEO 34 Duración 9:23
Armando el Sitio (Parte 12)
• Estilos CSS al Formulario
Le damos a nuestro formulario de contacto "estilos" mediante reglas de CSS. Vemos que más tiene para nosotros el CSS3. Además de bordes redondeados, veremos sombras para textos y cajas.

VIDEO 35 Duración 12:09
Insertando elementos en nuestra web
Aprendemos como insertar:
• Un botón de Compra de Mercado Pago
• Un video de YouTube
• El botón Me Gusta y una caja de comentarios de Facebook
• Un ancla en nuestra página
• Un mapa de Google Maps

VIDEO 36 Duración 6:27
Facebook Fan Page y Promociones
Conocemos el perfil comercial de la red social más importante del mundo. La diferencia entre un posteo promocionado y uno orgánico. Cómo crear una Fan Page, y donde recurrir para migrar una página personal.

VIDEO 37 Duración 6:33
Galería de Imágenes con JQuery
Vemos como se coloca una galería de imágenes que utiliza JavaScrip con la popular biblioteca JQuery. Desde el link "Material de Práctica" podrás descargarla y modificarla a tu gusto.

VIDEO 38 Duración 12:09
Responsive Design y Versión para Móviles
Develamos como funciona el Responsive Design y elaboramos una versión de nuestro sitio web destinada exclusivamente a los dispositivos móviles.

VIDEO 39 Duración 2:57
Registro de Dominio, E-Mail y Hosting
Repasamos algunas recomendaciones sobre Registro de Dominio, el error de las cuentas con dominio propio y las ventajas de Gmail.

VIDEO 40 Duración 8:00
Lo que trae HTML5
Conocemos que ventajas nos trae HTML5, las inmensas ramificaciones de sus áreas. Las etiquetas para una mejor semántica, las APis más interesantes y los consejos finales para mantenerse actualizado.

Video Curso "Introducción al Diseño Web para Diseñadores Gráficos"
Autor: DG. Gabriel Capaccio • Av. Corrientes 1666 - Posadas, Misiones • Argentina • 2015
www.DeGraficoaWeb.com