Sie sind auf Seite 1von 27

Pag: 02

Presentacin
Mucho hemos escuchado ltimamente con respecto a la nueva versin del ms que conocido HTML, incluso si no eres programador o diseador web seguramente has ledo por algn lado algo relativo a l. Lo cierto es que HTML5 es de alguna manera una especie de evolucin 'obligada' de lo que hasta hoy conocemos como HTML 4 (para ser ms especfico 4.0.1), incluyendo algunas mejoras propias y otras a travs de API's de Javascript o CSS3. Pues bien, en el presente Video Curso Aprende HTML5 y CSS haciendo pginas web abordar un poco ms a fondo el tema tratando de explicarlo de manera sencilla. Al hablar de HTML5 estamos hablando realmente de una familia de tecnologas que en combinacin nos proporcionan una nueva serie de posibilidades al momento de construir aplicaciones y sitios web. Concretamente esta familia est conformada del ya conocido HTML, Javascript y CSS3, los cuales anteriormente ya eran utilizados al construir nuestros sitios, sin embargo, con HTML5 es un tanto distinto ya que son soportados de forma nativa, es decir, al definir un script ya no es necesario establecer su tipo ya que se sobreentender que utilizaremos Javascript, lo mismo sucede con los estilos ya que se tomarn como CSS3 por defecto. De igual manera, al tratarse de un lenguaje 'evolucionado', no ser necesario indicarle al navegador qu versin de HTML est implementado el documento, basta con indicar que es HTML y punto.

Pag: 03

Plan Curricular
Captulo I
Introduccin al HTML5
Introduccin al HTML5, es muy importante saber cual es el objetivo del curso, que necesitamos saber y que aplicaciones usaremos, adems veremos como crear una perfecta estructura de carpetas antes de comenzar a construir una web. Necesitamos instalar diferentes navegadores como Crhom, Firefox, Opera, Safari e Internet Explorer.

Puntos a tratar
Objetivos del curso Instalacin de visores de navegacin y herramientas extras Creando estructura de carpetas para una web

Duracin
13:28 05:18 05:24

Pag: 04

Captulo II
Puntos a tratar

Introduccin al Adobe Dreamweaver CS6


El Marketing en las Redes Sociales se han convertido en herramientas poderosas para comunicar, anunciar y promocionar todo tipo de servicios y/o productos. Dentro de las herramientas mas usadas se encuentra Facebook red social gratuita, la ms popular en el mundo y tambin en el PER,hoy en dia abren grandes oportunidades de ofrecer servicios y/o productos a personas afines a nuestro negocio.

Duracin
03:03 02:23 02:40 07:07 02:35 05:49

Crear un nuevo sitio web Editar un sitio web Borrar un sitio web Reconocimiento de la plataforma de trabajo Abrir, grabar y cerrar archivos Configurar visores para previsualizacion

Pag: 05

Captulo III
Puntos a tratar

Estructura de una web en HMTL5


En este captulo se ensea como maquetar una estructura principal de una pgina web usando las nuevas etiquetas de HMTL5 HEADER, NAV, SECTION, ARTICLE, ASIDE y FOOTER. Adems vamos a aprender como hacer compatibles las nuevas etiquetas con los navegadores antiguos como Internet Explorer 8 o 7.

Duracin
03:02 02:01 01:50 02:26 02:51 06:14 03:35

Abrir un documento HMTL5 Uso de la etiqueta DIV Uso de la etiqueta HEADER Uso de la etiqueta NAV Uso de las etiquetas SECTION, ARTICLE y ASIDE Uso de la etiqueta FOOTER Crear compatibilidad con navegadores antiguos

Pag: 06

Captulo IV
Puntos a tratar

Introduccin a las hojas de estilo CSS3


Las hojas de estilos en CSS3 se han convertido en una herramienta muy importante a la hora de disear una pgina web, en este captulo vamos a aprender todas las formas de aplicar estilos a los elementos del HMTL5, vamos a saber cuando debemos usar ID identificadores y CLASS clases la diferencia que existe entre ambos. y como organizar los estilos para una mejor organizacin de nuestros codigos.

Duracin
02:57 02:37 02:18 02:52 07:39 04:42 02:36 01:58

Abrir un nuevo documento CSS3 Vincular hojas de estilo CSS3 con HMTL5 Colocar estilos predeterminados para trabajar con HMTL5 Separar los estilos generales y de maquetacin Aplicar estilos a etiquetas HMTL5 Aplicar estilos a etiquetas a travs de su ID Aplicar estilos a etiquetas a travs de su CLASE Diferencias entre ID y CLASE

