Tips de Maquetación Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tips de Maquetación | Web 2.0 Tips</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="generator" content="WordPress 2.9.2" />
<link rel="stylesheet" href="http://web2.0-tips.com.ar/wp-
content/themes/gridfocus/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Web 2.0 Tips RSS
Feed" href="http://web2.0-tips.com.ar/feed" />
<meta name="google-site-verification" content="vzHw0J9-
Q5PjGJ5ruSmYlEwB5E6DYZn_AENTIImN19Y" />
<link rel="alternate" type="application/rss+xml" title="Web 2.0 Tips
» Maquetación Category Feed" href="http://web2.0-
tips.com.ar/categoria/maquetacion/feed" />
<script type='text/javascript' src='http://web2.0-tips.com.ar/wp-
content/plugins/vipers-video-
quicktags/resources/swfobject.js?ver=2.2'></script>
includes/js/jquery/jquery.js?ver=1.3.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD"
href="http://web2.0-tips.com.ar/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml"
href="http://web2.0-tips.com.ar/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Web 2.0 Tips' href='http://web2.0-tips.com.ar'
/>
<meta name="generator" content="WordPress 2.9.2" />


<link rel="canonical" href="http://web2.0-
tips.com.ar/categoria/maquetacion" />


<style type="text/css">
.pmcTFContainDiv {
display: inline-block;
display: -moz-inline-box;
margin: 0;
}

.pmcTFImgMini {
float: left;
width: 24px;
height: 24px;
padding: 1px;
margin: 0;
overflow: hidden;
}

.pmcTFImgNorm {

width: 48px;
height: 48px;
padding: 1px;
margin: 0;
overflow: hidden;
}

.pmcTFImgBig {
width: 96px;
height: 96px;
padding: 1px;
margin: 0;
overflow: hidden;
}

.pmcTFRSS, .pmcTFCounts {
display: block;
margin: 10px 0;
text-align: left;
}
* html .pmcTFContainDiv, .pmcTFImgMini, .pmcTFImgNorm, .pmcTFImgBig {
display: inline;
}

* + html .pmcTFContainDiv, .pmcTFImgMini, .pmcTFImgNorm, .pmcTFImgBig {
display: inline;
}
</style>
<style type="text/css">.recentcomments a{display:inline
!important;padding:0 !important;margin:0 !important;}</style>

<style type="text/css">
.vvqbox { display: block; max-width: 100%; visibility: visible
!important; margin: 10px auto; } .vvqbox img { max-width: 100%; height:
100%; } .vvqbox object { max-width: 100%; }
</style>
<script type="text/javascript">
// <![CDATA[
var vvqflashvars = {};
var vvqparams = { wmode: "opaque", allowfullscreen: "true",
allowscriptacess: "always" };
var vvqattributes = {};
var vvqexpressinstall = "http://web2.0-tips.com.ar/wp-
content/plugins/vipers-video-quicktags/resources/expressinstall.swf";
// ]]>
</script>

</head>
<body>
<div id="wrapper">

<div id="masthead" class="fix">

<h1><a href="http://web2.0-tips.com.ar/">Web 2.0
Tips</a></h1>
<div id="blogLead">
<img src="http://web2.0-tips.com.ar/wp-
content/themes/gridfocus/images/avatar.png" alt="Icon" />
<p id="authorIntro">Consejos y trucos para el
desarrollo y diseño de webs</p>
</div>
</div>

<div class="navStripWrapper">

<ul class="nav fix">
<li><a href="http://web2.0-tips.com.ar/" title="Ir a los
ultimos tips">Home<br /><span>Ultimos tips</span></a></li>
<li><a id="triggerCatID" href="#" title="Listar
categorias">Por categoría<br /><span>Listar por
tema</span></a></li>
<li class="last"><a href="http://web2.0-tips.com.ar/feed"
title="Suscrivete">Feed<br /><span>RSS</span></a></li>
<li id="searchBar1" class="searchField">
<div>
<form method="get" id="searchForm1"
action="http://web2.0-tips.com.ar/">
<span><input type="text" value="Buscar en
tips..." onfocus="if (this.value == 'Buscar en tips...') {this.value =
'';}" onblur="if (this.value == '') {this.value = 'Buscar en tips...';}"
name="s" id="s1" /></span>
</form>
</div>
</li>
<li><a href="http://web2.0-tips.com.ar/wp-
login.php?action=register">Register</a></li> <li><a
href="http://web2.0-tips.com.ar/wp-login.php">Log in</a></li>

</ul>

<div id="headerStrip" class="toggleCategories fix" style="display:
none;">
<ul class="fix">
<li class="cat-item cat-item-3"><a
href="http://web2.0-tips.com.ar/categoria/blog" title="View all posts
filed under Blog">Blog</a>
</li>
<li class="cat-item cat-item-10"><a href="http://web2.0-
tips.com.ar/categoria/herramientas-on-line" title="View all posts filed
under Herramientas on-line">Herramientas on-line</a>
</li>
tips.com.ar/categoria/integracion-social" title="View all posts filed
under Integracion Social">Integracion Social</a>
<ul class='children'>
tips.com.ar/categoria/integracion-social/delicious" title="View all posts
filed under Delicious">Delicious</a>
</li>

