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

diagramas y bocetos webHoy 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.

CompatibilIdad de Internet Explorer con etiquetas html5

compatibilidad html5

Si ya empezaste a trabajar con html5 te darás cuenta que las etiquetas nuevas no son reconocidas por Internet Explorer versión 8 y anteriores. Por ejemplo si utilizas la etiqueta <header> verás que  no es reconocida por este navegador. Esto se vuelve un problema porque si tu ya tienes diseñado tu sitio con tus hojas de estilo al quererlo ver en Internet Explorer de las versiones mencionadas te darás cuenta que los estilos de estos elementos simplemente no se aplicarán. leer más…

Carbyn, el primer sistema operativo en HTML5

Si son de esas personas raras que están muy metidos en el tema de Internet, y HTML5, esto les va a fascinar, recuerdan como Google Chrome saco hace algún tiempo ya su sistema operativo enfocado a la nube, Chrome OS el que realmente no ha tenido el boom que se esperaba de el, y es que realmente carga una version “capada” de Linux, y sobre eso el explorador, con las APPS que vayas instalando. 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…