Estilos visuales para Windows XP

Los mejores estilos visuales son aquellos que además de tener un gran aspecto usan el sistema nativo de Windows para cambiar la apariencia, es decir no necesitan hacer uso de programas externos como Style XP o Windows Blinds. Basta ya de esa aburrida barra de tareas azul, renueva tu escritorio.

Los mejores estilos visuales

  • Royale Noir
  • Baltimore VS
  • Clearlooks Gummy
  • HmmXP
  • Lakrits
  • Human for Windows
  • Incolore Composizione XP
  • Luna Element Black
  • Luna Element Blue
  • Luna Inspirat
  • OB Windows Media Player 11
  • Revo Blue
  • SlanXP 3

Estructura y maquetación de una pagina web con capas y CSS

1 Introducción.

Primero de todo decir que lo que se va explicar a continuación será válido y funcionará si se utiliza el DTD adecuadoque para todos los temas de CSS de grafikas.es son el XHTML Transitional y el Strict. Cualquier otro DTD o la ausencia del mismo en el documento puede hacer inservible lo aquí explicado.

No se ha intentado mantener compatibilidad con IE5 dado que actualmente no es usado por más de un 1% de los internautas. Aunque la mayoría de lo explicado funcionará también en este navegador.

Durante años los diseñadores Web recurrieron al uso de tablas para la colocación de los diferentes elementos de una página. Esta fue una buena solución que permitió maquetar páginas que en apariencia estaban formadas por varias columnas y otros montajes complejos, este sistema utilizaba tablas anidadas que a muchos se les atragantaban y no conseguían entenderlas, además su estructura no era clara y hacía que los robots de los buscadores no las analizarán correctamente.

Algunos utilizábamos las capas para colocar los elementos de la página con mayor precisión y en combinación con las tablas realizábamos nuestros diseños. También las utilizábamos para mostrar o ocultar elementos y otras cuestiones. Esto generaba páginas de estructura compleja dificiles de entender para cualquiera que viera el código y estuviera aprendiendo.

Con las nuevas directrices de accesibilidad Web este tipo de maquetación esta desaprobado y se recomienda el uso de capas (etiqueta div) para componer o maquetar una página Web creando una estructura lógica de la página de fácil seguimiento por cualquiera incluidos los robots. Este «nuevo» sistema hizo que cada diseñador se las apañara como mejor le pareció para conseguir los resultados deseados y eso dió lugar a que para lograr el mismo resultado hubiera varias soluciones que se encuentran por doquier en Internet. Pero a la hora de enseñar a alguien sin conocimientos previos de capas y CSS como hacer esto no se pueden usar varios métodos (liaría más que aclarar nada), además los diferentes códigos que aparecen van solucionando los problemas de compatibilidad CSS de los diferentes navegadores sobre la marcha creando mucho código confuso que no es aplicable en todas las circunstancias o aún siéndolo es dificil discernir lo fundamental de lo accesorio.

Sin haber descubierto nada nuevo ni inventado nada lo que voy a tratar de hacer aquí es exponer un método universal (que funcione en todos los navegadores más utilizados ) que utilice el menos y más simple código posible y explicar el proceso de la manera más sencilla para mi y espero que para todos los que lean estos apuntes.

2 Las capas con CSS.

Capa fue el nombre que se empezó a utilizar para denominar a los elementos creados con la etiqueta <div> usados para colocar en la página Web cualquier otro elemento (imagen,tabla,párrafo,lista…), existía también la etiqueta <layer> para el navegador Netscape de donde supongo vendrá la denominación de capas (layers en Inglés) ya que div es la abreviatura de «division».

Bueno vamos al grano, para colocar los elementos de una página (imágenes, textos, listas, tablas, formularios, etc ) utilizaremos unos «contenedores» que además nos van a ayudar a dar estructura a nuestra página, estos «contenedores» son las capas que crearemos con la etiqueta <div>. Para HTML los elementos <div> son elementos de bloque y tienen todas las propiedades de estos pero como los utilizamos para colocar (posicionar) los elementos de la página las propiedades más específicas son las de posicionamiento:

  • Propiedad position con los valores posibles de relativeabsolute , fixed o inherit y cuyo uso es obligatorio en Ie7 y Firefox cuando queramo utilizar las propiedades siguientes de la lista.
  • Propiedades topleftbottomright que definen las distancias al elemento desde el borde superior, izquierdo, inferior y derecho de la ventana del navegador.
  • Propiedad z-index con un valor numérico (1,2,3….) que indica el orden de apilamiento es decir que capa está encima de otra un valor 3 indica que estará encima de las capas con un valor 1 o 2, por ejemplo.