tips.com.ar/categoria/integracion-social/facebook" title="View all posts
filed under Facebook">Facebook</a>
</li>
tips.com.ar/categoria/integracion-social/flickr" title="View all posts
filed under Flickr">Flickr</a>
</li>
tips.com.ar/categoria/integracion-social/google" title="View all posts
filed under Google">Google</a>
</li>
tips.com.ar/categoria/integracion-social/meneame" title="View all posts
filed under Meneame">Meneame</a>
</li>
tips.com.ar/categoria/integracion-social/twitter" title="View all posts
filed under Twitter">Twitter</a>
</li>
</ul>
</li>
tips.com.ar/categoria/interactuando-con-el-navegador" title="View all
posts filed under Interactuando con el navegador">Interactuando con el
navegador</a>
</li>
<li class="cat-item cat-item-11 current-cat"><a
href="http://web2.0-tips.com.ar/categoria/maquetacion" title="View all
posts filed under Maquetación">Maquetación</a>
tips.com.ar/categoria/maquetacion/css" title="View all posts filed under
CSS">CSS</a>
</li>
tips.com.ar/categoria/maquetacion/css3-maquetacion" title="View all posts
filed under CSS3">CSS3</a>
</li>
tips.com.ar/categoria/maquetacion/hacks-para-ie" title="View all posts
filed under Hacks para IE">Hacks para IE</a>
</li>
tips.com.ar/categoria/maquetacion/html5-maquetacion" title="View all
posts filed under HTML5">HTML5</a>
</li>
tips.com.ar/categoria/maquetacion/menues-y-navegacion" title="View all
posts filed under Menues y navegación">Menues y navegación</a>
</li>
tips.com.ar/categoria/maquetacion/xhtml-maquetacion" title="View all
posts filed under XHTML">XHTML</a>
</li>
</ul>
</li>

tips.com.ar/categoria/optimizacion" title="View all posts filed under
Optimización">Optimización</a>
</li>
tips.com.ar/categoria/programacion" title="View all posts filed under
Programación">Programación</a>
tips.com.ar/categoria/programacion/javascript" title="View all posts
filed under Javascript">Javascript</a>
tips.com.ar/categoria/programacion/javascript/ajax" title="View all posts
filed under AJAX">AJAX</a>
</li>
</ul>
</li>
tips.com.ar/categoria/programacion/mysql" title="View all posts filed
under MySQL">MySQL</a>
</li>
tips.com.ar/categoria/programacion/php" title="View all posts filed under
PHP">PHP</a>
</li>
</ul>
</li>
tips.com.ar/categoria/seguridad" title="View all posts filed under
Seguridad">Seguridad</a>
</li>
tips.com.ar/categoria/seo" title="View all posts filed under SEO">SEO</a>
tips.com.ar/categoria/seo/consejos" title="View all posts filed under
Consejos">Consejos</a>
</li>
tips.com.ar/categoria/seo/metas-y-cabeceras" title="View all posts filed
under Metas y cabeceras">Metas y cabeceras</a>
</li>
</ul>
</li>
tips.com.ar/categoria/web-semantica" title="View all posts filed under
Web semantica">Web semantica</a>
tips.com.ar/categoria/web-semantica/busqueda" title="View all posts filed
under Busqueda">Busqueda</a>
</li>
</ul>
</li>
</ul>
</div>

</div>
<div id="filler" class="fix">
<div id="mainColumn">
<div id="post-175" class="post">
<div class="postMeta">
<p class="container">
<span class="date">Dec 26,
2010</span>
<span class="comments"><a
href="http://web2.0-tips.com.ar/175-usar-evento-onload-en-scripts-para-
internet-explorer.html#comments" title="Comment on Usar evento onload en
scripts para Internet Explorer">1</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/175-usar-
evento-onload-en-scripts-para-internet-explorer.html" title="Usar evento
onload en scripts para Internet Explorer">Usar evento onload en scripts
para Internet Explorer</a></h2>
<div class="entry">
<p>Hace poco escribí un post sobre como <a
href="http://web2.0-tips.com.ar/163-emulando-ajax-cross-
domain.html">emular ajax cross domain</a>, y la forma era básicamente
llamar un script el cual traía los datos en una variable de javascript,
el problema es que descubrí al terminar la aplicación y testearla en IE
que no funcionaba el evcento onload del elemento script, asi que tuve que
encontrar la forma de solucionarlo, y aqui se las traigo.</p>
<p> <a href="http://web2.0-tips.com.ar/175-usar-evento-onload-en-scripts-
para-internet-explorer.html#more-175" class="more-link">Leer este tip
»</a></p>
<br/><a href="http://www.marcadorsocial.com/?link=http://web2.0-
tips.com.ar/175-usar-evento-onload-en-scripts-para-internet-
explorer.html&title=Usar+evento+onload+en+scripts+para+Internet+Explorer&
text=Hace+poco+escrib%26%23237%3B+un+post+sobre+como+emular+ajax+cross+do
main%2C+y+la+forma+era+b%26%23225%3Bsicamente+llamar+un+script+el+cual+tr
a%26%23237%3Ba+los+datos+en+una+variable+de+javascript%2C+el+problema+es+
que...&tags=" target="_blank"><img src=
"http://www.marcadorsocial.com/bookmark.gif" border="0"
/></a><noscript><a href="http://www.socialmarker.com" >Social
Bookmarking</a></noscript> </div>
</div>
<span class="date">Sep 27,
2010</span>
href="http://web2.0-tips.com.ar/149-tag-comment-para-i.html#comments"
title="Comment on Tag <comment> para Internet
Explorer">2</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/149-tag-
comment-para-i.html" title="Tag <comment> para Internet
Explorer">Tag <comment> para Internet Explorer</a></h2>
<div class="entry">

