Todo HTML5 y CSS3, de novato a experto
3.5 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
26 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Todo HTML5 y CSS3, de novato a experto to your Wishlist.

Add to Wishlist

Todo HTML5 y CSS3, de novato a experto

HTML5 y CSS3 son las tecnologías más innovadoras en el ámbito del desarrollo web moderno. La revolución apenas inicia!
3.5 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
26 students enrolled
Last updated 6/2015
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 27.5 hours on-demand video
  • 1 Article
  • 7 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Crear páginas basadas en las mejores prácticas con HTML
  • Diseñar páginas web con los estilos en cascada
  • Aplicar las etiquetas estructurales de HTML5 en las páginas web
  • Crear formas de entrada utilizando los nuevos atributos y pseudoclases de HTML5
  • Agregar video y audio a las páginas web
  • Crear animaciones con los APIS Canvas y SVG
  • Convertir sus aplicaciones web en aplicaciones fuera de línea
  • Introducir mapas de Google a las páginas con HTML5
  • Manejar animaciones con los estilos en cascada nivel 3
View Curriculum
Requirements
  • Conocimientos básicos de JavaScript (preferente)
Description

HTML5 y CSS3 son las tecnologías que han revolucionado la Internet. No sólo podemos hacer animaciones y reproducir video sin necesidad de plug-ins de terceros, sino que podemos hacer páginas que se reproduzcan adecuadamente (o que "respondan") al dispositivo donde se visualizan.

En este curso iniciaremos desde conocer qué es una etiqueta y una regla de estilo, hasta aplicar aspectos más avanzados como la realización de páginas "responsivas" hasta aplicaciones fuera de línea.

Todos los vídeos son descargables y cuentas con apuntes de la mayoría de las secciones en formato pdf, así como los ejercicios resueltos de todas las lecciones.

Es deseable que contengas conocimientos de JavaScript para el desarrollo de aplicaciones con los API's de HTML5.

Revisaremos los APIS de desarrollo como el CANVAS, para hacer dibujos en tiempo de ejecución, y realizaremos un par de juegos con esta tecnología. También revisaremos el SVG para la realización de dibujos vectoriales.

Por medio del API LocalStrorage realizaremos un sencillo sistema de altas, bajas y cambios (ABC) de un catálogo de libros.

Manejaremos los archivos del disco del usuario con el API File,así como agregaremos mapas de Google por medio del API de Geolocalización.

Si ponemos todos estos elementos tendremos un poderoso coctel para nuestros desarrollos Web… y es tan solo el inicio. ¡Únete a la revolución!

Who is the target audience?
  • Desarrolladores Web
  • Diseñadores Web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
210 Lectures
29:45:22
+
Introducción al curso
1 Lecture 05:29
+
¿De qué está hecha la web?
2 Lectures 15:21

El Internet es el invento del siglo. No podemos vivir sin él. Estaríamos prácticamente "incomunicados"!!! Aquí mostramos una breve historia.

Preview 08:55

Saber la evolución de nuestra herramienta de trabajo siempre es útil, aunque el HTML es un lenguaje relativamente reciente.

Breve historia del HTML
06:26
+
Principios de HTML
4 Lectures 35:13

El centro del HTML son las etiquetas. Es fundamental entender qué es una etiqueta para dominar este lenguaje.

Preview 13:06

La directiva DOCTYPE la permite al navegador identificar la versión de HTML con lo cual interpretará la página.

La directiva DOCTYPE
07:05

De acuerdo con la especificación de HTML 4, los elementosMETA se utilizan para especificar información sobre el propio documento (de ahí su nombre). La sintaxis del elemento METAes la siguiente:

o bien:

Los elementos META forman parte del contenido del elemento HEAD del documento.

Los metadatos
07:26

Una práctica muy importante en cualquier lenguaje de programación es el de comentar nuestro código, ya que al transcurrir el tiempo, ni nosotros mismos sabemos lo que hicimos (creame, pasa muy seguido).

Los comentarios no son tomados en cuenta con por los navegadores: unicamente sirven para los programadores. Sin embargo, los comentarios en HTML si los puede ver dentro del código. Para hacer comentarios necesitamos las llaves
</p>

Comentarios en HTML
07:36
+
Las principales etiquetas de HTML
11 Lectures 01:39:30

