Maquetar una pagina a ciencia ciega

DoPeY-BBS · #1 (**permalink**) 20/07/2011, 08:42

Saludos.

No se, pero a mi se me hace dificil esto de maquetar una web a base de css ¿porque? bueno, sencillo, muchos sitios te dicen como crear una web usando solo css pero no te dan las pautas de como la han creado. Me explico.

Por ejemplo

Como dar un padding o margin- ahhhhhhhh pero esperate, a un padding tu les da 0px arriba y abajo y 25px derecha, izquierda y eso es todo ¿pero y si se pasa del contenedor?.. bueno, ni idea..

A esto es ke me refiero señores...

vgonga1986 · #2 (**permalink**) 20/07/2011, 08:51

No entiendo exactamente qué es lo que quieres. No se pueden dar pautas para maquetar tu web, porque hay miles de escenarios diferentes y miles de webs diferentes. Lo que te pueden enseñar es a cómo hacerlo, luego tú pruebas y, si fallas, vuelves a probar y así sucesivamente. Y, simplemente, la práctica que vayas tomando te irá dando las respuestas. La primera vez que uses CSS, te romperás la cabeza pensando, pero la vez 40 ya lo harás mecánicamente.

No entiendo qué quieres que te enseñen.

Un saludo.

ArturoGallegos · #3 (**permalink**) 20/07/2011, 09:17

Cita:

Iniciado por DoPeY-BBS

Saludos.

No se, pero a mi se me hace dificil esto de maquetar una web a base de css ¿porque? bueno, sencillo, muchos sitios te dicen como crear una web usando solo css pero no te dan las pautas de como la han creado. Me explico.

Por ejemplo

Como dar un padding o margin- ahhhhhhhh pero esperate, a un padding tu les da 0px arriba y abajo y 25px derecha, izquierda y eso es todo ¿pero y si se pasa del contenedor?.. bueno, ni idea..

A esto es ke me refiero señores...

y porque va a pasarse del contenedor? si tu has creado las reglas css también conoces las limitantes y si sabes que tu contenedor es de 200px de p.... le pones contenido con 250px si sabes que lo sobre pasara ?¿

aquí lo que tienes que agarrarte un manual CSS y estudiar cada regla y comprender como funciona, a que elementos se puede aplicar y como acceder a ellos....

o que si yo te digo ponle ancho de 200px y luego un padding de 20px tu no me vas a preguntar por que? y si no se ajusta a lo que necesitas dirás a es que este p... no sabe.

señor por favor tenga iniciativa y si usted ve que dice padding, margin o cualquier cosa sírvase buscar en google y entender que es para que sirve como se aplica y todo lo que necesite saber, que esto es como un libro usted empieza a leer pero si no conoce las palabras que se usan esta perdido y no entiende nada.

DoPeY-BBS · #4 (**permalink**) 20/07/2011, 09:19

Cita:

No entiendo exactamente qué es lo que quieres. No se pueden dar pautas para maquetar tu web, porque hay miles de escenarios diferentes y miles de webs diferentes. Lo que te pueden enseñar es a cómo hacerlo, luego tú pruebas y, si fallas, vuelves a probar y así sucesivamente. Y, simplemente, la práctica que vayas tomando te irá dando las respuestas. La primera vez que uses CSS, te romperás la cabeza pensando, pero la vez 40 ya lo harás mecánicamente.

No entiendo qué quieres que te enseñen.

Si, es cierto, hay miles tipos de web diferentes, pero a mi entender, la mayoria de manuales (por no decir todos) no te dicen del todo.. es facil, decir, dejame darle un paddin o margin a tal cosa ¿pero y si se sobrepasa? ¿crees que es justo volver a comenzar la web? yo no lo creo asi.
porque si fuese asi. ¿de que serviria el manual? claro, te ayudaria en el sentido de poner en orden las cosas pero eso es todo...

No se, a mi particulamente se me complica esto.

Fuera mas simple si me dijeran

si tienes un contenedor haz lla siguiente formula

800/2

ya tienes una idea.. pero esa vaina no te la ponen, al menos lo he visto poco