<p>Después de haber visto los <a
title="Condicionales para IE (en el html)" href="http://web2.0-
tips.com.ar/128-condicionales-para-ie-en-el-html.html">condicionales para
IE</a>, vengo a mostrarles otro maravilloso <em>hack</em> para el
Internet Explorer (de ahora en mas IE), si bien los condicionales
cumplen su trabajo normalmente se usan para ocultar bloques o llamadas a
archivos externos con javascripts u hojas de estilo, este tag se puede
usar para casos mas cortos, como ocultar partes que simplemente en IE no
funcionaría.</p>
<p> <a href="http://web2.0-tips.com.ar/149-tag-comment-para-i.html#more-
149" class="more-link">Leer este tip »</a></p>
tips.com.ar/149-tag-comment-para-
i.html&title=Tag+%26lt%3Bcomment%26gt%3B+para+Internet+Explorer&text=Desp
u%26%23233%3Bs+de+haber+visto+los+condicionales+para+IE%2C+vengo+a+mostra
rles+otro+maravilloso+hack+para+el+Internet+Explorer+%28de+ahora%26%23160
%3B+en+mas+IE%29%2C+si+bien+los+condicionales+cumplen+su+trabajo...&tags=
" target="_blank"><img src= "http://www.marcadorsocial.com/bookmark.gif"
border="0" /></a><noscript><a href="http://www.socialmarker.com" >Social
</div>
2010</span>
href="http://web2.0-tips.com.ar/131-no-mas-abuso-de-floats.html#comments"
title="Comment on No mas abuso de floats!">6</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/131-no-mas-
abuso-de-floats.html" title="No mas abuso de floats!">No mas abuso de
floats!</a></h2>
<div class="entry">
<p>Estás cansado de ver algo parecido a
esto en CSS?</p>
<pre class="brush: css;">
* { float:left; }
</pre>
<p>Si bien es un poco exagerado, la realidad es que no hay forma de
maquetar una web aplicando el método “tableless” y sin hacer uso de
floats. A mi no me parece lógico que para ubicar 2 bloques en forma
horizontal halla que flotarlos a la izquierda o a la derecha. Y si los
quiero en el medio? Por qué no hay un “float:center”?</p>
<p> <a href="http://web2.0-tips.com.ar/131-no-mas-abuso-de-
floats.html#more-131" class="more-link">Leer este tip »</a></p>
tips.com.ar/131-no-mas-abuso-de-
floats.html&title=No+mas+abuso+de+floats%21&text=Est%26%23225%3Bs+cansado
+de+ver+algo+parecido+a+esto+en+CSS%3F++%2A+%7B+float%3Aleft%3B+%7D++Si+b
ien+es+un+poco+exagerado%2C+la+realidad+es+que+no+hay+forma+de+maquetar+u
na+web+aplicando+el+m%26%23233%3Btodo...&tags=" target="_blank"><img src=
</div>

2010</span>
href="http://web2.0-tips.com.ar/128-condicionales-para-ie-en-el-
html.html#comments" title="Comment on Condicionales para IE (en el
html)">1</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/128-
condicionales-para-ie-en-el-html.html" title="Condicionales para IE (en
el html)">Condicionales para IE (en el html)</a></h2>
<div class="entry">
<p>Desde IE 5 en adelante existen
condicionales que se pueden usar en forma de comentarios html, estos
condicionales son para mostrar o cargar un contenido o no, dependiendo de
la versión de Internet Explorer que el cliente use.</p>
<p> <a href="http://web2.0-tips.com.ar/128-condicionales-para-ie-en-el-
html.html#more-128" class="more-link">Leer este tip »</a></p>
tips.com.ar/128-condicionales-para-ie-en-el-
html.html&title=Condicionales+para+IE+%28en+el+html%29&text=Desde+IE+5+en
+adelante+existen+condicionales+que+se+pueden+usar+en+forma+de+comentario
s+html%2C+estos+condicionales+son+para+mostrar+o+cargar+un+contenido+o+no
%2C+dependiendo+de+la+versi%26%23243%3Bn+de...&tags="
target="_blank"><img src= "http://www.marcadorsocial.com/bookmark.gif"
</div>
2010</span>
href="http://web2.0-tips.com.ar/117-css3-gradient-divs.html#comments"
title="Comment on CSS3 Gradient Divs">2</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/117-css3-
gradient-divs.html" title="CSS3 Gradient Divs">CSS3 Gradient
Divs</a></h2>
<div class="entry">
<p><strong>Como hacer divs en Degrade con
CSS3. </strong></p>
<p>Bueno, este es un ejemplo muy sencillo y muy útil. 100% para
CSS3.</p>
<p>Imaginen que queremos hacer un fondo en Degrade y ademas. pretendan
que todos los browsers lo interpreten… bueno, para eso vamos a
tener que esperar un poquito, pero aca les dejo una manera muy sencilla
de lograr un degrade sin necesidad de utilizar imagenes. Este código fue
pensado para Webkit y para Mozilla. Proximamente será un standard.</p>
<p> <a href="http://web2.0-tips.com.ar/117-css3-gradient-divs.html#more-
117" class="more-link">Leer este tip »</a></p>

