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. 

Planificación de la web

1. Web que vas a hacer.

Por qué El tema principal de la web que voy a hacer es la Raspberry Pi. Con los ordenadores es común que te encuentres con el mismo problema varias veces, y en muchos casos, al no recordar la solución, toca volver a googlear y probar métodos que no funcionan o están desactualizados hasta que consigues resolver el problema. Por tanto, en esta web quiero reunir métodos que me sirvieron a la hora de configurar o instalar programas en la Raspberry Pi (también de Ubuntu y puede que raras veces de Windows).

2. Objetivos y público objetivo

 El objetivo es, como he explicado antes, que sirva como referencia cuando surjan dudas o problemas con la Raspberry Pi (o Ubuntu, o Windows). Además, aunque en internet hay muchas páginas de referencia de la Raspberry Pi, la mayoría están en inglés, por tanto será de las pocas páginas de este estilo en español. El público objetivo será en primer lugar yo :P , y en segundo lugar gente que esté empezando con la Raspberry Pi.

3. URLs de webs de la misma temática.

La página principal de esta temática que he encontrado es la página oficial de la Raspberry Pi: http://www.raspberrypi.org/. Su estructura está dividida, fundamentalmente, en una página principal, en la cual aparecen noticias en modo blog (el primer post es el último publicado), una guía de inicio rápido, otra con descargas de los diferentes SO para la Raspberry Pi y un foro para consultas o para mostrar proyectos (entre otras cosas). El diseño es bastante sencillo, fondo blanco y con el menú permanentemente en la parte de arriba de la página.

 Otra página de este estilo es http://www.linux.com/ donde tienen noticias, foros, cursos y tutoriales de linux. El diseño de esta página es algo más elaborado, con menús desplegables y un slider con las últimas noticias.

 Por último, he encontrado otra página, esta vez en español, orientada a la Raspberry Pi: http://www.raspberrypi.es/

4. Secciones y estructura

No tengo del todo decidida la estructura todavía, y la idea es que con el tiempo el número de secciones vaya aumentando. A grandes rasgos, la web tendrá esta estructura:

• Rasbperry Pi
• ¿Qué es?
• Primeros pasos
• Sistemas operativos
• Instalación en la SD
• Configuración básica
• etc...
• Instalación y configuración de programas
• Node.js
• No-ip
• Transmission-daemon
• etc...
• Proyectos
• Ubuntu
• ...
• ¿...?
• About me

5.Boceto de una app móvil (IPhone/Android) - Opcional

Cuando tenga una idea más exacta del diseño de la página, me pondré a ello.