Que me aconsejáis?

[tonieet]

Hola a todos! os escribo para que me deis algún consejo sobre como tengo que "distribuir" las partes que componen mi pagina web en la propia pagina (no se si me explico) os cuento:
hace un par de meses que he terminado un curso de programación web y el profesor siempre nos hacia hacer las paginas web con Dreamweaver usando la Tabla y organizando todas las partes que componen la web dentro de ella; pero he estado mirando por internet y he visto que hay mucha gente que las hace usando la opción de insertar/objetos de diseño/Div PA.

Os queria pedir consejo.. cual es la mejor manera para organizar el diseño de tu pagina web??
Hay alguna otra opción que useis y sea mejor?

Gracias de antemano! un saludo!

[DisenoWebWordpress]

¡Buenas tonieet!

Esto depende mucho, si sabes manejar CSS, olvidate de las tablas, alejalas de tu vida, hazte amigo de los <div> </div>, y las tablas solo usalas para cosas especificas y para las newsletters.

El problema viene si no sabes CSS, entonces no te queda más remedio que usar tablas...

Yo personalmente te animo a que aprendas CSS, tu vida será mucho más fácil en cuanto aprendas este "lenguaje".

Un saludo!

[tonieet]

hola! Gracias por contestar DisenoWebWordpress!! si tengo conocimientos CSS y los <div> los he usado bastante estos dos ultimos meses, de todas formas veo que los códigos los genera solos el dreamweaver (al menos en esto de los <div> ) lo unico que me preocupa es que luego no se vea todo descolocado en el explorador, la tabla es como que te da mas seguridad de que no se va a mover todo una vez subida la pagina... supongo que sabes a que me refiero... todos hemos visto esas paginas que aparecen los botones encima de los parrafos de letras o las fotos encima de los links, etc... pues si no voy a tener ningun problema voy a hacer la pagina que estoy apunto de empezar usando los <div>

gracias!

[tonieet]

Iniciado por DisenoWebWordpress

¡Buenas tonieet!

Esto depende mucho, si sabes manejar CSS, olvidate de las tablas, alejalas de tu vida, hazte amigo de los <div> </div>, y las tablas solo usalas para cosas especificas y para las newsletters.

El problema viene si no sabes CSS, entonces no te queda más remedio que usar tablas...

Yo personalmente te animo a que aprendas CSS, tu vida será mucho más fácil en cuanto aprendas este "lenguaje".

Un saludo!

Una cosa! cuando hago la pagina usando la Tabla, una vez terminada la pagina, al verla en el explorador si hago mas pequeña la ventana del explorador toda la pagina se va ajustando al tamaño de la ventana, mientras que usando el <div> </div> las imagenes, textos, etc.. de la pagina, se quedan ancladas y no se ajustan a la ventana, como puedo solucionar esto??

gracias! :)

[DisenoWebWordpress]

Buenas tonieet

Pues eso se soluciona con el diseño Responsive, que es adaptar tus estilos a la resolución de pantalla desde donde lo veas.

Te paso un pequeño GRAN ejemplo de como se deberia de hacer...

Código CSS:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
 

Si por ejemplo entras a mi blog [URL="http://www.diseñowebwordpress.com/"]http://www.diseñowebwordpress.com/[/URL] y haces más pequeño el explorador o simplemente lo ves desde un telefóno móvil, verás que pasa, eso es el diseño Responsive.

Un saludo

[tonieet]

Iniciado por DisenoWebWordpress

Buenas tonieet

Pues eso se soluciona con el diseño Responsive, que es adaptar tus estilos a la resolución de pantalla desde donde lo veas.

Te paso un pequeño GRAN ejemplo de como se deberia de hacer...



Si por ejemplo entras a mi blog [URL="http://www.diseñowebwordpress.com/"]http://www.diseñowebwordpress.com/[/URL] y haces más pequeño el explorador o simplemente lo ves desde un telefóno móvil, verás que pasa, eso es el diseño Responsive.

Un saludo

Muchas gracias!! a ver que tal se me da! espero que estes atento por aquí por si te tengo que hacer alguna otra pregunta! jejeje ;) y enhorabuena por tu blog! esta muy bien, lo iré mirando de vez en cuando!

un saludo! ;)

[webosiris]

Iniciado por tonieet

el profesor siempre nos hacia hacer las paginas web con Dreamweaver usando la Tabla y organizando todas las partes que componen la web dentro de ella

lo siento, pero tu profesor lamentablemente es un inútil.

Las tablas NO son para posicionar elementos.
Las tablas NO son para posicionar elementos.
Las tablas NO son para posicionar elementos.

Vengo repitiendo la misma dichosa frase desde hace por lo menos 10 años.
A esta altura, en pleno 2013, quien enseñe de esa forma se merece que lo despidan ipso facto.

[pzin]

tonieet antes de meterte con el Responsive Web Design, yo miraría primero cómo funcionan los diseños líquidos. Más que nada por mantener una curva de aprendizaje lógica, porque para el RWD necesites tener ciertos conocimiento sobre diseño líquido. Que es básicamente trabajar con medidas relativas, parecido a diseñar con tablas.

