[DUDA] Jerarquia en Programacion Web (HTML, CSS, JavaScript, PHP, JSP ...)

Archivado
Hola buenas tengo una duda respecto a HTML y la "herencia" de los divs...
Cuando digo herencia anque posiblemente alomejor este mal dicho, me refiero a divs que engloban a otros divs por ejemplo.

<div id="abuelo">
      <div id="padre">
             <div id="hijo">hijo</div>
      </div>
</div>


Ese ejemplo es algo tipico el hijo esta dentro (desciende) del padre y el padre del abuelo...

Pues bien suponiendo que envez de eso yo tubiera:

<div id="abuelo">abuelo</div>
<div id="padre">padre</div>
<div id="hijo">hijo</div>


Y quisiera meter al padre dentro del abuelo y el hijo dentro del padre...

A) Tengo dudas de si se podria hacer con CSS (Creo que no) pero seria lo ideal.

B) Con Javascript estoy seguro 100% de que se puede pero no se que tal se comportara el script junto con la hoja de stilos css porque la hoja de estilos afectaria inicialmente antes de reasignar y cuando el javascript con ele evento onload del body cambie la estructura igual el CSS no se comporta como tendria que ser... (Lo desconozco).

C) PHP o JSP (Hacerlo en el servidor y enviarlo bien estructurado al cliente).

Querria evitar la C para poder programar de una manera muy legible y no atado al diseño de la pagina...
Si que cada div esten al mismo nivel rellene los que quiera dinamicamente con JSP/PHP y luego con Javascript o CSS darle un estilo en el cliente y que me reordene y me meta cada div dentro de donde le toque, segun el diseño que le vaya a aplicar.

Gracias.
Podrías explicar un poco más qué es lo que quieres hacer? Yo te digo casi con total seguridad que con CSS eso no se puede hacer, vamos a mi no se me ocurre cómo. Se puede hacer tanto con JS como con PHP, pero en mi opinión lo haría con PHP. Si explicas un poco lo que quieres hacer igual la cosa cambia, xD.
Espero que te ayude.
Saludos!
Ganu escribió:Podrías explicar un poco más qué es lo que quieres hacer? Yo te digo casi con total seguridad que con CSS eso no se puede hacer, vamos a mi no se me ocurre cómo. Se puede hacer tanto con JS como con PHP, pero en mi opinión lo haría con PHP. Si explicas un poco lo que quieres hacer igual la cosa cambia, xD.
Espero que te ayude.
Saludos!


He estado trabajando hasta hace poco unos meses con PHP porque es lo que dabamos en una asignatura del modulo de DAI.
Ahora estoy en una empresa que trabaja con JSP y me toca aprender JSP y me lo estoy pasando pipa asi que seguramente hare proximamente algun proyecto (propio) con JSP para ir cojiendo soltura y tal...

La cosa esque queria hacer alguna especie de web dinamica, totalmente dinamica no solo el contenido sino tambien el diseño sus posiciones etc...

Con CSS puedes hacer muchas virgerias para el diseño y posicionar los divs, imagenes etc... Pero no puedes rehubicar la herencia o descendencia de los divs, algo que me gustaria poder hacer.

¿Porque?

Porque alomejor hoy quiero hacer que mi web tenga un diseño X en el cual tengo una herencia concreta pero pasado mañana a la misma web quiero cambiarle totalmente el diseño y ello implica mover el menu a una parte que alomejor esta en un nivel superior de descendencia, con CSS como me imaginaba no se puede rehubicar, con JS y los ID si puede hacerlo (imagino).

EL segundo motivo es poder tener una legibilidad acojonante del codigo =3
Por que defino el menu en un div, el contenido en otro div, el encabezado en otro y ningun desciende de ninguno "Teoricamente", pero luego segun quiera un estilo u otro los meto en un sitio u otro cada div y con el css lo decoro.

De tal manera que cada div seria como un componente de un CGI (tipo joomla, Wordpress) y podria moverlo a donde quisiera modificando algunos archivos de configruacion, estilos etc...

La idea seria eso una web superdinamica para poder posteriormente reutilizarlo al maximo posible, como si un "joomla" casero en jsp fuera.


Enviarselo al cliente si ordenera y dejar que el los ordene con JS no me termina de gustar (es una chapuza) pero esque quiero que el codigo fuente este desordenado para una buena legibilidad...

