cómo crear un template para ushahidi desde cero

CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO

| Página 1 de 9


Pequeño tutorial ayuda para crear un template (theme) funcional en Ushahidi

Antes de empezar

Pueden descargar los manuales de uso oficiales de la plataforma Ushahidi en formato PDF “Ushahidi Guide: A Step-‐By-‐Step Guide On How To Use The Ushahidi Platform”.

Parte 1: Instalando la plataforma Ushahidi.

Parte 2: Customizando tu plataforma.

Necesariamente se debe tener:

• Conocimiento básico de HTML, CSS y PHP.

• Conocimiento del entorno de Ushahidi y conceptos básicos.

• Un servidor local o remoto con Ushahidi instalado.

• Un editor de programación (por ejemplo Notepad++ para Windows OS, TextWrangler para Mac OS, GEdit para Linux OS).


| Página 2 de 9

Índice

1. Estructura básica de una plantilla para Ushahidi

a. Carpetas

b. Archivos

2. Creación de la carpeta para nuestro template

3. Edición de style.css

a. Modelo base de cascada de estilos para Ushahidi.

b. Clases que Ushahidi carga por defecto.

c. Otras clases CSS importantes

4. Apuntes finales


| Página 3 de 9

1. Estructura básica de una plantilla para Ushahidi: Básicamente un template puede estar formado por las siguientes carpetas y archivos:

a. Carpetas: css: Es la carpeta que contiene los estilos en cascada del template. images: Contendrá las imágenes usadas para el diseño. *opcional: views: Esta carpeta posee los archivos que funcionaran como plantilla especifica para vistas y componentes. Su uso no es prioritario pero es una funcionalidad a explotar si deseamos un código personalizado para componentes/vistas. js: Esta carpeta posee los archivos que funcionaran como javascripts. b. Archivos: style.css: Es el estilo en cascada principal que se encuentra dentro de la carpeta ‘css’. imágenes varias: Conformaran el diseño de la plantilla.


| Página 4 de 9

2. Creación de la carpeta para nuestro template: Lo primero que haremos será crear la carpeta en donde se alojaran los archivos de nuestra plantilla. Para eso vamos al directorio ‘themes´ de Ushahidi y creamos una carpeta con el nombre que queramos, en minúscula, y en caso de ser varias palabras, sin espacios. Luego podemos crear las subcarpetas necesarias: css, images y/o views y js


| Página 5 de 9

3. Edición de style.css

Vamos a la carpeta 'css' y creamos el archivo style.css. Lo primero que haremos será insertar los estilos para la maquetación de la plantilla:

a. Modelo base de cascada de estilos para Ushahidi.

/* Theme Name: ńombre del template´ Description: ´descripción del template´ Demo: úrl para el demo del template´ Version: 1.0 Author: ńombre del autor´ Author Email: [email protected] */ /* header background */ body#page{ background: #031634 url(../images/terra.gif) 50% 0 repeat-x; } /* footer */ div#footer{ background-color: #033649; } div#underfooter{ background-color:#033649; } /* links */ a{

color: #3764aa; } a:hover{

color: #008cff; } /* Logo Box */ div#logo{

background-color: #E8DDCB; } /* Main Menu */ div#mainmenu{

background-color: #C2C2C2; } div#mainmenu a{


| Página 6 de 9

color: #fff; } div#mainmenu a:hover{ color: #fff;

background-color: #036564; } div#mainmenu a.active{

