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.