Bueno, bueno, ya he terminado los módulos y solo me falta el examen final; pero mientras lo preparo voy a dejaros por aquí el proceso de una página de prueba para practicar lo que hemos aprendido durante el curso, para ser honesto os diré que ya me había leído bastante literatura sobre el Html/Css, el uso de servidores y también sobre Php, aunque de este último no he podido practicar demasiado (salvo los formularios).
Estas últimas semanas he estado trabajando en una página para alojarla en un server local que quiero montar mas adelante en la asociación de vecinos de mi barrio, para que podamos intercambiar libros electrónicos. Tendrá que ser una página sencilla pues la mayoría de la gente que baja por allí es gente mayor y tengo que ponérselo fácil.
Lo primero que he hecho es crear un esquema o maquetación con el programa Evolus Pencil del que ya os hablé en otro post; a lo mejor no haría falta pues lo que estoy pensando no es muy complicado pero bueno, así practico. Primero os dejo una imagen y luego comento.
Estas últimas semanas he estado trabajando en una página para alojarla en un server local que quiero montar mas adelante en la asociación de vecinos de mi barrio, para que podamos intercambiar libros electrónicos. Tendrá que ser una página sencilla pues la mayoría de la gente que baja por allí es gente mayor y tengo que ponérselo fácil.
Lo primero que he hecho es crear un esquema o maquetación con el programa Evolus Pencil del que ya os hablé en otro post; a lo mejor no haría falta pues lo que estoy pensando no es muy complicado pero bueno, así practico. Primero os dejo una imagen y luego comento.
Como veis la página va a tener dos partes muy definidas, una cabecera con el título y un adecedario, y la parte inferior donde irán apareciendo los libros disponibles; obviamente van a estar por orden alfabético, por si alguien se lo preguntaba. En la vista principal cuando entremos en la web habrá un saludo y una breve introducción con un enlace a un formulario de contacto. Después conforme vayamos clicando en las letras iremos viendo los títulos disponibles, muy simple ¿verdad? Eso parece...
¿Porque usaré iframes? Lo primero para practicar y lo segundo porque no quiero que cada vez que se haga clic en el enlace se cargue la página entera si no que solo se cargue el listado de obras. Habrá que hacer una página para cada letra, pero copiapegando no nos debería costar mucho.
Para escribir el Html usaré Bluefish, del que ya os hablé hace unos días.
Dentro del programa buscaré el menú "Nuevo desde plantilla">>"XHTML1.0" y así tengo el principio de la página con la declaración doctype y las partes principales, <html><head><body>.
nota: El programa Evolus Pencil viene con un bug muy importante, es imposible exportar los diseños, para obtener esta imagen he tenido que hacerlo con el menú "Imprimir" e "Imprimir a un archivo" y no ha salido todo el contenido. El bug está en Windows y GNU/Linux y está relacionado con una incompatibilidad con algunas versiones del plugin Java. Si alguien le ha pasado lo mismo y lo ha conseguido solucionar sin usar xulrunner podría dejarlo en los comentarios, gracias.Para la página voy a a usar iframes (o marcos); si no sabéis lo que son los iframes podéis ver este enlace.
¿Porque usaré iframes? Lo primero para practicar y lo segundo porque no quiero que cada vez que se haga clic en el enlace se cargue la página entera si no que solo se cargue el listado de obras. Habrá que hacer una página para cada letra, pero copiapegando no nos debería costar mucho.
Para escribir el Html usaré Bluefish, del que ya os hablé hace unos días.
Dentro del programa buscaré el menú "Nuevo desde plantilla">>"XHTML1.0" y así tengo el principio de la página con la declaración doctype y las partes principales, <html><head><body>.
A continuación sustituimos el <body> por los iframes, con este editor no problem, vamos al menú "Cuadros" que ya os lo marco en la foto y allí tenemos un asistente que nos permite crearlos sin mas complicaciones.
Bueno sin mas complicaciones no... la declaración doctype esta mal pues como dice en la web del W3C la declaración para XHTML1.0 con iframes debe ser:
asi que procedo a cambiarlo.
Conviene dejar esta parte siempre por si alguien usa un navegador que no admita frames(?) que no se quede con la página en blanco y con cara de mero.
Bueno sin mas complicaciones no... la declaración doctype esta mal pues como dice en la web del W3C la declaración para XHTML1.0 con iframes debe ser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
asi que procedo a cambiarlo.
Conviene dejar esta parte siempre por si alguien usa un navegador que no admita frames(?) que no se quede con la página en blanco y con cara de mero.
Veamos el paso de la creación de los marcos (iframes) con mas detalle.
<frameset rows="30%, 70%" border="0" frameborder="0" framespacing="0">
Aquí dividimos la página en dos marcos, uno al 30% de la anchura y otro al 70%.
<frame name="cabecera" src="cabecera.html" noresize marginwidth="50" scrolling="no" frameborder="0" />
Aquí definimos el primer marco, se llamará "cabecera", será el archivo cabecera.html y en el resto de atributos definimos la anchura del margen, que el borde sea invisible y que el usuario no pueda redimensionar su tamaño (si sabes un poco de inglés se entiende bastante bien).
<frame name="contenidos" src="contenidos.html" noresize marginwidth="20" marginheight="10" frameborder="no" />
Ahora el siguiente paso sería crear las páginas que se cargarán en los frames, cabecera.html, donde irá el título y el abecedario y contenidos.html donde aparecerá la bienvenida y el enlace al formulario de contacto; cuando entremos a la web cuando vayamos clicando sobre las letras del abecedario en este marco será donde done irán apareciendo las listas de títulos disponibles.
La cosa parece que empieza bien pero ya os adelanto que he cometido un error que luego me va a dar problemas pero lo dejamos para el siguiente post.
Mas info sobre los marcos (frames): http://www.htmlpoint.com/guida/html_13.htm se ha quedado un pelín antigua pero esta muy bien explicado.
2 comentarios:
Te agradezco la información de tu actividad, me sirve para dar el avanzar, porque me he atascado en la creación del proyecto.
No hay de que amigo, encantado de ayudar.
Publicar un comentario