Aunque una cuestión como esta (¿dónde coloco una etiqueta en una página? [Más]

Básicamente tenemos dos maneras de designar URLs en una página web, sea para enlaces, [Más]

    ATENCIÓN Este post lo he actualizado y ahora tienes una biblioteca específica Open Source en Github para ayudarte a sacar partido a las notificaciones de los navegadores. Pulsa aquí para acceder. Los navegadores son, cada vez más, los sistemas operativos modernos. A lo que me refiero es a que la mayoría de las aplicaciones que usamos en el día a día residen cada vez más en el navegador y menos en aplicaciones específicas en el escritorio. Por ello, desde HTML5 tenemos que poder hacer más cosas que tradicionalmente eran coto exclusivo de las aplicaciones de escritorio. Una de ellas es la posibilidad de enviar notificaciones ante ciertos eventos: Chrome Firefox Gracias a la API de notificaciones de HTML5 es posible conseguirlo, aunque tiene sus detalles que debemos controlar. Actualmente Internet Explorer es el único navegador que no soporta la API de notificaciones de HTML5, ... [Más]

Uno de las extensiones y “widgets” JavaScript más utilizadas es, sin duda, la que nos permite crear cuadros de texto auto-completables, es decir, aquellos en los que a medida que empezamos a escribir se nos van rellenando con los posibles valores correctos, algo así: Lo habitual es usar algún plug-in de jQuery para conseguirlo. Sin embargo gracias a HTML5 esto ya no es necesario en la mayor parte de los navegadores. En HTML5 tenemos una nueva etiqueta llamada datalist que nos permite definir el contenido para esos cuadros de texto. Su sintaxis es la siguiente: <datalist id="cursos"> <option value="HTML5 y CSS3"/> <option value="JavaScript"/> <option value="ASP.NET MVC"/> <option value="ASP.NET Web Forms"/> <option value="ASP.NET SignalR"/> </datalist> De esta manera, y de forma muy parecida a... [Más]

Se trata esta de una cuestión básica pero que muchos programadores web con poca experiencia suelen confundir. Imagina que tienes un sitio web muy sencillo con una página, una hoja de estilos y una imagen, organizados de esta manera: La página que está ubicada en la raíz hace uso de la hoja de estilos “MisEstilos.css” que está en la carpeta CSS. Además incluye a la imagen “Correo.jpg” almacenada en la carpeta “imágenes”. Además, la hoja de estilos incluye una regla que hace uso también de la misma imagen, para colocarla de fondo en un elemento. ¿Cuál es la ruta relativa que deberíamos usar para referenciar a la imagen desde la página? ¿Y desde la CSS? ¿Es la misma? Veamos las respuestas a estas preguntas, bastante sencillas pero no obvias para todo el mundo. Si queremos referenciar la imagen desde la página debemos hacer algo como esto: <img src="imagenes/Correo.jpg"> Más fácil imposible, ¿no? La página hace uso de la hoja de estilos, así que pa... [Más]

Si alguna vez has utilizado Modernizr sabrás que esta biblioteca de JavaScript te permite determinar qué características soporta un navegador y cuáles no, tanto mediante código como mediante CSS (gracias a unas clases que añade a tu página por código). La verdad es que Modernizr está muy bien, pero añade complejidad a las páginas y puede afectar al rendimiento ya que debe procesarse antes de poder aplicar las correcciones apropiadas. ¿No sería estupendo que pudiésemos hacer este tipo de comprobaciones directamente con reglas CSS? Al igual que CSS3 nos trajo las media queries para poder hacer consultas sobre el medio en el que se visualiza una página, introdujo también las “CSS feature queries” que se consiguen mediante el uso de la palabra clave @supports en las reglas CSS. Del mismo modo que las media queries usan regiones de tipo @media para agrupar reglas qu... [Más]

Una cuestión que seguro que has visto implementada muchas veces por toda la Internet son las típicas flechas cuadradas que aparecen generalmente como parte de algún elemento mayor del que forman parte. Me estoy refiriendo a flechas como las que puedes ver en Facebook por ejemplo: o esta otra más pequeña de la misma red social: ¿Cómo podemos crear este tipo de flechas (y algunas otras) usando únicamente CSS y sin necesidad de emplear gráficos? La respuesta es a través del uso inteligente de los bordes en el modelo de cajas de CSS. Para verlo mejor consideremos cómo se pintan los bordes de un elemento HTML, para lo cual vamos a visualizar un simple div como este: <div id="mostrarBordes"></div> con sus cuatro bordes en colores diferentes, con esta regla CSS: #mostrarBordes { width:200px; height:200px; border-style: solid; border-width: 50px; border-color: blue red gr... [Más]

Nota: He estado un poco “missing” desde hace un tiempo, casi un mes, entre otras muchas cosas por que he estado muy involucrado en el lanzamiento de nuestra zona de recursos para programadores en campusMVP.es. En ella encontrarás muchas cosas interesantes para programadores, sobre todo los que se inician, y podrás encontrar trucos, conceptos de base, vídeos prácticos, noticias, y mucho más. Añádelo a favoritos :-) Ahora, para compensar, un artículo bastante a fondo sobre un tema muy interesante... ;-) De toda la vida estamos acostumbrados a que, cuando visualizamos un vídeo, tengamos la opción de verlo a pantalla completa, para poder apreciar todos los detalles y verlo en alta definición. En lo que no se fijaba casi nadie es en que, hasta hace relativamente poco, todos esos visores de vídeo estaban basados en Flash y en menor medida en Silverlight, y esa capacidad de verse a toda pantalla... [Más]

Una necesidad muy común es la de numerar elementos en nuestras páginas web. Una manera muy sencilla, pero muy poco flexible, es utilizar listas ordenadas, <ol>, que por defecto numeran usando dígitos arábicos (los más habituales) pero que se pueden cambiar por otros tipos de numeración (números romanos o letras, por ejemplo). Sería algo así: <ol> <li>Elemento 1 <ol> <li>Lorem ipsum dolor sit amet.</li> <li>Consequuntur, in facilis quae praesentium?</li> </ol> </li> <li>Elemento 2 <ol> <li>Lorem ipsum dolor sit amet.</li> <li>Quasi illo aperiam labore aliquid!</li> </ol> </li> <li>Elemento 3 <ol> <li>Lorem ipsum dolor sit amet.</l... [Más]

Tenemos una página web (por ejemplo, un blog) en la cual necesitamos insertar vídeos d [Más]