Programador web: HTML5 y CSS3 Responsive ¡Fácil y Práctico!
4.9 (30 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.
76 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Programador web: HTML5 y CSS3 Responsive ¡Fácil y Práctico! to your Wishlist.

Add to Wishlist

Programador web: HTML5 y CSS3 Responsive ¡Fácil y Práctico!

Aprende a diseñar páginas web profesionales y actuales. Desde cero... de forma fácil, dinámica y muy práctica.
4.9 (30 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.
76 students enrolled
Last updated 5/2016
Spanish
Current price: $10 Original price: $60 Discount: 83% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 16 hours on-demand video
  • 32 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Programar perfectamente en HTML5 todo tipo de páginas web
  • Utilizar las herramientas de formato de sitios webs que ofrece el CSS3
  • Diseñar páginas web responsive, acordes a las más recientes tecnologías de diseño web
View Curriculum
Requirements
  • No se requieren conocimientos previos.
  • Tan sólo necesitas un editor de código HTML-CSS y un programa de FTP para publicar tus páginas. En el curso te explicamos como instalarlos y utilizarlos.
Description

Descubre un curso fácil, claro, completo, práctico y muy didáctico y conviértete en programador y diseñador de páginas web con las más recientes versiones de los lenguajes de programación HTML y CSS.

¿Quieres dedicarte a una de las profesiones con más futuro y proyección pero te parece muy difícil?. ¿O tal vez ya tengas conocimientos básicos de HTML o CSS y quieres profundizar?. En ambos casos, te ofrecemos los mejores recursos para que lo consigas.

  • Más de 100 vídeos donde te explicamos cada tema de forma amena y dándole más importancia al aspecto práctico. ¡A programar, se aprende programando!.
  • Un manual escrito para cada capítulo del curso donde podrás repasar los temas tratados en los vídeos, ampliar conocimientos y acceder a más ejemplos prácticos.
  • Decenas y decenas de ejercicios con sus correspondientes soluciones, para que pongas a prueba lo aprendido en el curso.
  • Y el soporte y ayuda de tu tutor, para que nunca te sientas perdido.

Y ten presente que este es un curso dinámico. Respondiendo a tus dudas y para estar siempre a la última en programación y diseño web responsive con HTML y CSS iremos ampliando los contenidos de nuestro curso con nuevos temas, trucos y casos prácticos. Recuerda que tienes acceso ilimitado e indefinido. ¡Vuelve cuando quieras, aquí estaremos!

Who is the target audience?
  • Si deseas convertirte en programador web, este es tu curso.
  • Está orientado a quienes no tienen conocimientos previos de programación.
  • También es adecuado para aquellos que, teniendo unos conocimientos básicos, desean ampliarlos o actualizarse en HTML5, CSS3 y el diseño web responsive.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
128 Lectures
19:26:25
+
Introducción y principios del HTML5
3 Lectures 25:58

Vamos a conocer las premisas de las que parten los lenguajes HTML y CSS, en qué se diferencian y para qué usaremos cada uno de ellos.

Preview 10:17


Manual de la Sección 1
4 pages
+
Tu primera página web
7 Lectures 54:15

Si de un edificio se tratase, las etiquetas serían los ladrillos con los que lo contruiríamos. Vamos a empezar a descubrir los elementos que usaremos en la programación web.

Las etiquetas
05:24

¿Cómo debe estructurarse una página web? ¿Cuáles son las etiquetas fundamentales que debe definirla?. Vamos a descubrir cuales son las claves para construir una página web correcta e indexable por los buscadores.

Estructura de una página HTML
19:05

Además de programar correctamente, un buen programador también se distingue por comentar su código de forma clara y precisa. Descubramos cómo insertar comentarios en nuestro código HTML.

Los comentarios
04:12

El encabezado (<head>) de nuestro sitio web lo define y presenta a buscadores, lectores para discapacitados y permite a los programas navegadores mostrar nuestro sitio web de forma correcta... ¡Fíjate si tiene importancia conocer cómo construirlo correctamente!

Etiquetas importantes en el encabezado (1ª Parte)
13:18

Seguimos el video anterior: El encabezado (<head>) de nuestro sitio web lo define y presenta a buscadores, lectores para discapacitados y permite a los programas navegadores mostrar nuestro sitio web de forma correcta... ¡Fíjate si tiene importancia conocer cómo construirlo correctamente!

Etiquetas importantes en el encabezado (2ª Parte)
12:16

Manual de la Sección 2
3 pages

Ejercicios de la Sección 2
2 pages
+
La organización del texto
6 Lectures 45:28

Generalmente el texto es el contenido más importante de nuestra página web. Para empezar, es el principal "alimento" del que se nutren los buscadores a la hora de indexarnos lo mejor posible y enviarnos unas buenas visitas. Vamos a descubrir las principales herramientas que ofrece HTML para insertar textos en nuestros documentos.

Párrafos
08:01

Definir correctamente los diferentes tipos de títulos de nuestra página web puede facilitarnos mucho las futuras tareas de diseño, y además, ayudará a los buscadores a indexar mejor nuestra página... y cuanto mejor indexada esté, ¡más visitas ganaremos!. Vamos a descubrir en este tema las claves de unos títulos correctos, coherentes y bien programados teniendo en cuenta tanto la estructura de nuestro sitio como claves para el posicionamiento web.

Títulos
07:26

Destacar de forma correcta las expresiones más importantes de nuestros textos facilita la lectura a nuestros visitantes y tiene repercusión en el posicionamiento web. En el siguiente video descubriremos la forma correcta de hacerlo.

Resaltando el texto
11:57

En nuestras páginas web podemos agregar enumeraciones con diversos puntos: Se trata de otro elemento importante a la hora de facilitar su lectura y compresión. Desde las listas más sencillas a las más complejas, vamos a descubrir como usar esta potente y sencilla herramienta.

Listas
18:04

Manual de la Sección 3
5 pages

Ejercicios de la Sección 3
9 pages
+
Hipervínculos
7 Lectures 01:00:06

Los links son el elemento característico de una página web, aquello que las distingue de los medios editoriales clásicos. Gracias a ellos podemos navegar fácilmente dentro de las diferentes secciones de un sitio web o visitar páginas webs ajenas a la nuestra. Vamos a descubrir las claves de la creación de hipervínculos.

Hipervínculos externos (1ª Parte)
13:06

Profundizamos en el tema de los hipervínculos externos: Los links son el elemento característico de una página web, aquello que las distingue de los medios editoriales clásicos. Gracias a ellos podemos navegar fácilmente dentro de las diferentes secciones de un sitio web o visitar páginas webs ajenas a la nuestra. Vamos a descubrir las claves de la creación de hipervínculos.

Hipervínculos externos (2ª Parte)
10:54

Los hipervínculos internos son especialmente útiles en páginas webs muy extensas: facilitan la navegación de los usuarios por toda su extensión y moverse de forma sencilla y ágil. Vamos a descubrir en este video en qué consisten y las diversas formas de trabajar con ellos.

Hipervínculos internos
13:26

Los links no sólo sirven para enviarnos a otras páginas HTML. Entre otras cosas, podemos crear links que descarguen archivos o generen correos electrónicos. Vamos a descubrirlo en el siguiente video.

Otros tipos de hipervínculos
15:21

Descubriremos como añadir parámetros para personalizar el comportamiento de los hipervínculos.

Parámetros de los hipervínculos
07:19

Manual de la Sección 4
4 pages

Ejercicios de la Sección 4
9 pages
+
Imágenes
5 Lectures 22:41

Las imágenes le dan a nuestros documentos un aire más personal, atractivo y permiten ampliar la información contenido en el texto. Aprenderemos desde cero como insertar imágenes en nuestras páginas web con HTML y veremos las diferentes opciones disponibles para configurar su visualización.

Insertar imágenes
14:53

Haz que las imágenes insertadas en un documento enlacen fácilmente con otras páginas o sitios webs.

Hipervínculos con imágenes
02:11

Vamos a descubrir las nuevas etiquetas HTML5 que nos permiten definir mejor nuestras imágenes.

Etiquetas HTML5 para imágenes: figure y figcaption
05:37

Manual de la Sección 5
3 pages

Ejercicios de la Sección 5
1 page
+
Hojas de Estilos: CSS
12 Lectures 59:43

Una vez conocemos las herramientas fundamentales para añadir contenidos a nuestra página web, vamos a pasar a centrarnos en el trabajo de formato, en el estudio del CSS.

CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.

Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web.

Introducción
03:24

Vamos a descubrir la forma de trabajar con CSS más práctica y más flexible. La idea es que todas las normas de estilo irán guardadas en un archivo aparte con extension css, al que llamaremos desde nuestra página html. Descubriremos en el siguiente video de forma muy práctica como conseguirlo.

Hojas de estilos en un archivo .css
07:32

Podemos definir los estilos de nuestra página directamente en la cabecera de ésta. No es recomendable hacerlo si el CSS va a ser un poco extenso, por que enseguida hará más confusa la programación de nuestra web, y además, por que para cada archivo html de nuestro sitio deberíamos incluir estos códigos. Pero puede ser útil en determinados casos: vamos a ver cuando y cómo.

CSS en el encabezado
06:48

Insertar CSS en las etiquetas HTML es la forma más fácil pero la menos recomendada para la aplicación de un estilo a una etiqueta HTML. La idea es definir en la propiedad style los estilos para cada etiqueta. Veamos cómo se hace y en qué casos puede ser útil.

CSS en linea
04:05

El código CSS tiene una estructura muy sencilla, pero potente. Vamos a descubrir las claves y trucos para trabajar el aspecto de nuestros documentos.

Estructura del código CSS
03:31

Aprendamos a sacarle todo su potencial a las hojas de estilos.

Estilos e Identificadores
09:13

En el siguiente tema aprenderemos en qué momentos usar las etiquetas universales <div> y <span>.

Etiquetas universales
07:28

Técnicas, tácticas y trucos que te permitirán trabajar de forma más ágil, sencilla y eficiente con el CSS.

Selectores avanzados
04:40

Una de las características principales del CSS es la herencia de las propiedades. Cuando establecemos una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Vamos a ver en el siguiente video cómo se consigue y en qué nos beneficia dominarla.

Herencia de las propiedades
07:09

Puede ser que deseemos aplicar un determinado aspecto a un elemento de nuestro documento, por ejemplo un párrafo, pero solo si está dentro de un contexto, de un ámbito determinado, por ejemplo, que esté en negrita. Veamos cómo se consigue y que ventajas aporta.

CSS por el contexto
05:53

Manual de la Sección 6
8 pages

Ejercicios de la Sección 6
2 pages
+
El aspecto del texto
14 Lectures 01:27:35

A lo largo de todo esta sección estudiaremos las diferentes propiedades CSS que permiten modificar el aspecto de los textos insertados en nuestras páginas web. En este primer capítulo te presentamos todas las propiedades que tienes a tu disposición.

Propiedades CSS relacionadas con el texto
03:49

A lo largo de este tema veremos las diferentes formas de hacer referencia al color en nuestro documentos: empleando su propio nombre, de forma hexadecimal o por medio de los códigos RGB.

Color
13:17

La propiedad text-align permite definir la alineación de nuestro texto. A lo largo de este capítulo la forma de aplicarla y algunos ejemplos prácticos.

Alineación: Text-align
04:45

Con la propiedad text-decoration podemos, entre otras cosas que aparezca subrayado el texto, tachado o una línea en la parte superior. Estudiemos casos prácticos de esta propiedad y como aplicarla a nuestros documentos.

Subrayados: Text-decoration
06:41

Existen varias formas de indicar el tamaño de la fuente. Vamos a descubrir en qué consisten y qué ventajas aporta cada una de ellas. Usar el tamaño de fuente correctamente es el primer paso para que nuestro sitio web sea responsive, es decir, para que se adapte a las dimensiones y características del dispositivo (movil, tablet, ordenador...) con el que se conectan nuestros visitantes.

Tamaño: Font-size
14:14

Font Style permite establecer el estilo con el que se muestran los caracteres, en otras palabras, diversas formas de aplicar cursivas. Veamos como establecer los estilos disponibles: normal (normal), itálico (italic) y oblicuo (oblique).

Destacar texto: Font-style
04:18

La propiedad font-weight permite establecer el grosor con el que se muestran las letras del texto. Normalmente, esta propiedad se emplea para mostrar un texto en negrita. Veamos todas las alternativas que nos ofrece y en qué caso usar cada una de ellas en este video repleto de casos prácticos.

Destacar texto: Font-weight
03:26

Las propiedades letter-spacing y word-spacing establecen la separación entre las letras o palabras del texto. Conozcamos más en detalle el uso correcto, trucos y ejemplos de estas propiedades.

Espaciado: Letter-spacing y Word spacing
07:24

Tabulación: Text-indent
02:13

Con text-transform podrás transformar el texto en mayusculas, minusculas... de forma fácil y muy dinámica. Vamos a analizar en el siguiente video el uso de esta interesante propiedad, una auténtica desconocida para muchos programadores.

Mayúsculas: Text-transform
03:36

Gracias a font-family podemos definir la tipografía, el tipo de letra a aplicar a todo o parte de nuestras páginas webs. En este primer video dedicado a esta propiedad estudiaremos la forma más simple de trabajar con ella, recurriendo a las tipografías predeterminadas.

Tipografía: Font-family
04:04

Con CSS3 es posible elegir fuentes a nuestro gusto, al margen de estas. Veremos como elegir las tipografías con total libertad, como descargarlas, instalarlas en nuestra página web y usarlas en nuestros trabajos.

Incorporando cualquier tipografía a nuestra web
19:48

Manual de la Sección 7
9 pages

Ejercicios de la Sección 7
14 pages
+
Definiendo fondos
7 Lectures 35:55

Para especificar un color de fondo a cualquier elemento de nuestra página, usamos la propiedad CSS background-color. Veamos la forma de aplicar fondos a nuestra página o a los objetos insertados en ella de forma sencilla y muy práctica.

Color de fondo
04:30

Gracias a CSS3 es posible aplicar degradados de fondo en nuestra página o los objetos en ella colocados. Descubramos la forma de conseguirlo desde el principio y algunos trucos para que esa tarea resulte más sencilla de lo que podría parecer.

Degradados de fondo
10:41

También es posible colocar una imagen de fondo, no solo al fondo de nuestra página, si no a cualquiera de los elementos que hay dentro de ella: titulares, párrafos... Veamos en el siguiente video como conseguirlo.

Imágenes de fondo
04:44

Vamos a descubrir algunas de las propiedades avanzadas que permiten personalizar la forma en que se muestran los fondos para conseguir todo tipo de efectos.

Las propiedades de background-image
13:30

CSS3 nos permite aplicar diferentes niveles de transparencia a los elementos de nuestra página. Concretamente, La propiedad opacity permite especificar la opacidad de un elemento. En el siguiente tema la estudiaremos en detalle.

Transparencias
02:30

Manual de la Sección 8
10 pages

Ejercicios de la Sección 8
3 pages
+
Bordes y sombreados
5 Lectures 18:40

CSS nos permite recurrir a un buen número de opciones a la hora de trazar los bordes de los elementos que incluimos en nuestras páginas. En este tema toca estudiar en profundidad y de forma muy práctica en qué consisten y cómo aplicarlas a nuestros documentos.

Borde estándar
06:26

Gracias a propiedad border-radius podemos crear esquinas redondeadas sin tener que recurrir a complejos mosaicos de imágenes, como se hacía hasta la llegada de las versiones más recientes de CSS. En el siguiente tema veremos como aplicarla para conseguir documentos con aspecto sofisticado y moderno de forma muy sencilla.

Bordes redondeados
05:15

La propiedad box-shadow nos permite definir una sombra a un objeto de la página. Otra de las nuevas ventajas de las más recientes versiones de CSS que, por fin, te permitirán darle a tus documentos un toque de diseño sin trabajar casi nada. Veamos cuales son las claves y los trucos para conseguirlo.

Sombras
06:59

Manual de la Sección 9
4 pages

Ejercicios de la Sección 9
5 pages
+
Efectos dinámicos
5 Lectures 19:42

Con CSS podemos modificar la apariencia de los elementos de la página web de forma dinámica, es decir, los elementos pueden cambiar de forma una vez que la página se haya cargado si se dan determinadas condiciones.

Hover
10:56

Con el pseudo formato Active podemos definir un estilo cuando se hace clic en un elemento de la página. En la práctica sólo se utiliza en los enlaces. El enlace mantendrá este aspecto brevemente: el cambio se produce cuando se presiona el botón del ratón. Veamos la forma de aplicarlo de manera rápida y eficaz.

Active
05:25

Los efectos dinámicos permiten modificar la apariencia de los elementos de la página una vez que se haya cargado si se dan determinadas condiciones. En esta ocasión veremos cómo es posible aplicar un estilo a un enlace a una página que ya se ha visto.

Visited
03:21

Manual de la Sección 10
3 pages

Ejercicios de la Sección 10
2 pages
8 More Sections
About the Instructor
Juan De La Torre Domingo
4.5 Average rating
983 Reviews
10,899 Students
4 Courses
Desarrollador Web

Técnico en sistemas y formador informático desde hace más de veinte años, mi trabajo está relacionado con el mundo del diseño y la programación web desde los últimos quince años... ¡Media vida me la he pasado en la red!

Actualmente soy Director Creativo en la empresa de diseño XarxaCreativa y compagino esa actividad con la formación en el ámbito del diseño web responsive, programación orientada a Internet (PHP, JavaScript, bases de datos MySQL) y el diseño gráfico.

Siempre he creído que la formación tenía que ser sencilla, asequible para los alumnos. Por eso mis cursos, tanto online como presenciales pretenden ser amenos, didácticos y muy, muy prácticos. Emplear un lenguaje comprensible para el estudiante y un ritmo adecuado a su aprendizaje son fundamentales.