Existe la posibilidad de en php/jsp reordenar el resuldato (desordenado) del mismo modo que lo hace JS?¿? Asi en plan una funcion y la llamo en cada documento "sin herencia/desordenado" ¿?¿? Asi podria enviarlo ordenado al cliente, tenerlo legible y no ser muy chapuzas...

Byee
No peques de querer dejar el código lo mejor posible (me pasa a mi también) porque a veces lo que para ti parece feísimo es lo que se hace siempre.

¿Para qué se usa JS? Para programación de lado de cliente. Qué podemos hacer ahí? pues modificar una página para darle dinamismo y entre esas cosas está mover divs de sitio. Vamos, que JS es la mejor opción para hacer lo que quieres.
Fox escribió:No peques de querer dejar el código lo mejor posible (me pasa a mi también) porque a veces lo que para ti parece feísimo es lo que se hace siempre.

¿Para qué se usa JS? Para programación de lado de cliente. Qué podemos hacer ahí? pues modificar una página para darle dinamismo y entre esas cosas está mover divs de sitio. Vamos, que JS es la mejor opción para hacer lo que quieres.


Como CSS no vale JS seria la alternativa en caso de que no pueda hacerlo con JSP.

Sin duda tras averlo pensado pienso que lo mejor es dejar los divs "base" al mismo nivel todos (menu, contenido, encabezado...)
Y luego llamando a una funcion en JSP (Servidor) leer un fichero XML el cual diga cual tiene que ir dentro de cual... (Esto es Facil).

Lo que no tengo claro es si con JSP (en el servidor) puede rehubicar divs antes de enviarlo al cliente.


La idea seria tener algo asi como:

Fichero JSP/PHP
// El codigo es orientativo
<! DOctipe blablabalaba>
<html>
<head></head>
<body>
<div id="contenedor"> vacio de este descenderan todos los divs el div padre </div>
<div id="encabezado"> encabezado con imagen blablabla </div>
<div id="menu"> menu con links </div>
<div id="contenido"> contenido de la web con divs dentro de este y informacion etc.. </div>
</body>
</html>


Fichero XML:
// Orientativo
<body>
      <contenedor>
            <encabezado></encabezado>
            <menu></menu>
            <contenido></contenido>
      </contenedor>
</body>


Fichero HTML Resultante:
// El codigo es orientativo
<! DOctipe blablabalaba>
<html>
<head></head>
<body>
    <div id="contenedor">
          <div id="encabezado"> encabezado con imagen blablabla </div>
          <div id="menu"> menu con links </div>
          <div id="contenido"> contenido de la web con divs y informacion etc </div>
    </div>
</body>
</html>




De tal manera que si yo cojo y cambio el XML y el CSS en server podria rehubicar las cosas en 2 segundos =3 y programar siempre todo al mismo nivel.
Lo que no entiendo es que digas que no se puede hacer con CSS, si precisamente su cometido es ese: cambiar el aspecto del HTML generado (y eso puede incluir también la colocación de los elementos).

Si necesitas que un bloque aparezca en un sitio u otro según X configuración, basta que juegues con el posicionamiento (relativo o absoluto), los márgenes, etc. Si lo que quieres hacer es demasiado complicado, quizá te puedas ayudar con JS, pero lo de usar PHP / JSP / XML me parece un completo disparate.

De todas maneras, decidas lo que decidas, te agradecería que lo posteases. Más que nada por ver si al final te has decidido por reinventar la rueda. ;)

Un saludo. [beer]
Dahn II escribió:Lo que no entiendo es que digas que no se puede hacer con CSS, si precisamente su cometido es ese: cambiar el aspecto del HTML generado (y eso puede incluir también la colocación de los elementos).

Si necesitas que un bloque aparezca en un sitio u otro según X configuración, basta que juegues con el posicionamiento (relativo o absoluto), los márgenes, etc. Si lo que quieres hacer es demasiado complicado, quizá te puedas ayudar con JS, pero lo de usar PHP / JSP / XML me parece un completo disparate.

De todas maneras, decidas lo que decidas, te agradecería que lo posteases. Más que nada por ver si al final te has decidido por reinventar la rueda. ;)

Un saludo. [beer]


El problema esque css me permite "relativamente" cambiar el contenido.
Es decir para das aspectos, alinear cosas etc... Genial, Ya sea de manera absoluta o relativa y desde luego que trabajando con eje Z ya es una pasada...
Colocas lo que quieras donde quieras mas o menos....