Concuerdo con eso de que ese profesor debería dedicarse a otra cosa.

[Linton]

Sin embargo hay diseñadores como Steven Schafer que recomiendan construir con tablas "Te sorprenderías si supieras la cantidad de tablas que se esconden bajo las webs que visitas", comenta en su libro sobre HTML y CSS.
Y afirma que siguen siendo una herramienta de diseño más que aceptable, tanto a nivel básico como avanzado.

Saludos.

[webosiris]

Iniciado por Linton

Sin embargo hay diseñadores como Steven Schafer que recomiendan construir con tablas

pues entonces es un muy mal maquetador.

Lo siento, en este tema no se trata de "puntos de vista". Se trata de si sabes lo que es la semántica o si no lo sabes. Y si no sabes semántica, no sabes HTML. Punto.

Si eres un profesor de idioma español, escribes ASER y porfías que está bien escrito, lo puedes enmascarar como quieras, pero al final del día significa que no sabes español y por lo tanto no estás capacitado para enseñarlo. Pues esto es lo mismo.

Y no conozco su libro ni a el, pero ¿en que sitios escribe? porque si este es su sitio, no demuestra tener muchos conocimientos ni en html ni en diseño... parece alguien que está LEJOS de ser un referente.

[Linton]

Hombre no, desde luego no es su sitio

Esta sí es su web. Desde luego no parece ningún mindundi, ¿verdad? Entre sus clientes están Rolex, Walt Disney, Nestlé... Se diría que SÍ es un referente.

[Carlangueitor]

¿Que libro de él dices que dice eso?

Estoy casi seguro que el link que pasó webosiris es el autor que citas. El otro es un diseñador, no dice que hace HTML en ningún lado.

Saludos

[webosiris]

Iniciado por Linton

Esta sí es su web. Desde luego no parece ningún mindundi, ¿verdad? Entre sus clientes están Rolex, Walt Disney, Nestlé... Se diría que SÍ es un referente.

ese es un "interactive designer" cosa que no tiene nada que ver con hacer html. Además sus clientes pueden parecer muy "wow" pero si analizas, no lo son tanto. Por ejemplo pone como cliente a Marshall y luego si lees la descripción descubres que en realidad nunca trabajó para Marshall, que fue un experimento personal y no oficial de rediseñar su sitio. Los otros clientes grandes que dices en realidad no son clientes de el, sino de la agencia para donde trabaja, el solo es un empleado ahí.

Pero da igual, si el libro que indicas es este, el sitio web del autor es el que te indico. De hecho en la página de amazon dice:

Steven M. Schafer has broad experience in technology and is a veteran of publishing. He's been in and around technology as a programmer, an editor, a product specialist, a technical manager, and a Web developer. Steve employs both open-source and proprietary technologies and has worked with the Internet since the mid-1990s. He can be reached by e-mail at synergy-tech.com"][e-mail].

[NUCKLEAR]

Me parece que están hablando de homonimos. Y @Linton esta confundiendo al autor de esos libros (Que por cierto seguro estas leyendo del '94) con el diseñador... :D

Tablas solo para mostrar datos tabulados!

[tonieet]

Después de leer todo lo que habéis puesto tengo la sensación que los 6 meses que he hecho de curso no me han servido de nada, no entiendo por que es tan grabe usar tablas para crear una web, teniendo en cuenta que una tabla se puede "moldear" de cualquier manera uniendo o agregando celdas para agregar dentro fotos, textos o lo que tu quieras y de la manera que tu quieras..

He estado haciendo la pagina usando los <div> </div> y cuando miro la vista previa se me mueven los cuadros hacia donde les da la gana, en fin un desastre, ahora mismo estoy bastante perdido buscando soluciones por todos lados, tengo muchas ganas de aprender y me empiezo a estresar bastante!

os dejo un ejemplo supersimple de lo que he hecho, para ver si me podeis explicar por que cuando encojo la ventana del explorador las dos fotos se mueven de forma desordenada o como en este caso las fotos se quedan fijas sin acoplarse a la ventana. (ya he cambiado las opciones de "position")
Gracias por todo! ;)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
#apDiv1 {
position: absolute;
width: 249px;
height: 200px;
z-index: 1;
left: 792px;
top: 283px;
}
#apDiv2 {
position: absolute;
width: 256px;
height: 256px;
z-index: 1;
left: 146px;
top: 16px;
}
</style>
</head>

<body>
<center>
<div id="apDiv2"><img src="imagenes/encabezado.jpg" width="900" height="256" /></div>

<div id="apDiv1"><img src="imagenes/url.png" width="256" height="256" /></div>
</center>
</body>

[Carlangueitor]

Para empezar, veo que usas Dreamweaver, te recomiendo hacerlo todo en la vista de código, muchas veces la vista diseño genera mucho código que luego es difícil de modificar y no siempre funciona correctamente.

Ahora, el problema es que no defines un contenedor, y usas posiciones absolutas (como nota, las posiciones absolutas casi nunca se usan, salvo casos "especiales"). Tampoco la etiqueta <center> te sirve de mucho en ese código.