ArturoGallegos · #5 (**permalink**) 20/07/2011, 09:27

y porque vas a volver a empezar, si se sobre pasa es porque no has leído y comprendido el manual... solo deberás ajustar los valores nuevamente

pero va quieres una formula

1.- width+border+padding+margin = total de ancho

2.- height+border+padding+margin = total de alto

3.- width + height = total de area para tu contenido

4.- dependiendo el caso y ecenario que manejes puedes omitir el ancho y/o alto

5.- no se especifica el ancho cuando el elemento padre ya tiene el ancho fijo y el hijo (tipo bloquee) debe ocupar el 100%

6.- no se especifica el alto cuando quieras que el elemento cresca según el contenido

7.- si flotas elementos (float) debes limpiar el float con un clear al final del contenido para que el elemento padre cresca según el contenido

8.- una alternativa al clear es aplicar overflow:hidden o auto al elemento padre

alguna otra formula que necesites conocer?

vgonga1986 · #6 (**permalink**) 20/07/2011, 09:32

Volver a comenzar la web? Eso no tiene sentido, la web la vas a adaptando, pero porque un tamaño no te cuadre no tienes que empezar de 0.

Realmente no entiendo a qué te refieres, me da la sensación de que tú tienes un problema completo y has generalizado a que los manuales son todos una basura. Me parece demasiado generalizar por un problema concreto.

Y otra cosa, no para todo hay fórmulas, pero hay una muy clara que está en todos los manuales y es que el tamaño del box final es la suma del border, padding y width (o height si es vertical) y te lo ponen hasta con un dibujo simple.

Aquí tienes dos páginas que lo ponen:
http://www.estrellateyarde.org/disco...html-cajas-div
http://www.yourhtmlsource.com/styles...ssspacing.html

Esa imagen con los tamaños la he visto en mil sitios y si es eso en lo que tienes problemas, no puedes decir que no esté en manuales.

Un saludo.

cristian_cena · #7 (**permalink**) 20/07/2011, 10:01

librosweb.es

DoPeY-BBS · #8 (**permalink**) 20/07/2011, 14:21

A ver. Yo tengo dos libros de css. el primero que compre fue "css práctico" por richard York y el otro libro es "The best practice guide to xhtml & css" pero talvez no tengo la habilidad.

width+border+padding+margin = total de ancho"

(800 de contenedor) pero entonces? como reparto esos 800,,, expliqunme porque de verdad no entiendo

ArturoGallegos · #9 (**permalink**) 20/07/2011, 14:28

jeje la formula no te quedo clara?? haber con ejemplo y con la formula desglosada para que entiendas mejor

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

0 + 2 + 8 + 780 + 8 + 2 + 0 = 800

como has dicho que es contenedor supuse que del sitio y por ende a este nunca le aplico margen, siempre es margin:0 auto; para centrarlo pero al ser 0 no afecta las medidas

y si compraste libros pues hay que machetiarle y leer tantas veces te sea necesario...busca en google una y otra vez hasta que entiendas cada cosa

Nota: los valores que use fueron ilustrativos igual puedes poner padding derecho mas grande y el izquierdo mas chico, puedes jugar con los valores son simples sumas y restas que te deberan dar como total la medida que tu deseas

DoPeY-BBS · #10 (**permalink**) 20/07/2011, 15:02

Y no seria mas facil (creo yo) de hacer lo siguiente

si yo por ejemplo quiero dos columnas

800/2 = 400

A esos 400 restarles los margenes a 10 supongamos y quedarian 390 luego los padding a 3 px luego los bordes ?

Yo creo que asi seria mas claro

ArturoGallegos · #11 (**permalink**) 20/07/2011, 15:10

Cita:

Iniciado por DoPeY-BBS

Y no seria mas facil (creo yo) de hacer lo siguiente

si yo por ejemplo quiero dos columnas

800/2 = 400

A esos 400 restarles los margenes a 10 supongamos y quedarian 390 luego los padding a 3 px luego los bordes ?

Yo creo que asi seria mas claro

claro si es lo que se te acomoda pues eso has, lo que yo puse fue ilustrativo tu nunca dijiste querías columnas o no lo vi jeje

