EsLoMas.com

Men� de ubicaci�n hecho con una lista y CSS

Patxi — Wed, 23 Aug 2006 03:00:15 +0000

Los men�s de ubicaci�n podemos verlos en muchas webs indic�ndonos en qu� secci�n estamos y cu�les son las secciones superiores, permiti�ndonos acceder mediante un clic a cualquiera de ellas, por lo que muchas veces se denominan men�s de migas de pan o bread crumbs, en clara analog�a al cuento infantil de Hansel y Gretel. Son una de esas cosas que aun pese a su sencillez, marcan la diferencia muchas veces entre webs bien dise�ados y estructurados, de los que no lo son, puesto que proporcionan al usuario en todo momento una representaci�n visible de cu�l es su ubicaci�n en el web, permiti�ndole moverse por �l.

Portada del web --> p�gina de secci�n --> p�gina de subsecci�n

En las siguientes l�neas voy a explicar c�mo realizar estos men�s mediante elementos

y CSS.

Consulta diversas APIs con AJAX

Patxi — Mon, 10 Apr 2006 18:39:44 +0000

Este es un ejemplo m�s de las aplicaciones basadas en AJAX que poco a poco van apareciendo aprovechando sus posibilidades. Se trata de gotAPI.com, y lo que nos permite es acceder al API de diversas tecnolog�as como HTML, CSS, JavaScript, PHP, MySQL, Java… La aplicaci�n es muy sencilla de utilizar, dispone de unas pesta�as que nos permiten seleccionar el API del que queremos obtener informaci�n, tras lo que en el lateral izquierdo se nos carga una lista con todos los elementos disponibles. Podemos acceder a la informaci�n de cada elemento clicando sobre �l, o utilizando la caja de b�squeda, la cual, al m�s estilo 100% puro AJAX, nos sugiere elementos conforme vamos escribiendo.

Sencilla introducci�n a CSS

Patxi — Thu, 09 Mar 2006 11:19:54 +0000

Hace mucho que no escribo nada relacionado con CSS debido a que de un tiempo a esta parte hago fundamentalmente trabajo de “techie”, pero el otro d�a me encontr� con una p�gina que ya conoc�a de hace tiempo, y que da una buena introducci�n con ejemplos de las cosas m�s b�sicas que hay que conocer.

La p�gina se llama CSS Basics.com y como el propio nombre indica, trata de conceptos b�sicos de CSS, as� que si est�s comenzando en este mundillo puede ser un buen punto de inicio, ya que son 18 p�ginas bastante ilustrativas. A partir de ah� hay multitud de cosas con las que experimentar, como estructura de p�ginas, efectos visuales o interacci�n con JavaScript…, para las que lo mejor es tener siempre a mano la referencia CSS del W3C, que aunque �rida, conviene echarle un vistazo para saber c�mo funciona CSS al detalle. Si est�s interesado en el tema te recomiendo tambi�n el tutorial de CSS de W3schools, estos tips & tricks del W3C y el servicio de validaci�n de CSS del W3C

P�gina HMTL centrada horizontal y verticalmente

Patxi — Tue, 13 Sep 2005 16:21:36 +0000

Es habitual en algunos dise�os web que la pantalla se mantenga a un ancho y alto fijo centrada en el navegador del usuario. Esto es relativamente sencillo hacerlo con HTML, pero la cosa cambia si queremos hacerlo con CSS. Con el centrado horizontal no hay problema, ya que es suficiente con dar una anchura a la capa que representa el contenido de la p�gina y poner en su margin 0 auto, sin embargo con el centrado vertical la cosa cambia. Si lo has intentado alguna vez lo primero que habr�s hecho seguramente ser� sustituir el 0 auto anterior por un auto y habr�s comprobado que no funciona. De hecho hay multitud de trucos que intentan resolver este problema, pero ninguno lo consigue del todo.

Una posible soluci�n, que a mi entender es bastante buena, se basa en la utilizaci�n de una capa con posicionamiento absoluto que se ubica en la pantalla mediante JavaScript. Al lanzarse los eventos onload y onresize se llama a una funci�n (positionIt) que se encarga de obtener las dimensiones de la capa que hay que centrar (divCentrado) y configurar sus valores left y top, para lo cual a su vez necesita obtener el tama�o disponible en el navegador del usuario, lo cual lo hace mediante las funciones getViewportWidth y getViewportHeight.

Ver ejemplo

Centrado vertical con CSS

Patxi — Fri, 18 Mar 2005 11:00:18 +0000

La necesidad de centrar horizontalmente los webs es algo muy habitual en el dise�o web, y para ello existen diversas t�cnicas bastante sencillas. Sin embargo no es tan habitual requerir el centrado vertical, por lo que hay menos informaci�n al respecto.

Soluci�n sencilla para float sin utilizar clear

Patxi — Mon, 28 Feb 2005 09:31:48 +0000

Cuando con CSS necesitamos tener un texto que fluya alrededor de una imagen, un destacado o algo similar, utilizamos el atributo float, el cual sin embargo produce diversos problemas. Si el texto es mayor que la altura del contenido sobre el que fluye no pasa nada, pero cuando es m�s corto hace que la capa que contiene el texto no “calcule” correctamente la altura, ya que parece no tomar en cuenta la altura de la capa que flota. En esta p�gina puede verse un ejemplo del problema en acci�n, si hacemos el “Inner Div” que es el que flota, m�s corto que el “Outer Div”.

Interactividad con CSS en vez de JavaScript

Patxi — Sat, 26 Feb 2005 13:30:37 +0000

He visto en SitePoint un post bastante interesante en el que habla de las posibilidades que permite CSS, en lo que respecta a realizar funcionalidades que hasta ahora �nicamente se pod�an hacer con JavaScript.

En el post se hace referencia a varios ejemplos de The CSS Playground realizados �nicamente utilizando CSS, como una ventana de alerta tipo popup DHTML, Character entities, un laberinto, un juego para cruzar una piscina llena de tiburones y muchos m�s, entre los que destaca uno que a mi especialmente me ha gustado, que es una peque�a galer�a de fotos con thumbnails hecha completamente con CSS.

Como en muchas otras situaciones se trata de buscar un equilibrio entre ambas tecnolog�as, CSS y JavaScript, en cuanto a funcionamiento y simplicidad.

JavaScript y CSS en p�ginas XHTML

Patxi — Mon, 07 Feb 2005 08:31:45 +0000

Seg�n la especificaci�n de XHTML 1.0 (Second Edition), los bloques de JavaScript y estilos contenidos en la p�gina, son tratados como si tuvieran contenido de tipo #PCDATA. Esto implica que todos los carateres que contengan del tipo <y &, se tratar�an como elementos de etiquetaci�n, por lo que habr�a que utilizar las entidades < y &. Para evitar esto existe la posibilidad de meter el contenido del script o style en un bloque CDATA, el cual impedir�a la expansi�n de las etiquetas interiores.

Actualizaci�n
Si utilizas esto en un navegador posiblemente obtengas alg�n tipo de error. Esto se debe a que muchos navegadores no entienden CDATA como debieran. En este post se explica como resolver esta situaci�n.