Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Configuración y personalización de Geonode

No description
by

Marlen Villalobos

on 27 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Configuración y personalización de Geonode

Ejercicio
HTML y CSS
Agregar Mapa
Personalice la pestaña "Quienes Somos".
Agregue la siguiente capa base a Geonode:
{
"source": {"ptype": "gxp_bingsource"},
"name": "Road",
"fixed": True,
"visibility": False,
"group":"background"
},
Cambiar color a los botones
Cambiar fuente de letra
Cambiar Logo, Color de Encabezado y Navegación
Configuración y personalización de Geonode
Logo
Ejecute el programa Oracle VM VirtualBox
Seleccione la máquina virtual y presione el botón "Iniciar"
Ingrese con el usuario: prueba y la contraseña: prueba.
De click en File System y siga la siguiente ruta: var/www/geonode/static/geonode/img
En el directorio img pegue la imagen llamada logo-ide.png
Abra la terminal, digite el siguiente comando

cd /var/www/geonode/static/geonode/img

para ubicarnos en la carpeta img y presione la tecla enter
Utilice el comando

ls

para observar los archivos que se encuentran en la carpeta.
Utilice el siguiente comando

sudo chmod 777 logo-ide.png

para dar permisos de lectura y escritura a la imagen, presione la tecla enter. Posterior a este paso, se le solicitará la contraseña del usuario; que es prueba.
Utilice el comando

ls

para ver los cambios.
Vaya a la siguiente ruta: var/www/geonode/static/geonode/css
De click derecho sobre el archivo base.css y elija la opción "Open with Sublime Text".
Utilice la herramienta de búsqueda con la palabra nav-logo en la aplicación Sublime Text.
Cambie los valores de los siguientes atributos y guarde el documento.
width: 126 px;
height: 75 px;
background:url (../img/logo-ide.png) no repeat;
Abra un navegador. e ingrese a la siguiente URL:

http://localhost
.
Encabezado y navegación
Ejercicio
Cambie la imagen del logo por otra de su preferencia. Recuerde verificar que el texto y el visualizador de mapas se ajustan de forma adecuada con el nuevo logo.
En el vínculo
http://www.mclibre.org/consultar/amaya/css/css_color.html
se encuentran ejemplos de colores en hexadecimal y se explica cómo funciona los códigos de los colores al convertirlos a hexadecimal. Utilice dicha página para que personalice su geoportal con un color para el encabezado y el fondo de la barra de navegación.
Verifique que su geoportal se observa adecuadamente con los nuevos colores.
Cambiar imagen
Ajustar texto
Vaya a la siguiente ruta: /usr/local/lib/python2.7/dist-packages/geonode/templates
Edite el archivo base.html con la herramienta Sublime Text y busque en ese documento content-wrap. Encima de esa etiqueta (o de esa línea) escriba dos etiquetas <br/>, que tienen la función de hacer dos saltos de línea.
Guarde el documento y si Sublime Text le muestra una alerta entonces en la terminal ingrese el siguiente comando:

sudo chmod -R 777 /usr/local/lib/python2.7/dist-packages/geonode/