y como dijo el compañero

Cita:

Iniciado por vgonga1986

No se pueden dar pautas para maquetar tu web, porque hay miles de escenarios diferentes y miles de webs diferentes.

y precisamente eso fue lo que paso yo te di un ejemplo y tu escenario y objetivos son otros, pareciera que esperabas la respuesta que se te diera fuera tal cual lo que necesitas y lo mejor para el caso

DoPeY-BBS · #12 (**permalink**) 20/07/2011, 15:16

Es que yo siempre veo en los manuales (en lo que he visto) esta formula e inclusive en los libros que tengo:

Cita:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Pero no fue hasta hace poco que vi lo de las restas y claro, esta me convencio mucho mas porque sabes de donde sale cada cosa y no se, para mi es mas claro.

Yo no busco un problema en particular mas bien quiero tener un standar bien definido y sin lagunas para poder trabajar.

No se si me doy a entender

ArturoGallegos · #13 (**permalink**) 20/07/2011, 15:23

si te entiendo pero lamentablemente en esto no hay un estándar, todo va depender el escenario y como sea tu diseño... siembre puede variar

lo mas fácil para mi es plantear un diseño y/o boceto en photoshop o fireworks, de allí tomar medidas, tamaño que necesito para el contenido si lleva borde a que distancia debe estar el contenido del borde y si tiene que estar a cierta distancia de otro elemento...

y en base a eso empiezo a construir

alexk · #14 (**permalink**) 20/07/2011, 15:47

DoPeY-BBS antes de imaginar ciertos "escenarios" y posibilidades... tienes la maravillosa oportunidad de aprender estudiar y aplicar "prueba y error" siempre cuando se aprende algo nuevo se quiere saber todo de una vez... pero no es posible... todos los dias se aprende algo nuevo... y ya con la practica y el tiempo que le dediques ya encontraras maneras y alternativas para conseguir trabajar mas rapido y hacer tu "propio estandar" de trabajo...

Carlangueitor · #15 (**permalink**) 20/07/2011, 17:18

Maquetar webs es 30% conocimientos de CSS, 20% Experiencia y 50% Lógica (o sentido común -no se cual es lo correcto-).

Si viste en los manuales puras sumas y te acomodas más con restas... bueno pues usa tu lógica para adaptarte.

Igual si te sirve mira está imagen:

Saludos

vgonga1986 · #16 (**permalink**) 21/07/2011, 01:48

Los manuales son buenos para empezar a entender un idioma, pero no son la panacea. Por qué? Pues porque eres tú el que se tiene que acomodar el manual y no al revés. Como pretendes que una persona que escribe un manual para miles de personas lo ponga exactamente como tú lo necesitas? Pues en unas cosas coincidiréis y en otras no.

Lo más importante es crearte tu propio estilo de trabajo. Ya @Ag666 te ha dicho un método, hay mucha gente que maqueta primero en PhotoShop y luego lo pasa a CSS, yo por ejemplo no lo hago así, porque soy nulo para diseño web, yo voy haciéndolo en CSS directamente y según veo los resultados lo toco para que quede mejor o peor. Hay gente que ve la página completa antes de empezar si quiera a tirar una línea (porque la ve en su cabeza), otros prefieren ir viendo los resultados y adaptarla, otros hacen los estilos generales para poder cambiarlos fácilmente en el futuro, otros los hacen únicos para cada nueva web.... Hay miles de posibilidades, simplemente, encuentra la tuya, la que se te acomode y con la que te sientas tranquilo y puedes desarrollar tu potencial.

Un saludo y espero que te sirvan las ideas que te vamos planteando entre todos.

TravelEvdokia · #17 (**permalink**) 21/07/2011, 05:30

Cita:

Iniciado por DoPeY-BBS

A ver. Yo tengo dos libros de css. el primero que compre fue "css práctico" por richard York

Ese fue el primero y único que me compré yo, no llegué a las 10 páginas cuando ya estaba en la basura. Se aprende mucho más con tutoriales específicos de internet y con foros como este; ya verás que se le coge el truco rápido.