Estilos Genéricos para CSS

Cuando uno maqueta páginas Web desde cero y de forma constante, se hace necesaria la adopción y creación de estilos genéricos con el propósito de facilitar y agilizar el proceso de codificación HTML/CSS.

En esta ocasión se presentan algunos estilos genéricos que pueden ser de mucha utilidad.

CSS Reset

Muy importante para empezar, son los estilos que «limpian» los elementos del HTML, es decir eliminan los atributos visuales que no son de utilidad (CSS Reset).

Ejemplo:

YUI Reset de Yahoo!

Enlaces o links

Se define un color común y el subrayado al pasar el puntero del ratón (evento “hover”).

Ejemplo:

a { color:blue; text-decoration:none; }
a:hover { text-decoration:underline; }

Alineación

Estilos para la ubicación o alineación de los elementos:

.left { float:left; } /* alineación izquierda */
.right { float:right; } /* alineación derecha */
.clearer { clear:both; } /* limpiador de alineaciones */

Estilos para la alineación de texto o cualquier elemento «inline» dentro de un elemento «block».

.tac { text-align:center; }
.tar { text-align:right; }

Esquinas redondeadas

Estos nos sirven para diseños que contienen elementos rectangulares con las esquinas redondeadas.

Ejemplo:

.esq { background:url('esquinas.gif') no-repeat; height:4px; position:absolute; width:4px; } /* propiedades similares de las 4 esquinas */
.si { left:0; top:0; } /* esquina superior izquierda */
.sd { right:0; top:0; background-position:-4px 0; } /* esquina superior derecha */
.ii { left:0; bottom:0; background-position:0 -4px; } /* esquina inferior izquierda */
.id { right:0; bottom:0; background-position:-4px -4px; } /* esquina inferior derecha */

Para este caso se utiliza la técnica de “sprite” y la imagen “esquinas.gif” es como sigue:


Y aquí un ejemplo de código HTML:

<div class=”caja”>
<div class="esq si"></div>
<div class="esq sd"></div>
<div class="esq ii"></div>
<div class="esq id"></div>
<!-- contenido -->
</div>

Esquinas redondeadas en CSS3

Con la nueva versión del CSS, la técnica es sencilla, pero solo es soportada por algunos navegadores.

Ejemplo:

.round { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }

Iconos

Usualmente los enlaces van acompañados de un icono al lado izquierdo.

Ejemplo:

/* Para un icono de 16x16 pixeles a lado izquierdo de un enlace */
.ico { background:url('icono.gif') no-repeat; line-height:16px; padding:1px 0 1px 20px; }

Elemento oculto

Muchas veces es necesario un estilo que oculte elementos, que podemos solucionar con la siguiente clase:

.oculto { display:none; }

De esta manera podemos crear aun mas estilos genéricos y que podemos usar en todas nuestras maquetas, incluso llegar a crear un sencillo Framework CSS que se adapte a nuestras necesidades.

Como pegar desde MSWord contenido limpio al editor TinyMCE

TinyMCE una herramienta importante cuando queremos crear contenidos ricos en html.

Pero cuando copiamos (copy) contenido de otros documentos como paginas Web o documentos como Word, al pegar (paste) en el editor TinyMCE se pega con cabeceras, estilos, y otros códigos innecesarios para nuestra aplicación.

Para ello existe un plugin “paste” con la configuración “paste_auto_cleanup_on_paste : true”, que hace posible que el contenido este limipio de estos estilos propios de la fuente.

Aquí un pequeño código de ejemplo:

tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "paste",
	paste_auto_cleanup_on_paste : true
});

Personaliza tu Like Box o Fanbox de Facebook

Luego de que creciera la popularidad de Facebook, ya hace bastante tiempo, se ha puesto de moda incluir en los sitios web y/o blogs un widget o plugin denominado Like Box o Fanbox.

Este plugin es proporcionado por el mismo Facebook y puede ser embebido mediante código HTML en cualquier página web.

Para ello debemos tener o crear una página de fans en Facebook y al momento de editarla, buscar la opción “Promocionar con un Me gusta”.

Antes de generar el código se nos da a escoger algunos atributos (el ancho, el número de fans, mostrar lo que se publica y mostrar el logo de facebook). Esto nos da como resultado dos tipos de código.

Tipo: iframe

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=138937514309&connections=10&stream=0&locale=es_ES" allowtransparency="true" style="border:none; overflow:hidden; width:300px; height:245px;"></iframe>

Tipo: javascript

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA"></script>
<script type="text/javascript">FB.init("169ca0b3b2d5dbc7b3bb01812e88b2bb");</script>
<fb:fan profile_id="138937514309" stream="0" connections="10" logobar="0" width="300"></fb:fan>

Podemos elegir cualquiera, lo importante es que existe la posibilidad de asociar una hoja de estilos (CSS) al plugin, he ahí el “truco”, simplemente agregando la URL de la CSS en el código generado (ver ejemplo).

