13. Curso de CSS3: Diseñar sin floats ni posicionamientos.

El posicionamiento flotante es el más difícil de comprender pero al mismo tiempo es el más utilizado. La mayoría de estructuras de las páginas web complejas están diseñadas con el posicionamiento flotante, como se verá más adelante.

Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba. (Referencias: Posicionamiento flotante).

Décimo tercer y último videotutorial del curso de CSS3, dictado por con Jesús Conde. Para el final del curso hablamos sobre el diseño sin floats ni posicionamientos, ¿es posible hacerlo de esta manera?, en la sesión que concluye este tópico lo averiguaremos. El próximo jueves comenzaremos un curso que nos ayudará a cómo manejar una herramienta que está llegando a ser muy útil si de animaciones en HTML5 se refiere, Adobe Edge Animate. Así que no se pierdan su inicio. :D

Mientras, vayamos con Jesús Conde al final de esta odisea llamada CSS3...

12. Curso de CSS3: Multi-Columns y diseño para móviles.

El CSS3 Grid Layout (que también se conoce como Alineamiento de Cuadrícula o simplemente "Grid"), nos proporciona un sistema de cuadrícula típico basado en CSS, similar a lo que utilizan de manera habitual los desarrolladores de XAML o Silverlight. En el momento en que escribo este artículo, la especificación está en la fase de "Borrador del Editor". Permite definir regiones en la estructura de la página, con columnas y filas, desplazamiento, espacios, márgenes interiores, plantillas de cuadrícula y otros elementos, imponiendo una independencia total entre los aspectos correspondientes al HTML y los de CSS. A diferencia de las tablas de HTML que son parte del contenido, el Grid nos permite incorporar primitivas de HTML dentro de regiones de la cuadrícula independientes del contenido real. (Referencias: Diseño web adaptativo).

Duodécimo videotutorial del curso de CSS3, dictado por con Jesús Conde. En la sesión de hoy conoceremos que son los Multi-Columns y el diseño para dispositivos móviles.

Listos para entrar en sesión...

11. Curso de CSS3: Uso de Media Queries.

Los Media Queries, son una excelente forma de entregar diferentes estilos para diferentes dispositivos, y proveer la mejor experiencia para cada tipo de usuario. Como parte de la especificación CSS3, los Media Queries expanden el rol del atributo media, que controla como se aplican los estilos. Por ejemplo: se ha vuelto una práctica común por años el uso de una hoja de estilos por separado para imprimir sitios web al especificar media = “print”. Los Media Queries, llevan esta idea al siguiente nivel, al permitir a los diseñadores asignar estilos basados en las propiedades de un dispositivo, como el ancho de pantalla, orientación y así sucesivamente. (Referencias: Introducción a Media Queries con CSS3).

Décimo primer videotutorial del curso de CSS3, dictado por con Jesús Conde. Hoy aprenderemos a cómo y cuando utilizar los populares Media Queries.

Así que listos, empezamos esta nueva sesión...

10. Curso de CSS3: Transiciones y animaciones.

Los nuevos estándares de CSS proporcionan a los diseñadores web cada vez más recursos para el desarrollo de sus sitios. Todos recordamos las webs de primeros de siglo, esas de las que normalmente salimos huyendo cuando nos las encontramos y que en nada se parecen a las de ahora.

CSS3 pretende estandarizar dos nuevas características: las transiciones y las animaciones que actuan sobre el estado de un elemento transformándolo de manera gradual. Con esto se consiguen efectos muy agradables que mejoran notablemente la experiencia del usuario al interactuar con la página. (Referencias: Transiciones y animaciones con CSS3).

Décimo videotutorial del curso de CSS3, dictado por con Jesús Conde. En la sesión para hoy nuestro maestro nos enseña las prestaciones que nos ofrecen las transiciones y las animaciones en la versión 3 de CSS.

Comenzamos la sesión de hoy...

09. Curso de CSS3: Prácticas con Pseudo-Clases.

Una pseudo clase es un estado o uso predefinido de un elemento al que se le puede aplicar un estilo independientemente de su estado por defecto. Existen cuatro tipos diferentes de pseudo clases:

1) Links: Estas pseudo clases se usan para dar estilo al enlace tanto en su estado normal por defecto como cuando ya ha sido visitado, mientras mantenemos el cursor encima de él o cuando hacemos clic en él.
2) Dinámicas: Estas pseudo clases pueden ser aplicadas a cualquier elemento para definir como se muestran cuando el cursor está situado sobre ellos, o haciendo click en ellos o bien cuando son seleccionados.
3) Estructurales: Permiten dar estilo a elementos basándonos en una posición numérica exacta del elemento.
4) Otras: Algunos elementos pueden ser estilizados de manera diferente basándonos en el lenguaje o que tipo de etiqueta no son. (Referencias: ¿Qué es una pseudo clase?).

Noveno videotutorial del curso de CSS3, dictado por con Jesús Conde. En esta sesión nuestro maestro ahondará en las Pseudo-clases desde un punto de vista práctico.

Ya empezamos la sesión con el maestro... Jesús Conde. Bienvenidos...

08. Curso de CSS3: Pseudo-clases y Pseudo-elementos.

Las hojas de estilo asocian características de estilo a los elementos basándose en las etiquetas de los elementos y en su posición relativa (en el árbol del documento). Las pseudo-clases y los pseudo-elementos permiten hacer referencia a determinados elementos sin basarse en la información contenida en el árbol del documento.