tips.com.ar/117-css3-gradient-
divs.html&title=CSS3+Gradient+Divs&text=Como+hacer+divs+en+Degrade+con+CS
S3.++Bueno%2C+este+es+un+ejemplo+muy+sencillo+y+muy+%26%23250%3Btil.+%26%
23160%3B100%25+para+CSS3.+Imaginen+que+queremos+hacer+un+fondo+en+Degrade
+y+ademas.&tags=" target="_blank"><img src=
</div>
2010</span>
href="http://web2.0-tips.com.ar/110-css-sprites-reduciendo-
peticiones.html#comments" title="Comment on CSS Sprites, reduciendo
peticiones">3</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/110-css-
sprites-reduciendo-peticiones.html" title="CSS Sprites, reduciendo
peticiones">CSS Sprites, reduciendo peticiones</a></h2>
<div class="entry">
<p>Uno de factores importantes para la
rápida carga de un sitio web, desde que el cliente o browser se conecta
al servidor hasta que se renderiza la página web es la cantidad de
peticiones (o requests) hechas al servidor, y es que hay que tener en
cuenta que una vez cargado el documento principal (el que contiene el
html en si), se deben descargar las imágenes, las hojas de estilo y
demás archivos complementarios, todos necesarios para que el resultado
final sea mostrado tal cual se diseñó.</p>
<p>El tema es simple, cada elemento complementario pedido al servidor
tiene un tiempo de conexión, un tiempo de latencia y un traspaso de meta-
información que componen la cabecera de estas peticiones, aparte tenemos
que tener en cuenta que por regla los browsers o navegadores web solo
harán 3 peticiones simultaneas por dominio y hasta 9 por IP, así que si
reducimos estas conexiones vamos a tener una carga mas rápida. Una de las
formas de reducir el número de peticiones es usando los llamados CCS
Sprites. <a href="http://web2.0-tips.com.ar/110-css-sprites-reduciendo-
peticiones.html#more-110" class="more-link">Leer este tip »</a></p>
tips.com.ar/110-css-sprites-reduciendo-
peticiones.html&title=CSS+Sprites%2C+reduciendo+peticiones&text=Uno+de+fa
ctores+importantes+para+la+r%26%23225%3Bpida+carga+de+un+sitio+web%2C+des
de+que+el+cliente+o+browser+se+conecta+al+servidor+hasta+que+se+renderiza
+la+p%26%23225%3Bgina+web+es+la+cantidad+de+peticiones+%28o...&tags="
</div>
<span class="date">Mar 14,
2010</span>

href="http://web2.0-tips.com.ar/63-creando-layouts-xhtmlcss-con-yaml-y-
yaml-builder.html#respond" title="Comment on Creando layouts xhtml/css
con Yaml y Yaml Builder">0</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/63-creando-
layouts-xhtmlcss-con-yaml-y-yaml-builder.html" title="Creando layouts
xhtml/css con Yaml y Yaml Builder">Creando layouts xhtml/css con Yaml y
Yaml Builder</a></h2>
<div class="entry">
<p>Buscando un poco de documentación sobre
el <a href="http://es.wikipedia.org/wiki/YAML" target="_blank">lenguaje
de configuracón Yaml</a>, encunetro este Framwork CSS, que aparte ofrece
on-line una herramienta para crear y una plantilla sobre este FW CSS, <a
href="http://www.yaml.de/en/" target="_blank">Yaml (Yet Anoter
Multicolumn Layouts)</a> ofrece una buena base de CSS para trabajar con
templates basados en columanas sobre XHTML, aparte de incluir CSS’s
y JS’s para fixear determinados bugs de Intertet Explorer. El
codigo esta bien comentado y respeta los estandares web. Lo único malo es
que no hay documentación en español (por ahora).</p>
<p>Pero lo que les vengo a mostrar, es una herramienta on-line que
ofrecen, para crear un layout basado en CSS en pocos minutos, solo
seleccionando el estilo de columnado y otras como el estilo de la barra
de navegion ,etc.</p>
<p> <a href="http://web2.0-tips.com.ar/63-creando-layouts-xhtmlcss-con-
yaml-y-yaml-builder.html#more-63" class="more-link">Leer este tip
»</a></p>
tips.com.ar/63-creando-layouts-xhtmlcss-con-yaml-y-yaml-
builder.html&title=Creando+layouts+xhtml%2Fcss+con+Yaml+y+Yaml+Builder&te
xt=Buscando+un+poco+de+documentaci%26%23243%3Bn+sobre+el+lenguaje+de+conf
igurac%26%23243%3Bn+Yaml%2C+encunetro+este+Framwork+CSS%2C+que+aparte+ofr
ece+on-
line+una+herramienta+para+crear+y+una+plantilla+sobre+este+FW...&tags="
</div>
2010</span>
href="http://web2.0-tips.com.ar/40-menu-solo-con-css-version-barra-de-
navegacion.html#respond" title="Comment on Menú solo con CSS (versión
barra de navegación)">0</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/40-menu-
solo-con-css-version-barra-de-navegacion.html" title="Menú solo con CSS
(versión barra de navegación)">Menú solo con CSS (versión barra de
navegación)</a></h2>
<div class="entry">
<p>En mi post anterior habia explicado como
hacer un menú desplegable solo con CSS sin Javascript, va aunque