En el navegador refresque la página del geoportal para que observe los cambios.
Esta solución no aplica para el visualizador del mapa (en su geoportal en el navegador, utilice la opción de crear mapa), por lo que debe realizar el siguiente procedimiento. Vaya a la siguiente ruta: /usr/local/lib/python2.7/dist-packages/geonode/maps/templates/maps.
Abra el archivo map_geoexplorer.js con Sublime Text y busque la propiedad margin-top que por defecto tiene una valor de 81px, cambie dicho valor por 125px.
Nota: El valor depende de las dimensiones del logo, entre más grande sea este, mayor será el tamaño que debemos colocar.
Guarde los cambios y luego verifique en Geonode que los cambios se aplicaron correctamente.
Color del encabezado
Color del fondo de la barra de navegación
El encabezado o “header” de Geonode trae un color gris oscuro por defecto, como es un background (fondo) lo podemos personalizar.
Vaya a la ruta: var/www/geonode/static/geonode/css.
Abra el archivo base.css con la herramienta Sublime Text y modifique la propiedad background de la clase .navbar .navbar-inner, el nuevo color a utilizar es un azul oscuro que corresponde en hexadecimal al siguiente numeral
#172e55
.
Guarde los cambios y verifique en Geonode que los cambios se aplicaron correctamente.
En el mismo archivo (base.css) busque la clase nav-box, y cambe el valor de la propiedad background por #D3D3D3.
Guarde los cambios y verifique en Geonode que los cambios se aplicaron correctamente.
Cambiar fuente
En un navegador web vaya a la siguiente URL:
http://www.google.com/fonts/
En el cuadro de texto de
font family shown
, busque la fuente Nobile
Presione el botón "
Quick-use
"
Ahora en el explorador de archivos, vaya a la dirección:
/usr/local/lib/python2.7/dist-packages/geonode/templates
y abra con Sublime Text el archivo base.html.
Pegue la siguiente línea
<link href='http://fonts.googleapis.com/css?family=Nobile' rel='stylesheet' type='text/css'>
Guarde los cambios.
Seguidamente, vaya a la dirección:
var/www/geonode/static/geonode/css
, edite con Sublime Text el archivo base.css y cambie la línea
font-family: 'Lato'
; por
font-family: ‘Nobile’, sans-serif;
Guarde el archivo y refresque la página en el navegador web.
Finalmente, cambie el contenido del titulo de "BIENVENIDO" que aparece en la página principal. Abra el archivo
base.css
, busque la clase .hero-unit en la línea 7378 y cambie el valor a la propiedad font-size por 15 px.
Guarde el archivo y refresque la página web en el navegador.
Descargar fuente
En este ejemplo, se va a cambiar la fuente a todos los títulos de cada apartado de Geonode.
Regrese a la URL:
http://www.google.com/fonts/
Busque la fuente Cambay, presione el botón "Add to collection" y proceda a descargar los archivos en formato zip.
Descomprima el archivo en la ruta:
var/www/geonode/static/geonode/font
. Recuerde que puede descomprimirla en otra carpeta y luego copiar los archivos en la ruta indicada.
Descargue el archivo c
ambay_font.css
, que recibió por correo electrónico y también debe pegarlo en la ruta anterior.
Utilice el comando
sudo chmod -R 777 var/www/geonode/static/geonode/font
en una terminal, para darle permisos de escritura y lectura a la carpeta font.
Abra el archivo base.html con Sublime Text, recuerde que se ubica en la ruta
/usr/local/lib/python2.7/dist-packages/geonode/templates.
Agregue la siguiente línea al documento anterior:
<link href='{{ STATIC_URL }}geonode/font/cambay_font.css' rel='stylesheet' type='text/css' />
y guarde los cambios.
Edite el archivo base.css que se encuentra en
var/www/geonode/static/geonode/css
y busque la clase
hero-unit h1
ubicado en la línea 7383 y a
h2.page-title
. Cambie el valor de la propiedad font-family por 'Cambay', sans-serif;.
Guarde el archivo y refresque la página web en el navegador.
Botones Anaranjados
Abra el archivo base.css con Sublime Text que se encuentra en la ruta:
var/www/geonode/static/geonode/css
Busque la clase
hero-unit .btn
y cambie el valor de la propiedad
background
por
#172e55
(valor hexadecimal para el color azul).
Para cambiarle el color al botón cuando se posiciona el puntero del mouse, se modifica la clase
hero-unit .btn:hover
que está después de la clase
hero-unit .btn
. A esa clase se le modifica el valor de la propiedad background por
#D3D3D3
(gris).
Agregue la propiedad color a la clase
hero-unit .btn:hover
, con el valor
#172e55
(azul).
Guarde el archivo y refresque la página web en el navegador.
Botones Celestes
Para cambiar los botones celestes, siga los siguientes pasos:
Vuelva a abrir el archivo base.css y busque la clase o encabezado con el nombre de
.btn
, como hay muchos de ellos, el que nos interesa es el que aparece en la línea
6562
, ahí modificamos el valor de la propiedad
background
por
#172e55
(azul).
Lo anterior solo cambia el color superficial que ellos presentan, pero para modificar el color que muestran cuando se posiciona el mouse sobre ellos, entonces debe encontrar la clase
btn:hover
que está después de la clase
.btn
aproximadamente en la línea
6573.
Posteriormente, proceda a cambiarle el valor a la propiedad
background
por
#D3D3D3
(gris) y el valor a la propiedad color por
#172e55
(azul), con eso logramos que la mayoría de los botones de Geonode tengan el mismo estilo.

Prerrequisito: Tener capas agregas en Geonode.

Se agregará una mapa al inicio de Geonode, lo cual implica hacer lo siguiente:
Ir a la pestaña de Mapas y dar click a "
Crear Mapa
".
Tenemos dos opciones:
1 - Buscar un País, lugar que deseamos en el mapa.
2 - Agregarle capas que deseamos al mapa.
Cualquiera de las dos opciones son válidas, pero va en relación a lo que deseen mostrar en el mapa.
Después seleccione la opción de "
Exportar mapa
", dele un nombre y luego presione el botón "Guardar". Seguidamente, se mostrará una ventana, copie el código que nos proporciona, ahí mismo se le pueden dar diferentes dimensiones al mapa.
Luego, abra el archivo
index.html
con Sublime Text ubicado en
/usr/local/lib/python2.7/dist-packages/geonode/templates.
Busque el texto "
Latest Layers"
en el archivo y una vez encontrado elimine la etiqueta
h2
que contiene ese texto y la siguiente etiqueta que es un
div
.
Por último, coloque el código dado al exportar el mapa, dentro de la etiqueta
section
.
Scroll Bar a Mapas Recientes
Para Agregar un scroll bar a la vista de mapas recientes debe realizar los siguientes pasos:
Abrir el archivo
base.css
de la ruta
var/www/geonode/static/geonode/css
y agregar un encabezado que lo encontramos en el archivo
Códigos
que se les proporcionará al inicio del taller, el encabezado está en apartado 1, del bloque de código CSS.
Abrir el archivo
index.html
con Sublime Text ubicado en
/usr/local/lib/python2.7/dist-packages/geonode/templates
e ir al apartado
"Latest Maps"
ubicado en la línea
81
y agregar el bloque de código HTML del apartado 1.
Finalmente guarde lo cambios realizados y compruébelos en Geonode.
Después de iniciar sesión
Cuando se inicia sesión en la parte de arriba aparece otro apartado que contiene información de Geonode, lo que conlleva a ajustar el contenido de los mapas recientes. Siga los siguiente pasos:

