Cómo crear un template para ushahidi desde cero
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Cómo crear un template para ushahidi desde cero

  • 1,701 views
Uploaded on

Este PDF realiza una descripción básica de los aspectos a tener en cuenta a la hora de diseñar templates o temas para Ushahidi, plataforma líder mundial en cartografía colaborativa de crisis.

Este PDF realiza una descripción básica de los aspectos a tener en cuenta a la hora de diseñar templates o temas para Ushahidi, plataforma líder mundial en cartografía colaborativa de crisis.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,701
On Slideshare
1,669
From Embeds
32
Number of Embeds
1

Actions

Shares
Downloads
43
Comments
0
Likes
0

Embeds 32

https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 32

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CREAR UN TEMPLATE PARA USHAHIDI DESDE CEROCREAR UN TEMPLATE PARA USHAHIDI DESDE CEROPequeño tutorial ayuda para crear un template (theme) funcional en UshahidiAntes de empezarPueden  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 1 de 9  
  • 2. CREAR UN TEMPLATE PARA USHAHIDI DESDE CEROÍ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 2 de 9  
  • 3. CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO 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 3 de 9  
  • 4. CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO 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 4 de 9  
  • 5. CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO 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: ´nombre del template´ Description: ´descripción del template´ Demo: ´url para el demo del template´ Version: 1.0 Author: ´nombre del autor´ Author Email: autor@url.com */ /* 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 5 de 9  
  • 6. CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO 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 6 de 9  
  • 7. CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO 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 7 de 9  
  • 8. CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO 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 8 de 9  
  • 9. CREAR UN TEMPLATE PARA USHAHIDI DESDE CERO 4. Apuntes finales • • • Por seguridad, es conveniente tener lo siguiente en cuenta: • • 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©. | Página 9 de 9