26. Introducción al Desarrollo Web: Accesibilidad Web.

Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en condiciones de igualdad a los contenidos. Por ejemplo, cuando un sitio tiene un código XHTML semánticamente correcto, se proporciona un texto equivalente alternativo a las imágenes y a los enlaces se les da un nombre significativo, esto permite a los usuarios ciegos utilizar lectores de pantalla o líneas Braille para acceder a los contenidos. Cuando los vídeos disponen de subtítulos, los usuarios con dificultades auditivas podrán entenderlos plenamente. Si los contenidos están escritos en un lenguaje sencillo e ilustrados con diagramas y animaciones, los usuarios con dislexia o problemas de aprendizaje están en mejores condiciones de entenderlos.(Referencia: Wikipedia - Accesibilidad Web).

Vigésima sexta clase del curso INTRODUCCIÓN AL DESARROLLO WEB, producido por Sergio Luján Mora de la Universidad de Alicante, España. En la clase de hoy la expositora de turno nos explicará los cuatro elementos más problemáticos dentro de la accesibilidad web y cómo la legislación española considera el tema de accesibilidad.

25. Introducción al Desarrollo Web: Accesibilidad. Para discapacitados en la web.

La accesibilidad Web hace parte de la usabilidad y es la capacidad de acceso a los sitios Web por las personas con algún tipo de discapacidad: (1) visual, (2) motriz, (3) auditiva, (4) cognitiva o (5) neurológica.

Para lograr que el contenido Web sea accesible, se han creado las Pautas de Accesibilidad al Contenido en la Web (WCAG), cuyo objetivo más importante es orientar el diseño de sitios Web hacia un diseño accesible, reduciendo las barreras a la información. WCAG tiene 14 pautas de diseño que facilitan el acceso a la información de las personas discapacitadas.

La falta de criterios de accesibilidad en los diseños web, hace que la mayoría de personas con discapacidad no puedan utilizar la Web. Entre más sitios Web sean diseñados con criterios de accesibilidad, más personas con discapacidad podrán navegar en Internet.(Referencia: Accesibilidad Web. Usabilidad Web para personas discapacitadas).

Vigésima quinta clase del curso INTRODUCCIÓN AL DESARROLLO WEB, producido por Sergio Luján Mora de la Universidad de Alicante, España. En esta ocasión tocamos un tema con connotaciones sociales con respecto a la accesibilidad web, y es la usabilidad web con respecto a los discapacitados. Es cierto que este sector resulta cuanto más una minoría, pero una minoría que posee los mismos derechos al acceso de la información como cualquier persona común y corriente. A la luz de este pensamiento es porque realizamos la clase de hoy. A tomarlo muy en cuenta.

24. Introducción al Desarrollo Web: DHTML.

El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un Document Object Model (DOM).

Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios.(Referencia: Wikipedia - HTML dinámico).

Vigésima cuarta clase del curso INTRODUCCIÓN AL DESARROLLO WEB, producido por Sergio Luján Mora de la Universidad de Alicante, España. Para el día de hoy una invitada especial nos tiene preparado hablar sobre HTML dinámico, así que conozcamos en detalle sobre este tema.

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?

Programación de lado del Cliente: jQuery 13

Ya estamos a mitad de semana:

Siguiendo con el curso de jQuery, Enoc Díaz de Código Facilíto, nos dará los detalles de cómo detectar las características de un navegador, tales como, con la realización de un script hecho con el framework jQuery. Trabajaremos con la variable $.browser para este caso.

Programación de lado del Cliente: jQuery 12

Saludos compañer@s de la red:

Continuando con el curso de jQuery, hoy en Código Facilíto, aprenderemos todo lo referente al MÉTODO DATA. Este método incorporado en el Framework JavaScript con el cual estamos trabajando ofrece la ventaja de poder recuperar la información de algún elemento en específico, siendo de gran utilidad para diferentes propósitos.

Programación de lado del Cliente: jQuery 11

Hola ciberamigos y ciberamigas:

En la segunda semana del mes, continuamos dándole duro al código. En esta ocasión metiéndonos más en el estudio del framework jQuery.

Hoy, Enoc Díaz de Código Facilíto, nos enseñará acerca de los MÉTODOS UTILITARIOS. ¿Qué son? y ¿Para qué sirven?.

Programación de lado del Cliente: jQuery 10

Buenas, buenas tengan hoy:

En el décimo vídeo y último de la semana, trataremos sobre como hacer el recorrido de nuestro documento HTML con jQuery.

Con un ejemplo a detalle, iremos viendo cómo hacer el recorrido de nuestro documento, paso a paso y sin omitir ninguno. Un vídeo más de Código Facilíto.