La cosa es que CSS te permitira en absoluto poner el DIV donde te salga de los huevos pero en relativo lo hace "relativo al padre" y claro con css tu no puedes "reparentear" y decirle tu vas dentro de este y este dentro de ti y luego darle un estilo ahi en plan alienate etc...

La idea no es donde los coloco visualmente sino colocarlo ordenadmente a nivel codigo para un herencia perfecta de los divs los cuales luego se decoraran con CSS.

Para que lo entiendas si yo tengo un cacho de codigo:
// El codigo es orientativo
<! DOctipe blablabalaba>
<html>
<head></head>
<body>
    <div id="contenedor">
          <div id="encabezado"> encabezado con imagen blablabla </div>
          <div id="menu"> menu con links </div>
          <div id="contenido"> contenido de la web con divs y informacion etc </div>
    </div>
</body>
</html>


Y le meto un CSS puedo mover cada div a nivel de visualizacion de un usuario a donde me salga de los eggs con el absolute.
Pero a nivel de codigo siempre seguiran estando todos al misme nivel ninguno desciende de ninguno y si quitas la hoja de css pues todos saldrian al misme nivel y ningundo dentro de otro.... ¿Lo vas pillando?

Antes de ponerme a tocar los stilos en el cliente con CSS quiero enviar las cosas bien ordenadas desde el servidor.


Para mi desgracia desconozco si puedo hacer lo que deseo en la parte del servidor y enviarlo ya bien, porque con JSP no encuentro nada solo JavaScript.
Yo lo que veo es que tienes un error de concepto en el diseño.
CSS es para mostrar la web, cierto. Pero es que la jerarquía (mejor que herencia, que es otra cosa :P) la tienes que tener establecida en el HTML. Si pasado mañana quieres cambiar el diseño y para eso necesitas tocar el código, lo estás haciendo mal.

El último ejemplo que has puesto es válido. Pero luego dices ésto:
si quitas la hoja de css pues todos saldrian al misme nivel y ningundo dentro de otro

Si quitas la CSS deben salir al mismo nivel, porque el encabezado es una cosa, el menú otra, y el contenido una tercera distinta. Cualquier otra manera de "jugar" con el HTML para que salga bonito... fail :D

No se si conocerás Zen Garden, pero es el máximo exponente de las virguerías que se pueden llegar a hacer en CSS.
RolerDib escribió:Yo lo que veo es que tienes un error de concepto en el diseño.
CSS es para mostrar la web, cierto. Pero es que la jerarquía (mejor que herencia, que es otra cosa :P) la tienes que tener establecida en el HTML. Si pasado mañana quieres cambiar el diseño y para eso necesitas tocar el código, lo estás haciendo mal.

El último ejemplo que has puesto es válido. Pero luego dices ésto:
si quitas la hoja de css pues todos saldrian al misme nivel y ningundo dentro de otro

Si quitas la CSS deben salir al mismo nivel, porque el encabezado es una cosa, el menú otra, y el contenido una tercera distinta. Cualquier otra manera de "jugar" con el HTML para que salga bonito... fail :D

No se si conocerás Zen Garden, pero es el máximo exponente de las virguerías que se pueden llegar a hacer en CSS.


Si conozco Zen Garden y se de sobras la de virgerias que se pueden hacer con CSS (a tanto nivel por desgracia no llego todo hay que decirlo).