Tipo: iframe

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=138937514309&connections=10&stream=0&locale=es_ES&css=http://www.tecnato.com/css/fanbox.css" allowtransparency="true" style="border:none; overflow:hidden; width:300px; height:245px;"></iframe>

Tipo: javascript

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA"></script>
<script type="text/javascript">FB.init("169ca0b3b2d5dbc7b3bb01812e88b2bb");</script>
<fb:fan profile_id="138937514309" stream="0" connections="10" logobar="0" width="300" css="http://www.tecnato.com/css/fanbox.css"></fb:fan>

Lamentablemente nuestras reglas del estilo deben tener la propiedad !important para que causen efecto; además el archivo CSS es almacenado en la memoria cache de Facebook por un tiempo indeterminado, esto quiere decir que si queremos hacer cambios estos no se reflejarán; al menos existe una forma para hacer varias actualizaciones a la CSS, la cual es cambiándole de nombre para cada nueva versión. mejor es agregar una variable, por ejemplo: estilo.css?1, donde «1» representa la versión.

CSS de ejemplo

.fan_box .full_widget .connect_top{background-color:#ced4dd !important;color:#000 !important;}
.fan_box .full_widget .connect_top a{color:#125687 !important;}
body.fan_widget &gt; div div *, body.fan_widget .fan_box .connections{border:none 0 !important;}
#fan_widget_container{padding-left:5px;width:274px;overflow:hidden;}
.fan_box .full_widget {
background:none repeat scroll 0 0 white;
border:solid #1C416C !important;
border-width:0 2px 2px 2px !important;
display:block;
overflow:hidden;
width:auto;
}
.fan_box .connections { border-top:1px solid #A6B2C8 !important; }
.fan_box .connections_grid .grid_item{width:42px!important;}
.fan_box .connections_grid .grid_item img{width:42px!important;}
.fan_box .name_block { display:none !important; }

Utilidades para tu Sitio Web: jQuery

jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la licencia MIT y de la GNU General Public License, Versión 2. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas. Microsoft la añadirá en su IDE Visual Studio y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrará con su plataforma Web Run-Time.

Uso

jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.

La característica principal de la biblioteca es que permite cambiar el contenido de una página web sin necesidad de recargarla, mediante la manipulación del árbol DOM y peticiones AJAX. Para ello utiliza las funciones $() o jQuery().

Fuente

Utilidades para tu Sitio Web: GSlide

¿Qué es?

GSlide es un script que sirve para mostrar imágenes de forma secuencial a manera de presentación en una página web.

Usando GSlide

HTML

Solo se requiere un elemento DIV que servirá como contenedor.

<div id="slide"></div>

CSS

Aunque no es necesario, es preferible establecer inicialmente las dimensiones del contenedor de forma que al cargar la página se observe el espacio asignado.

#slide { width:400px; height:300px; }

Javascript

Para el funcionamiento se requiere incluir el framework jquery.

El siguiente paso es crear un nuevo objeto “slide” indicando el id del DIV contenedor (container), su ancho (width), su alto (height) y cuanto tiempo tardará en cambiar de imagen (delay).

var slide = new GSlide({container:'#slide', width:400, height:300, delay:3000});

Luego podemos agregar las imágenes que queramos, las cuales deben tener las mismas dimensiones del DIV contenedor; opcionalmente podemos agregar un enlace y un título para cada imagen.

slide.addSlide('img/foto1.jpg', '#', '');
slide.addSlide('img/foto2.jpg', 'http://gruposistemas.com', 'Web Profesional &amp; Creativa');
...

Finalmente se inicia el slide

slide.showSlide();

Ejemplos

Sitios Web que usan GSlide:

Código fuente

var GSlide = function(params){
var params = params || {};

var container = params.container;
var width = params.width;
var height = params.height;
var delay = params.delay;

var count = 0;
var slides = new Array();
var actual = 0;

var entrante = document.createElement('a');
var saliente = document.createElement('a');

/* init */
jQuery(container).css({'position':'relative', 'width':width + 'px', 'height':height + 'px'});
jQuery(entrante).css({'position':'absolute', 'z-index':'20'}).html('<img />');
jQuery(saliente).css({'position':'absolute', 'z-index':'30'}).html('<img />');
jQuery(container).append(entrante).append(saliente);

this.addSlide = function(src, href, title){
slides[count++] = {src:src, href:href, title:title};
}

function loadSlide(){
jQuery(entrante).children('img').attr('src', slides[actual]['src']);
actual = (actual + 1) % count;
var href = slides[actual]['href'];
var title = slides[actual]['title'];
var src = slides[actual]['src'];
var img = new Image();
jQuery(img).load(function(){
jQuery(saliente).css({opacity:0.0});
setData(saliente, src, href, title);
jQuery(saliente).animate({opacity:1.0}, 1000);
}).attr('src', src);
}

function setData(slide, src, href, title){
jQuery(slide).attr('href', href);
jQuery(slide).attr('title', title);
jQuery(slide).children('img').attr('src', src);
}

this.showSlide = function(){
setData(saliente, slides[0]['src'], slides[0]['href'], slides[0]['title']);
setInterval(loadSlide, delay);
}
}