Captulo V

Maquetacion web HTML5 bsica de 4 cuerpos

En este captulo empezamos creando una pequea pagina web a nivel profesional de cuatro cuerpos, cabecera, men, cuerpo y pie de pagina, vamos a ver como se hace una maquetacin partiendo de cero. Usaremos tecnicas muy basica pero muy usadas para crear una web real.

Pag: 07

Captulo V
Puntos a tratar

Maquetacion web HTML5 bsica de 4 cuerpos


En este captulo empezamos creando una pequea pagina web a nivel profesional de cuatro cuerpos, cabecera, men, cuerpo y pie de pagina, vamos a ver como se hace una maquetacin partiendo de cero. Usaremos tecnicas muy basica pero muy usadas para crear una web real.

Duracin
02:05 03:28 04:31 07:26 03:49 05:06 04:08 10:01 03:28 02:21 02:26 02:17 09:09 13:13 07:28 02:03 09:49 05:36

Preparando estructura de carpetas para el sitio Preparar sitio y pasos preliminares Preparar diseo o boceto web Optimizar y exportar imgenes a usar Maquetando estructura principal y los cuerpos de la web Aplicando diseo a nuestra maquetacin Usar imgenes de diseo en CSS3 Aplicar estilos que determinen ancho, alto, margen y padding Aplicar colores Hexadecimales, RBG, RGBA a elementos Insertar imgenes como contenidos de una web Insersin cabecera <H1>, <H2>, <H3>, <H4>, <H5>, <H6> Insersin parrafo <p> Colocar elementos uno sobre otro Aplicar estilos de textos, fuentes, color, tamao, margen. Aplicar estilos a los enlaces Creacin barras de navegacin con listas desordenadas <ul><li> Aplicando estilos al men Trabajando el contenido de los pies de pagina

Captulo VI

Maquetacin Web HTML5 con bordes redondeados y degradados

Pag: 08

Captulo VI
Puntos a tratar

Maquetacin Web HTML5 con bordes redondeados y degradados


El uso de los bordes arqueados y los degradados se han convertido en un estandar a la hora de crear una pgina web profesional con HMTL5 y CSS3, en este captulo enseamos todos los secretos de como trabajar con estas dos tcnicas, realizaremos una pgina web que contenga estas dos tcnicas.

Duracin
04:02 05:44 05:01 06:33 04:17 12:59 04:49 05:07 01:49 06:33 02:25 02:06 09:00 06:39 10:49 05:03 02:16 04:37

Creacin de sitio, html, css, vincular html con css Optimizar y exportar imgenes a usar Maquetar la estructura principal del web Aplicar fondo de web con degradados en CSS3 Crear compatibilidad de degradados para Internet Explorer 9, 8 y 7 Aplicando estilos a la cabecera Determinar ancho, alto, relleno degradado y bordes redondeados al men Determinar ancho y alto de redes sociales Crear barra de navegacin con listas desordenadas <ul><li> Aplicando estilos a la barra de navegacin usando degradados y bordes arqueados Estilo del banner con color de fondo,bordes redondeados y padding Insersin de Imagenes como contenidos Colocar elementos con posicion absaluta y relativa Aplicar sombra y otros estilos a los textos Trabajar articles como elementos flotantes, aplicando estilos de diseo Insercin de cabeceras <h1>, aplicando estilos de encabezados Insercin de parrafos <p> Diseando pies de paginas

Transformaciones y Transiciones

Captulo VII

Pag: 09

Captulo VII
Puntos a tratar

Transformaciones y Transiciones
En este captulo vamos a aprender como transformar elementos en cuanto a su tamao, posicin, inclinacin y rotacin aprederemos a crear barras de navegacin con transiciones de movimiento, transparencia, creando un sistema de navegacin moderno y funcional.

Duracin
01:43 01:51 02:25 05:55 05:08 02:45 06:46 05:13 15:28 04:39 04:21 04:35 01:40 15:46 03:41 07:41

