Curricula Html5

7/30/2019 Curricula Html5

1/27


2/27

Mucho hemos escuchado ltimamente con respecto a la nueva versin del ms que conocido HTML, incluso sino eres programador o diseador web seguramente has ledo por algn lado algo relativo a l. Lo cierto es queHTML5 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 afondo el tema tratando de explicarlo de manera sencilla.

Al hablar de HTML5 estamos hablando realmente de una familia de tecnologas que en combinacin nos propor-cionan una nueva serie de posibilidades al momento de construir aplicaciones y sitios web. Concretamente estafamilia est conformada del ya conocido HTML, Javascript y CSS3, los cuales anteriormente ya eran utilizadosal 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 utilizaremosJavascript, 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 versinde HTML est implementado el documento, basta con indicar que es HTML y punto.

Presentacin

Pag: 02


3/27

Pag: 03

Introduccin al HTML5

Puntos a tratar

Introduccin al HTML5, es muy importante saber cual es el objetivo del curso, que necesitamos saber y que apli-caciones usaremos, adems veremos como crear una perfecta estructura de carpetas antes de comenzar aconstruir una web.Necesitamos instalar diferentes navegadores como Crhom, Firefox, Opera, Safari e Internet Explorer.

Objetivos del curso 13:28Instalacin de visores de navegacin y herramientas extras 05:18Creando estructura de carpetas para una web 05:24

Plan CurricularCaptulo I

Duracin


4/27


5/27

Pag: 04

Introduccin al Adobe Dreamweaver CS6

Puntos a tratar

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

Crear un nuevo sitio web 03:03

Editar un sitio web 02:23Borrar un sitio web 02:40Reconocimiento de la plataforma de trabajo 07:07

Abrir, grabar y cerrar archivos 02:35Configurar visores para previsualizacion 05:49

Captulo II

Duracin


6/27

Pag: 05

Estructura de una web en HMTL5

Puntos a tratar

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

Abrir un documento HMTL5 03:02

Uso de la etiqueta DIV 02:01Uso de la etiqueta HEADER 01:50Uso de la etiqueta NAV 02:26Uso de las etiquetas SECTION, ARTICLE y ASIDE 02:51Uso de la etiqueta FOOTER 06:14Crear compatibilidad con navegadores antiguos 03:35

Captulo III

Duracin


7/27

Pag: 06

Introduccin a las hojas de estilo CSS3

Puntos a tratar

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

Abrir un nuevo documento CSS3 02:57

Vincular hojas de estilo CSS3 con HMTL5 02:37Colocar estilos predeterminados para trabajar con HMTL5 02:18Separar los estilos generales y de maquetacin 02:52

Aplicar estilos a etiquetas HMTL5 07:39Aplicar estilos a etiquetas a travs de su ID 04:42Aplicar estilos a etiquetas a travs de su CLASE 02:36Diferencias entre ID y CLASE 01:58

Captulo IV

Duracin


8/27

Maquetacion web HTML5 bsica de 4 cuerpos

Captulo VEn este captulo empezamos creando una pequeapagina web a nivel profesional de cuatro cuerpos,cabecera, men, cuerpo y pie de pagina, vamos a vercomo se hace una maquetacin partiendo de cero.Usaremos tecnicas muy basica pero muy usadas paracrear una web real.

P 07


9/27

Pag: 07

Maquetacion web HTML5 bsica de 4 cuerpos

Puntos a tratar

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 tecnicasmuy basica pero muy usadas para crear una web real.

Preparando estructura de carpetas para el sitio 02:05Preparar sitio y pasos preliminares 03:28Preparar diseo o boceto web 04:31Optimizar y exportar imgenes a usar 07:26Maquetando estructura principal y los cuerpos de la web 03:49

Aplicando diseo a nuestra maquetacin 05:06Usar imgenes de diseo en CSS3 04:08

Aplicar estilos que determinen ancho, alto, margen y padding 10:01Aplicar colores Hexadecimales, RBG, RGBA a elementos 03:28Insertar imgenes como contenidos de una web 02:21Insersin cabecera , , , , , 02:26Insersin parrafo

02:17Colocar elementos uno sobre otro 09:09

Aplicar estilos de textos, fuentes, color, tamao, margen. 13:13Aplicar estilos a los enlaces 07:28Creacin barras de navegacin con listas desordenadas 02:03

Aplicando estilos al men 09:49Trabajando el contenido de los pies de pagina 05:36

Captulo V

Duracin


10/27

Maquetacin Web HTML5 con bordes redondeados y degradadosCaptulo VI

Pag: 08


11/27

