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
