Kompozer: Layout sencillo con etiquetas DIV y CSS

Han pasado unos días desde que publiqué mi tutorial para crear páginas web mediante el uso de las etiquetas FRAMESET y los consecuentes FRAMES. Una vez advertido de lo erróneo del método me puse manos a la obra para conseguir el mismo fin mediante etiquetas DIV y su edición desde CSS.

De momento he llegado a conseguir hacer el layout con este método y todo ha salido perfectamente; es por eso que ofrezco ya la memoria-tutorial. He usado Kompozer para toda la creación. El editor de CSS de este software me resulta de lo más agradable.

Espero en unos días ser capaz de crear el menú y hacer que los diferenctes enlaces se abran en el DIV del contenido. Nada más que lo tenga lo publicaré en su correspondiente tutorial.

EDITADO: este asunto de crear una página web haciendo que los enlaces del menú se abran en diferente región se está complicando y si no me cree eche un vistazo a los comentarios de este post… Al parecer es obligatoria la recarga de toda la página (algo así como con las tablas) si sólo se quiere usar HTML.

Ver tutorial Kompozer: Layout sencillo con etiquetas DIV y CSS

    • Psickotronic
    • 19/07/08

    Excelente Joaclint…. ya mismo voy a darle un ojo al tutorial🙂

    Gracias por siempre compartir de esta manera el conocimiento… tus tutoriales son muy fáciles de seguir.

    • maeghith
    • 19/07/08

    Lamento un poco no haber contestado antes al post de Psickotronic ya que, aunque su intención era buena, estaba pasando por alto el hecho de que uno de los requerimientos iniciales nos está imponiendo también limitaciones en las técnicas que podemos utilizar.

    Aviso, esta es una respuesta quizás algo larga, y contiene un giro inesperado como en las novelas de polis, si empiezas a leerlo, por favor, no te quedes a medias.

    hacer que los diferenctes enlaces se abran en el DIV del contenido

    Una “mala” noticia es que en un principio, eso es lo que parece (por ejemplo en este blog) pero no lo que sucede.

    Lo que sucede es que, al hacer click en un enlace, abres otra página que contiene el menú (el mismo de la 1ª página repetido en esta página nueva), la cabecera (ídem que con el menú), y el div con el nuevo contenido.

    Como estarás pensando, es un incordio tener que copiar el menú y la cabecera en todas las páginas y además, si quisieras cambiar algo del menú o de la cabecera, tendrías que modificar todas las páginas, una a una.

    Probablemente también estés pensando que esto es una desventaja frente a los frames, por que hay que cargar el menú cada vez que se carga la página, pero lo cierto es que el menú es una parte muy pequeña de la web, y lo que se ahorra con el frame, se pierde en accesibilidad, que es más importante.

    El problema principal es que usando HTML a pelo no es posible hacer eso (del lado del navegador) sin usar los frames de tu otro artículo (y si algún lector avispado está pensando en Javascript, Flash, o un applet Java, le recuerdo que eso escapa del HTML a pelo).

    Entonces la solución suele ser hacerlo del lado del servidor: por ejemplo, creando varios archivos de forma parecida a como se hace con frames (poniendo el div de la cabecera en un archivo, el del menú en otro, etc… y luego montando la página).

    En este caso, el servidor (con PHP, ASP, Ruby, Python, Java, Awk o lo que haya instalado) es el encargado de juntar los pedazos y componer las páginas, de modo que el navegador sólo recibe la página completa. De esta manera, es accesible para cualquier navegador, ya que no usas frames ni ninguna otra técnica “molesta”, y más fácilmente mantenible para el diseñador, ya que si cambias la cabecera o el menú no tienes que cambiarlas de todas las páginas, sino sólo del archivo que contiene ese fragmento.

    Un libro muy recomendable para cualquiera que intente publicar en internet es la Guia de Alex y Philip para publicar en la web, que está en inglés, y es algo antiguo, pero no deja de ser sorprendentemente válido hoy en día.

    Es el momento del prometido giro, seguid leyendo.

    Ahora bien, si no recuerdo mal, la idea inicial era:

    quería que la presentación final fuera en formato HTML navegable para poder entregarlo en CD o DVD e incluso en última instancia colgarlo en internet

    Como en un CD no vas a tener un servidor con [PHP|ASP|Java|Ruby|Python|Awk], tienes 4 opciones:

    1.) Usar frames. Sí, aunque sea poco accesible y no nos guste.

    2.) No usar frames… y dejarte los dedos en el teclado cuando, tras tener unas 20 páginas maquetadas, llegue alguien, te diga “¿no quedaría mejor esto asá?”, pienses “ostras, pues es verdad”, y te toque cambiarlo de todas las páginas una a una (bueno, 20 aún es medianamente asumible, pero imagina proyectos más grandes).

    3.) Diseñar y desarrollar la web primero para un servidor de internet que tenga [PHP|ASP|Java|Ruby|Python|Awk] y luego usar wget para convertirla en HTML estático y poder incluirla en un CD/DVD/USB/lo-que-sea.

    Nota: tampoco es que necesites tener un servidor en internet, es suficiente con instalar un servidor en la propia máquina de uno, échale un ojo a los paquetes de Bitnami (yo recomendaría los stacks de infrastructura con PHP –WAMP, LAMP, MAMP, según uses windows, linux, o mac).

    4.) No usar HTML. Por ejemplo Flash y Java están bastante extendidos y son suficientemente multiplataforma como para considerarlos. Aunque para el usuario consumidor no son tan accesibles por omisión como el HTML, y son algo más complicadillos de dominar.

    Y creo que esto es todo lo que tengo que decir al respecto. Perdón por la longitud del comentario.

    PD: Joaquin, El “Logo a logo” está ge-ni-al, ¿has pensado en publicarlo con Bubok.com o Lulu.com?

  1. @maeghith: ¡Madre del amor hermoso!. Yo sólo quería hacer una presentación en CD y la cosa no hace más que complicarse. Veo que crear una web usando sólo HTML es muy simple pero también muy limitado. poco a poco iré mirando todas esas recomendaciones.
    En cuanto a lo de publicar con Bubok o Lulu sólo puedo decir que no los conocía y he pasado un buen rato mirando el tema. Tengo algunas dudas como por ejemplo la limitación que yo mismo le he puesto a la Licencia Creative Commmons de no comercializar (supongo que yo sí puedo comercializar) y sobre todo el hecho de que incluye diseños de logotipos comerciales. Es posible que tuviera algún problema con ese asunto si quiero ponerle un precio al libro impreso pero ando mirándolo. Sería verdaderamente interesante que la gente pudiera acceder a una copia impresa bien encuadernada (en B/N a bajo precio y en color más cara -he mirado los precios de producción y los libros impresos en color salen algo caros-)
    Estoy sobre el tema. muchas gracias por ese derroche de información (no te extrañe si lo elevo tu comentario a la categoría de post tal y como hice con el de Psickotronik)
    Suerte

    • Rosendo
    • 22/07/08

    Si lo que queres es un menu con css y html solamente se pueda perfectamente si sabes de antemano el nivel maximo mas profundo por ejemplo haca hay un enlace a un ejemplo con dos niveles.
    http://www.duoh.com/csstutorials/2levelmenu/index.html

  2. @Rosendo: ese menú tiene buena pinta. No queda más remedio que mirar a fondo el código… Gracias

    • Psickotronic
    • 25/07/08

    maeghith… excelente tu comment….

    Para no repetir codigo (por ejemplo en cabeceras o menus) y asi evitar tener que cambiar el elemento en todas las páginas al hacer alguna actualización… yo utilizo los “includes” de PHP…. es algo extremadamente sencillo, que no requiere ningun conocimiento de programación, y facilita muchisimo la vida.

    Indiscutiblemente para una presentación en CD yo usaria flash.

  3. Es una satisfacción comprobar que gente con tan alto nivel de conocimientos pase por El Blog de Joaclint Istgud. Muchas gracias por compartir.

  4. Yo sólo quería romper una lanza más en favor de la maquetación con div y comentar que, en mi experiencia, si bien al principio resultan más cómodos los frames, cuando se coge soltura manejando los estilos y las etiquetas span y div, todo cambia y la creación de páginas web estéticamente agradables y versátiles se convierte en un juego de niños.

    Como sabrás, en el curso que realizaste la parte de marcos se está convirtiendo en un contenido opcional, y probablemente se acabe retirando.

    Enhorabuena por tu blog, es muy útil.

    • Victor
    • 27/08/08

    durante mucho tiempo he tenido dolores de cabeza diagramando en dw, pero con este tutorial he avanzado muchisimo con kompozer

    mis saludos y gracias por el tutorial

    Victor

    • Makinavaja
    • 10/10/08

    ¿Frames? Are you from the past?

    PS: Podrías indicar que son obligatorios los campos ‘Nombre’ y ‘Correo’, digo yo…

  5. 🙂
    Esto es un Theme prediseñado de WordPress. No puedo configurar nada de eso. Lo siento.

    • carmans
    • 16/11/08

    Joa te quiero agradecer por compartir tus conocimientos y hacerlo de una forma didáctica tan particular que lo hacere- entendible, + para los que recién nos adentramos al diseño web, nada, solo quería acercar mis saludos y ahora que te encontré consultaré constantemente este blog porque está genial, chauuuuuu!!

    • Lazarillo
    • 28/01/09

    Gracias. Muchas gracias.

  6. @Lazarillo: A ti. Un saludo. ¡¡Sigue visitándome!!🙂

    • Lazarillo
    • 29/01/09

    Te tengo en mis favoritos. Ahora estoy a ver si aprendo php-mysql y Joomla (lo digo por si tú tienes algo….).

    Te vuelvo a agradecer el favor.

    Desde el norte,

    JPV

  7. Una pregunta ya que estoy por aquí:

    Estoy haciendo una web para una amiga. Es para algo profesional de ella.

    Tradicionalmente usé frontpage para hacer pinitos con una web. Allí usaba frames que me permitían mantener una cabecera que se mantenía igual para todas las páginas de mi sitio web. He leído aquí sin embargo que no es conveniente usar frames. Por eso he aprendido tanto con tu tutorial de css

    Desde hace un año uso Kompozer y quisiera saber si con CSS hay manera de que la cabecera que yo usé para todas las páginas de un sitio web se modifique sola en todas cuando modifique solo esa parte y que si por ejemplo tengo 50 hojas en mi web no tenga que ir cambiando la cabecera en cada una de ellas.

    Creía que bastaba hacer una plantilla con Kompozer (que se guardan como *.mzt) y que si luego creaba las demás páginas de mi sitio basándome en esa plantilla si luego modificaba la plantilla automáticamente las hojas de mi sitio lo harían también… pero no es así.

    ¿Qué soluciones hay para este problema?

    ¿Pasa como te digo por PHP-MySQL o un Gestor de Contenidos o hay maneras más sencillas como con Frames?

    Josean (Te doy mi nombre y mi e-mail de verdad)

  8. Perdón, mi web es esta (es solo una imagen).

    Te agradeceré si sabes como se puede resolver mi problema, ya que los frames son coser y cantar, oero de ahí a bases de datos y demás es un mundo.

    Tiene que haber una manera sencilla con css…

    Josean

    • Lazarillo
    • 30/01/09

    Hola otra vez,

    Por si te interesa he encontrado la solución aquí

  9. @Lazarillo: Si miras la secuencia de comentarios de este mismo artículo verás que hay un montonazo de información. La gran mayoría excede mis posibilidades respecto a lo que he aprendido de HTML y CSS. Ahí se habla de PHP y de una etiqueta llamada include (de la que se habla en el enlace que dices tú), pero no puedo comentarte más porque yo de PHP ni idea…

    • Dexel Mas
    • 13/10/10

    Oye, yo utilicé bien eso de la recarga de un solo div con codigo javascript.

  1. No trackbacks yet.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: