Publicado en informática

Mi primera página web responsiva

¿Y para qué me metí en este lío?

Aprendiendo a programar

Creo que en algún lugar de los año noventa decíamos que crear páginas web no era programar “de verdad”. Afortunadamente ya no vivo en ese país y no creo que nadie discuta que el diseño de una página web caiga dentro del reino de la informática tanto como administrar una base de datos. En cualquier caso me he puesto a aprender diseño web y tras un par de meses que me han dejado un tanto cansado ya tengo un pequeño triunfo.

Tampoco quiero asustaros, en realidad se me han juntado cosas: la publicación de mi primer libro “Productividad para mentes inquietas”, del que ya os daré la vara próximamente, (sí, de nuevo), la novela-o-lo-que-sea Imi Otherwind, el trabajo (me ha tocado ejecutar los recortes de nuestro amado gobierno), la contabilidad de la Iglesia y esta cosilla del blog.

Lo que es el aprendizaje en sí, calculo que sale a una hora al día, (excepto un día que me volví majara y acumulé siete u ocho seguidas). He estudiado algo de diseño, una mijita de creación de empresas, un poco de php, y bastante de CSS3, diseño adaptativo, responsivo y zarandajas informáticas varias.Ahora necesito proyectos para afianzar ese conocimiento. Ya os hablé de mi web de [haikus](http://haikusq.nfshost.com/), que está terminado y de mi proyecto de Gamebook CMS que vendrá a continuación. El primero era muy sencillo, el segundo va a ser complicado para un servidor, así que, en medio de esto me dediqué a hacer…

Una página web a mi parroquia.

Por cierto está alojada en [Holy Trinity Church, Anglicans in Gran Canaria](http://laspalmasanglican.com/)

Idea general

Quizás os sorprenda que esté principalmente en inglés y es que mi parroquia es una capellanía de la Iglesia de Inglaterra (la de la Abadía de Westminster) en Canarias. ¿La razón? Bueno, eones ha, un amigo nos hizo una [página web](http://www.laspalmasanglican.com/) que, en su momento, no estaba muy mal, pero que hoy en día parece como ir por la calle con un Citroën 2CV de 1957, andar anda, pero en fin… Después nuestro antiguo sacerdote, se creó un blog en tumblr, que es una opción muy buena para tener una página web con pocos conocimientos de informática. Pero un blog está pensado para dar principalmente novedades y aquí lo que interesa es dar información relativamente estática.

Estoy pensando, en primer lugar en los turistas. Una capellanía inglesa en Canarias recibe tantos visistantes nuevos en una celebración dominical como parroquianos. Los primeros lo que quieren es: saber dónde y cuándo son los oficios, cómo es nuestra comunidad y cuál es el estilo de la celebración. Los segundos lo que necesitan es acceder a las novedades. En medio están las que cariñosamente llamamos “swallows” que vienen en invierno y vuelven al hermoso Gales en verano.

¡Ah! y están los que buscan casarse al sol de Canarias, pero como en casa, con un cura anglicano e inglés. (También tenemos diácono y pronto cura que habla español, por cierto.)

Boceto o “wireframing”

mockup

Aquí tenéis el primer boceto que hice con un programa bastante caro aprovechando el periodo de prueba. (La próxima vez seguramente usaré un cuaderno). Como véis preveía una estructura bastante simple de la que está prácticamente todo implementado excepto la función de buscar, que he descartado porque hay muy poco contenido que buscar. A las páginas usuales de About, News y Contact añadí una dedicada a las bodas “weddings” y otra titulada sencillamente “Español” para los parroquianos o visitantes de habla hispana, que van creciendo en número progresivamente.

Decidí que en la misma página de inicio estuviera el horario de los servicios litúrgicos y datos de contacto de nuestro sacerdote interino (eso significa Locum Priest) porque me parece que es lo primero que uno busca. Después tendríamos una imagen y un pequeño mensaje de bienvenida.

Php

> Oye servidor web, me vas a hacer un trabajito

He empleado php para crear una estructura de contenidos modular. Esta es básicamente la misma estrategia de wordpress, aunque en mi caso de forma más sencilla.

La cabecera, con los enlaces están en un fichero llamado header.php y el pie de página en otro llamado footer. Estos se repiten en todos las páginas del sitio y permiten que cambiar los enlaces de navegación pueda hacerse en una sola página y no tener que ir página tras página.

Pie de página

Footer.php es muy sencillo, en realidad no tiene php en absoluto, solo html corriente y moliente, y para incluirlo en las páginas lo único que tengo que hacer es un include

Empezamos diciendo al servidor que le mando una instrucción en php con el código . Eso le dice: “ojo que lo que vaya dentro es php, no te me confundas y lo trates como texto”, luego el include('inc/footer.php'); le dice “mira, me buscas el archivo footer.php, que está dentro de la carpeta inc y me lo pegas aquí antes de que lo vean el cliente en su navegador”.

Encabezado

El header tiene una cierta automatización, con tres variables $pageTitle donde va el título de la página, $pageSubTitle y $section. Para incluirlo uso una línea tal que así:

El contenido del header tampoco es muy complicado

Un título en h1 donde incluyo el logotipo de la Diócesis de Gibraltar en Europa, a la que pertencemos, y junto a éste mediante echo $pageTitle; le digo al servidor “servidor, aquí me vas a poner el valor de $pageTitle”, que si recordáis era “Holy Trinity Church”. El subtítulo va con un simple párrafo.

Los enlaces de navegación van encerrados en un nav y solo te muestro uno porque los demás son exactamente iguales. Aquí tenemos una instrucción if que le dice al servidor: “Servidor, si la variable $section es igual a home le pones a ese enlace la clase on”. (Luego tengo programado en CSS que la clase de enlaces “on” tiene más de padding).

Artículos

Los artículos de la sección news son tan sencillos como el footer. Con ellos consigo que solo necesite editar el brevísimo archivo article1.php (o article2, etc) cada vez que haya una noticia nueva. Así me centro en el artículo, puedo usarlo en cualquier otra parte y no tengo que preocuparme si lo he borrado o no, etc.

En cuanto a los mapas, de la sección Find Us es exactamente igual a los artículos, en cuanto al php. Lo de programar los mapas de google tiene su historia, que os contaré otro día.

CSS

En cuanto al CSS parte de normalize.css, que sirve para dejar todos los estilos a cero, “borrando” los estilos que aplica cada navegador de serie y luego mi propios estilos de mi cosecha.

Tampoco son nada del otro mundo. Para adaptar las imágenes a la pantalla lo único que hago es un simple width:100% y luego max-width y max-height con las dimensiones reales de las imágenes. Los tipos de letra están todos medidos en “em” siendo 1 em el tamaño de una m normal de una fuente de 16px, que es el bueno para una pantalla.

Aparte de esto con la seudo-clase :hover hago que los enlaces ganen un poco de padding, con lo que se agrandan. La idea es permitir que aquellas personas con menos experiencia con un ratón o dificultades de coordinación (muchas personas mayores, como las que van a las iglesias, por ejemplo) tengan fácil hacer click

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.