La sintaxis de las pseudo-clases y los pseudo-elementos es la misma: etiqueta:pseudo-elemento_o_pseudo-clase (el nombre de la etiqueta y del pseudo-elemento o de la pseudo-clase separado por dos puntos). (Referencias: Pseudo-clases y pseudo-elementos).

Octavo videotutorial del curso de CSS3, dictado por con Jesús Conde. Donde comprenderemos acerca de las pseudo-clases y los pseudo-elemento, ¿qué son? ¿para qué sirven? y ¿cómo se utilizan?.

Ahora con ustedes, Jesús Conde...

07. Curso de CSS3: Selectores de Atributos.

El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. Los cuatro tipos de selectores de atributos son:

[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento. (Referencias: Selector de atributos).

Séptimo videotutorial del curso de CSS3, dictado por con Jesús Conde. Hoy aprenderemos sobre los selectores de atributos que en la nueva versión de CSS se han ampliado un buen tanto a diferencia de la anterior.

Sin más esperas, el maestro Jesús Conde...

06. Curso de CSS3: Usar gráficos en bordes y fuentes Web.

background-clip es una de las nuevas propiedades con soporte nativo y pseudo-nativo como el llamado -webkit-background-clip en el caso de Safari. Con CSS 3 debemos ser cautos, pero arriesgados, su uso dependerá de que entorno desea, ya no es el tiempo de esperar que usuarios con IE 6 a IE8 decidan actualizarse, hay que olvidarse de esas personas debido a que ya estamos en una época donde nada justifica seguir con navegadores obsoletos. (Referencias: background (Recortar) en CSS: Aprendiendo sus secretos: Parte 5 - background-clip).

Sexto videotutorial del curso de CSS3, dictado por con Jesús Conde, donde aprenderemos a usar gráficos en bordes y fuentes web.

Con ustedes, el maestro Jesús Conde...

05. Curso de CSS3: Uso de CSS3 en el trabajo con imágenes.

Hasta la versión 2 de CSS, el trabajo con imágenes era muy limitado pero con la nueva versión este tema se ha convertido en una gama de posibilidades gráficas jamás antes vistas. Tal es el caso de como conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS3 a través del atributo background-image. (Referencias: Múltiples imágenes de fondo con CSS).

En este quinto videotutorial del curso de CSS3, dictado por con Jesús Conde, aprenderemos la implementación de CSS3 en el trabajo y tratamiento de imágenes.

Sin más esperas, Jesús Conde con ustedes...

04. Curso de CSS3: Usos de la Propiedad Transform.

Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D. Se usan dos propiedades principalmente para definir las transformaciones CSS: transform y transform-origin (Referencias: Uso de CSS transforms).

Cuarto videotutorial del curso de CSS3, por con Jesús Conde. En esta sesión aprenderemos los usos que podemos darle a la propiedad Transform.

Con ustedes, nuestro maestro Jesús Conde...

03. Curso de CSS3: Crear semitransparencias, gradientes y sombras.

Otra de las nuevas características del CSS3 es la que nos permite crear gradientes de color para utilizar como fondos. Como todas las otras, hay diferentes instrucciones dependiendo del navegador:

1) en Firefox 3.6 usamos -moz-linear-gradient y -moz-radial-gradient
2) en Google Crome y Safari -webkit-gradient linear y radial
3) en Internet Explorer se implementa a través de filter: progid:DXImageTransform.Microsoft.Gradient más información
4) en Opera no está implementada. (Referencias: Gradientes en CSS).

Tercer videotutorial del curso de CSS3, donde con Jesús Conde aprenderemos a crear los gradientes antes mencionados, además de semitransparencias y sombras.

Con ustedes, nuestro maestro Jesús Conde...

02. Curso de CSS3: Crear efectos gráficos sin gráficos.

Hemos comenzado un nuevo curso relacionado con el diseño web, en esta ocasión nos adentramos en el aprendizaje la versión 3 de CSS, el lenguaje de hojas de estilo en cascada. A través de prácticos ejemplos realizando proyectos web iremos conociendo paso a paso el uso de este lenguaje.

En este videotutorial aprenderemos a como crear gráficos sin el uso de gráficos. ¿Cómo se puede hacer ésto?, aunque no lo creas ésto es posible con CSS3 y si quieres saber más sigue esta sesión.

Ahora los dejamos con el maestro Jesús Conde...

01. Curso de CSS3: ¿Qué hay de nuevo?.

Con la versión tres del CSS (Cascade Style Sheet u Hojas de Estilo en Cascada), muchas características emocionantes serán ejecutadas. CSS3 lleva a mayor flexibilidad y hace mucho más fácil reconstruir efectos previamente complejos. Muchas reglas para ahorrarnos tiempo se están aplicando para CSS3 como: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, multi-column layout, etc... Aunque solamente los navegadores más modernos soportan actualmente estos efectos. (Referencia: CSS3 y sus impresionantes características).

Luego de haber aprendido a manejar el lenguaje para diseñar un proyecto web ahora nos toca darle forma a la presentación de éste, y para ello este curso nos servirá. Jesús Conde nos llevará a través de este curso por los caminos de la nueva versión de CSS, con el fin de aplicar posteriormente los conocimientos que iremos aprendiendo gradualmente. Hoy responderemos a la siguiente pregunta: ¿Qué hay de nuevo?