Pag: 08

Maquetacin Web HTML5 con bordes redondeados y degradados

Puntos a tratar

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

Creacin de sitio, html, css, vincular html con css 04:02Optimizar y exportar imgenes a usar 05:44Maquetar la estructura principal del web 05:01

Aplicar fondo de web con degradados en CSS3 06:33Crear compatibilidad de degradados para Internet Explorer 9, 8 y 7 04:17

Aplicando estilos a la cabecera 12:59Determinar ancho, alto, relleno degradado y bordes redondeados al men 04:49Determinar ancho y alto de redes sociales 05:07

Crear barra de navegacin con listas desordenadas 01:49Aplicando estilos a la barra de navegacin usando degradados y bordes arqueados 06:33Estilo del banner con color de fondo,bordes redondeados y padding 02:25Insersin de Imagenes como contenidos 02:06Colocar elementos con posicion absaluta y relativa 09:00

Aplicar sombra y otros estilos a los textos 06:39Trabajar articles como elementos flotantes, aplicando estilos de diseo 10:49Insercin de cabeceras , aplicando estilos de encabezados 05:03Insercin de parrafos

02:16

Diseando pies de paginas 04:37

Captulo VI

Duracin


12/27

Transformaciones y TransicionesCaptulo VII

Pag: 09


13/27

Pag: 09

Transformaciones y Transiciones

Puntos a tratar

En este captulo vamos a aprender como transformar elementos en cuanto a su tamao, posicin, inclinacin y rota-cin aprederemos a crear barras de navegacin con transiciones de movimiento, transparencia, creando un siste-ma de navegacin moderno y funcional.

Creacin de nuevo sitio 01:43Pasos preliminares antes de comenzar 01:51Estructura principal de la pagina web 02:25

Aplicar fondo degradado con mas de 2 colores y medidas 05:55Aplicando estilos de maquetacion para la web 05:08Creando la barra de navegacin con mas de 2 elementos 02:45

Aplicando estilos basicos a la barra de navegacion 06:46Aplicando transiciones y trasnformaciones a cada boton 05:13

Aplicando transiciones a los elementos internos del boton 15:28Trabajando textos en el pie de pagina 04:39Colocando icono redes sociales en el pie de pagina 04:21Maquetando paginas internas 04:35Creando barra de navegacin interna 01:40Diseando barra de navegacin interna 15:46

Aplicando transiciones y transformaciones a botones internos 03:41Diseando contenidos de la web imagenes, titulos y textos 07:41

Captulo VII

Duracin


14/27

Animaciones CSS3, tipografias, transicionesy transformaciones

Captulo VIII

Pag: 10


15/27

Pag: 10

Animaciones CSS3, tipografias, transiciones y transformaciones

Puntos a tratar

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

Creacin de nuevo sitio 02:26Pasos preliminares antes de comenzar 03:05Maquetacin y diseo de web 07:03Colocar elementos con posicin absoluta y relativa 05:21Crear animacin de elementos 11:25Creacin de barra de navegacion 01:00Diseo de barra de navegacin 02:47Tipografias externas google fonts 04:37

Transicin y transformacin de barra de navegacion 04:31Colocar pies de pagina y aplicar transiciones a las redes sociales 07:54Maquetacin paginas interanas 05:52Diseando barra de navegacion interna 04:48Diseando contenidos de la pagina 06:29Creando enlaces y las paginas internas 03:05

Captulo VIII

Duracin


16/27

Trabajar con vectores SVG

Captulo IX

Los formatos SVG se han convertido en una herramienta necesaria a la horade construir una web, podemos crear paginas que realmente pesen pocotrabajando con vectores.En este captulo aprenderemos como exportar SVG desde Adobe Illustrator e

importarlo desde el Dreamweaver usando HTML5.

Pag: 11


17/27

ag

Trabajar con vectores SVG

Puntos a tratar

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

Pasos preliminares antes de empezar 03:56Adobe Illustrator como herramienta de dibujo vectorial 01:30Optimizar y exportar formato SVG desde Illustrator 13:02Maquetacin principal de la web 04:53Posicionando elementos con posicin absoluta y relativa 10:02Importar formatos SVG o vectores a nuestra web 03:14

Aplicando animaciones a formatos SVG 04:44Creando la barra de navegacion con graficos SVG 01:34

Diseando la barra de navegacin con transiciones 07:07Maquetando el cuerpo de la pgina 03:24Colocando elementos de diseo en formato SVG 01:46Colocando contenidos del cuerpo 03:45Creacin del pie de pagina 01:58

Captulo IX

Duracin

Captulo X