Creacin de nuevo sitio Pasos preliminares antes de comenzar Estructura principal de la pagina web Aplicar fondo degradado con mas de 2 colores y medidas Aplicando estilos de maquetacion para la web Creando la barra de navegacin con mas de 2 elementos Aplicando estilos basicos a la barra de navegacion Aplicando transiciones y trasnformaciones a cada boton Aplicando transiciones a los elementos internos del boton Trabajando textos en el pie de pagina Colocando icono redes sociales en el pie de pagina Maquetando paginas internas Creando barra de navegacin interna Diseando barra de navegacin interna Aplicando transiciones y transformaciones a botones internos Diseando contenidos de la web imagenes, titulos y textos

Animaciones CSS3, tipografias, transiciones y transformaciones

Captulo VIII

Pag: 10

Captulo VIII
Puntos a tratar

Animaciones CSS3, tipografias, transiciones y transformaciones


Sin duda alguna las animaciones nos permite crear pginas webs super dinamicas e ilustrativas, podemos dar movimientos a los elementos sin usar Adobe Flash. Vamos a ver la forma de animar elementos para diferentes navegadores, adems veremos las tecnicas de animacin que existe y ver que se puede animar y que no se puede animar.

Duracin
02:26 03:05 07:03 05:21 11:25 01:00 02:47 04:37 04:31 07:54 05:52 04:48 06:29 03:05

Creacin de nuevo sitio Pasos preliminares antes de comenzar Maquetacin y diseo de web Colocar elementos con posicin absoluta y relativa Crear animacin de elementos Creacin de barra de navegacion Diseo de barra de navegacin Tipografias externas google fonts Transicin y transformacin de barra de navegacion Colocar pies de pagina y aplicar transiciones a las redes sociales Maquetacin paginas interanas Diseando barra de navegacion interna Diseando contenidos de la pagina Creando enlaces y las paginas internas

Captulo IX

Trabajar con vectores SVG

Los formatos SVG se han convertido en una herramienta necesaria a la hora de construir una web, podemos crear paginas que realmente pesen poco trabajando con vectores. En este captulo aprenderemos como exportar SVG desde Adobe Illustrator e importarlo desde el Dreamweaver usando HTML5.

Pag: 11

Captulo IX
Puntos a tratar

Trabajar con vectores SVG


Los formatos SVG se han convertido en una herramienta necesaria a la hora de construir una web, podemos crear paginas que realmente pesen poco trabajando con vectores. En este captulo aprenderemos como exportar SVG desde Adobe Illustrator e importarlo desde el Dreamweaver usando HTML5.

Duracin
03:56 01:30 13:02 04:53 10:02 03:14 04:44 01:34 07:07 03:24 01:46 03:45 01:58

Pasos preliminares antes de empezar Adobe Illustrator como herramienta de dibujo vectorial Optimizar y exportar formato SVG desde Illustrator Maquetacin principal de la web Posicionando elementos con posicin absoluta y relativa Importar formatos SVG o vectores a nuestra web Aplicando animaciones a formatos SVG Creando la barra de navegacion con graficos SVG Diseando la barra de navegacin con transiciones Maquetando el cuerpo de la pgina Colocando elementos de diseo en formato SVG Colocando contenidos del cuerpo Creacin del pie de pagina

Incluir sonidos en formatos (MP3, ogg) en una web HMTL5

Captulo X

Pag: 12

Captulo X
Puntos a tratar

Incluir sonidos en formatos (MP3, ogg) en una web HMTL5


En este captulo se ensear como hacer uso correcto de los elementos de tipo audio dentro del sitio web, veremos que formatos son compatibles con los diferentes navegadores, aprenderemos a controlar sonidos a travs del jQuery colocando botones de stop, play, pausa.

Duracin
5:53 4:55 7:54 8:40 8:58 2:09 4:16 4:52 4:28 5:39 5:20 6:16 3:39 3:01 1:48

Pasos preliminares antes de empezar Diseando la estructura de la web Diseando la estructura de la web Colocar elementos con posicin relativa y absoluta Crear y disear barra de navegacin Definir una tipografia personalizada Diseando logo y titulo Diseando piepagina y sociales Preparando sonidos para nuestra pagina web Insercin de sonidos compatibles con todos los navegadores Introduccin y descarga del jQuery Insercin de fondo musical desde el jQuery Controlar elementos del HTML desde el jQuery Controlar sonidos desde el jQuery Controlar rotacion de discos con jQuery

Incluir Videos a una Pgina Web

Captulo XI

Pag: 13

Captulo XI
Puntos a tratar

Trabajar con videos