lamentablemente para IE si necesita JS, es solo una pequeña función para
reemplazar un selector CSS que en el IE no funciona.</p>
<p>Ahora como les prometí en ese post, les voy a explicar como hacerlo
pero de forma horizontal, tipo barra de navegación o menú de navegación y
no tan tradicional.</p>
<p> <a href="http://web2.0-tips.com.ar/40-menu-solo-con-css-version-
barra-de-navegacion.html#more-40" class="more-link">Leer este tip
»</a></p>
tips.com.ar/40-menu-solo-con-css-version-barra-de-
navegacion.html&title=Men%26%23250%3B+solo+con+CSS+%28versi%26%23243%3Bn+
barra+de+navegaci%26%23243%3Bn%29&text=En+mi+post+anterior+habia+explicad
o+como+hacer+un+men%26%23250%3B+desplegable+solo+con+CSS+sin+Javascript%2
C+va+aunque+lamentablemente+para+IE+si+necesita+JS%2C+es+solo+una+peque%2
6%23241%3Ba+funci%26%23243%3Bn+para...&tags=" target="_blank"><img src=
</div>
2010</span>
href="http://web2.0-tips.com.ar/32-menues-desplegables-solo-con-css-sin-
javascript.html#respond" title="Comment on Menúes desplegables solo con
CSS (Sin JavaScript)">0</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/32-menues-
desplegables-solo-con-css-sin-javascript.html" title="Menúes desplegables
solo con CSS (Sin JavaScript)">Menúes desplegables solo con CSS (Sin
JavaScript)</a></h2>
<div class="entry">
<p>Muchos sitios que mantienen su
información administrada en categorías, usa menúes desplegables para ir
recorriendo los árboles de esta, y la mayoría de veces estos estan hechos
en flash o con JavaScript, ensuciando el código y volviendolo
complicado.</p>
<p>Lo que pocos saben es que se puede hacer un menu desplegable
totalmente funcional sin necesidad de usar mas que HTML y CSS, sin
incluir JS’s, librerias ni nada.</p>
<p> <a href="http://web2.0-tips.com.ar/32-menues-desplegables-solo-con-
css-sin-javascript.html#more-32" class="more-link">Leer este tip
»</a></p>
tips.com.ar/32-menues-desplegables-solo-con-css-sin-
javascript.html&title=Men%26%23250%3Bes+desplegables+solo+con+CSS+%28Sin+
JavaScript%29&text=Muchos+sitios+que+mantienen+su+informaci%26%23243%3Bn+
administrada+en+categor%26%23237%3Bas%2C+usa+men%26%23250%3Bes+desplegabl
es+para+ir+recorriendo+los+%26%23225%3Brboles+de+esta%2C+y+la+mayor%26%23
237%3Ba+de+veces+estos+estan...&tags=" target="_blank"><img src=
</div>

2010</span>
href="http://web2.0-tips.com.ar/23-variables-en-css3.html#comments"
title="Comment on Variables en CSS3">4</a></span>
</p>
</div>
<h2><a href="http://web2.0-tips.com.ar/23-
variables-en-css3.html" title="Variables en CSS3">Variables en
CSS3</a></h2>
<div class="entry">
<p>Como sabrán, hace un tiempo los mejores
browsers (firefox, safari…etc) todos menos IE8 (que tampoco forma
parte de los mejores browsers) ya dan soporte a css3, lo cual significa
que aunque un 70% use explorer, ya se pueden empezar a hacer pruebas con
css3, que realmente nos van a simplificar la vida a la hora de maquetar,
o codear xhtml + css.</p>
<p>En esta oportunidad, voy a hablar de declarar las
<strong>variables</strong> <strong>en css3</strong>.</p>
<p> <a href="http://web2.0-tips.com.ar/23-variables-en-css3.html#more-23"
class="more-link">Leer este tip »</a></p>
tips.com.ar/23-variables-en-
css3.html&title=Variables+en+CSS3&text=Como+sabr%26%23225%3Bn%2C+hace+un+
tiempo+los+mejores+browsers+%28firefox%2C+safari%26%238230%3Betc%29+todos
+menos+IE8+%28que+tampoco+forma+parte+de+los+mejores+browsers%29+ya+dan+s
oporte+a+css3%2C+lo+cual+significa+que+aunque...&tags="
</div>
<div id="paginateIndex"
class="fix">
<p><span class="left"></span> <span
class="right"><a href="http://web2.0-
tips.com.ar/categoria/maquetacion/page/2" >proximos tips
»</a></span></p>
</div>
</div>
<div class="secondaryColumn">
<div id="text-4" class="widgetContainer widget_text"><h3
class="widgetTitle">Haste autor!</h3> <div
class="textwidget"><p>En web2.0-tips, cualquiera puede publicar un
consejo, truco o articulo relacionado con el desarrollo y diseño web. Tu
puedes registrarte y postear, aparte te quedas con el 80% de impresiones
de adsense en tus publicaciones.</p>

<a href="http://web2.0-tips.com.ar/haste-autor-de-web2-0-tips">Lee mas
aca!</a></div>
</div> <div id="recent-posts-3"
class="widgetContainer widget_recent_entries"> <h3
class="widgetTitle">Recent Posts</h3> <ul>

<li><a href="http://web2.0-tips.com.ar/193-
creador-de-backgrounds-on-line.html" title="Creador de backgrounds on-
line">Creador de backgrounds on-line </a></li>
file-upload-simil-ajax.html" title="File upload simil Ajax">File upload
simil Ajax </a></li>
basta-de-gd-en-php-a-usar-imagick.html" title="Basta de GD en PHP, a usar
Imagick">Basta de GD en PHP, a usar Imagick </a></li>
parsear-json-desde-js.html" title="Parsear JSON desde Javascript">Parsear
JSON desde Javascript </a></li>
usar-evento-onload-en-scripts-para-internet-explorer.html" title="Usar
evento onload en scripts para Internet Explorer">Usar evento onload en
scripts para Internet Explorer </a></li>
</ul>
</div><div id="calendar-3" class="widgetContainer
widget_calendar"><h3 class="widgetTitle"> </h3><div
id="calendar_wrap"><table id="wp-calendar" summary="Calendar">
<caption>February 2011</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>