18/27

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

Captulo X

Pag: 12


19/27

g

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

Puntos a tratar

En este captulo se ensear como hacer uso correcto de los elementos de tipo audio dentro del sitio web, veremosque formatos son compatibles con los diferentes navegadores, aprenderemos a controlar sonidos a travs del

jQuery colocando botones de stop, play, pausa.

Pasos preliminares antes de empezar 5:53Diseando la estructura de la web 4:55Diseando la estructura de la web 7:54Colocar elementos con posicin relativa y absoluta 8:40Crear y disear barra de navegacin 8:58Definir una tipografia personalizada 2:09Diseando logo y titulo 4:16Diseando piepagina y sociales 4:52

Preparando sonidos para nuestra pagina web 4:28Insercin de sonidos compatibles con todos los navegadores 5:39Introduccin y descarga del jQuery 5:20Insercin de fondo musical desde el jQuery 6:16Controlar elementos del HTML desde el jQuery 3:39Controlar sonidos desde el jQuery 3:01Controlar rotacion de discos con jQuery 1:48

Captulo X

Duracin


20/27

Incluir Videos a una Pgina Web

Captulo XI

Pag: 13


21/27

Trabajar con videos

Puntos a tratar

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

Pasos preliminares antes de empezar 02:46Optimizacin y exportacin de imgenes 03:50Maquetar estructura principal de la web 02:14Disear estructua web 05:39Preparar zona del video 04:58Insercion de videos 05:21Disear logo con tipografias propias 04:54Crear y disear barra de navegacin 05:19

Crear y disear controles de sonido 02:56Colocar sonidos desde el jquery 06:34Creando, diseo paginas internas 12:41Creando, diseando pie de pagina 07:41

Captulo XI

Duracin


22/27

Trabajar pginas con PHP, HMTL5, CSS3

El PHP se ha convertido en una herramienta indispensable a la hora de maquetar , disear y desarrollar una pginaweb. 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 laparticin de codigos por mdulos.

Captulo XII

Pag: 14


23/27

Trabajar pginas con PHP, HMTL5, CSS3

Puntos a tratar

El PHP se ha convertido en una herramienta indispensable a la hora de maquetar , disear y desarrollar una pginaweb. 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 laparticin de codigos por mdulos.

Instalando Wampserver 03:13Puesta en marcha del Wampserver 02:43Pasos preliminares antes de empezar 01:33Creacin de sitios dinamicos en dreamweaver 02:34Crear pagina de prueba PHP y ejecutar en los navegadores 05:39Crear y disear maquetacin principal de la web 07:53

Aplicar mens desplegables usando dreamweaver 05:19Editando css del menu desplegable 10:32

Disear cuerpo y texto superior de la web 05:55Crear y disear pie de pagina de la web 07:35Separar segmentos de codigo en modulos 03:35Incluir modulos PHP en una sola pagina 01:36Preparar plantilla interna PHP 02:22Crear Pginas internas PHP 06:56Diseando pginas internas I 09:22Diseando pginas internas II 12:38

Captulo XII

Duracin


24/27

Pag: 15


25/27

Duracin

Incluir formularios HTML5 a una pgina

Puntos a tratar

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

Pasos preliminares antes de empezar 02:06Abrir las paginas donde se insertarn el formulario 01:35Insercion de un formulario 02:16

Agrupar campos con Fieldset 01:19Insercin y validacin de campos textos 02:45Insercin y validacin de campos numericos 02:00Insercin y validacin de campos fecha 01:45Insercin y validacin de campos email 01:29

Insercin y validacin de campos range 01:42Insercin y validacin de campos boton de opcion 01:52Insercin y validacin de campos boton casilla de verificacion 02:27Insercin y validacin de campos lista de mens 01:12Insercin y validacin de campos area de texto 01:16Preparar elementos para disear formularios 05:28

Aplicar diseo CSS3 a cada elemento del formulario 12:13Crear logica PHP para enviar datos del formulario al correo electrnico 05:16

Captulo XIII

Pag: 16


26/27

Dar de alta una pagina web

Puntos a tratar Duracin

En este capitulo se ensea cuales son las tcnicas y mtodos para poder publicar una pgina web, se veran todaslas 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 quevan al servidor.

Preparar archivos a subir al servidor 02:05Conexin a FPT via Dreamweaver CSS6 04:59Conexin a FTP via Filezila 03:32Conexin a FTP via Windows 02:07Crear actualizaciones en la web 02:32Puesta en marcha de la pagina web 02:08

Captulo IXV


27/27

Curricula Html5

Documents

Transcript of Curricula Html5