Evitar código repetido

[luisdeam]

Buenas tardes, mi nombre es Luis, visito mucho este foro pero hoy decide registrarme. Estoy desarrollando una web en HTML5 y CSS para un proyecto que tenemos en conjunto con otros docentes donde trabajo. Me encuentro con un problema, en una de las paginas cada alumno tiene un perfil (por ahora cargado a mano, en un futuro tomará datos de mysql) el codigo del perfil es:


<article id="perfil-alumno">
<div id="marco-foto">
<img id="foto-perfil" src="./recursos/foto-lider-1.jpg">
</div>
<div id="marco-nombre">
<p id="texto-perfil">NOMBRE APELLIDO</p>
<img id="barra-perfil" src="./recursos/barra-separadora-perfil.jpg">
</div>
<div id="marco-año">
<img id="logo-perfil" src="./recursos/logo-perfil.jpg">
<p id="texto-perfil">2015</p>
</div>
<div id="marco-barra">
<img id="barra-perfil2" src="./recursos/barra-separadora2-perfil.jpg">
</div>
<div id="marco-intereses">
<div id="titulo-intereses">
<p id="texto-intereses">intereses</p>
</div>
<div id="iconos-intereses">
<img id="int-icono" src="./recursos/int-programacion.jpg">
<!<img id="int-icono" src="./recursos/int-programacion.jpg">
<!<img id="int-icono" src="./recursos/int-programacion.jpg">
<!<img id="int-icono" src="./recursos/int-programacion.jpg">
</div>
</div>
</article>

El resultado es el siguiente:



El problema es que va a haber en una página unos 50 perfiles, por lo que el codigo se vuelve absurdamente largo y la carga de la página lenta. Si insertara cada perfil como imagen (armada en corel, por ejemplo) seria muchisimo trabajo de diseño. Existe alguna manera de crear un formato y darle los parametros de cada perfil? Si hablaramos de POO, es posible crear instancias de un objeto?

Desde ya muchisimas gracias.

[No_haynombre]

Hola, un placer recibirte aquí en FWD.

Mira tu problema en lo que he interpretado, lo puedes solucionar con una paginacion, y que cada alumno tenga su propio contenido del perfil para darle sus parametros, amigo te recomiendo que lo consultes en el foro de PHP o googlealo como paginacion de datos, y lo de ver los parametros de cada alumno seria una consulta en lo que he interpretado puede que necesites mas o no sea lo que te he dicho.

Suerte y saludos!

[luisdeam]

Estuve investigando lo de paginación. lamentablemente no es una solución viable para mi, ya que necesito la información en una sola página. Ademas todavia no hay una BD implementada que me permita la lectura de datos. Te agradezco de todas formas.

[No_haynombre]

Hola.

Lamento que esa no sea la solución.

Mira también podria manipular un poco el ancho y el alto de los datos de los alumnos con hojas de estilo CSS3 para hacerlas mas comodas al momento de mostrarlas y a la vez se puedan ver todas. Algo asi como dimensionarlas. No necesitarias un extenso trabajo de diseño, les das una clase las defines en el CSS3 y vas mirando con una vista previa de como seria el tamaño adecuado.

Saludos

[luisdeam]

Si, en este momento esa imagen esta seteada con CSS3, sería una opción la de reducir un poco el tamaño. Gracias.

[No_haynombre]

Exacto, tambien podria aplicar un poco de porcentajes asi cada vez que se ingrese alguna nueva imagen o que sean estaticas algo como responsive, espero que te haya sido de ayuda hombre.

Cualquier duda nos comentas como te ha ido, Suerte

[Rafael]

Lo de la carga "lenta" es relativo. Si necesitas la info la necesitas cargar, no hay de otra.

El problema que tienes más bien es automatizar la carga de datos de los perfiles, aunque lo más adecuado es una base de datos, en este caso puedes cargar los datos desde un archivo de texto.

Por ejemplo este script sencillo de php, que rompe la info del archivo de texto en pedazos y ya a cada pedazo lo tomas para armar lo que gustes.

Consta de dos partes. Un archivo leer.php y otro con el contenido

Código PHP:

<?php
/* Desplegar Contenido Noticias */
 
 
/* Separador */
$Separador = '~|~';
 
 
/* Abrir archivo */
$Archivo = fopen("Contenido.txt", "r");
$Escrito = fread($Archivo, 10240);
fclose($Archivo);
 
 
/* Separar líneas, palabras y crear Array */
$Lineas = explode("\r\n", $Escrito);
for ($x=1; $x < count($Lineas); $x++){
    $Frases = explode($Separador, $Lineas[$x]);
    for ($y=0; $y < 3; $y++){
        $Array[$x][] = $Frases[$y];
    }
}
 
 
/* Desplegar el contenido del Array */
for ($x=(count($Lineas)-1); $x > 0; $x--){
    echo "
<div>
    <h2>". $Array[$x][0] ."</h2>
    <h3>". $Array[$x][1] ."</h3>
    <p>". $Array[$x][2] ."</p>
</div>
";}
?>
 

contenido.txt

Código HTML:

Prueba Noticia 1 ~|~ Hola ~|~ Adios<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf
Prueba 2 ~|~ Subtítulo ~|~ Hola a todos
Noticia Número 3 ~|~ Hola como están los 3 ~|~ asdfa<br />sdfa<br />sdf<br />as<br />df<br />asd<br />f<br />asdf<br />asdfasdfasdfasdf
Noticia Número 4 ~|~ Hola como están los 4 ~|~ asdfa<br />sdfa<br />sdf<br />as<br />df<br />asd<br />f<br />asdf<br />asdfasdfasdfasdf
asdfasdfasdf5 ~|~ asdfasdfasdf ~|~ asdfasdfasdf
 

En lugar de estar separados los campos por un tabulador puse ~|~, pero puedes usar comas por ejemplo. Así que simplemente preparas los datos en una tabla de excell y la guardas como texto.

[luisdeam]

Muchisimas gracias, lo voy a probar y cuento como me fue. Saludos