La parte más importante de este framework CSS es la rejilla, qla cual como hemos indicado en otros tutoriales, permite situar los elementos de la página de una manera precisa y sencilla. En este artículo mostraremos cómo funciona esta rejilla y las principales clases para poder maquetar una página web. Blueprint propone un contenedor de 950 píxeles de anchura, que se divide en 24 columnas. La columna ocupa un espacio de 30 píxeles, con una separación de 10 píxeles entre columnas. Mediante estas dimensiones, como decimos, se pueden conseguir 24…

Leer más

En otros tutoriales ya hemos mostrado una introducción a Blueprint y a sus características. Ahora queremos comenzar a ofrecer las explicaciones necesarias para empezar a utilizarlo. Para minimizar en la medida de lo posible tu curva de aprendizaje y ayudarte a sacar provecho del framework CSS desde el primer momento. En este artículo veremos qué es lo que trae el archivo para descarga de Blueprint y os instaremos a echar un vistazo a sus contenidos. Luego mostraremos el código que tenemos que poner en nuestra web para incluir los archivos CSS…

Leer más

En el siguiente tutorial hablaremos de Blueprint el cual es un complemento para desarrolladores de webs que aumentará la productividad en las tareas de diseño y maquetación de páginas. Se trata de una serie de librerías de Hojas de Estilo en Cascada que contienen código útil para maquetar una página web y aplicar otros tipos de estilos tipográficos o de impresión, algo que comúnmente conocemos como Framework CSS. Este sistema nos ofrece una serie de archivos con código CSS que podremos incluir en las páginas web para aplicar estilos de…

Leer más

Para hacer un benchmark sencillo podríamos realizar nosotros a mano un poco de código Javascript para contar el tiempo, pero existen herramientas que nos dan respuesta a este asunto de una manera bastante más sencilla. Veremos pues cómo la consola de Firebug nos ayudará por medio de una serir de de funciones Javascript que incluye su API. Funciones para medir tiempo console.time() y console.timeEnd() Este par de funciones nos sirven para medir el tiempo en milisegundos transcurrido desde que se inicia la cuenta con console.time() y se finaliza con la…

Leer más

La extensión Firebug ha sido tratada en diversos artículos en DesarrolloWeb.com y en cientos o miles de artículos de otras webs. Y no es para menos, pues se trata de uno de los complementos más útiles y preferidos por los desarrolladores. En este artículo vamos a empezar a explicar las funciones de las que dispone el API de la consola de Firebug. Quien no conozca esta extensión no tiene más que leer el artículo sobre Firebug, pero estoy seguro que quien lea esto estará al tanto y se encontrará más bien…

Leer más

Vamos a hablar sobre Firebug, una extensión de Firefox muy útil para desarrolladores del web, que permite examinar minuciosamente cada uno de los elementos de la página, en busca de errores del código o fallos de presentación. Por medio de Firebug podemos controlar cualquier cosa que ocurre dentro de Firefox cuando carga cualquier página web. Permite examinar todos los elementos HTML, y además los estilos CSS y los códigos de scripting en Javascript que está ejecutando la página.  Antes que nada habría que comentar lo que son las extensiones de…

Leer más

En el siguiente tutorial te mostraremos cómo realizar un patrón de repetición o mosaico de imágenes en el elemento Canvas del HTML5, lo que se conoce en inglés como Pattern. Los patrones de repetición o patterns son muy utilizados en el diseño web. HTML los tiene y CSS por supuesto que también. Todos los habremos usado en cantidad de ocasiones, para conseguir la repetición de una imagen que colocamos como fondo de una página o de cualquier otro elemento de una web. El componente Canvas del HTML 5 también tiene…

Leer más

En el siguiente tutorial podemos pasar a ver un primer ejemplo de utilización del mismo para que los lectores de DesarrolloWeb.com puedan ir conociendo este nuevo sistema. Para comenzar realizaremos un ejemplo de dibujo de dos rectángulos con distintos colores, que realizaremos utilizando el un par de funciones del API de dibujo en canvas mediante Javascript. Claro que el elemento canvas tiene muchas cosas que debemos conocer para ir soltándonos en su manejo, pero al menos podremos ver una primera prueba para ir abriendo boca. El ejemplo se basa en dos…

Leer más

El Lienzo de canvas está formado por un eje de coordenadas que podemos utilizar para posicionar todos los dibujos que queramos colocar en el canvas. Eje de coordenadas del canvas Para posicionar elementos en el canvas tenemos que tener en cuenta su eje de coordenadas en dos dimensiones, que comienza en la esquina superior izquierda del lienzo. El lienzo producido por canvas tendrá unas dimensiones indicadas con los atributos width y height en la etiqueta CANVAS. Por tanto, la esquina superior izquierda será el punto (0,0) y la esquina inferior…

Leer más

Veamos el diagrama de funcionamiento de la aplicación de libro de visitas en PHP para hacernos una idea inicial, que completaremos más adelante con el código de cada script.  Vamos a basar todo el trabajo en una misma página, que será la encargada de mostrar todas las firmas de los visitantes y recoger los datos venidos por el formulario de participación para introducirlos en la base de datos. Esto puede complicar un poco el código del ejercicio final pero veremos el script por partes para que resulte sencillo. Ahora tan…

Leer más