Foros del Web » Creando para Internet » CSS »

Maquetar una pagina a ciencia ciega

Estas en el tema de Maquetar una pagina a ciencia ciega en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/07/2011, 08:42
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años
Puntos: 12
Maquetar una pagina a ciencia ciega

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...
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 20/07/2011, 08:51
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 7 meses
Puntos: 252
Respuesta: Maquetar una pagina a ciencia ciega

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.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #3 (permalink)  
Antiguo 20/07/2011, 09:17
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.779
Antigüedad: 9 años, 7 meses
Puntos: 936
Respuesta: Maquetar una pagina a ciencia ciega

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 20/07/2011, 09:19
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años
Puntos: 12
Respuesta: Maquetar una pagina a ciencia ciega

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 20/07/2011, 09:27
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.779
Antigüedad: 9 años, 7 meses
Puntos: 936
Respuesta: Maquetar una pagina a ciencia ciega

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?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 20/07/2011, 09:32
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 7 meses
Puntos: 252
Respuesta: Maquetar una pagina a ciencia ciega

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.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #7 (permalink)  
Antiguo 20/07/2011, 10:01
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 4 meses
Puntos: 269
Respuesta: Maquetar una pagina a ciencia ciega

librosweb.es
  #8 (permalink)  
Antiguo 20/07/2011, 14:21
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años
Puntos: 12
Respuesta: Maquetar una pagina a ciencia ciega

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #9 (permalink)  
Antiguo 20/07/2011, 14:28
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.779
Antigüedad: 9 años, 7 meses
Puntos: 936
Respuesta: Maquetar una pagina a ciencia ciega

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 20/07/2011, 15:02
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años
Puntos: 12
Respuesta: Maquetar una pagina a ciencia ciega

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #11 (permalink)  
Antiguo 20/07/2011, 15:10
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.779
Antigüedad: 9 años, 7 meses
Puntos: 936
Respuesta: Maquetar una pagina a ciencia ciega

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
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 Ver Mensaje
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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #12 (permalink)  
Antiguo 20/07/2011, 15:16
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años
Puntos: 12
Respuesta: Maquetar una pagina a ciencia ciega

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #13 (permalink)  
Antiguo 20/07/2011, 15:23
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.779
Antigüedad: 9 años, 7 meses
Puntos: 936
Respuesta: Maquetar una pagina a ciencia ciega

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #14 (permalink)  
Antiguo 20/07/2011, 15:47
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 3 meses
Puntos: 137
Respuesta: Maquetar una pagina a ciencia ciega

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...
  #15 (permalink)  
Antiguo 20/07/2011, 17:18
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.965
Antigüedad: 9 años, 7 meses
Puntos: 1313
Respuesta: Maquetar una pagina a ciencia ciega

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
__________________
Grupo Telegram Docker en Español
  #16 (permalink)  
Antiguo 21/07/2011, 01:48
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 7 meses
Puntos: 252
Respuesta: Maquetar una pagina a ciencia ciega

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.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #17 (permalink)  
Antiguo 21/07/2011, 05:30
Avatar de TravelEvdokia  
Fecha de Ingreso: noviembre-2010
Mensajes: 5
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Maquetar una pagina a ciencia ciega

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
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.

Etiquetas: ciencia, maquetar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:47.