Pero si te fijas hasta en el ejemplo de ZenGarden tenemos la structura de divs bien definida, la jerarquia.
<div id="container">
   <div id="intro">
      <div id="pageHeader">
         <h1><span>css Zen Garden</span></h1>
         <h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
      </div>

      <div id="quickSummary">
         <p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
         <p class="p2"><span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
      </div>

      <div id="preamble">
         <h3><span>The Road to Enlightenment</span></h3>
         <p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p>
         <p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.</span></p>

         <p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.</span></p>
      </div>
   </div>

   <div id="supportingText">
      <div id="explanation">
         <h3><span>So What is This About?</span></h3>
         <p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p>

         <p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>
      </div>

      <div id="participation">
         <h3><span>Participation</span></h3>
         <p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a> for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>

         <p class="p2"><span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you&#8217;ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</span></p>
         <p class="p3"><span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don&#8217;t submit half-finished work) upload your .css file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>

               </div>

      <div id="benefits">
         <h3><span>Benefits</span></h3>
         <p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p>
      </div>

      <div id="requirements">

         <h3><span>Requirements</span></h3>
         <p class="p1"><span>We would like to see as much <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym> validates.</span></p>

         <p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn&#8217;t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won&#8217;t accept it.</span></p>
         <p class="p3"><span>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.</span></p>
         <p class="p4"><span>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <acronym title="Cascading Style Sheets">CSS</acronym> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work.</span></p>

         <p class="p5"><span>Bandwidth graciously donated by <a href="http://www.mediatemple.net/">mediatemple</a>. Now available: <a href="http://www.amazon.com/exec/obidos/ASIN/0321303474/mezzoblue-20/">Zen Garden, the book</a>.</span>&nbsp;</p>
      </div>

      <div id="footer">
         <a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s XHTML">xhtml</a> &nbsp;
         <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS">css</a> &nbsp;
         <a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a> &nbsp;

         <a href="http://mezzoblue.com/zengarden/faq/#s508" title="Read about the accessibility of this site">508</a> &nbsp;
         <a href="http://www.mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site">aaa</a>
      </div>

   </div>

   
   <div id="linkList">
      <div id="linkList2">

         <div id="lselect">
            <h3 class="select"><span>Select a Design:</span></h3>
            <ul>
               <li><a href="?cssfile=/213/213.css&amp;page=0" title="AccessKey: a" accesskey="a">Under the Sea!</a> by <a href="http://www.ericstoltz.com/" class="c">Eric Stoltz</a></li>
               <li><a href="?cssfile=/212/212.css&amp;page=0" title="AccessKey: b" accesskey="b">Make &#8217;em Proud</a> by <a href="http://skybased.com/" class="c">Michael McAghon and Scotty Reifsnyder</a></li>

               <li><a href="?cssfile=/211/211.css&amp;page=0" title="AccessKey: c" accesskey="c">Orchid Beauty</a> by <a href="http://www.kevinaddison.com/" class="c">Kevin Addison</a></li>
               <li><a href="?cssfile=/210/210.css&amp;page=0" title="AccessKey: d" accesskey="d">Oceanscape</a> by <a href="http://www.pixel-house.com.au/" class="c">Justin Gray</a></li>
               <li><a href="?cssfile=/209/209.css&amp;page=0" title="AccessKey: e" accesskey="e">CSS Co., Ltd.</a> by <a href="http://www.benklemm.de/" class="c">Benjamin Klemm</a></li>

               <li><a href="?cssfile=/208/208.css&amp;page=0" title="AccessKey: f" accesskey="f">Sakura</a> by <a href="http://www.re-bloom.com/" class="c">Tatsuya Uchida</a></li>
               <li><a href="?cssfile=/207/207.css&amp;page=0" title="AccessKey: g" accesskey="g">Kyoto Forest</a> by <a href="http://rpmdesignfactory.com/" class="c">John Politowski</a></li>
               <li><a href="?cssfile=/206/206.css&amp;page=0" title="AccessKey: h" accesskey="h">A Walk in the Garden</a> by <a href="http://users.skynet.be/bk316398/temp.html" class="c">Simon Van Hauwermeiren</a></li>

            </ul>
         </div>

         <div id="larchives">
            <h3 class="archives"><span>Archives:</span></h3>
            <ul>
               <li><a href="/?cssfile=/001/001.css&amp;page=1" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a></li>
               <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>

            </ul>
         </div>
         
         <div id="lresources">
            <h3 class="resources"><span>Resources:</span></h3>
            <ul>
               <li><a href="/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design&#8217;s <acronym title="Cascading Style Sheets">CSS</acronym></a></li>               <li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>

               <li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a></li>
               <li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
               <li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
            </ul>
         </div>
      </div>

   </div>


</div>



Como ves tiene el div padre de todos "Container" y luego dentro de este 2 o 3 y dentro de cada uno de ellos pues mas...

Imaginate que yo lo pongo asi fijo y mañana digo: "ays pero esque ahora no quiero que 'menu' descienda de 'container' sino de 'intro' que desciende de 'container' ".

Pues entonces tocaria editar el html y mover el div...
Cuando es un archivo pues no molesta cuando la web o mejor dicho la aplicacion web son 200 o mas jsp/php pues toca lo huevos...
Y mucho.


De ahi la idea de que todos esten en los fuentes jsp/php al mismo level y que en funcion a un css + xml definir todo el estilo/template, de tal manera que cojo y miro como deben estructurarse la jerarquia en el xml y lo estructuro asi y luego aplico el estilo del css.