La etiqueta

se utiliza para representar un párrafo. La etiqueta p es soportada

por todos los navegadores (gracias a Dios).

Preview 16:23

La etiqueta de encabezado H1 y sus hermanas menores son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos.

Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.

Los encabezados, etiquetas h1, h2, h3, h4, h5 y h6
05:14

Esta etiqueta se usa para reforzar el texto en html. El caso es que prácticamente todos los navegadores la interpretan de la misma forma poniendo el texto que las engloba en negrita, ¿entonces cual uso?.

Hay muchos webmaster que se inclinan por la etiqueta porque afirman que es mejor para el posicionamiento ya que google las interpreta como palabras clave, otros nos comentan que además aportan semántica al contenido a través de CSS y por tanto mejor accesibilidad.

Enfatizar un enunciado: strong y em
06:31

Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible al lector. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes:

Ficheros HTML

Ficheros de texto

Ficheros de imágenes


es posible automáticamente...

Listas ordenadas y sin orden
08:02

El uso de las listas de difinición están cayendo en desuso. El funcionamiento de las listas de definición es similar al de un diccionario, por un lado el término y por el otro la definición de ese término o palabra. La etiqueta crea la lista de definición y las etiquetas y definen respectivamente el término y la descripción de cada elemento de la lista.</p>


Byte
Conjunto de 8 bits con significado

</dl>

Listas de definición
02:30

Dentro de una página web, los hipervínculos son las palabras, párrafos o imágenes que al darles click, te llevarán a otro lugar, ya sea a otra página, o a una sección en específico dentro de la misma página; desempeñan una función muy útil, por ello saber cómo aprender a programar hipervínculos a la hora de crear un sitio web es muy importante.

Otra de las características que tienen los hipervínculos es que al pasar el cursor sobre ellos, el ícono del cursor cambia y se convierte en una mano.

Hipervínculos
05:14

Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces. Para crear un ancla (anchor) se procede de la siguiente manera:

Texto del elemento ancla

Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario. Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

Texto del hiperenlace

De esta manera accederemos a la posición donde hayamos puesto el ancla Por ejemplo al final de este documento hemos puesto la siguiente ancla:

Navegar dentro de la misma página: anclas
11:21