color: #fff; background-color: #036564;

} /* Submit Button */ div.submit-incident a{

background-color: #CDB380; color: #000;

} div.submit-incident a:hover{ background-color: #368C00; } /* Category Filter Side Bar */ ul.category-filters{

background: #E7E3DA; border-top-color: #C7C2BC; border-bottom-color: #C7C2BC;

} ul.category-filters li a{

color: #3F3F3F; border-color: #E7E3DA;

} ul.category-filters li a:hover, ul.category-filters li a.active {

color: #FFFFFF; background-color: #036564; border-color: #036564;

} table.table-list tbody tr td a{

color: #0099CC; }

Ahora somos libres de añadir los estilos que queramos, pero para eso primero debemos conocer algunas de las clases que Ushahidi carga por defecto en sus elementos.


| Página 7 de 9

b. Clases que Ushahidi carga por defecto.

body: Da atributos de fondo (color, imagen de fondo) tamaños y tipos de fuentes generales para toda la interfaz del template.

h1, h2, h3, h4, h5, h6: Asigna atributos de tamaño, peso, color a los headers generales del template.

body#page: Le da atributos al fondo de la página de contenidos del template.

div#header: Le da atributos al cabezote del sitio.

div#searchbox: Le da atributos al cajón de búsquedas ubicado en cabezote del sitio.

div.submit-incident: Le da atributos al botón “Admitir un reporte” ubicado en el cabezote del sitio..

div#mainmenu: Le da atributos al menú principal horizontal del sitio. Ubicado justo debajo del cabezote del sitio.

div#middle

div#middle .background

div#middle .layoutleft

div#middle .layoutright: Le dan atributos al cuerpo central de contenidos. El que contiene todos los contenidos del sitio.

div#left: le da atributos al contenedor del cuerpo lateral izquierdo

div#right: Le da atributos al cuerpo lateral derecho.

ul.category-filters: Le da atributos a los enlaces a cada categoría (ubicados en el cuerpo derecho por defecto)

div.additional-content: Le da atributos al cuerpo de textos adicionales ubicado por defecto debajo del filtro de categorías del sitio.

div.slider-holder: Le da atributos al cuerpo “slide holder” ubicado justo debajo del mapa, en donde se ubican los campos de fechas para el mapa.


| Página 8 de 9

div.graph-holder: Le da atributos al cuerpo “graph holder” ubicado justo debajo del “slider holder”, en donde se ubican los gráficos para el mapa.

div.content-container: Le da atributos al contenedor de contenidos ubicado debao del filtro de categorías y debajo del “graph folder” Allí se alojan los Incidentes, las noticias y demás módulos de Uhsahidi.

div.rapidxwpr: Le da atributos al contenedor del pie de pagina. Que a su vez contiene al menú del pie de página y al espacio para feedbacks.

div.footermenu: Le da atributos al menú del pie de pagina del sitio.

feedback_title: Le da atributos al enlace para feedback ubicado en el cabezote del sitio.

c. Otras clases CSS importantes:

button: Es una clase asociada a elementos del tipo botón

inputbox: Suele estar asociada a elementos text-input

pagenav: Clase asociada a la paginación de artículos

modifydate: Clase asociada ala fecha de modificación de un artículo

sectiontableentry1/sectiontableentry2: Suele estar asociada cuando se muestran datos en tablas


| Página 9 de 9

4. Apuntes finales

• Una forma fácil para descubrir las diferentes clases asociadas que genera el output de Ushahidi es utilizando Firebug , una extensión para Firefox que permite inspeccionar el DOM de un sitio y visualizar como está conformado.

• En la web actualmente no podemos encontrar varios recursos para continuar con el aprendizaje de la creación de templates para Ushahidi, pero si encontramos muchas referencias, tutoriales y ayudas para el manejo de archivos PHP, HTML y CSS.

• Con respecto al tema Javascript, podemos enriquecer los contenidos de nuestro Ushahidi haciendo uso de Mootools En su página oficial se puede encontrar documentación y ejemplos para añadir efectos a la plantilla.

Por seguridad, es conveniente tener lo siguiente en cuenta:

• Por defecto hay dos temas principales instalados en Ushahidi, el tema default y el tema terra por David Cobia, pero es posible añadir tantos temas como gustos tenga el administrador. Se sugiere no cambiar los temas una vez que la plataforma ya está trabajando, porque se corre el riesgo de tener que reformatear algunas configuraciones una vez que el tema se haya cambiado.

• No eliminar el tema default bajo ninguna circunstancia, incluso si se ha seleccionado la implementación de un tema diferente. Los temas adicionales debemos de construir por fuera de la carpeta del template o tema default y las subcarpetas y archivos del mismo. Cada tema adicional integrado a Ushahidi saca sus parámetros de la subcarpeta views y los archivos allí contenidos. Eliminar el tema default hará que otros temas, y el sitio web se dañe. Si por error elimina este tema, puede arreglar el daño en su sitio web arrastrando la carpeta "default" de nuevo dentro de la carpeta "temas" sin tener que reinstalar su plataforma Ushahidi, acto seguido debe recargar su sitio.

Crear un template para Ushahidi desde cero by Redsalvavidas is licensed under a Creative Commons Reconocimiento-CompartirIgual 2.5 Colombia License.. La marca Ushahidi son propiedad de Ushahidi©.

cómo crear un template para ushahidi desde cero

Education