Utilizar este sistema cuando se crea la estructura de la página da más problemas que ventajas, por lo menos es lo que me dice la experiencia, a la hora de explicarselo a alguien. De hecho vamos a ver que para crear la estructura de la página es mejor recurrir a otras propiedades diferentes a las de posicionamiento.

El código explicado es válido para IE6,IE7,Firefox 2 y navegadores que se adapten a las recomendaciones del w3. Se ha mantenido la compatibilidad con IE6 debido al elevado porcentaje de usarios de esta mala versión de Internet Explorer.

2.1 Crear una capa

Una capa se crea utilizando la etiqueta div se les suele dar un nombre utilizando el atributo id (el nombre ha de ser único para cada capa de la misma página) y les aplicamos propiedades mediante hojas de estilo utilizando el selector #nombre_capa.

<div id=»capa1″>aqui va el contenido de la capa</div>

El código anterior se sitúa en el body o dentro de otro div es decir las capas se pueden anidar. Para fijarle propiedades escribiremos el siguiente código en la cabecera del documento html (es decir entre las etiquetas <head> y </head>).

<style type=»text/css»>
#capa1 { position:absolute;
top:0px;
left:80px;
width:200px;
height:90px;
background:red;
z-index:2;
}
</style>

Como el nombre de la capa ha de ser único, si queremos aplicar las mismas propiedades a dos o más capas utilizaremos clases es decir a la etiqueta div le aplicaríamos el atributo class=»n_clase» y en los estilos se definiría dicha clase.

3. Crear la estructura de una página con varias columnas.

Empezamos con la estructura básica de las columnas sin más y veremos como a partir de esta llegamos a crear cualquier combinación.

Supongamos que deseamos tres columnas, dos laterales del mismo tamaño y una central más grande que utilizaremos para colocar nuestros contendios.

1.- Empezaremos creando las tres capas mediante etiquetas div, como dos de ellas serán iguales usaremos una clase para definir sus propiedades mientras que para la otra utilizaremos el atributo id (si todas son diferentes utilizaríamos el atributo id para todas ). En el cuerpo del documento ponemos:

<div class=»lateral»>Columna Izquierda</div>
<div id=»central»>Columna central</div>
<div class=»lateral»>Columna Derecha</div>

 

El resultado será el siguiente:

Columna Izquierda
Columna Central
Columna Derecha

 

Los contenidos se disponen unos encima de otros según el orden en el que se escribieron en el cuerpo del documento, además ocuparán el ancho total de la página ya que son elementos de bloque para verlo vamos a ponerles color de fondo.

<style type=»text/css»>
.lateral { background:red;}
#central {background:blue;}
</style>

 

Esto me recordó bastante el aspecto de una lista de elementos y cómo para ponerlos en fila utilizamos la propiedad float pues pensé hacer lo mismo. Así que vamos a utilizar la propiedad float con el valor left para poner las capas en fila y también debemo darles el tamaño que necesitemos, normalmente sólo el ancho ya que el alto solemos dejarlo sin definir para que vayan creciendo en función del contenido, pero en este caso al ser un ejemplo lo vamos a fijar. En cuanto al ancho puede darse en porcentaje de la página y de esa manera siempre ocuparán el mismo área de la ventana del navegador.

<style type=»text/css»>
.lateral { background:red;
float:left;
width:24%;
height:80px;
}
#central { background:blue;
float:left;
width:50%;
height:80px;
}
</style>

Observad que el ancho total no suma el 100%, esto es debido a que curiosamente en Internet Explorer cuando el ancho es 100% no entran y este a de ser algo menor, en este caso la suma de los tres anchos es 98%. De lo anterior me convencí cuando comprobé que la propia Web del w3 utilizaba este ancho inferior al 100%.

Ya tenemos la estructura de tres de columnas que se adapta al tamaño del navegador y recordad que dentro de cada div puede haber cualquier cosa incluso otros div con una estructura similar.

