Video en HTML5 y controles personalizados – parte 1

En este video-tutorial te explico como publicar un video en tu sitio web utilizando herramientas de HTML5, también vemos un poco de Javascript y Jquery para poder manipular este video, y hacer unos controles personalizados, de esta manera puedes reproducir y detener el video desde tus controles. leer más…

Como convertir videos para usarlos en HTML5

Una de las características que mas entusiasmo a los desarrolladores web acerca de HTML 5 es la capacidad de reproducir videos din usar Flash, y claro que era para emocionarse, imaginen lo que ello representaba, lejos de la habilidad de que estos sean reproducidos en dispositivos móviles, al fin podíamos olvidarnos de empotrar la película de Flash.

Demasiado bello para ser verdad leer más…

Cambiando el diseño de los links en CSS – Pseudo-clases CSS

ligas en CSS Una de las ventajas de CSS es que nos permite aplicar diferentes estilos a un mismo elemento en función a su estado. Así que por ejemplo cuando pasamos el ratón por encima del enlace, este cambia su aspecto. CSS define cuatro estados para un enlace:   a:link (enlace que aun no hemos visitado). a:visited (enlace que ya visitamos). a:hover (aplica un estilo al enlace cuando colocamos el puntero del       ratón por encima). a:active (aplica un estilo cuando pinchamos sobre el enlace). leer más…

Bordes redondeados CSS

Todos amamos los bordes redondeados, y no solo es por que el circulo es la figura mas perfecta de la geometría sino por que ya los podemos hacer de manera rápida. Antes de que en Css3 estuviera habilitado el Border Radius, o los bordes redondeandos habian varias maneras de hacer los bordes redondeados, y es que tomabas la imagen de las esquinas, y las encerrabas en un div que colocabas en las esquinas, era realmente horiible, ni hablar de hacer un div de ancho dinamico. leer más…

HTML5 Polyfills, un ejemplo de uso

Siguiendo con el tema de las compatibilidades HTML5 le toca el turno a los Polyfills, estos sirven para dar funcionalidades HTML5 a navegadores que no las soportan.

Para que accedas a estos Pollyfills debes entrar al siguiente enlace:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

En esta pagina encontrarás una colección de librerías y scripts para dotar de cierta compatibilidad html5. Un ejemplo sería el del estilo border-radius el cual no es soportado por las versiones 6 al 9 de Internet Explorer. Un ejemplo sencillo consiste en crear una caja con bordes redondeados para la cual nuestra regla css es la siguiente: leer más…

Detectar compatibilidad css3 con Modernizr

Actualmente la mayoría de los navegadores aceptan css3 pero puede suceder que el usuario no lo tenga actualizado por lo que los estilos css3 definidos no se verían de forma correcta. Cabe destacar que Modernizr no volverá al navegador compatible con estos estilos pero si ayudará para definir reglas css alternativas.

Haremos una pequeña practica para que se vea mas claro. En el ejemplo verás que se genera una caja de 960px de ancho por 100px de ancho con un color de letra blanco, esta caja tendrá de fondo un degradado de azul a verde. 

Para conseguir este degradado se usara el siguiente estilo:

 

