Modernizr: librería Javascript para detectar HTML5, CSS3 y más

ByLuis

Modernizr es una librería que permite detectar las nuevas características de HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular:

if (Modernizr.geolocation) {
  // Admite geolocalización
}
if (Modernizr.csstransitions) {
  // Transacciones CSS
}
if (Modernizr.rgba) {
  // RGBA
}

Las características que detecta son:

  • @font-face
  • Canvas
  • Canvas Text
  • HTML5 Audio
  • HTML5 Audio formats
  • HTML5 Video
  • HTML5 Video formats
  • rgba()
  • hsla()
  • border-image
  • border-radius
  • box-shadow
  • Multiple backgrounds
  • opacity
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS 3D Transforms
  • CSS Transitions
  • Geolocation API
  • Input Types
  • Input Attributes
  • localStorage
  • sessionStorage
  • Web Workers
  • applicationCache
  • SVG
  • SVG Clip paths
  • SMIL
  • Web SQL Database
  • IndexedDB
  • Web Sockets
  • hashchange Event
  • History Management
  • Drag and Drop
  • Cross-window Messaging

Modernizr

Similar Posts

Indicar calidad de la password con Javascript

ByLuis

Ya hace tiempo comentamos como indicar la calidad de una contraseña mediante Javascript y esta vez vamos a mostraros otro ejemplo de cómo hacerlo.
passwordmeter.png
En esta ocasión se van a usar dos scripts, uno de ellos está basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseña tenga más de 8 caracteres, tenga minúsculas y mayúsculas, algún número, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librería, pero no me gusta que el formulario se cree mediante javascript.
Password Meter
Vía / WebAppers

Bluff: gráficas mediante Javascript

ByLuis

Bluff es un script que nos permite realizar gráficas de forma sencilla en Javascript. Es necesario incluir la librería JS.Class para que simule canvas en IE.

canvas.png

Crear gráficas es muy sencillo y solo deberemos incluir un script parecido a este:

<canvas id="example"></canvas>
<script type="text/javascript">
var g = new Bluff.Line('example', 400);
g.theme_37signals();
g.title = 'My Graph';
g.data('Apples', [1, 2, 3, 4, 4, 3]);
g.data('Oranges', [4, 8, 7, 9, 8, 9]);
g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
g.data('Peaches', [9, 9, 10, 8, 7, 9]);
g.labels = {0: '2003', 2: '2004', 4: '2005'};
g.draw();
</script>

Bluff

|

Laboratorio: carga secciones de javascript de forma dinámica

ByLuis

Ayer fuí víctima de las librerías de Javascript, utilicé jQuery para facilitar el ajax y de paso para el DOM, cuando para esto último no hubiera sido necesario, tardé más en enterarme de cómo hacer un getElementById en jQuery que en hacerlo sin más.

Ante esto me pregunté si no sería mejor coger la librería de jQuery y dividirla en funcionalidades, y cargar solo la parte que vayamos a usar. Para ello se me ocurrió transformar el .js en un .php y cargar las diferentes funcionalidades según unos parámetros de entrada. Veo que aNieto2K ha tenido una idea parecida y buenísima, pero mediante javascript. En el caso que yo comento se podría hacer que si quiero Ajax, a parte también se carguen las funcionalidades del DOM que pueda usar la parte Ajax, transparente para el que use la librería.

Para realizar esto, he tenido en cuenta dos cosas: obtener ciertos parámetros de entrada y según estos, cargar ciertas partes del script y usar un sencillo sistema de caché para no estar teniendo que crear en script online todo el tiempo.

Read More “Laboratorio: carga secciones de javascript de forma dinámica”

Bordes irregulares con CSS3 y webkit

ByLuis

Jugando un poco con las CSS3 y Webkit (en mi caso Chrome) me ha dado por crear bordes irregulares. Lo he hecho mediante -webkit-border-top-left-radius y similares.
El concepto es sencillo, hay dos colores: el de fondo (no puede ser transparente) y el del borde, en las curvas concavas se usan los colores tal cual, y en las curvas convexas se usan al revés (el color borde se simula usando el color de fondo, y el fondo con el borde).
bordeslocos.png
La verdad es que lo he hecho rápido y me he liado bastante y está muy a ojo, pero espero estudiarlo un poco mejor cómo va e incluso hacer un plugin para jquery.
Ejemplo

| |

Laboratorio: filtrado de tablas

ByLuis

Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
filtrado-tablas.png

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.

Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.

La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “líquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
filtro.gif

Read More “Laboratorio: filtrado de tablas”

wForms: javascript para tus formularios

ByLuis

wForms es cógido Javascript no intrusivo que te ayuda a realizar las acciones más comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:

  • Validación de los campos de entrada: como se define los campos obligatorios y la comprobación del formato para cada campo.
  • Sincronización entre campos: cómo controlar campos del formulario dependiendo de otros campos.
  • Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.

wForms

Vía / dzone