¿Que se puede hacer sin importar la jeraquia? Hombre si se puede usando absolutes y Z-Panels pero como quieras usar parametros "relative" en el css si todos estan al mismo nivel mal vamos (No hay jeraquia definida), y si la hay pero esta mal definida porque hoy queremos que el menu en la jrarquia este en otro lado pues "toma geroma pastillas de goma".


Mi idea es que si quitas la hoja de estilo este feo que te cagas tipo zen garden hasta aqui todo ok.
Pero tambien quiero que el codigo que recibe el cliente si se pone a ver el codigo la jerarquia este bien definida y se vea quien esta dentro de quien etc...

Porque la idea es desarrollarlo para mi en principio pero quiero que me sirva para futuros proyectos y poder reutilizarlo al maximo exponente obviamente mejorando los fallos poco a poco :p :p :p :p

Pero segun busco y busco la unica manera de hacer reparent a los divs (o mover un div dentro de otro div, o el contenido de algo a otro sitio) solo lo hace JavaScript (Por lo tanto en el cliente, en principio).

No he encontrado nada de JSP ni PHP para ello... Lo unico seria ejecutar JavaScript en el Servidor pero esto ya esta mas complicado el tema creo yo [+risas] [+risas] [+risas] , saber se que se peude pero no se como ni estoy en el tema.




Siento aburriros con el toston a todos =3
Ufff, ya te entiendo macho, pero no veas...

A ver, lo primero: creo que te estás complicando demasiado. :D Usar JS para esto es una tontería, pues lo único que modificarías sería el DOM, pero el código recibido en principio sería el mismo (lo cual, según tu idea, sería incorrecto). Si el cliente quisiese ver el fuente, este seguiría "desordenado".

PHP o JSP tampoco pintan nada aquí, ya que sería un pitote innecesario montar un sistema que escribiese una línea de código en un sitio u otro según el caso.

Lo que tienes que hacer no es modificar un HTML dependiendo de la configuración, sino tener varios conjuntos de HTML+CSS para usar en base a ella. Más correcto y eficiente, porque de esa manera evitas el uso de archivos XML que definan la estructura de un HTML... cuando en realidad un HTML es eso mismo: estructura. ¿No suena un poco ilógico? Lo que pretendes es como definir una configuración que configure otro archivo de configuración... Keep it simple, amigo. ;)

Los de Wordpress llevan años haciéndolo así y oye, creo que mal del todo no les va. :D

Un saludo.
Dahn II escribió:Ufff, ya te entiendo macho, pero no veas...

Menos mal porque con lo mal que me explico jejeje...

Dahn II escribió:A ver, lo primero: creo que te estás complicando demasiado. :D Usar JS para esto es una tontería, pues lo único que modificarías sería el DOM, pero el código recibido en principio sería el mismo (lo cual, según tu idea, sería incorrecto). Si el cliente quisiese ver el fuente, este seguiría "desordenado".

Hombre si lo hago mediante JS en el cliente tienes toda la razon lo recibira desordenado y aunque el JS se lo reordene en tiempo de ejecucion si le da a ver codigo fuente de la pagina saldra mal ordenado, de hecho quiero evitar usar Javascript por esto y porque no quiero depender de si el cliente tiene o no activado o soporte de JavaScript.

Dahn II escribió:PHP o JSP tampoco pintan nada aquí, ya que sería un pitote innecesario montar un sistema que escribiese una línea de código en un sitio u otro según el caso.

En parte no y si, como ya he dicho una web normalita y simple no pintan nada PHP/JSP pero esque la idea es tirar hacia la tendencia mas bien de aplicaciones webs con gestion, login, cookies, sesiones... Y bastantes archivos JSP/PHP que se ejecuten en servidor asi que php o jsp voy a tener que usar forzadamente (no para el reordenamiento sino porque la web/app lo requiere).

Dahn II escribió:Lo que tienes que hacer no es modificar un HTML dependiendo de la configuración, sino tener varios conjuntos de HTML+CSS para usar en base a ella. Más correcto y eficiente, porque de esa manera evitas el uso de archivos XML que definan la estructura de un HTML... cuando en realidad un HTML es eso mismo: estructura. ¿No suena un poco ilógico? Lo que pretendes es como definir una configuración que configure otro archivo de configuración... Keep it simple, amigo. ;)

Los de Wordpress llevan años haciéndolo así y oye, creo que mal del todo no les va. :D

Un saludo.