Temo decirte que si pagaste por un curso en donde te enseñan a maquetar con tablas y usar dremweaver en vista diseño, solo has aprendido a hacerlo de la manera incorrecta.

Saludos

[Linton]

Iniciado por webosiris

ese es un "interactive designer" cosa que no tiene nada que ver con hacer html...

Aaah pues tienes razón, perdón por el gazapo, un amigo me pasó los dos enlaces como si fueran del mismo autor. Desde luego esa página es tela de cutre

En cualquier caso, conste en acta que abundan los partidarios de utilizar tablas para el diseño general de la web Naturalmente el autor del libro es consciente de que hay viva (más bien turbulenta) polémica al respecto.

Gracias por la aclaración, un saludo.

[Linton]

Iniciado por tonieet

...tengo la sensación que los 6 meses que he hecho de curso no me han servido de nada...

¿¿¿6 meses con el correpasillos de Dreamweaver???

[pzin]

Iniciado por Linton

En cualquier caso, conste en acta que abundan los partidarios de utilizar tablas para el diseño general de la web

El ejemplo del profesor de español fue bastante claro. No se trata de puntos de vista, opiniones ni nada parecido. Si maquetas usando tablas, estás usando un elemento que está destinado a otra cosa. Tampoco te comerías una sopa con un tenedor. Y ahora con HTML5, que dota de cierta inteligencia a las páginas web, es aún peor usar tablas.

Iniciado por Linton

Naturalmente el autor del libro es consciente de que hay viva (más bien turbulenta) polémica al respecto.

La gracia es que no hay polémica. A menos que el libro hable de hace 12 años atrás.

tonieet maquetar una web mediante CSS es más fácil de lo que parece, una vez que controles el posicionamiento y el flotado. Pero si empiezas a posicionar de forma absoluta, empiezas mal.
Todo al principio es difícil, pero el uso de tablas y de programas tipo Dreamweaver, que a priori parecen facilitar el trabajo, lo que realmente hacen es viciarte y acostumbrarte a hacer las cosas no muy bien.

[Linton]

Iniciado por Bonez

La gracia es que no hay polémica. A menos que el libro hable de hace 12 años atrás.

No, el original en inglés se publicó en 2010.

Conste que me repelen las tablas, ¿eh?

[tonieet]

no entiendo que tiene que ver el dichoso libro del que habláis y su autor..... lo unico que he preguntado es que como hago para que no se me muevan las cajas que creo en dreamweaver.

No me he pasado 6 meses solo con dreamweaver como dicen algunos, he empezado solo con código con un simple bloc de notas, html, css, php bases de datos y mas cosas, tengo la sensación que por mucho que pregunte nadie me sabe responder a mi pregunta y encima salen subtemas que no tienen nada que ver con mi duda, que es el motivo por el cual se ha abierto este tema en el foro, es algo subrealista! jajaja XD

Bueno, vuelvo a hacer la pregunta por si alguien que se exprese bien y sepa la respuesta me quiere ayudar:

que tengo que hacer para que al mover la ventana del explorador, todos los bloques que he creado con dreamweaver, (o con el codigo, me da igual) no se me muevan cada uno "a su bola"??

de todas maneras vuelvo a dar las gracias a todos los que han intentado ayudarme, esta bien que me digais lo que no tengo que hacer, pero la verdadera ayuda en un foro es cuando te dicen lo que tienes que hacer para solucionar tu problema.

(todo esto lo digo siempre desde el respeto y agradeciendo a toda la gente que ha perdido un poco de su tiempo conmigo, que quede claro)

Saludos!

[webosiris]

Iniciado por tonieet

no entiendo que tiene que ver el dichoso libro del que habláis y su autor..... lo unico que he preguntado es que como hago para que no se me muevan las cajas que creo en dreamweaver.

lamento contradecirte pero no, la pregunta y el motivo que abrió este tema, fue:

Iniciado por tonieet

Os queria pedir consejo.. cual es la mejor manera para organizar el diseño de tu pagina web?? Hay alguna otra opción que useis y sea mejor?

sobre tu tema de los divs, Carlangueitor ya te respondió.

Iniciado por Carlangueitor

Ahora, el problema es que no defines un contenedor, y usas posiciones absolutas (como nota, las posiciones absolutas casi nunca se usan, salvo casos "especiales"). Tampoco la etiqueta <center> te sirve de mucho en ese código.

[Linton]

Iniciado por tonieet

...tengo la sensación que por mucho que pregunte nadie me sabe responder a mi pregunta y encima salen subtemas que no tienen nada que ver con mi duda...

Pues yo lo veo exactamente al revés: te han respondido varios expertos (no hablo de mí), y todos los mensajes del post atañen al meollo de tu consulta, que era cómo organizar una página web.

[tonieet]

ok! gracias por todo!

[tonieet]

tengo que borrar un mensaje para abrir un nuevo tema, y como no me dejar borrar el mensaje, solo lo puedo cambiar por esta explicación que acabo de dar! jajajja