La etiqueta [img> te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:

requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:

Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.

Manejo de imágenes, etiqueta img
11:04

Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.

En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.

Tablas en HTML
08:49

Dentro de HTML tendremos otras etiquetas, por ejemplo:


Para un salto de linea


Dibuja una línea

una dirección física

Otras etiquetas
13:34

Divisiones, la etiqueta < div >
10:48
+
Formatos y colores con los estilos en cascada
5 Lectures 52:16

Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.


La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo ""

Preview 11:48

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Manejo de colores con Estilos en cascada
12:02

Los css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarla las más importantes. Antes de la versión 5 de HTML, no se podía manejar más que las fuentes que el usuario tuviera instaladas en su computadora. Era por esto que utilizábamos al menos tres tipos de fuente por si una fallaba, el navegador buscaba la segunda, y asi, hasta encontrar una de las fuentes más básicas. Algunos de los conjuntos de fuente más comunes son:

Arial, Helvetica, sans-serif

“Times New Roman”, Times, serif

“Courier New”, Courier, monospace

Georgia, “Times New Roman”, Times, serif

Verdana, Arial, Helvetica, sans-serif

Geneva, Arial, Helvetica, sans-serif

Si el nombre de la fuente contenia espacios, es necesario utilizar las comillas, por ejemplo "Times New Roman"

Manejo de fuentes con CSS
12:35

Cambiar el formato de los hipervínculos o "links" por medio de los estilos en cascada es fundamental en el desarrollo y diseño de páginas we. Podemos modificar los colores, el background o cambiar el clásico color azul, sin embargo, siempre es necesario que el usuario sepa cuál frase, palabra o imagen contiene un hipervínculo.

Modificar los links o hipertextos
07:01

La ubicación de nuestras reglas de estilo es muy importante, porque depende del órden las reglas se irán ejecutando. Podemos localizar nuestro código en ohas externas, propiamente conocidas como stylesheets, podemos escribir el código dentro de la etiqueta , dentro de la página html o incluso dentro de la etiqueta, como un atributo de la misma, aunque esta última ubicación no se recomienda, porque se pierde toda la versatilidad que nos ofrecen los estilos en cascada.

La prioridad dependerá de la cercania de la regla al elemento HTML. De ahí su nombre de estilos en cascada.

Lugares donde se pueden escribir estilos y sus reglas
08:50
+
Selectores y unidades de los estilos en cascada
4 Lectures 44:51

El manejo de selectores es una de las habilidades más importantes cuando se intenta utilizar los estilos en cascada en forma profesional. hasta este punto hemos utilizado las reglas de cascada que inician con un selector. Este puede ser el nombre de una etiqueta, por ejemplo, h1, de una clase, por ejemplo .rojo o de una división #encabezado.

Cuando utilizamos por selector un nombre de etiqueta, todas las etiquetas de esa clase srán modificadas. En cambio, los identificadores sólo podemos tener uno en todo el documennto. Las clases pueden aplicarse varias veces, pero hay que aplicarlas en forma manual.

Podemos aplicar a varios selectores las mismas reglas de estilo por medio de las comas, por ejemplo:

h1, h2, h3, h4{ color:white; }

Preview 09:36

Muchas veces los selectores simples, como la etiqueta, la clase y los identificadores no son suficientes para realizar el diseño de nuestra página web, por lo que nos será importante hacer "excepciones". En un buen diseño web, las excepciones no deberán de ser la regla. Para ello necesitamos escribir los selectores principales a la izquierda y los particulares a la derecha, por ejemplo:

#menu a { color:red; }

Por lo general leeremos estos selectores de derecha a izquierda, es decir: "todas las etiquetas 'a' que se encuentren dentro de la división 'menu' su texto será de color rojo.

Selectores compuestos, el !important y el selector global
18:25

El manejo de unidades es fundamental dentro del diseño y desarrollo de nuestra página web. En HTML en general y en CSS en particular, tendremos dos tipos de unidades: las flexibles y las fijas. Siempre será mejor utilizar las primeras, por ejemplo el pixel (px) la em (que es la medida de la letra 'm' de la fuente base).La medida em no tiene nada que ver con la etiqueta de HTML que modifica los textos a itálicas. Por lo general esta medida es la adecuada para manejar los tamaños de los textos y sus atributos como el padding y el margen.

Unidades flexibles y fijas en CSS
13:29

Una parte importante, antes de lanzar nuestra página web al mundo, es validrla, es decir, verificar que todas sus etiquetas y estilos en cascada sean compatibles con los navegadores en uso. Para ello contamos con magníficos validadores. El más popular es el de la W3C. No se preocupe si encuentra errores o mensajes de advertencia, pues es muy dificil que una página que no sea tribial pueda pasar esta validación sin algún mensaje.

Validar estilos en cascada
03:21
+
El modelo de caja
5 Lectures 52:39

El modelo de caja es uno de los conceptos más importantes al momento de formatear nuestra página, y puede resultar un verdadero dolor de cabeza si no poseemos los conocimientos adecuados para ello. Asi que resulta fundamental conocer bien los términos de margen, padding, border y área de contenido, para no pasar noches en vela porque nuestro modelo se "mueve", y culpar de ellos al HTML y a los CSS.Otro problema es que algunos navegadores no "hablan" muy bien CSS y hacen las cosas algo diferentes, y en el caso de Internet Explorer, puede hacer las cosas muy diferentes, si de CSS se trata.

Preview 11:58

Entre el margen y el padding se extiende el borde o border. Este amigo puede ser neutral, si es que su ancho es igual a cero, o puede cambiar dependiend de su ubucación, También para él utilizaremos el nemónico TRBL (top, right, bottom y left), que nos recuerda cómo se toman los valores dentro de la sentencia correspondiente. Como veremos, es posible definir un ancho, un color y un estilo al borde de nuestra caja, es decir, tendremos doce posibles comando tomando los cuatro bordes con tres características (ancho, color y estilo).

Los bordes
09:21

El padding se podría considera un margen interior. También se le traduce como "colchonilla". Se le ubica entre el área de contenido y el borde. Adquiere el color de la caja de contenido. También lo podemos controlar bajo el mnemónico de TRBL, y separarlo en padding.top, padding-left, etcétera.

Cuando se tiene una imagen de fondo,ésta abarca el área de contenido y el padding.

El padding
11:55

La propiedad auto nos permitirá centrar divisiones dentro de sus contenedores. Desafortunadamente no contamos con una instrucción que centre enforma automática o que flote una división al centro. Con auto en el margen a izquierda y derecha, podemos hacer que una división flote dentro de su contenedor, pero necesitamos definir un ancho (width) para ello, ya sea en pixeles o porcentaje.

La propiedad auto
05:49

Una propiedad fundamental para modificar el color de nuestra página web, así como su diseño, será la propiedad background, la cual la tendrá cualquier etiqueta que posea el modelo de caja. Podremos cambiar el color o colocar una imagen que se repita o se adapte a su contenido. El color de fondo del área se extiende hasta debajo de la línea del borde. Asi, si la línea del borde muestra espacios, por ejemplo, dashed, dotted o double el color de fondo del elemento se muestra a través de ellos.

El fondo de la caja: la propiedad background
13:36
+
Navegación e impresión con Estilos en cascada
3 Lectures 39:27

En este ejercicio te mostraremos cómo hacer un menú sencillo con el cual podrás navegar en tu sitio web.

Crear un menú de navegación con CSS
17:55

En este video modificaremos el menú del video anterior para hacer una simulación de pestañas o tabuladores.

Simular tabuladores con CSS
10:11

En este video le mostraremos como convertir nuestra página web a una hoja perfectamente imprimible, sin necesidad de hacer dos páginas, únicamente utilizando los estilos en cascada.

Modo de impresión
11:21
+
Posicionamiento y flujo
4 Lectures 38:37

Una pieza importantísima para el desarrollo de una composición o maquetado de una página web es comprender cómo se acomodan las cajas, es decir, su flujo natural, y cómo podemos cambiar éste. En este video iniciaremos por comprender cómo es el flujo "natural" de las cajas para después poder modificarlos.

Preview 04:49

Para realizar layouts más interesantes, necesitaremos que las divisiones comiencen a flotar. Para ello utilizaremos la propiedad float con la mayoría de sus parámetros.

Hacer que las cajas floten
13:28

El flujo absoluto de las cajas de HTML ha sido uno de los mayores dolores de cabeza del desarrollador y diseñador web. Mediante un poco de práctica podremos dominar el flujo absoluto de las divisiones y realizar formatos muy flexibles.

Posicionamiento absoluto
10:23

El posicionamiento fijo, con la opción position:fixed, se comporta casi como position:absolute, pero coun una leve diferencia: un elemento fijo No se desplaza.

Los elementos con posicionamiento absoluto están colocados relativos a un punto de referencia del documento, por lo que se desplazan con el resto del contenido.

Posición fija:fixed
09:57
+
Formato de páginas con CSS
5 Lectures 01:18:08

En CSS casi siempre hay varias maneras de resolver un mismo problema y esto se aplica al diseño de las páginas o maquetación. Todas las posibles soluciones tienen ventajas y desventajas. Asi que mientras no exista una varita mágica que solucione todos nuestros problemas, revisaremos las diferentes formas de hacer un buen layout de una página web.

Preview 23:53

En este video mostraremos la segunda parte de crear un layout fijo: la introducción de los contenidos y el formateo con los estilos en cascada.

Introducir los contenidos y los estilos en formato fijos
22:02

Los formatos flexibles pueden llegar aser más complejos que los formatos fijos, pues no tenemos el cálculo de las alturas de las cajas, y estas pueden llegar a descuadrarse, lo cual arruina nuestro diseño. Necesitamos una gran tolerancia a la frustración cuando desarrollamos formatos flexibles, pero con un poco de cuidado y paciencia dominaremos este estilo de maquetación.

Formatos flexibles
12:09

Los formatos flexibles los podemos acotar por medio de las reglas max-width y min-width. Aunque estas reglas aun no caen dentro de la maquetación de páginas responsivas, ya se esta cerca de las mismas.

Tamaños máximos y mínimos
04:32

Formatos responsivos para teléfonos inteligentes y tabletas

Formatos responsivos para teléfonos inteligentes y tabletas
15:32
27 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.4 Average rating
1,047 Reviews
13,092 Students
35 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.