Creo que era mas bien KISS (Keep It Simple Stupid) xD mas que "amigo" :p :p....
Ahora fuera de bromas ;)

No termino como podria aplicar lo que me dices con varios conjuntos de HTML + CSS, te vuelvo a poner un ejemplo y tratame de explicar lo que tu me has dicho para mi caso.

Una aplicacion web con 200 JSP/PHP y ahora quiero cambiar el diseño de la pagina radicalmente, afectando al DOM no solamente al CSS ¿Que hago modifico 200 documentos?, esque no termino de entender lo de varios conjuntos de "HTML+CSS".

Gracias.
klausus escribió:...

Una aplicacion web con 200 JSP/PHP y ahora quiero cambiar el diseño de la pagina radicalmente, afectando al DOM no solamente al CSS ¿Que hago modifico 200 documentos?, esque no termino de entender lo de varios conjuntos de "HTML+CSS".

Gracias.

es sencillo, lo que te dice es usar themes si lo he entendido bien, tipo foro smf o phpbb, tu te haces unos themes y los puedes modificar y el contenido lo cargas a traves de llamadas de php.

ejemplo
<div id="container">
     <div id="banner"><a href="http://wings3d.es"><img src="/imagenes/cabecera.png" alt="logo"/></a>Comunidad Española de Wings3D</div>
     <div id='menu' class='transparencia redondeado'>cargamos el menú con una llamada</div>
     <div id="lateral" class="transparencia redondeado">menu lateral con llamadas php y lo generas con el orden que quieras gracias al orden establecido en el html.
ej:
php include estadisticas
php include login
php include buttons
php include banners
</div>
     <div id="content">por ejemplo cargamos noticias con una llamada</div>
     <div id="footer" class="transparencia redondeado">pones lo que quieras</div>
</div>

realmente trabajas todo dentro de un content con todo al mismo nivel, solo hay que saber usar correctamente los css para organizarlo, y si quieres que content esté despues de footer... modificar el html, o creas un nuevo theme para usar.

por ejemplo:

http://escuelactt.com/
http://wings3d.es
a grandes rasgos tienen el MISMO html, pero cambian las css (cambia el nombre de las clases por que una la programé después) y una llama a mas clases y otra a menos, pero es lo mismo de diferente manera, carga el contenido donde quieras gracias al sistema de llamadas de php
La idea es mas o menos esa crear themes/skin/layouts/template (como quieras llamarlos) similar como se hacer en Joomla, Wordpress, Drupal...

Que a partir de un fichero html con un dom y un css te rehubica todo el contenido de todos los php "dinamicos" sin modificar estos php, algo por esa vertiente mas o menos quiero tirar, pero desarrolarlo yo desde cero a modo de reto personal =3
klausus escribió:La idea es mas o menos esa crear themes/skin/layouts/template (como quieras llamarlos) similar como se hacer en Joomla, Wordpress, Drupal...

Que a partir de un fichero html con un dom y un css te rehubica todo el contenido de todos los php "dinamicos" sin modificar estos php, algo por esa vertiente mas o menos quiero tirar, pero desarrolarlo yo desde cero a modo de reto personal =3

entonces tendrás que trabajar con themes, a los que los añades, mueves , borras cosas, que lo unico que haces es modificar el html + css, si lo quieres hacer desde el navegador (para que lo haga el usuario) es mas complejo ya que tiene que modificar el código html del theme en cuestión, con mysql y php es muy muy sencillo ya que haces una consulta de donde va cada cosa y así lo imprime el php, pero tienes que crear un mysql que trabaje como un html realmente y te diga donde va cada cosa, con xml como comentas también se puede, pero creo que lo mejor es impedir que un usuario inexperto toque xD

pero con algo como esto lo puedes usar para colocar los contenidos de manera mucho mas sencilla.

http://escuelactt.com/foro/ssi_examples.php
http://wings3d.es/foro/ssi_examples.php

edit: tan solo tienes que hacer comparativas y que llame a X función para que coloque algo en X sitio dependiendo del valor del mysql, por ejemplo.

base de datos

id nombre posicion carga
1 sponsor 5 <div>loquesea como si quieres llamar a una funcion</div>


y en el html la colocaría en el lugar 5 del menu lateral por ejemplo, hombre la base de datos debe de tener muchos mas campos, la forma que te comento no es la correcta ya que no es optima, pero funcional es
13 respuestas
Archivado
Volver a Software libre