Referencias

A la hora de hacer la web, he tenido que consultar múltiples sitios con tutoriales, ideas o trucos. Los principales han sido

• w3schools: Donde he mirado tanto lo relacionado con las hojas de estilo (parámetros de algún elemento, o cómo hacer algunas cosas) con html (atributos de los tags) o con php (procesado de formularios).
• php.net: Contiene mucha información acerca de las funciones de php y cómo se utilizan.
• colorzilla: Muy útil para crear los gradientes de CSS3.
• El menú del primer estilo está basado en este: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
• Para solucionar problemas tuve que navegar por múltiples sitios buscando por Google.

Subida de ficheros

Estas navidades he estado bastante liado con los exámenes, pero he conseguido sacar algo de tiempo para añadir/arreglar un par de cosas:

Por un lado, me comentaron que cuando se cambiaba el estilo, se veía durante un momento la página sin estilo. Esto era debido a que en el javascript cambiaba una hoja de estilos por la otra. La solución fue incluir siempre los dos en el html, pero deshabilitar uno de ellos.

Por otro lado, incluí la carga de ficheros a la hora de escribir el post. Para que no se recargase la página al subir el fichero (en un formulario diferente al de guardar el post, pero en la misma página), seguí el método explicado aquí: http://www.devrecipes.com/2009/07/13/ajax-style-file-upload-without-page-refresh/

Además, para cambiar algunos parámetros acerca de los ficheros que se pueden subi (tamaño, por ejemplo) consulté la página de w3schools: http://www.w3schools.com/php/php_file_upload.asp

Por último, probé a subir algún fichero y comprobar que se insertaban bien los vídeos y las imágenes:

 

2º estilo mejorado

Ya he terminado el segundo estilo. He hecho varias modificaciones para que fuera más diferente al primer estilo, ya que como estaba antes, eran muy parecidos.

Segundo estilo:

Primer estilo:

Como se puede ver, la paleta de colores elegida es diferente, el menú es vertical y la página tiene un fondo diferenciado del contenido de la página. Además, en este estilo he eliminado el menú reducido que aparece  cuando se hace scroll.

En el primer estilo, la paleta de colores estaba escogida a partir del logotipo de Raspberry Pi, rojo y verde, que son complementarios. En este segundo estilo, la gama de colores es monocromática, partiendo del blanco y negro de Tux, el logotipo de Linux.

Próximamente: incluir jQuery Mobile y más contenido.

MySQL

Ayer por la noche estuve instalando phpMyAdmin en la Raspberry Pi y hoy he estado añadiendo artículos (por ahora sólo About Me y Lorem ipum) a la base de datos y con php consiguiendo que se muestren en la página. Los pasos que he seguido los he sacado de la documentación de clase.

Por ahora se muestran los artículos que tengan un enlace directo. Más adelante me gustaría añadir que se muestren todos los de una sección, poder añadir los artículos fácilmente (sin tener que recurrir a sentencias sql o phpMyAdmin), poder ordenarlos por fecha, mostrar sólo los de un autor, etc.

PD: Ya va quedando poco para la entrega final, así que me centraré en modificar el segundo estilo y si tengo tiempo, incluir jQuery Mobile.

Carga de páginas con PHP

Por fin está hecha la carga de las páginas. Tenía ya hecha la carga de las secciones (header, nav, section y footer), pero la carga de las diferentes entradas no la tenía. La idea que tengo de hacerla es mediante PHP y MySQL. En un principio, va a ser PHP, ya que es más sencillo, y que las entradas sean ficheros html, más adelante añadiré MySQL.

Cuando he empezado, las url iban a tener el siguiente formato: http://diego-rpi.no-ip.biz/articulo.html. Pero debido a que la carga de secciones la hago con jquery a partir de la "plantilla" que es el fichero index.html y que apache cargaría el fichero artículo.html (que sólo contiene el artículo, no header, nav o footer). Por tanto la carga la voy a realizar con este formato de url: http://diego-rpi.no-ip.biz/?articulo. De esta forma, al añadir el caracter "?", Apache carga la página index y obvia el string con el artículo a cargar.

Por ahora sólo tengo hecha la página About Me, que está un poco escueto aún, pero por fin hay algo de contenido aparte del lorem ipsum.

Lo próximo: MySQL y cambio del segundo estilo (y puede que más contenido).

Servidor con Apache + extra

Hoy he empezado a montar el servidor con PHP. Bueno, más exactamente con la infraestructura LAMP, que agrupa Linux (SO sobre el que se monta el servidor), Apache (servidor HTTP), MySQL (gestión de bases de datos) y PHP (scripts que se ejecutan en el servidor).

El gestor de bases de datos y los scripts no tienen por qué ser MySQL y PHP, pero son los que he elegido, debido a que son los más extendidos actualmente.

Para ello he seguido los pasos que se indican en este enlace, que básicamente consisten en instalar los programas nombrados arriba.

De esta forma, el servidor funciona y no me da el extraño error de que a veces no se cargaban los css.

Como extra, he añadido que el estilo que elija el usuario lo recuerde el navegador y siempre le muestre ese estilo (a no ser que lo vuelva a cambiar).

Para esto, en un principio había pensado usar cookies, incluso me habían comentado la posibilidad de usar sesiones con PHP, pero luego he recordado una de las características que introduce HTML5, LocalStorage. Usando como documentación w3schools, no ha sido necesario más que añadir unas pocas líneas al fichero de javascript.

Avances con los estilos

Bueno, tenía un poco abandonado el blog, pero en esta entrada muestro los dos estilos que tengo ahora mismo (se parecen porque uno de ellos ha ido evolucionando en algunos aspectos al otro, el cual cambiaré posteriormente).

Primer estilo:

Segundo estilo:

Además, el menú se sustituye por otro más pequeño que permanece fijo en la parte de arriba de la pantalla al desaparecer el menú original:

La página está alojada en un servidor propio (en una Raspberry Pi). El problema es que hay veces que no carga bien el css. Quiero cambiar el servidor, que actualmente está en node.js a PHP, ya que no he conseguido arreglar este problemilla.

Cuando tenga finalizados los dos estilos y el servidor bien montado, me pondré con el contenido.

Dirección de la web: http://diego-rpi.no-ip.biz/

*La disponibilidad de la web no está asegurada al 100% debido a posibles reinicios que tenga que hacer de la Raspberry Pi u otros problemas.