Abrir el archivo
base.css
con Sublime Text que se encuentra en la ruta:
var/www/geonode/static/geonode/css
y agregar el encabezado que se encuentra en el apartado 2 del bloque de código CSS en el archivo
Códigos
.
Abrir el archivo
index.html
con Sublime Text ubicado en
/usr/local/lib/python2.7/dist-packages/geonode/templates
y ir al apartado
"Latest Maps"
ubicado en la línea
68
y agregar el bloque de código HTML del apartado 2.
Finalmente guarde los cambios realizados y compruébelos en Geonode.
Antes de iniciar sesión
Apartado para Instituciones
Abra
base.css
con Sublime Text que se encuentra en la ruta:
var/www/geonode/static/geonode/css
y agregue el código de
table-images
,
logo-tec-footer
,
logo-muni
y
logo-snit
que se encuentran en el apartado 3 del bloque de código CSS en el archivo
Códigos
.
En
usr/local/lib/python2.7/dist-packages/geonode/templates
abra
index.html
y agregue después del la etiqueta
aside
ubicada en la línea
92,
el código de "
Instituciones involucradas
" que se encuentra en el apartado 3 del bloque de código HTML.
Guarde los cambios y verifique en el geoportal.
Colocar Idioma Predeterminado
Se dejará el idioma español como predeterminado, lo que implica realizar lo siguiente.
Abra el archivo
base.html
encontrado en
usr/local/lib/python2.7/dist-packages/geonode/templates
y agregue el código que está en el apartado 4 del archivo
Códigos
.
Abra el archivo
local_settings.py
ubicado en
/etc/geonode/
y cambie la variable
LANGUAGE_CODE
ubicada en la línea
66
por el valor
"es"
.
Reinicie apache2, para esto debe usar la consola con el comando
sudo service apache2 restart.
Abra el archivo
settings.py
ubicado en
/usr/local/lib/python2.7/dist-packages/geonode
y comente todos lo lenguajes que acepta Geonode excepto el español. Estos se encuentran en la variable
LANGUAGES
, línea
73
.
Reinicie nuevamente apache2.
Guarde y compruebe en Geonode.
Pestaña "Quienes somos" y Capa Base
Nueva Pestaña "Quienes Somos"
Abra el archivo
base.css
con Sublime Text que se encuentra en la ruta:
var/www/geonode/static/geonode/css
y agregue los siguiente encabezados:
icono-correo
,
icono-telefono
,
icono-facebook
y
hero-unit .intro2
que se encuentran en el apartado 5 en el archivo
Códigos
.
Además, en
base.html
localizado en
usr/local/lib/python2.7/dist-packages/geonode/templates
busque
block extra-nav
y agregue ahí, el código de la parte que se encuentra en la sesión
Pestaña
del apartado 5.
Abra el archivo
about.html
ubicado también en
usr/local/lib/python2.7/dist-packages/geonode/templates,
elimine el texto que contenga y agregue del apartado 5 la parte que está en la sesión de
Contenido
del archivo
Códigos
.
Guarde todos los cambios y compruebe en el geoportal.
Nuevas Capa Base
En el visor de Mapas podemos agregar una nueva capa base, para ello siga los siguientes pasos:
En el archivo
/etc/geonode/local_settings.py
agregue el código contenido en la sesión 6 del archivo Códigos en
MAP_BASELAYERS.
Guarde los cambios y reinicie apache escribiendo
sudo service apache2 restart
en la terminal de Ubuntu. Así se logra colocar una nueva capa al visor.
También, para poner el visor de mapas en unas coordenadas fijas, que ubiquen a Costa Rica,, abra el archivo
settings.py
en
/usr/local/lib/python2.7/dist-packages/geonode
.
A la variable
DEFAULT_MAP_CENTER
dele los valores de -84.4, 9.96 y a
DEFAULT_MAP_ZOOM
asígnele el valor de 8.
Guarde y reinicie apache.
Full transcript