CSS: El modelo de caja (Box model)

Existe un conjunto de características que determinan la posición y distribución de un elemento dentro de una página web. Todas estas características se pueden traducir a propiedades CSS, y conocerlas es muy importante para manipular la presentación de una página.

Sigue leyendo “CSS: El modelo de caja (Box model)”

Anuncios

Sobre los editores visuales de páginas web y otras peripecias

Comencé un curso de ASP.NET hace dos fines de semana. Es un curso básico, donde muestro las ventajas del .NET Framework para desarrollo web. Comencé hablando de lo que es, cómo se utiliza y ejemplos sencillos que muestran su funcionamiento.

Este sábado comenzamos un ejercicio que abarcará todo el curso. Empecé con la creación de un Master Page sencillo, mostrándoles las etiquetas que se pueden utilizar; después seguí con la implementación de algunos estilos en CSS, para después crear el primer WebForm…

En este punto, mientras veían lo que hacía, surgió una duda entre los participantes: ¿¡NO VAMOS A HACER EL EJERCICIO CON UN EDITOR VISUAL!?

Mi respuesta fue simplemente "Eh… no."

Esperaba no tener que extenderme, pero para continuar con el curso, primero tenía que aclarar algunos puntos. Me tomó algo de tiempo dar a entender mi punto de vista, y por qué mi "No" era definitivo. Este artículo trata de eso, y espero que le abra los ojos a unos cuantos (cientos) de programadores.

Sigue leyendo “Sobre los editores visuales de páginas web y otras peripecias”

Etiquetas HTML5 para Internet Explorer 8 e inferior

Desde tiempos inmemoriables, los navegadores tienen una característica muy buena en la que cualquier contenido dentro de símbolos < y > es considerado una "etiqueta". Independientemente si el navegador reconoce o no dicha etiqueta, no mostrará su texto.

Es decir, si yo tengo esto en mi página web:

<etiquetaInventadaPorMi>
  <p>Un párrafo</p>
</etiquetaInventadaPorMi>

Cualquier navegador se va a "brincar" la etiqueta superior, ya que no la reconoce como válida, y plasmar lo contenido dentro de ella. Cuando algún navegador reconozca esa etiqueta (cosa que dudo mucho), la aplicará como debe, pero de momento, ningún navegador la tomará en cuenta.

Un ejemplo más real de esto es la etiqueta <object>, que nos permite importar un elemento a nuestra página y colocar dentro algún contenido que será visible si el navegador no reconoce dicha etiqueta, o si no puede mostrar el elemento importado.

Ahora, ¿qué pasa si estoy haciendo mi sitio con HTML5 y uso etiquetas <header>, <footer>, <nav>, etc., y despliego la página en un navegador como IE8? No va a pasar nada, simplemente el navegador pasará de largo por esas etiquetas. Pero, ¿y si le di estilos a dichas etiquetas? He ahí el detalle.

Sigue leyendo “Etiquetas HTML5 para Internet Explorer 8 e inferior”

Modernizr: Detectar soporte de HTML5 y CSS3

Ahora que HTML5 y todas sus tecnologías son la novedad, los desarrolladores web no podemos evitar sentirnos atraidos a sus nuevas características, y todo lo que trae consigo la nueva generación de la Web. Los nuevos tipos de input, los elementos de video y audio, las transiciones, ¡webfonts!

Sin embargo, hay un detalle que como buenos y éticos desarrolladores web que somos, no podemos dejar pasar: la web es para todos. Y dentro de ese “todo” se encuentran:

  • Los navegadores que no soportan todas las características de HTML5, o al menos las que pensamos utilizar
  • Los navegadores que ya no tienen soporte (por una u otra razón) y que siguen siendo muy utilizados (por una u otra razón)
  • El hecho de que HTML5 y todas las tecnologías que abarca sigan siendo borrador, y aun está sujeto a cambios, como el caso de la etiqueta <video>, que sigue una disputa por cuál formato de video dejar como estándar

Hay una gran variedad de navegadores, y cada uno con distintas versiones, y cada versión con ciertas características soportadas. Decidir cuándo utilizar cierta característica es muy difícil cuando no anticipamos si el navegador la soportará. Pero gracias a eso, existe Modernizr.

Sigue leyendo “Modernizr: Detectar soporte de HTML5 y CSS3”

CSS3 y JQuery – Transisiones

CSS3 incluye una nueva característica para manejo de animaciones usando únicamente hojas de estilos, con las propiedades transition

Para animar la transformación de un objeto en HTML se usaba JavaScript, haciendo que las propiedades del objeto cambiaran gradualmente de un valor origen a un valor destino.

Sigue leyendo “CSS3 y JQuery – Transisiones”