Aprende CSS3 sin dolor
4.5 (12 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.
294 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende CSS3 sin dolor to your Wishlist.

Add to Wishlist

Aprende CSS3 sin dolor

Realiza animaciones asombrosas, antes imposibles con HTML con los estilos en cascada nivel 3.
4.5 (12 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.
294 students enrolled
Last updated 10/2016
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 1 Article
  • 13 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • El alumno conocerá las principales características de los estilos en cascada nivel 3
  • Aplicará los selectores tradicionales de CSS 2.1. y los nuevos selectores de CSS3 para aplicarlos en sus reglas de estilo.
  • Trabajará con los nuevos formatos de colores y aplicará la transparencia u opacidad a los elementos y bordes de HTML.
  • Instalará fuentes web de terceros, conocerá los principales formatos y los aplicará a sus páginas web.
  • Realizará sus layout o maquetas con los nuevos comandos del nivel 3.
  • Aplicará los nuevos comandos al modelo de cajas de los elementos HTML, como la redondez de las esquinas o las sombras.º
  • Animará diversos elementos HTML por medio de los estilos en cascada con diferentes efectos.
  • Realizará páginas que se adapten a la pantalla del dispositivo donde se visualicen, para que se muestren en forma correcta.
View Curriculum
Requirements
  • Conocimientos básicos de HTML y CSS
Description

En este curso aprenderás las nuevas características de los estilos en cascada, como a manejar las fuentes web, animaciones, transformaciones, el nuevo esquema de caja, sombras, entre muchas otras características que han llevado a CSS3 a ser una poderosa herramienta en el desarrollo de páginas Web.

Estudiaremos los selectores nuevos y los que ya se utilizaban en la versiòn 2.1. con los cuales tendremos completo control en nuestras páginas web.

Trataremos a profundidad los nuevos comandos para los colores, como los formatos CMYK y HSL, asi como el manejo de la transparencia.

En CSS3 podemos manejar fuentes externas, y no limitarnos a las fuentes que se encuentren instaladas en la computadora del usuario. Veremos diferentes páginas donde se pueden descargar las mismas.

Analizaremos las potentes reglas para manejar la maquetación o layout de nuestras páginas con CSS3.

Asímismo, estudiaremos las nuevas características del modelo de caja en el nivel 3, como modificar las esquinas de una caja, crear sombras, posicionar las imágenes en el background, etcétera.

También realizaremos transiciones, transformaciones y animaciones con CSS3 en cualquier elemento HTML, cosa que era impensable hacerla con los estilos en cascada.

Finalmente estudiaremos una de las propiedades más revolucionarias en los estilos en cascada: realizar páginas que se adapten al tamaño de la pantalla donde se despliegan, conocido como "páginas responsivas".

Para este curso es deseable que cuente con conocimientos básicos de HTML y CSS.

Who is the target audience?
  • Disenadores y desarrolladores Web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
53 Lectures
07:21:45
+
Bienvenida al curso Aprende CSS3 sin dolor
1 Lecture 04:43
+
Introduccion CSS3
3 Lectures 34:53

En este curso aprenderás las nuevas características de los estilos en cascada, como a manejar las fuentes web, animaciones, transformaciones, el nuevo esquema de caja, sombras, entre muchas otras características que han llevado a CSS3 a ser una poderosa herramienta en el desarrollo de páginas Web.

Preview 15:20

Modernizr es una excelente herramienta para poder detectar si nuestro navegador soporta los estilos en cascada nivel 3, en especial el dolor de cabeza que representa Internet Explorer 6-9

Modernizr o cómo detectar a IE6-9
14:58

Los prefijos son parte de la evolución desigual que ha sufrido los estilos en cascada nivel 3, ya que debemos especificar los mismos dependiendo del tipo de navegador. Esta tendencia se irá eliminando en el futuro cercano cuando todos los navegadores adopten las especificaciones de la W3C.

Los prefijos de los navegadores modernos
04:35
+
Selectores en CSS3
4 Lectures 42:20

Los selectores son una de las partes fundamentales del manejo de los estilos de cascada, en cualquiera de las versiones existentes. Las primera de las partes de una regla de estilo será el selector, que como su nombre lo dice, "selecciona" los objetos HTML que serán modificados por las reglas de estilo.

Preview 12:33

Uno de los nuevos tipos de selectores en los estilos en cascada nivel 3 es que podemos localizar los nodos dentro del DOM que sean hermanos (tienen el mismo padre) o de los hijos (chlidren) del nodo.

Selectores de tipo Sibling-Children
09:06

Los selectores de atributos no son nuevos en los estilos en cascada nivel 3 o CSS3. De hecho solo tienen algunas modificaciones a la manera de funcionar desde la versión CSS 2.1. Sin embargo, en este video, daremos un repaso y ejemplificaremos su uso.

Selector Atributos
13:22

Por medio de los selectoresNth podemos seleccionar elementos de una lista de lamentos, como listas ordenadas o sin orden, párrafos, imágenes, etc.

Selectores Nth
07:19

Quiz sobre los primeras tres secciones del curso:

Prefijos y Selectores
12 questions
+
Trabajo con colores
5 Lectures 43:35

Los colores son una de características mejor implementadas en todos los navegares, incluso en Internet Explorer (casi). Con los estilos en cascada nivel 3 podremos manejar la transparencia de colores, en fondos y bordes. También podremos manejar formatos en HSL o CMYK asi como muchas cadenas de colores, adicionales a las 17 cadenas tradicionales.

Preview 03:59

La transparencia es una de las características más esperadas en el HTML. Podremos manejarla siempre y cuando su navegador soporte CSS3. Los rangos serán, de cero (0), completamente transparente a uno (1) completamente opaco. También las funciones RGBA y HSLA manejan el cuarto canal o "alfa".

Manejo de la transparencia en los colores
12:19

Los gradientes son uno de los aspectos mas irregulares en el manejo de colores dentro de los estilos en cascada nivel 3. Cada uno de los principales navegadores iniciaron por su cuenta el desarrollo de los gradientes, pero afortunadamente contaremos con herramientas gratuitas para realizar los degradados en forma eficiente.

Principios generales para los Gradientes
07:49

Los gradientes lineales son muy poderosos: podemos moverlos en relación a una línea en cualquier dirección, así comomanejar laamplitud del degradado y añadir los colores que necesitemos.

Crear un Gradientes Lineal
09:18

Los gradientes radiales están basados en dos circulos, que pueden estar ubicados uno dentro del otro, o uno a lado del otro. La dirección de este gradiente dependerá de la ubicación y radio de los círculos. Añadimos los colores o "color-stop" de la misma forma que los hicimos en los gradientes lineales.

Crear un Gradient Radial
10:10
+
Tipografia Web
5 Lectures 36:38

El manejo de las fuentes en los estilos en cascada nivel 3 ha sido uno de los puntos más fuertes, ya que es soportado, en su formato EOT, por Internet Explorer desde verisones muy antiguas. Así que todos los principales navegadores, aceptan un tipo de formato de fuentes web. Los navegadores en los dispositivos móviles también tienen su propio tipo de formato de fuentes.

Preview 03:50

La instrucción en que nos basamos para manejar las fuentes web es font-face. Podemos utilizar diferentes formatos de la misma fuente,y el navegador seleccionará aquella que leseaapropiada.

La poderosa etiqueta Font Face
05:42

Existen muchas páginas en las que podemos descargar fuentes web. En este video veremos cómobajarlas e instalarlas en nuestros sitios web.

Bajar y manipular fuentes externas de la web
09:35

Las sombras en los textos pueden ser utilizadas fácilmente en CSS3, aunque hay que teer cuidado con ellas, ya que pueden hacer ilegible su texto. Se recomienda su uso en encabezados grandes. En este video veremos cómo añadir sombras a los textos.

Manejo de sombras con shadow
07:45

Por medio de reglas del CSS3 podemos modificar los números de columnas, sus divisiones y ciertas características de los textos, con lo cual tenemos mucho control en textos largos.

Crear dos o más columnas de texto con CSS3
09:46

El alumno realizará el segundo quiz sobre las secciones de manejo de colores y tipografía web

Colores y tipografía web
17 questions
+
Maquetación de páginas con CSS3
5 Lectures 27:26

En los estilos en cascadas nivel 3 tenemos nuevos comandos para hacer las cajas floten y se ordenen. En este video veremos como utilizar los nuevos comandos.

Preview 04:14

Las cajas pueden ser orientadas sin necesidad de nuestra conocida como "float". La forma natural de flotación es ensimar una caja sobre otra. Para modificar esta "flotación natural", tendremos el display:box, con eso le inciamos al navegador que vamos a utilizar el nuevo modelo de caja. Luego le diremos cómo queremos que se modifiquela flotación le diremos que deseamos elbox-orient:horizontal.

Orientación de las cajas: Box Orient
07:48

También tendremos la alineación de este nuevo modelo de caja una regla de tipo box-align: con los parámetros end,startcenter,baseline y stretch para modificar la flotación. Necesitaremos los modificadores de los navegadores para esta regla de los estilos en cascada.

Alineación de las cajas: Box Align
03:56

Dentro de las nuevas caracteristicas del nuevo modelo de cajas, es que podemos cambiar el órden de las cajas internas desde los comandos y en tiempo de ejecución con la regla de estilo: box-ordinal-group, como lo indicamos en este video.

Ordenación de las cajas con Box Ordinal
05:14

En los estilos en cascada nivel 3, tendremos una regla de estilo "box-sizing" que se utiliza con elnuevo modelo "display:box". Los modelos serán border-box, os detalles los veremos en el video.

Manejar el tamaño de las cajas con Box Sizing
06:14
+
Modelado de las cajas en CSS3
7 Lectures 49:24

Otra caracterítica que es muy buscada en los estilos en cascada nivel 3 es poder redondear las esquinas por medio del comando "border-radius". Podemos hacer bordes convexos y cóncavos, como veremos en el video.

Preview 07:09

Otra característica de los estilos en cascada nivel tres que es muy gustada es que podemos colocar imágenes en los márgenes, aumentando en mucho la vista de nuestras páginas.

Añadir una imagen al borde del modelo de caja (primera parte)
04:44

En este video concluiremos la vista de los comandos que nos permiten manejar las imágenes en los bordes de nuestras cajas en cualquier elemento HTML que contenga el modelo de caja.

Añadir una imagen al borde del modelo de caja (segunda parte)
08:30

Con los estilos en cascada nivel 3 podemos añadir sombras a cualquier caja, y modificar su amplitud, dirección y color que nosotros deseemos mediante el comando "box-shadow".

Crear sombras a las cajas
08:16

Aunque podemos escribir todas las propiedades de la regla de estilo background, contamos con reglas separadas para cada uno de los parámetros particulares, por ejemplo, background-color, background-position, etc., ya sea para las propiedades tradicionales como para las nuevas.

Nuevos parámetros en la regla Background en CSS3
04:51

Por medio de la propiedad background-size tendremos completo control de las dimensiones de nuestro background, ya sea a lo ancho o a lo largo, lo cual nos dará muchas ventajas en el control de nuestros diseños por medio de CSS3.

La propiedad background-size
06:20

Por medio de las nuevas características de la propiedad background en los estilos en cascada nivel tres podemos hacer una composición con dos o más imágenes, cambiando sus propiedades como tamaño y ubicación, lo cual no sería posible con las estilos en cascada tradicionales.

Hacer una composición de imágenes con background
09:34

El alumno realizará el tercer quiz sobre los temas de maquinación de una página web y el nuevo modelo de caja de CSS3

Maquetación de una página y el nuevo modelo de caja de CSS3
15 questions
+
Transiciones y transformaciones
5 Lectures 48:19

La regla de estilo "transform" nos permitirá modificar, en tiempo de ejecución, propiedades de los elementos del documento, como la posición, la escala, la rotación o el sesgo.

Preview 12:06

Otra de las características que nos dará mucho poder en nuestras transformaciones será modificar el origen de las mismas, ya sea al centro o a cualquiera de las esquinas, con lo cual podremos tener diferentes efectos.

Modificar el origen de la transformación con CSS3
06:30

Las transiciones, a diferencia de las transformaciones, se realizan poco a poco en un intervalo que nosotros establezcamos. También podremos añadirles efectos de atenuación, ya sea al final o al inicio de la transición.

Las transiciones en CSS3
05:47

Aún más potente que las transformaciones y que las transiciones serán las animaciones en CSS3, ya que, por medio de la directiva key-frames, con la cual podremos modificar varias propiedades y controlar el tiempo de cada una de las transiciones. ¿Quién necesita Adobe Flash?

Las animaciones en CSS3
14:05

Las animaciones tipo 3D en los estilos en cascada nivel 3 aún están en ciernes, pero podemos hacer efectos muy interesantes del tipo "paper-view", como el simular que una división "rote" sobre su mismo eje, haciendo un efecto de "flip", como el que se realiza en el presente video.

Las animaciones 3D en CSS3
09:51
+
Creación de páginas responsivas con los Media Queries
3 Lectures 43:34

Los media-querys nos permiten hacer páginas que respondan a su entorno, por ejemplo, al tamaño de la pantalla del dispositivo, con lo cual, y mediante la modificación de los estilos en cascada, podremos hacer que una misma página luzca diferente en un teléfono celular inteligente, una tableta, una computadora o una pantalla de alta resolución.

Introducción a los Media Query
08:32

En este video haremos una página que responda a un telefono celular tipo iPhone 4, una tableta tipo iPad y a una computadora (de cualquier tipo). Detectaremos las dimensiones de la salida del monitor (o viewport) y modificaremos nuestra página con los estilos en cascada.

Realizar una página responsiva con Media Query
18:15

En este video aplicaremos algunas buenas prácticas en el manejo de los media-query, como es separarlos en archivos externos para que sean más fácil de manejar y darles mantenimiento.

Media Query Externa
16:47

El alumno realizará el cuatro quiz sobre transiciones, transformaciones, animaciones y páginas responsivas.

Transiciones y páginas responsivas
12 questions
+
Despedida, ejercicios y apuntes del curso
14 Lectures 02:27

Ejercicios del curso
00:03

Apuntes Introducción a CSS3
18 pages

Apuntes selectores CSS3
14 pages

Apuntes a selectores nth
4 pages

Apuntes la manejo de colores en CSS3
5 pages

Apuntes a la creación de gradientes lineales en CSS3
11 pages

Apuntes al manejo de fuentes en CSS3
4 pages

Apuntes al font-face de CSS3
6 pages

Apuntes al manejo de box-flex
10 pages

Apuntes al manejo de bordes en CSS3
7 pages

Apuntes a los nuevos atributos del Background en CSS3
11 pages

Apuntes a las transformaciones 3D
7 pages

Apuntes a los media-query
9 pages
1 More Section
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.