<tfoot>
<tr>
<td abbr="January" colspan="3" id="prev"><a
href="http://web2.0-tips.com.ar/date/2011/01" title="View posts for
January 2011">« Jan</a></td>
<td class="pad"> </td>
<td colspan="3" id="next" class="pad"> </td>
</tr>
</tfoot>

<tbody>
<tr>
<td colspan="1" class="pad"> </td><td><a
href="http://web2.0-tips.com.ar/date/2011/02/01" title="File upload simil
Ajax">1</a></td><td>2</td><td><a href="http://web2.0-
tips.com.ar/date/2011/02/03" title="Creador de backgrounds on-
line">3</a></td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td
id="today">9</td><td>10</td><td>11</td><td>12</td><td>13</td>
</tr>
<tr>

<td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>
<td>20</td>
</tr>
<tr>

<td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td class="pad" colspan="6"> </td>
</tr>
</tbody>
</table></div></div><div id="tag_cloud-3" class="widgetContainer
widget_tag_cloud"><h3 class="widgetTitle">Tags</h3><div><a
href='http://web2.0-tips.com.ar/tag/ajax' class='tag-link-44' title='5
topics' style='font-size: 19.2pt;'>AJAX</a>
<a href='http://web2.0-tips.com.ar/tag/ajax-loader' class='tag-link-45'
title='1 topic' style='font-size: 8pt;'>ajax loader</a>
<a href='http://web2.0-tips.com.ar/tag/barra-de-navegacion' class='tag-
link-29' title='1 topic' style='font-size: 8pt;'>barra de navegación</a>
<a href='http://web2.0-tips.com.ar/tag/cross-browser' class='tag-link-20'
title='3 topics' style='font-size: 15pt;'>cross-browser</a>
<a href='http://web2.0-tips.com.ar/tag/crossbrowser' class='tag-link-28'
title='1 topic' style='font-size: 8pt;'>crossbrowser</a>
<a href='http://web2.0-tips.com.ar/tag/css' class='tag-link-13' title='7
topics' style='font-size: 22pt;'>CSS</a>
<a href='http://web2.0-tips.com.ar/tag/css3' class='tag-link-19' title='3
topics' style='font-size: 15pt;'>css3</a>
<a href='http://web2.0-tips.com.ar/tag/description' class='tag-link-41'
title='1 topic' style='font-size: 8pt;'>description</a>
<a href='http://web2.0-tips.com.ar/tag/gd' class='tag-link-109' title='2
topics' style='font-size: 12.2pt;'>GD</a>
<a href='http://web2.0-tips.com.ar/tag/generador' class='tag-link-14'
title='2 topics' style='font-size: 12.2pt;'>generador</a>
<a href='http://web2.0-tips.com.ar/tag/gif-animado-de-carga' class='tag-
link-46' title='1 topic' style='font-size: 8pt;'>gif animado de carga</a>
<a href='http://web2.0-tips.com.ar/tag/hack' class='tag-link-102'
title='2 topics' style='font-size: 12.2pt;'>hack</a>
<a href='http://web2.0-tips.com.ar/tag/hack-ie' class='tag-link-27'
title='2 topics' style='font-size: 12.2pt;'>hack ie</a>
<a href='http://web2.0-tips.com.ar/tag/head' class='tag-link-38' title='1
topic' style='font-size: 8pt;'>head</a>
<a href='http://web2.0-tips.com.ar/tag/html' class='tag-link-73' title='2
topics' style='font-size: 12.2pt;'>html</a>
<a href='http://web2.0-tips.com.ar/tag/id' class='tag-link-9' title='1
topic' style='font-size: 8pt;'>id</a>
<a href='http://web2.0-tips.com.ar/tag/ie' class='tag-link-101' title='2
topics' style='font-size: 12.2pt;'>IE</a>
<a href='http://web2.0-tips.com.ar/tag/imagenes' class='tag-link-93'
title='2 topics' style='font-size: 12.2pt;'>imagenes</a>
<a href='http://web2.0-tips.com.ar/tag/internet-explorer' class='tag-
link-100' title='3 topics' style='font-size: 15pt;'>Internet Explorer</a>
<a href='http://web2.0-tips.com.ar/tag/javascript' class='tag-link-43'
title='5 topics' style='font-size: 19.2pt;'>Javascript</a>

