• Like
Elggcampba 2010 - Customize a Social Network in Elgg without losing patience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Elggcampba 2010 - Customize a Social Network in Elgg without losing patience

  • 1,027 views
Published

Presentation Elggcampba 2010. …

Presentation Elggcampba 2010.
Customize a social network in Elgg without losing patience / Personalizar una Red Social en Elgg sin perder la paciencia.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,027
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 0

No embeds

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. Personalizar una Red Social en Elgg  sin perder la paciencia Diego Gallardo - Elgg Developer @demege
  • 2. Agenda 1. Introducción 2. Conceptos 3. Puesta en practica 4. Preguntas
  • 3. Introducción - Elgg esta basado en MVC (modelo-vista-controlador) - Esta charla va a hablar de la capa de vista - Aprenderemos como modificar la parte visual de un sitio en Elgg - Cuando hablamos de personalización en Elgg hablamos de vistas. - Aprenderemos que es una vista, que es extender una vista, tipos de vistas ...
  • 4. Que es una vista En Elgg todo se puede representar con una vista. Se puede representar elementos html, css, js. En Elgg se representan con vistas, un header, footer, input, textarea, pulldown, etc Es la salida de datos de la informacion que ve el usuario. La ventaja que todo se maneje con el mismo sitema:      - Esta centralizado.      - Se puede extender.      - Se pueda cachear.
  • 5. Como utilizar una vista Como llamar a una vista:      elgg_view( 'page_elements/header_contents' ) Se puede pasar parametros una vista mediante un arreglo.      elgg_view( 'page_elements/header_contents' , array ( 'var1' => $val1, 'var2' => $val2)) Se obtienen estos parametros en la vista a traves de $vars.      $vars[ 'var1' ], $vars[ 'var2' ] La vista recibe en $vars parametros por defecto:      $vars[ 'url' ] : Url del sitio.      $vars[ 'user' ] : El usuario que esta logeado actualmente.      $vars[ 'config' ] : el objeto configuracion de elgg.  
  • 6. Estructura de vistas Estructura de directorio de vistas por defecto de elgg: elgg      views          default              canvas                  layouts                      two_column_left_sidebar.php              page_elements                  header_contents.php                  footer.php
  • 7. Trabajar con vistas Hay 3 formas de trabajar con vistas:      - Sobreescribiendo      - Extendiendo      - Creando nuevas
  • 8. Trabajar con vistas: Sobreescribiendo Para sobrescribir una vista, solo basta con declarar la vista en la misma posición a nivel estructura, respecto a la vista a sobreescribir. Ubicacion vista original (header) elgg      views          default              page_elements                  header_contents.php Ubicacion vista sobreescrita (header) mytheme      views          default              page_elements                  header_contents.php
  • 9. Trabajar con vistas: Extendiendo Se pueden extiender las vistas para agregar contenido antes o despues de las mismas. Ej: Extendemos el header para agregar un menu.      elgg_extend_view( 'page_elements/header_contents' , 'page_elements/menu' ); El tercer parametro de la funcion elgg_extend_view indica la prioridad por defecto 500. Ej: Extendemos el header para agregar un menu antes.  Al darle menos prioridad que por defecto, se agrega antes.      elgg_extend_view( 'page_elements/header_contents ', 'page_elements/menu' , 499); TIP : En la vista que extendemos se reciben en $vars los parametros de la vista extendida.
  • 10. Layouts En elgg hay diferentes layouts para mostrar la informacion. - 2 columnas. (sidebar izq, sidebar derecha) - 1 columna - sidebar boxes (riverdashboard) - widgets (profile, dashboard) Como llamar a un layout: elgg_view_layout('two_column_left_sidebar', $area1, $area2, $area3); Las diferentes variables que se pasan al layout, se reciben como $vars['area1'], $vars['area2'] ... $vars['areaN'] 
  • 11. Tipos de vistas (view type) Elgg provee diferentes formas de mostrar finalmente la informacion: rss, json, xml, php, default (estandard)  Cambiando el tipo de vistas, se puede mostrar la misma informacion de diferente manera. Se podria especificar un nuevo tipo "mobile" y modificar las vistas sin tener que modificar la informacion misma. Utilizacion: A traves de la url http://local/elggbase/pg/blog/?view=rss Definiendo el tipo de vista: elgg_set_viewtype('mobile');
  • 12. Tipos de vistas (view type) Vistas por defecto: elgg      views          default/              canvas/              page_elements/          json          php          rss/              canvas/              page_elements/                      xml
  • 13. Nos arremangamos y arrancamos!
  • 14. Puesta en Practica Desarrollo de un theme base - Creamos un directorio dentro de mod &quot;mytheme&quot; - Creamos el archivo manifest.xml - Creamos un archivo mytheme/start.php con: <?php function mytheme_init() {      elgg_extend_view( 'css' , 'mytheme/css' ); //Extendemos la vista de css }     register_elgg_event_handler( 'system' , 'init' , 'mytheme_init' ); ?> - Creamos la estructura de vista default. views      default          mytheme
  • 15. Puesta en Practica Archivo CSS: - En Elgg el css se encuentra en 1 solo archivo en:      elgg/views/default/css.php - Podemos sobreescribirlo declarandolo en nuestro plugin:      elgg/mod/mytheme/views/default/css.php - Podemos extenderlo con:      elgg_extend_view( 'css' , 'mytheme/css' );
  • 16. Puesta en Practica Importante : Los plugins en Elgg tienen jerarquias de vistas, cualquier archivo que se declare en la misma posición en la estructura, reemplazara a otro ya definido. Ej: Agregar contenido al header. El archivo: mod/mytheme/views/default/page_elements/header_contents.php Reemplazara: elgg/views/default/page_elements/header_contents.php - Podemos copiar el original y modificarlo o crear uno nuevo.
  • 17. Puesta en Practica Tarea: Extender la vista de miembros recientes con un banner.
  • 18. Puesta en Practica <?php function mytheme_init() { elgg_extend_view( 'riverdashboard/newestmembers' , 'page_elements/left_banner' ); } ?>
  • 19. Puesta en Practica Funciones utiles: - get_loggedin_user(): Obtenemos el usuario logeado. - isloggedin(): Devuelve true o false si hay un usuario logeado. - isadminloggedin(): Devuelve true si hay un admin logeado. - get_context(): Devuelve el contexto. - get_input('my_var', ''): Obtiene variables input de GET/POST - set_input('my_var', 'diego'): Seteamos una variable, para obtener por get_input.
  • 20. Puesta en Practica Recomendaciones : - Nunca modificar las vistas en /elgg/views/*, en caso de querer modificar algo, hacerlo dentro de un plugin. - Tener en cuenta el orden de los plugins en la lista de plugins al sobreescribir vistas.  Ej: si sobreescribimos una vista de blog y este se encuentra debajo de nuestro plugin en la lista de plugins, no se veran los cambios. - En la configuracion del sitio, quitar cache de vistas y archivos para desarrollo. - En caso de no ver los cambios http://mysite.com/upgrade.php
  • 21. ¡Dudas o preguntas ?
  • 22. GRACIAS http://docs.elgg.org/wiki/Main_Page http://community.elgg.org/ http://community.elgg.org/pg/profile/demege Diego Gallardo - @demege