Etiqueta ‘HTML’
Calendario accesible con Javascript (Jquery)
Fecha de publicación: 2011/12/18
Llevaba tiempo queriendo montarme un calendario con Javascript, y dejar de depender de calendarios de terceros (que no siempre se ajustaban a lo que necesitaba), y por fin lo he hecho. Así que, lo publico por si a alguien le resulta útil.
El calendario tiene las siguientes características:
- Posibilidad de insertarlo en línea (el comportamiento al clicar una fecha no va definido, habrá que crearlo según sea necesario)
- Detección de soporte de calendario para los campos de fecha en HTML5
- Accesible si obviamos el requerimiento de soporte Javascript: no es dependiente de dispositivo.
- Posibilidad de limitación de fechas seleccionables.
- Facilidad de traducción a otros idiomas.
- Inicio de semana (domingo o lunes) configurable.
Datos del artículo:
- Etiquetas: Calendario, Campos de tipo fecha, Desarrollo web, HTML, javascript, Jquery, Plugins Jquery
- Publicado en categorías: Desarrollo web, HTML 5, Javascript
- Hay 4 comentarios
Listas ordenadas: cambiar estilos de la numeración
Fecha de publicación: 2011/10/04
A los elementos de lista se les pueden añadir por CSS bullets, números, letras, etc. que les precedan cuando son visualizados en el navegador, mediante la propiedad ‘list-style’, o bien asignarles una imagen de fondo mediante la propiedad ‘background’.
Cuando se trata de listas ordenadas lo habitual es utilizar números:
ol li {list-style:decimal;}Los números de la lista ordenada llevarán el mismo estilo que el elemento LI. Pero puede ocurrir que se quiera que los números tengan un estilo distinto, por ejemplo que, a diferencia del texto, vayan en negrita:
Datos del artículo:
- Etiquetas: CSS, Desarrollo web, Elemento LI, Elemento OL, Elementos de lista, HTML, Pseudo-elemento before, Pseudo-elementos CSS
- Publicado en categorías: CSS, Desarrollo web
- Comentarios desactivados en Listas ordenadas: cambiar estilos de la numeración
Mini-guía de introducción a HTML 5
Fecha de publicación: 2011/01/29
Tras aproximadamente una década de HTML 4.01 y XHTML 1.0, el W3C está a punto de sacar una nueva versión del estándar con unos cambios muy interesantes.
Por ello, para introducirse en los cambios más notorios, estoy preparando una pequeña guía de los mismos. No está terminada, pero creo que los conceptos más importantes ya quedan claros.
Datos del artículo:
- Etiquetas: Aprendizaje, Desarrollo web, Guías, HTML, HTML 5, HTML5, W3C
- Publicado en categorías: Desarrollo web, HTML 5
- Comentarios desactivados en Mini-guía de introducción a HTML 5
Diferenciación de versiones de Internet Explorer sin hacks de CSS
Fecha de publicación: 2011/01/19
Resulta habitual encontrarse con que las distintas versiones de Internet Explorer interpretan de forma distinta ciertas propiedades CSS, y que sea necesario utilizar engorrosos selectores para filtrar las versiones que dan problemas, vincular hojas de estilo mediante comentarios condicionales, Javascript, etc.
Datos del artículo:
- Etiquetas: Comentarios condicionales, CSS, Hacks CSS, HTML, Internet Explorer, Navegadores web
- Publicado en categorías: CSS, Desarrollo web, XHTML
- Comentarios desactivados en Diferenciación de versiones de Internet Explorer sin hacks de CSS
HTML: Elementos de cita BLOCKQUOTE, Q y CITE
Fecha de publicación: 2011/01/13
Datos del artículo:
- Etiquetas: Elemento BLOCKQUOTE, Elemento CITE, Elemento Q, Estándares web, HTML, HTML 5, XHTML
- Publicado en categorías: Desarrollo web, HTML 5, XHTML
- Hay 2 comentarios
Jquery: galería con elementos superpuestos
Fecha de publicación: 2011/01/01
El objetivo es crear una galería con elementos superpuestos:
Al clicar sobre uno de los elementos plegados, éste se despliega, a la vez que el que estaba seleccionado con anterioridad se pliega. Totalmente accesible mediante navegación de teclado.
Datos del artículo:
- Etiquetas: Galerías de imagen, Galerías superpuestas, HTML, javascript, Jquery
- Publicado en categorías: Accesibilidad, Desarrollo web, Javascript
- Comentarios desactivados en Jquery: galería con elementos superpuestos
Javascript-Jquery: Galería con desplazamiento (carrusel)
Fecha de publicación: 2010/12/24
Actualizado 2011-02-18: Se añade una variante con desplazamiento ilimitado.
El objetivo es crear una galería con desplazamiento mediante Javascript manteniendo la accesibilidad cuando no hay soporte Javascript.
Datos del artículo:
- Etiquetas: Carruseles, Galerías de imagen, HTML, javascript, Jquery
- Publicado en categorías: Desarrollo web, Javascript
- Hay 4 comentarios
CSS: max-width y min-width en Internet Explorer 6
Fecha de publicación: 2010/05/10
Como ya sabemos, Internet Explorer 6 carece de soporte para determinadas propiedades de CSS.
Pero se pueden emular las propiedades min-width ymax-width, mediante la inclusión de expresiones en la propiedad width.
Datos del artículo:
- Etiquetas: Comentarios condicionales, CSS, Desarrollo web, HTML, Internet Explorer 6, max-width, min-width
- Publicado en categorías: CSS, Desarrollo web
- Comentarios desactivados en CSS: max-width y min-width en Internet Explorer 6
HTML: uso de atributos id, headers y axis en tablas
Fecha de publicación: 2010/02/16
Habitualmente se utiliza el atributo scope en las tablas para definir la relación de las celdas con las columnas.
Datos del artículo:
- Etiquetas: Accesibilidad, Atributo header, Atributo id, Atributos HTML, HTML, Tablas HTML, XHTML
- Publicado en categorías: Desarrollo web, XHTML
- Comentarios desactivados en HTML: uso de atributos id, headers y axis en tablas
Tablas HTML: desaparece el borde de celda
Fecha de publicación: 2010/02/15
A veces en Internet Explorer 6 ocurre que al meter enlaces dentro de una celda desaparece algún borde de dicha celda.
Parece absurdo, y lo es. Pero una posible solución es comprobar si el contenido de dicha celda cabe en el ancho de la misma. A veces dándole un ancho mayor desaparecerá el problema.
Que aburrida sería la maquetación sin IE6 ¡Larga vida a IE6!
Datos del artículo:
- Etiquetas: Bugs de Internet Explorer 6, HTML, Internet Explorer 6, Tablas HTML
- Publicado en categorías: Desarrollo web
- Hay 2 comentarios