<a href='http://web2.0-tips.com.ar/tag/keywords' class='tag-link-42'
title='1 topic' style='font-size: 8pt;'>keywords</a>
<a href='http://web2.0-tips.com.ar/tag/maquetacion' class='tag-link-11'
title='2 topics' style='font-size: 12.2pt;'>Maquetación</a>
<a href='http://web2.0-tips.com.ar/tag/menu' class='tag-link-16' title='1
topic' style='font-size: 8pt;'>menu</a>
<a href='http://web2.0-tips.com.ar/tag/menu-gen' class='tag-link-17'
title='1 topic' style='font-size: 8pt;'>menu-gen</a>
<a href='http://web2.0-tips.com.ar/tag/menu-desplegable' class='tag-link-
24' title='2 topics' style='font-size: 12.2pt;'>menu desplegable</a>
<a href='http://web2.0-tips.com.ar/tag/menues-desplegables' class='tag-
link-25' title='2 topics' style='font-size: 12.2pt;'>menues
desplegables</a>
<a href='http://web2.0-tips.com.ar/tag/menu-horizontal' class='tag-link-
32' title='1 topic' style='font-size: 8pt;'>menu horizontal</a>
<a href='http://web2.0-tips.com.ar/tag/menus' class='tag-link-15'
title='1 topic' style='font-size: 8pt;'>menus</a>
<a href='http://web2.0-tips.com.ar/tag/menus-rapido' class='tag-link-18'
title='1 topic' style='font-size: 8pt;'>menus rapido</a>
<a href='http://web2.0-tips.com.ar/tag/metas' class='tag-link-37'
title='1 topic' style='font-size: 8pt;'>metas</a>
<a href='http://web2.0-tips.com.ar/tag/mysql' class='tag-link-7' title='1
topic' style='font-size: 8pt;'>MySQL</a>
<a href='http://web2.0-tips.com.ar/tag/navbar' class='tag-link-30'
title='1 topic' style='font-size: 8pt;'>navbar</a>
<a href='http://web2.0-tips.com.ar/tag/navegation-bar' class='tag-link-
31' title='1 topic' style='font-size: 8pt;'>navegation bar</a>
<a href='http://web2.0-tips.com.ar/tag/php' class='tag-link-5' title='6
topics' style='font-size: 20.8333333333pt;'>PHP</a>
<a href='http://web2.0-tips.com.ar/tag/proramacion-orientada-a-eventos'
class='tag-link-124' title='2 topics' style='font-size:
12.2pt;'>proramación orientada a eventos</a>
<a href='http://web2.0-tips.com.ar/tag/redes-sociales' class='tag-link-
53' title='2 topics' style='font-size: 12.2pt;'>redes sociales</a>
<a href='http://web2.0-tips.com.ar/tag/saber-subdominios' class='tag-
link-6' title='1 topic' style='font-size: 8pt;'>saber subdominios</a>
<a href='http://web2.0-tips.com.ar/tag/seo' class='tag-link-33' title='1
topic' style='font-size: 8pt;'>SEO</a>
<a href='http://web2.0-tips.com.ar/tag/serial' class='tag-link-8'
title='1 topic' style='font-size: 8pt;'>serial</a>
<a href='http://web2.0-tips.com.ar/tag/social-web' class='tag-link-52'
title='2 topics' style='font-size: 12.2pt;'>social web</a>
<a href='http://web2.0-tips.com.ar/tag/solo-css' class='tag-link-26'
title='2 topics' style='font-size: 12.2pt;'>solo css</a>
<a href='http://web2.0-tips.com.ar/tag/title' class='tag-link-39'
title='1 topic' style='font-size: 8pt;'>title</a>
<a href='http://web2.0-tips.com.ar/tag/titulo' class='tag-link-40'
title='1 topic' style='font-size: 8pt;'>titulo</a>
<a href='http://web2.0-tips.com.ar/tag/twitter' class='tag-link-49'
title='2 topics' style='font-size: 12.2pt;'>Twitter</a>
<a href='http://web2.0-tips.com.ar/tag/xhtml' class='tag-link-21'
title='2 topics' style='font-size: 12.2pt;'>xhtml</a></div>
</div></div> <div class="secondaryColumn">
<div id="categories-3" class="widgetContainer
widget_categories"><h3 class="widgetTitle">Categoria</h3><select
name='cat' id='cat' class='postform' >
<option value='-1'>Select Category</option>

<option class="level-0" value="3">Blog  (1)</option>
<option class="level-0" value="10">Herramientas on-
line  (5)</option>
<option class="level-0" value="48">Integracion
Social  (3)</option>
<option class="level-1"
value="78">   Delicious  (1)</option>
value="76">   Facebook  (1)</option>
value="67">   Flickr  (1)</option>
value="77">   Google  (1)</option>
value="79">   Meneame  (1)</option>
value="49">   Twitter  (2)</option>
<option class="level-0" value="83">Interactuando con el
navegador  (4)</option>
<option class="level-0" value="11"
selected="selected">Maquetación  (11)</option>
value="13">   CSS  (7)</option>
value="22">   CSS3  (3)</option>
<option class="level-1" value="99">   Hacks para
IE  (3)</option>
value="104">   HTML5  (1)</option>
<option class="level-1" value="12">   Menues y
navegación  (4)</option>
value="23">   XHTML  (5)</option>
value="91">Optimización  (1)</option>
value="4">Programación  (16)</option>
value="43">   Javascript  (6)</option>
value="44">      AJAX  (3)</optio
n>
value="7">   MySQL  (1)</option>
value="5">   PHP  (9)</option>
value="87">Seguridad  (1)</option>
<option class="level-0" value="33">SEO  (2)</option>
value="36">   Consejos  (1)</option>
<option class="level-1" value="35">   Metas y
cabeceras  (2)</option>
<option class="level-0" value="81">Web
semantica  (1)</option>
value="82">   Busqueda  (1)</option>

</select>