background: -moz-linear-gradient(top, #65b6cf , #A7CC35);

background: -webkit-gradient(linear, 00, 0100%, from(#65b6cf),  to(#A7CC35));

 

Para los navegadores antiguos que no soportan esta propiedad se mostrará una imagen por medio del estilo:

 

background: url(‘fondo-degradado.jpg’);

 

Al principio incluimos la libreria Modernizr esta (entre otras cosas) detecta si el navegador es compatible con css3 y agrega unas clases en la etiqueta body. En el ejemplo, si el navegador es compatible con los degradados Modernizr agrega al body la clase .cssgradients con lo que podremos seleccionar y definir estilos para cada caso (que sea o no compatible).  En el ejemplo, a la caja se le define class=”caja-texto” entonces los estilos quedan así:

 

.no-cssgradients .caja-texto {

width: 960px;

height: 100px;

color: #fff;

background: url(‘fondo-degradado.jpg’);

}

.cssgradients .caja-texto { 

width: 960px;

height: 100px;

color: #fff;

 background: -moz-linear-gradient(top, #65b6cf , #A7CC35);

 background: -webkit-gradient(linear, 00, 0100%, from(#65b6cf),  to(#A7CC35));

}

 

Primero defino los estilos para la caja en caso que no se detecte soporte para gradiente lo cual se identifica por medio de la etiqueta de clase .no-cssgradients en el cual el degradado del fondo es dado por una imagen. Después se dan los estilos en caso que si se tenga soporte lo cual nos lo marca la etiqueta de clase .cssgradients en el cual se incluye el degradado siempre con sus prefijos (-moz , -webkit).

De esta manera se logra que cuando la pagina sea vista con un navegador con soporte para degradados se activen los estilos gradient sin necesidad de usar una imagen y en el caso de no ser soportado el navegador recibirá una imagen logrando así que el sitio no pierda presentación.

Creando contenido, Tutorial Jquery Español – 4

Hemos visto como obtener contenido con jQuery, pues bien, y una ves que tenemos dichos contenidos ¿ Que Hacemos ?

Ahora hay que manipular el contenido que hemos obtenido con jQuery, una de las cosas para lo que mas sirve jQuery es crear contenido dinamico, y añadirlo a la pagina web.

Este es el capitulo 2 del tutorial de jquery en español que tumaestroweb.com trae para ti, y aprenderas a crear, copiar, borrar, mover, y agrupar contenido con jQuery. leer más…

Programa HTML como un maestro Zen

Zen Coding es un paradigma de programacion web basado en Css, o una especie de ello al menos, y es que, HTML es muy repetitivo, al menos la estructura semantica por lo cual se vuelve tedioso. Pero con Zen Coding podemos crear estructuras de sitios enteros de manera rapida.

Creado por Sergey Chikuyonok, Desarrolador Ruso, apasionado de la optiizacion de imagenes tiempos y procesos. leer más…

Tutorial en español de Css3, HTML5, JavaScript, jQuery

HTML5 es un buzz o una marca nueva en el desarrollo web, y es que si recuerdas todo lo que paso cuando salio la web 2.0 sabes mas o menos de que hablo. Pues bien, es la era de las verdaderas aplicaciones web, un cambio de paradigma total. La adopción de HTML5 en dispositivos móviles ha hecho que este, HTML5 crezca muy rápido, con esto y el empuje que Google Chrome le a dado a esta revisión del lenguaje la WC3 Consorcio que dictamina el estándar ha avanzado a pasos agigantados.

La comunidad ha hecho lo suyo haciendo Hacks para poder implementar HTML5 en exploradores que no lo soportan nativamente heroes de la web como BoilerTemplate y Modernizer.

Las empresas han hecho lo suyo, Chrome ha hecho actualizaciones para su explorador casi cada ves que sale algo nuevo en el estadar, Internet Explorer 9 Es un excelente producto y cumple con el estandar bastante bien, Fire Fox Como es costumbre ha hecho lo suyo, y Safari, apoya la muerte de Flash a como de lugar.

leer más…

Taller de HTML5 en Vilahermosa, Tabasco

Curso presencial de HTML5 impartido por @cyberpolin.

Desarrollaremos un sitio web completamente en HTML5, mientras tanto aprenderemos de semantica, bordes redondeados, fondos multiples, modelo de caja y mas…

Ademas te enseñaremos como insertar vídeo sin flash, y usar diferentes fuentes en tus diseños.

El mejor estudiante (Quien sera elegido por los participantes) recibirá un dominio y hospedaje por un año para su web.

Recomienda a alguien y recibe descuentos.

Recibirás diploma de reconocimiento, y algunas sorpresas.

Aparta tu lugar ya mismo, el cupo es limitado, a 10 personas, envianos un correo, marcanos o twiteanos en @cyberpolin