Creo que el código es mínimo y fácil de entender, nos inspiramos en las listas. float:left hace que los elementos se coloquen a la izquierda del que los sigue, esta propiedad hay que ponerla a todas las columnas (divs), por culpa de IE6 sino se pondría en todas menos en la última, ya que ésta no tiene que ir a la izquierda de la siguiente. En cuanto a los anchos, se pueden poner en pixeles si queremos que tengan unas medidas exactas independientemente del tamaño de la ventana del navegado. Además este último sistema es más recomendable si no queremos que el aspecto de nuestro diseño varíe mucho o se estropee del todo al variar el tamaño de la ventana del navegador.

Si queremos 4 o 2 columnas lo único que hay que hacer es definir más o menos capas (div) en el cuerpo del documento y definir sus propiedades con estilos. Veamos un ejemplo con 2 columnas.

<div id=»lateral»>Columna Lateral</div>
<div id=»contenido»>Columna principal</div>

 

El código anterior es el que colocaríamos en el cuerpo del documento, mientras que en los estilos pondríamos lo siguiente:

<style type=»text/css»>
#lateral { background:red;
float:left;
width:24%;
height:80px;
}
#central { background:blue;
float:left;
width:74%;
height:80px;
}
</style>

 

3.1 Añadir un encabezado y un pie de página

Hemos visto que realizar estructuras de páginas de varias columnas es sencillo ahora vamos a añadir un encabezado y un pie a nuestra página y veremos que no es nada complicado.

Como necesitamos una capa para el encabezado y otra para el pie empezaremos añadiendo estas a nuestro código como se muestra a continuación, como vamos a poner distintas propiedades a cada una de las capas vamos a utilizar el atributo id y no clases para asignarles las propiedades.

<div id=»cabecera»>Cabecera</div>
<div id=»lateral»>Columna Lateral</div>
<div id=»contenido»>Columna principal</div>
<div id=»pie»>Pie</div>

 

Como se observa, el orden en el que creamos las capas es el mismo que tendrán cuando se vean en la página lo que simplifica el entendimiento. Creamos la capas con el mismo orden que se van a ver ( de izquierda a derecha y de arriba a abajo ).

En cuanto a las propiedades de estas nuevas capas ( las de las capas lateral y contenido no cambian ) decir que la primera, es decir la llamada cabecera, no tiene nada especial en cuanto a posicionamiento sólo lo que queramos darle de color de fondo, tamaño etc. Como estaba trabajando con porcentajes le pondremos de ancho el total de la página en este caso y al trabajar con porcentajes 100% (bueno realmente 99%, no tengo muy claro por qué, es algo dificil de entender es como lo anterior de no poder poner columnas cuyo ancho sume 100%, si la medida es en píxeles no hay problema pero en porcentaje no podemos poner 100% porque no encaja, si alguien sabe por qué, que nos lo diga) y de alto 80px; en cuanto a la capa pie lo mismo sólo diferirá en que para que esta capa se coloque debajo de las columnas deberemos contrarrestrar el efecto de la propiedad float de la capa precedente y esto se consigue con la propiedad clear (este es el truco que no es tal). En todo caso las propiedades serán las necesarias para nuestro diseño.

<style type=»text/css»>
#cabecera { background:olive;
width:99%;
height:80px;
}
#pie { background:olive;
width:99%;
height:40px;
clear:left;
}
#lateral { background:red;
float:left;
width:24%;
height:180px;
}
#central { background:blue;
float:left;
width:74%;
height:180px;
}
</style>

 

El resultado de este añadido es el que se muestra a continuación, una composición de página con cabecera, dos columnas y pie.

Se pueden añadir más capas de este estilo ocupando todo el ancho para menús o lo que se nos ocurra. Al final de esta página hay enlaces a diversos ejemplos de la aplicación de estas sencillas técnicas.

4 Estructura definitiva de la página.

Para que la página tenga una estructura lógica deberíamos englobar las capas anteriores en otra llamada, por ejemplo, «pagina» o «contenedor», nombre este último muy utilizado pero a mi me gusta más «pagina» porque da una idea más clara de la estructura, me explico:

  • Dentro del cuerpo del documento está la página y dentro de esta la cabecera las columnas y el pie y los demás elementos que necesitemos.

Además de para tener una estructura nos servirá para evitar que una reducción del tamaño de la ventana del navegador descoloque nuestra estructura (esto sólo ocurre cuando damos unas medidas a nuestras columnas en px y no en porcentaje, compruébalo) y para en su caso centrar el diseño en la página.

Vamos a realizar una estructura como la anterior de 780px de ancho centrada siempre en la pantalla del navegador (la imagen que se verá en esta página será sensiblemente menor para entrar en su diseño), la columna izquierda será de 150px, y por lo tanto la principal será de 650px. En el cuerpo del documento escribimos el código necesario para crear las capas tal y como se muestra a continuación.

