El Desafío del Programador

Lucha · #1 (**permalink**) 18/04/2007, 01:35

Hola a tod@s:

Dado este código:

<HTML>

<HEAD>

<TITLE> Bad Table </TITLE>

</HEAD>

<BODY BGCOLOR=WHITE>

<?php

$conexion=mysql_connect("servidor","usario","contr aseña");

$consulta="select * from prueba";

$res=mysql_query($consulta,$conexion);

if(mysql_num_rows($res))
{
$row=mysql_fetch_array($res);
}

?>

<p><div id="prueba-div" style="border:1px solid blue;margin-top:10px;" onclick="javascript:document.getElementById('prueb a-div').style.border='2px solid green';">El campo de prueba es <?php echo $row["campo-de-prueba"];?></div>

</BODY>

</HTML>

El reto es, ni más ni menos, separar el xhtml, el css, el javascript y el php en documentos distintos (utilizando xml y xslt si fuera necesario) para que quedase el mismo resultado pero a la manera de programar de los profesionales: por capas perfectamente diferenciadas. Y de paso... me entero de una vez de como se hace

Gracias de antemano a todos los participantes.

#2 (**permalink**) 18/04/2007, 17:18

Pos si querés hacerlo de forma "profesional", te recomiendo usar HTML válido... al menos agregarle el DOCTYPE.

En mi opinión quedaría algo como (cambié prueba-div por prueba_div, ya que no estoy seguro pero creo que no es válido usar un nombre con "-" en el medio):
HTML:

Código:

<?php ... código PHP o inclusión de un archivo que contenga el código PHP necesario. ?>

<HTML>
<HEAD>
<TITLE> Bad Table </TITLE>
<link rel="stylesheet" href="estilos.css" media="screen" >
<script type="text/javascript" src="javascript.js"></script>
</HEAD>

<BODY BGCOLOR=WHITE onload="anadirEvento()">
<p><div id="prueba_div">El campo de prueba es <?php echo $row["campo-de-prueba"];?></div>

</BODY>
</HTML>

CSS:

Código:

div#prueba_div {
 border:1px solid blue;
 margin-top:10px;
 }

Javascript:
Este me cuesta un poco más, no lo tengo muy claro.
Lo ideal para no intervenir en el HTML es usar addEventListener, pero no sé si en el código siguiente lo estoy usando bien.
También se puede evitar la llamada a la función en el onLoad del BODY con window.onload(), pero hasta ahora no me ha funcionado. Como siempre, preguntá en el foro de Javascript si esto no funciona.

Código:

function anadirEvento() {
 document.getElementById('prueba_div').addEventListener("click", cambiarEstilos(document.getElementById('prueba_div'));
 }

function cambiarEstilos(elemento) {
 elemento.style.border = "2px solid green";
 }

No es gran cosa, pero es una forma de separar las cosas.

Saludos.

Developer9 · #3 (**permalink**) 19/04/2007, 13:21

Yo pensaba que era algo interesante

Lucha · #4 (**permalink**) 20/04/2007, 09:43

¿Pensabas que era interesante? Por el número de mensajes que tienes este reto tiene que ser tan fácil que ni te molestas en responderlo, PERO... algunos de nosotros estamos buscando todavía la respuesta.

Estoy buscando la respuesta a esta pregunta:

"¿Es posible programar webs sin embeber un lenguaje en otro?

Gracias por vuestras respuestas y vuestro tiempo.

DragonX · #5 (**permalink**) 20/04/2007, 09:53

Lucha no te preocupes Developer9 es un bug molesto que no se puede extirpar fácilmente.

Creo que alvlin te respondió correctamente.

#6 (**permalink**) 20/04/2007, 16:36

Cita:

Iniciado por Lucha

"¿Es posible programar webs sin embeber un lenguaje en otro?

La web no es el escritorio, los navegadores solamente interpretan HTML y Javascript y por lo tanto siempre vas a tener que generar algo de mezcla al menos entre PHP y HTML. Los "profesionales", como decís desde la primera vez que escribiste preguntando esto, se manejan entendiendo esto.

Saludos.