Recursos para un sitio compatible con navegadores

ByLuis October 23, 2007

Uno de los mayores problemas con los que nos encontramos cuando estamos desarrollando una aplicaciÃ³n web es la compatibilidad con los diferentes navegadores, bueno, realmente la compatibilidad de estos navegadores con los estÃ¡ndares.

Para ayudarnos en esta lucha, nada mejor que esta serie de recursos:

Cross Browser CSS For Your Site: una guÃa para realizar CSS compatible con los diferentes navegadores, grandes consejos con ejemplos, no teorÃa.
Starting With CSS: Revisited: cada navegador tiene estilos por defecto para las etiquetas HTML, siendo estos algo diferentes entre ellos. Elimina el margin y el padding para empezar con todos los navegadores del mismo modo.
undohtml.css: similar a la tÃ©cnica anterior.
Two CSS Hacks For Identical Pages: dos consejos que podemos usar y un aviso de cÃ³mo empezar a escribir tu cÃ³digo.
CSS Hacks & Issues: una serie de consejos y trucos para librarse de los quirks de Internet Explorer.
Box Model Hack: hack para dibujar correctamente el modelo de caja en IE 5 y 5.5.
Eric Meyer On CSS: consejos para usar trucos con los navegadores y ocultar estilos.
/* Position Is Everything */: necesario para aquellos que quieran desarrollar su layout.
glish.com : CSS layout techniques: ejemplos de layouts de 3 columnas, 2 columnas y modelos fluidos.
100 Percent Cross Browser, Pure CSS Layouts: otro lugar donde encontrar layouts CSS.
Rendering Mode and Doctype Switching: esta pÃ¡gina te enseÃ±a que DOCTYPE usar para usar el “standards mode”.
Activating the Right Layout Mode Using the Doctype Declaration: tabla con una relaciÃ³n de los navegadores y el tratamiento que le dan al doctype.
In Search of the Holy Grail: creaciÃ³n de layouts.
Litmus Labs: CSSVista: aplicaciÃ³n que permite modificar tus CSS en Firefox y en IE.
Browser Shots: herramienta online que te devuelve pantallazos de una pÃ¡gina vista en diferentes navegadores.
IE NetRenderer: lo mismo pero para diferentes versiones de IE.

Designing For Every Browser: How To Make Your Site Fully Cross Browser Compatible

VÃa / dzone

css

Sitemap mediante CSS

ByLuis December 11, 2007

Los sitemaps no son algo que al desarrollador le suela preocupar, no se suele pensar en la importancia de ellos, tanto para el usuario como para los motores de bÃºsqueda.

Para aquellos que quieran incluir el sitemap con un buen diseÃ±o puede usar este truco que hemos encontrado.

Podemos darle un estilo parecido si aÃ±adimos CSS al siguiente sitemap:

<div id="sitemap">
<ul>
<li>Web Root
<ul>
<li>stuff
<ul>
<li>nested-deep
<ul>
<li>nested-deeper
<ul>
<li>nested-deepest</li>
</ul>
</li>
</ul>
</li>
<li>nested deep</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Sin estilos serÃa asÃ:

Web Root
- stuff
  - nested-deep
    - nested-deeper
      - nested-deepest
  - nested deep

Y para que quede como la imagen anterior deberÃa tener los siguientes estilos:

#sitemap {
font:normal 16px Arial,sans-serif;
overflow:hidden;
}
#sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#sitemap li {
background-color:#eee;
margin:0 0 -0.1em;
min-height:1em;
padding:.2em .4em;
position:relative;
width:9em;
}
#sitemap ul ul {
font-size:90%;
margin-top:-1.4em;
}
#sitemap ul ul li {
background:#ddd;
border-top:0.5em solid #fff !important;
border-left:0.5em solid #66c;
left:10.4em;
}
#sitemap ul ul ul li {
background:#ccc;
border-color:#9c3;
}
#sitemap ul ul ul ul li {
background:#bbb;
border-color:#c93;
}
#sitemap ul ul ul ul ul li {
background:#999;
border-color:#c33;
color:#fff;
}

CSS SiteMap

VÃa / Posh CSS

Javascript

Misma altura en bloques mediante jQuery

ByLuis December 9, 2008

Buen truco para darle la misma altura a diferentes bloques cuando mediante CSS no es fácil de hacer.

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

Equal Height Columns with jQuery

Vía / CSS Globe

Desarrollo web | Quicklinks | Web services

Everystockphoto: buscador de imágenes gratuitas

ByLuis April 4, 2006

Muchas de las veces que hago un script para una entrada que necesita de una imagen, suelo intentar buscar alguna que sea gratuita o con licencia Creative Commons, suelo buscar en Flickr, pero o no me apaño muy bien, o el número de resultados que ofrece no son todos los que tiene, también suelo buscar en Open Photo. Ahora hay otro nuevo servicio que nos ofrece un lugar dónde encontrar estas fotos, se trata de Everystockphoto, que con 220 mil fotos (y subiendo), nos da la posibilidad de buscar esas fotos gratuitas de calidad que buscamos.
Everystockphoto.com
Vía / Intenta

css | EstÃ¡ndares

Favoritos del CSS Reboot

ByLuis May 2, 2006

A pesar de apuntarse centenares de sitios, por segunda edición consecutiva el CSS Reboot sólo nos ha deparado apenas una veintena de diseños destacables. Entre hoy y mañana publicaremos en CSS Manía lo más destacable. Dicho esto, siempre son bienvenidas este tipo de iniciativas.

Nuestros favoritos sin ningún orden en particular:

Desarrollo web | Quicklinks

Protolize: listado de herramientas web

ByLuis May 2, 2006

Protolize es una lista con herramientas web, algunas imprescindibles y otras que nos pueden ser bastante útiles. Organizada en categorías y algunas separadas en grupos: aplicaciones en general: herramientas como Type Navigator, Web Developer Extension y Color Scheme Generator, y recursos como The Web Developer’s Handbook, Design Melt Down y A List Apart; CMS (Modx, WordPress, Drupal); herramientas CSS como CSS Photo Gallery, Background Image Maker y Nifty Corners Cube, y sitios para inspirarse como CSS Mania, CSS Import y CSS Beauty; Javascript (Script.aculo.us, Prototype, Image Reflection); AJAX (Ajaxload, Ajax Downloadables, Lightbox); PHP (Hot Scripts, Php Freaks, Pear); Flash (Fuse Kit, Zigo Tween Engine, MC Tween).
Protolize | Essential web tools in one place
Vía / Digg

css

Modificar el contorno del texto mediante CSS

ByLuis January 10, 2008

CSS Text Wrapper te permite modificar el contorno de los pÃ¡rrafos de texto de nuestras pÃ¡ginas web, ya sea creando cÃrculos, zig-zags, o cualquier otra figura.

Hay dos formas de poder aplicarlo: mediante estilos o mediante un javascript. Existe un editor que nos ayuda mediante la creaciÃ³n de puntos, configurar el contorno de nuestro pÃ¡rrafo.
CSS Text Wrapper
VÃa / WebAppers

Similar Posts