<div id=»pagina»>
<div id=»cabecera»>Cabecera</div>
<div id=»lateral»>Columna lateral</div>
<div id=»contenido»>Contenido principal</div>
<div id=»pie»>Pie</div>
</div>

Ventajas de Final Cut Pro

Final Cut Pro es uno de los programas de edición de vídeo más populares disponibles, y es el producto elegido por la gran mayoría de los editores que utilizan ordenadores Apple. Final Cut Pro hace la edición profesional de vídeos más fácil que nunca, por lo que aquí te muestro algunas ventajas que tiene este programa para que te animes a probarlo.

1. Capacidad Superior de Vídeo en HD

Final Cut Pro es ideal para crear videos en HD de la más alta calidad. Con Final Cut Pro, la importación de vídeo HD en el editor es fácil y flexible. Puedes importar vídeos directamente desde tu cámara o incluso desde una cinta o carrete. Puedes crear vídeos HD de alta calidad desde cualquier soporte que soporte el formato y se actualiza a menudo para su uso con las cámaras y dispositivos más recientes.

2. Audio multicanal

Si deseas crear vídeos de alta calidad con sonido envolvente, Final Cut Pro es definitivamente el editor para ti ya que te permite trabajar con múltiples canales de audio y mezclar esos canales de la manera que elijas.

3. Vídeo multicanal

Final Cut Pro también te ofrece la capacidad de crear capas de vídeos, esto significa que puedes reproducir varios fotogramas de vídeo uno encima del otro para efectos de fusión o atenuación. De hecho, casi no hay límite para el número de vídeos que se pueden mostrar en la pantalla al mismo tiempo.

4. Corrección profesional de luz y color

La vida real no siempre ofrece las mejores condiciones para rodar vídeos. Los fabricantes de Final Cut Pro son conscientes de ello y te dan la capacidad de ajustar y corregir fácilmente los problemas de color e iluminación. Puedes utilizar estas funciones para darle a tu vídeo un aspecto más natural, o puedes utilizarlas para darle a tu vídeo una apariencia completamente nueva.

5. Transiciones de nivel Pro sencillas

Si necesitas que una imagen se disuelva, se desvanezca, exploten corazones o estrellas en tus transiciones, Final Cut Pro te ofrece una amplia variedad de transiciones de nivel comercial. De hecho, ofrece más tipos de transiciones entre secuencias que cualquier otro programa de edición de vídeo disponible.

6. Calidad comercial

Una vez que hayas completado la edición de un vídeo puedes exportar fácilmente el proyecto al DVD Studio Pro de Apple y crear DVDs que rivalizan incluso con los mejores lanzamientos comerciales. La creación de un DVD de alta calidad sólo tarda unos minutos y la calidad del vídeo impresiona a todos los que lo ven.

7. Soporte de usuario

Los usuarios de Final Cut Pro no sólo tienen acceso al muy aclamado servicio al cliente de Apple, sino que también tienen acceso a una gran base de usuarios que es amable y servicial. Hay muchos foros y sitios de ayuda donde los usuarios experimentados ayudan a los recién llegados con soluciones a los problemas que puedes experimentar.

Espero que estas ventajas de Final Cut Pro te hayan gustado.

Conversor de entidades HTML

¿Qué hacer cuando no aparece el código HTML?

Algo que me pasa cuando quiero enviar un post que incluye código html es que no aparece el código. Esto pasa porque los caracteres <> son interpretados literalmente. Osea si escribo algo como esto que os muestro en la imagen inferior, será interpretado tal cual, por lo que sólo se mostrará un hola.

Sabiendo esto es fácil saber que la solución es cambiar dichos caracteres por su código html correspondiente, es decir se reemplazan las etiquetas < y > por &lt; y &gt;. Pero si el código a convertir es muy grande, puede resultar un fastidio hacer esto manualmente, para ello recurro a este conversor de entidades HTML, tan solo he de poner código en la zona de texto a convertir y presionar el botón convertir.

Con esto ya es posible insertar el código y que se muestre como debe de ser.

Cómo anotación esto pasa incluso en WordPress, aunque en FlatPress utilizando la etiqueta [code] de BBCode esto no sucede. Pero yo tengo que utilizar el conversor porque uso la etiqueta <pre> para poder estilizar el código.