<script type='text/javascript'>
/* <![CDATA[ */
var dropdown = document.getElementById("cat");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 )
{
location.href = "http://web2.0-
tips.com.ar/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
/* ]]> */
</script>

</div><div id="text-3" class="widgetContainer widget_text"><h3
class="widgetTitle">Haste fan</h3> <div
class="textwidget"><script
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-
box href="http://www.facebook.com/pages/Web20-tips/126568490744871"
width="200" show_faces="true" stream="false" header="true"></fb:like-
box></div>
</div><div id="archives-3" class="widgetContainer
widget_archive"><h3 class="widgetTitle">Archivo</h3> <ul>
<li><a href='http://web2.0-
tips.com.ar/date/2011/02' title='February 2011'>February 2011</a></li>
<li><a href='http://web2.0-tips.com.ar/date/2011/01'
title='January 2011'>January 2011</a></li>
title='December 2010'>December 2010</a></li>
title='September 2010'>September 2010</a></li>
<li><a href='http://web2.0-tips.com.ar/date/2010/07' title='July
2010'>July 2010</a></li>
<li><a href='http://web2.0-tips.com.ar/date/2010/06' title='June
2010'>June 2010</a></li>
<li><a href='http://web2.0-tips.com.ar/date/2010/03' title='March
2010'>March 2010</a></li>
title='February 2010'>February 2010</a></li>
</ul>
</div><div id="authors" class="widgetContainer widget_authors"><h3
class="widgetTitle">Escritores del blog:</h3>

<ul>
<li><a href="http://web2.0-tips.com.ar/author/dario/" title="Posts by
Dario">Dario Izurdiaga</a></li><li><a href="http://web2.0-
tips.com.ar/author/demian85/" title="Posts by Demián Rodriguez">Demián
Rodriguez</a></li><li><a href="http://web2.0-tips.com.ar/author/admin/"
title="Posts by Exos">Oscar J. Gentilezza Arenas</a></li><li><a
href="http://web2.0-tips.com.ar/author/toiluj23/" title="Posts by
toiluj23">Julio Chamizo</a></li><li><a href="http://web2.0-
tips.com.ar/author/zebaz/" title="Posts by Zebaz">Sebastian
Vaggi</a></li></ul>

</div><div id="twitter-friends" class="widgetContainer
pmcWidgetDisplay"><h3 class="widgetTitle"><a rel="nofollow"
href="http://twitter.com/web20_tips" title="web20_tips on
Twitter">Seguidores del blog</a></h3></div> <div id="recent-
comments-3" class="widgetContainer widget_recent_comments"> <h3 class="w
class='url'>Exos</a> on <a href="http://web2.0-tips.com.ar/186-basta-de-
gd-en-php-a-usar-imagick.html/comment-page-1#comment-281">Basta de GD en
PHP, a usar Imagick</a></li><li class="recentcomments">Demian on <a
href="http://web2.0-tips.com.ar/186-basta-de-gd-en-php-a-usar-
imagick.html/comment-page-1#comment-280">Basta de GD en PHP, a usar
Imagick</a></li><li class="recentcomments"><a href='http://web2.0-
tips.com.ar/163-emulando-ajax-cross-domain.html' rel='external nofollow'
class='url'>Emulando AJAX Cross Domain | Web 2.0 Tips</a> on <a
href="http://web2.0-tips.com.ar/175-usar-evento-onload-en-scripts-para-
internet-explorer.html/comment-page-1#comment-224">Usar evento onload en
scripts para Internet Explorer</a></li><li class="recentcomments"><a
href='http://web2.0-tips.com.ar/175-usar-evento-onload-en-scripts-para-
internet-explorer.html' rel='external nofollow' class='url'>Usar evento
onload en scripts para Internet Explorer | Web 2.0 Tips</a> on <a
href="http://web2.0-tips.com.ar/163-emulando-ajax-cross-
domain.html/comment-page-1#comment-222">Emulando AJAX Cross
Domain</a></li><li class="recentcomments"><a
href='http://laceysmall.co.cc/' rel='external nofollow' class='url'>Lacey
Small</a> on <a href="http://web2.0-tips.com.ar/131-no-mas-abuso-de-
floats.html/comment-page-1#comment-217">No mas abuso de
floats!</a></li></ul>
</div><div id="linkcat-2" class="widgetContainer
widget_links"><h3 class="widgetTitle">Blogroll</h3>
<ul class='xoxo blogroll'>
<li><a href="http://blog.exodica.com.ar" title="Blog de tecnología e
informática">Exodica Blog</a></li>
<li><a href="http://www.tail-f.com.ar/" title="Blog para sysadmins,
linux, unix y mucha consola">Tail-F</a></li>
<li><a href="http://blog.zedplan.com" title="ZedPlan
Blog">ZedBlog</a></li>

</ul>
</div>
</div></div>

<div id="footer" class="fix">
<p class="left"><a href="http://5thirtyone.com/grid-focus"
title="Grid Focus by: Derek Punsalan">Grid Focus</a> by Derek Punsalan <a
href="http://5thirtyone.com">5thirtyone.com</a>.</p>
<p class="right">Whitespace</p>
</div>
</div>
content/plugins/syntaxhighlighter/syntaxhighlighter/scripts/shCore.js?ver
=2.1.364b'></script>
content/plugins/syntaxhighlighter/syntaxhighlighter/scripts/shBrushCss.js
?ver=2.1.364b'></script>
<script type='text/javascript'>
(function(){
var corecss = document.createElement('link');
var themecss = document.createElement('link');

Tips de Maquetación Web

Recomendados

Recomendados

Más contenido relacionado

Similar a Tips de Maquetación Web

Similar a Tips de Maquetación Web (20)

Último

Último (20)

Tips de Maquetación Web