Que gran texto Naigt, solo mencionar que he tenido que reenviar ese email, a unos amiguetes que estan empezando, por que me ha parecido muy bueno.
Un saludo El día 31/03/06, Maikel Naigt <[EMAIL PROTECTED]> escribió: > > Hola Manuel. > > On 3/31/06, webmaster <[EMAIL PROTECTED]> wrote: > > > > Hola, > > > > Mucho gusto en conocerlos, mi nombre es Manuel. Hoy encontre su lista, > > cómo referencia en http://www.w3.org y después de consultar algunas > cosas > > me e dado cuenta, de que este puede ser un buen lugar para comenzar > > (continuar mis estudiso en el desarrollo de páginas web). > > > Bienvenido a la lista. > > Durante las últimas semanas e estado estudiando lo más básico de CSS y lo > > que se puede hacer con ello en las páginas web, y pues bien, me a > convencido > > de cambiar mi diseño básado en tablas por diseños usando CSS, sin > embargo me > > estoy topando con bastantes problemas, especialmente con la forma de > > posicionar los DIV, > > > Uno de los grandes caballos de batalla de casi cualquier maquetador CSS. > > aparte de dedicar este primer correo a mi presentación me gustaria > > consultarles por algunas referencias a tutoriales de posicionamiento, e > > encontrado varios sitios webs en ingles, pero en la mayoría solo me > > presentan soluciones sin explicar cual fue el razonamiento que les llevo > a > > ello, si pudieran ayudarme con esto se los agradeceria mucho. > > > Bueno, los razonamientos "básicos" que llevan a lograr cualquier > maquetación > "simple" vienen dados por la propia recomendación del w3c sobre las > especificaciones CSS. Para abreviar, en la mayoría de las páginas > prescinden > de explicaciones a nivel básico y tienden a centrar los esfuerzos docentes > en la resolución de las partes más complejas del tutorial. > Esto es un comportamiento totalmente normal en todas las áreas del > conocimiento, así que lo primero que hay que afrontar es un conocimiento > lo > más exhaustivo posible de la herramienta que manejemos, en este caso HTML > y > CSS, y de ningún sitio mejor que de la página del grupo encargado de > estandarizar sus especificaciones, la w3c[1]. > > Estoy tratando de crear mi primer diseño de tres columnas para una página > > web básado en CSS y pues bueno, realmente estoy declarandolo un fracazo > > parcial de momento. > > > No pienses que porque el HTML como lenguaje de marcado semántico, o el CSS > como atributos de presentación, sean relativamente sencillos y no muy > extensos en su definición, pasen a ser totalmente prescindibles su lectura > y > comprensión. Te puedo asegurar que una buena y pausada lectura de lo que > hacen, para lo que sirven (y para lo que no) y su comportamiento a nivel > individal y, lo más importante, a nivel global (es decir, como afectan y > se > dejan afectar por los elementos que lo rodean) te hará muchísimo bien para > comprender por qué tienen esos comportamientos "tan extraños". El CSS es > particularmente extravagante en este sentido e IMPRESCINDIBLE su lectura. > > También comprendo que seguramente te urja medianamente una respuesta que > te > saque cuanto antes del atolladero (mientras estudias concienzudamente las > especificaciones ;-) ). Bueno, yo te diría que siguieras unas sencillas > reglas para "encajar" <div>es: > · El ancho de la pantalla es, para la mayoría de nuestros propósitos, > finito > y conocido, el alto infinito. Esto redunda en que desde el principio > puedes > definir anchos en porcentajes, mientras que para los altos necesitarás de > ciertos truquillos, que te desaconsejo desde ya para el nivel de inicio. > De > todas maneras siempre puedes definir un alto en medidas que no sean > porcentajes. > · Los elementos del HTML se dividen principalmente en elementos de bloque > y > elementos de línea. Los elementos de bloque, __sin ancho definido__ (o > width: auto), tienden a ocupar el 100% del espacio que les queda a los > lados > y, además, no les gusta compartir este espacio con nadie (esto último, > tenga > o no un ancho definido). Los elementos de línea, en la misma situación, > toman el ancho de su contenido (cuanto más contenido, más ancho) y se > llevan > muy bien en la misma horizontal con otros elementos de línea. Como > elementos > de bloque tenemos por ejemplo <p>, <ul>, <ol>, <div>... y como elementos > de > línea <a>, <img>, <span>... Si quieres que un elemento de bloque comparta > su > espacio horizontal con otros elementos de bloque (la típica maquetación en > columnas a la que deseas llegar) tendrás que especificarles un ancho (33%, > 33%, 33% por ejemplo) y 'flotarlos' (La propiedad 'float' es complicada de > explicar en poco espacio, pero hay miles de artículos en la red sobre la > misma). > · El modelo de cajas (las pautas que dictan lo que mide relamente un > contenedor dependiendo de las medidas que se le den) define que el ancho > de > un contenedor es igual a __margen derecho + ancho del borde derecho + > padding derecho + ANCHO + padding izquierdo + ancho del borde izquierdo + > margen izquierdo__ con lo cual, si defines que el ancho (width) de un > contenedor es del 33% y le añades un borde, un padding o un margin (o la > mezcla de ellos) el ancho real te variará (nótese que no he dicho > aumentará, > pues también se pueden especificar márgenes negativos, lo que reduciría el > ancho real). Tienes que tener mucho cuidado con esto (probablemente al > principio te ayude mucho definir el ancho de la última columna un poco > menor > que el resto, para que la suma de todos no llegue al 100%). Para el alto > se > definen las mismas pautas pero, evidentemente, la repercusión es mínima, > pues casi nunca tendremos la necesidad de ajustar una maquetación en > vertical. > > Sabiendo al menos esto ya podrás comenzar alguna maquetación en columnas > sin > volverte loco. Con el tiempo (y la lectura de artículos y tutoriales y, > por > supuesto la ayuda de ovillo) aprenderás truquillos más sutiles para que > todo > te encaje al 100%. > > > No me queiro extender más ya con esta presentación, les agradezco la > > oportunidad que me dan de unirme a su lista, y pues bueno, talvez mando > mis > > experimentos para pedir sugerencia, > > > Yo tampoco, que creo que ya me he extendido de más. Solo un par de > consejillos más si me permites: > · No intentes hacer cosas demasiado complicadas al principio, te llegarás > a > desesperar y con el tiempo verás que lo que tuviste que hacer para llegar > a > esa maquetación es digno de frenopático. Muchos de los diseños que más > gustan son al comunmente los más sencillos de realizar. > · Trabaja siempre contra un navegador lo más compatible con los estándares > posible, y de fondo con IE. Esto es, para probar si los estilos que estás > aplicando son los correctos siempre haz la prueba con FF, Opera, > Konqueror, > Safari (depende de la plataforma); y una vez que lo veas todo bien en esa > parte pruébalo en IE antes de dar el siguiente paso en la maquetación. Si > lo > dejas todo para el final te resultará un esfuerzo de locos. > · Ten en cuenta que IE no adopta completamente las especificaciones, así > que > habrá ocasiones en las que no reconozca alguna propiedad y ocasiones en > las > que la interprete de un modo algo particular. Aquí se te hará necesario > tener alguna referencia. Te aconsejo tener siempre a mano webs con > "colecciones" de 'bugs' y 'workarounds' del tipo de > Positioniseverything[2] > o Quirksmode[3], entre otras. > · Ten siempre en cuenta la accesibilidad, tanto en el diseño del código > semántico como en las medidas que apliques a tus elementos y textos. > Básicamente existen medidas relativas que el usuario podrá cambiar a su > gusto mediante el navegador ('em', 'ex', '%'...) y absolutas > ('pt',...) Ten cuidado al usar 'px' ya que aunque en la teoría es una > medida > relativa al aplicarla a tamaños de fuente y absoluta cuando definimos > anchos > o altos, IE no lo aprecia así y siempre la tendrá como absoluta, sin dar > la > posibilidad al usuario de escalarla a su gusto. En resumen, que intentes > evitar usarla para definir tamaños de fuente. > > Un saludo, > > > > Manuel > > __________ > > > [1] http://www.w3.org/Style/CSS/ y http://www.w3.org/MarkUp/ > [2] http://www.positioniseverything.net/ > [3] http://www.quirksmode.org/ > > Un saludo para ti también y espero verte mucho tiempo en la lista, David > Merino Ogando. > > _____________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://ovillo.org/mailman/listinfo/ovillo > > > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://ovillo.org/mailman/listinfo/ovillo > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
