Cambiando el diseño de los links en CSS – Pseudo-clases 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…
Estructura basica de una pagina web en HTML5
Comencemos hablando de semantica, y por su puesto la pregunta obvia es ¿ Que es la semantica ? La semantica no es mas que el significado que les damos a las palabras. Dejando a un lado esto hablemos un poco de la importancia en la semantica de HTML, sucede que el lenguaje esta hecho para que cada “etiqueta HTML” signifique algo, es así que el explorador sabe que pasa cuando encuentra un <img>, sabe que es una imagen, o cuando encuentra un <p> sabe que es un párrafo etc… Lo mismo sucede con los buscadores, es por eso que para un buscador es mas importante un <h1> que un <p>. leer más…
Audio en HTML 5
Una de las cosas mas bellas que tiene HTML5 es el soporte nativo para medios, basicamente hablamos de las etiquetas <audio> y < vídeo >.
Anteriormente para poner un medio en un sitio web teniamos que “empotrarlo” con un <embed> o de plano hacer una pelicula en flash, y empotrarlo en el sitio. Desde hace ya algun tiempo el uso de flash ha caido en desuso, y básicamente lo usabamos para videos, (youtube) pero ahora es muy sencillo reproducir vídeo o audio desde un explorador web con HTML5.
Las diferencias entre ambas etiquetas; audio y vídeo, es mínima, y básicamente es el nombre, asi que en esta ocasión solo veremos el uso de audio, y les recomiendo que ustedes mismo implementen vídeo, después los invito a que me cuenten como les fue, y quien se anime le publicamos su articulo.
Acompañado de este articulo encontraran un videotutorial de como hacer un menú o botonera con sonidos sin usar flash, espero les guste. leer más…
No mas Actualizaciones para Flash Player
Adobe se enfocará en el desarrollo de HTML5, abandonando así el perfeccionamiento de su Flash Player para la reproducción de videos y animaciones en sus dispositivos móviles.
El anuncio de la empresa el pasado 9 de noviembre fue: “No desarrollaremos más nuevas versiones de Flash Player compatibles con las nuevas configuraciones de móviles después del lanzamiento de Flash Player 11.1 para Androir y Blackberry PlayBook. Sí continuaremos, por supuesto, publicando actualizaciones de seguridad para las configuraciones ya existentes”. leer más…
Realiza encuestas para cualquier dispositivo movil
Este tipo de encuestas son muy comunes cuando estas realizando un estudio de mercado , pero que innovador es que en lugar de utilizar tu clasica tablita de madera con un lapiz , que lo hagas desde una tablet, un Iphone o un Android y porque no desde una BlackBerry , todo esto se puede realizar a traves de este sitio llamado http://usefunnel.com/ los cuales implementaron esta 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…
Creando Graficas con Google Chart
A muchos de nosotros nos has pasado que en algun proyecto nos piden que mostremos alguna grafica para hacer mas atractivo los datos a mostrar.
hay graficas de :
- Pastel
- Poligonal
- Pie 3d
- Barras Verticales
- Google Chart
Entre muchas otras opciones de la misma api, que nos permite personalizar los colores de cada rango, agregar texto,etc. leer más…
Crea diagramas y bocetos en línea y compártelos
Hoy les voy a mostrar una pequeña reseña de una aplicación en la nube que nos permitirá crear una infinidad de diagramas o prototipos para el armando de una pagina Web y no solo eso , también nos permitirá crear diagramas de flujo, diagramas de red así como crear cuadros comparativos utilizando fotos e ilustraciones, que la misma aplicación contiene. 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.