Hoy en da una pgina web sin video seria una pagina sin falta de contenido, HTMT5 puede importar videos MP4 y WEBM sin tener la necesidad de usar Adobe Flash. Por lo tanto en este captulo enseamos todos los secretos de como debemos trabajar con videos inscrustados dentro de nuestra pgina web.

Duracin
02:46 03:50 02:14 05:39 04:58 05:21 04:54 05:19 02:56 06:34 12:41 07:41

Pasos preliminares antes de empezar Optimizacin y exportacin de imgenes Maquetar estructura principal de la web Disear estructua web Preparar zona del video Insercion de videos Disear logo con tipografias propias Crear y disear barra de navegacin Crear y disear controles de sonido Colocar sonidos desde el jquery Creando, diseo paginas internas Creando, diseando pie de pagina

Captulo XII

Trabajar pginas con PHP, HMTL5, CSS3


El PHP se ha convertido en una herramienta indispensable a la hora de maquetar , disear y desarrollar una pgina web. Por lo tanto en este captulo enseamos cuales son los procedimientos para trabajar HMTL5 con PHP y CSS3, ensearemos lo necesario para poder correr pginas dinmicas desde la creacin de un sitio dinmico hasta la particin de codigos por mdulos.

Pag: 14

Captulo XII
Puntos a tratar

Trabajar pginas con PHP, HMTL5, CSS3


El PHP se ha convertido en una herramienta indispensable a la hora de maquetar , disear y desarrollar una pgina web. Por lo tanto en este captulo enseamos cuales son los procedimientos para trabajar HMTL5 con PHP y CSS3, ensearemos lo necesario para poder correr pginas dinmicas desde la creacin de un sitio dinmico hasta la particin de codigos por mdulos.

Duracin
03:13 02:43 01:33 02:34 05:39 07:53 05:19 10:32 05:55 07:35 03:35 01:36 02:22 06:56 09:22 12:38

Instalando Wampserver Puesta en marcha del Wampserver Pasos preliminares antes de empezar Creacin de sitios dinamicos en dreamweaver Crear pagina de prueba PHP y ejecutar en los navegadores Crear y disear maquetacin principal de la web Aplicar mens desplegables usando dreamweaver Editando css del menu desplegable Disear cuerpo y texto superior de la web Crear y disear pie de pagina de la web Separar segmentos de codigo en modulos Incluir modulos PHP en una sola pagina Preparar plantilla interna PHP Crear Pginas internas PHP Diseando pginas internas I Diseando pginas internas II

Pag: 15

Captulo XIII
Puntos a tratar

Incluir formularios HTML5 a una pgina


En este captulo se tratar el tema de los formularios, su proposito y como se debe estructurar de tal forma que sean funcional. Aprenderemos desde la insercicin, maquetacin y diseo de los campos para una perfecta visualizacin, adems realizaremos el proceso para que los datos ingresados puedan enviarse a una cuenta de correo electrnico.

Duracin
02:06 01:35 02:16 01:19 02:45 02:00 01:45 01:29 01:42 01:52 02:27 01:12 01:16 05:28 12:13 05:16

Pasos preliminares antes de empezar Abrir las paginas donde se insertarn el formulario Insercion de un formulario Agrupar campos con Fieldset Insercin y validacin de campos textos Insercin y validacin de campos numericos Insercin y validacin de campos fecha Insercin y validacin de campos email Insercin y validacin de campos range Insercin y validacin de campos boton de opcion Insercin y validacin de campos boton casilla de verificacion Insercin y validacin de campos lista de mens Insercin y validacin de campos area de texto Preparar elementos para disear formularios Aplicar diseo CSS3 a cada elemento del formulario Crear logica PHP para enviar datos del formulario al correo electrnico

Pag: 16

Captulo IXV
Puntos a tratar

Dar de alta una pagina web


En este capitulo se ensea cuales son las tcnicas y mtodos para poder publicar una pgina web, se veran todas las formas desde subir la web del Dreamweaver, usando el Filezila o el mismo Windos. Adems se ensearn los procedimientos que debemos seguir antes de publicar la web y carpetas y archivos que van al servidor.

Duracin
02:05 04:59 03:32 02:07 02:32 02:08

Preparar archivos a subir al servidor Conexin a FPT via Dreamweaver CSS6 Conexin a FTP via Filezila Conexin a FTP via Windows Crear actualizaciones en la web Puesta en marcha de la pagina web

Das könnte Ihnen auch gefallen