01
oct 13

Creando Aplicaciones con Drupal 7

Creando Aplicaciones en Drupal 7

Por causa de la “desorganización” que tuvo el software freedom day aquí en Bogotá el 28 de septiembre de 2013, esta charla no pudo ser realizada. Aquí dejo el contenido de la misma. Aprovecho para invitar el próximo 8 de octubre al curso de Drupal que estaré dictando. Al final del contenido se encuentra para descargar los archivos de la presentación y de este artículo en formato pdf.

DrupalYa conocemos a Drupal como un administrador de contenido potente y escalable, y sabemos que podemos usarlo para sitios grandes sin ningún problema.

Otros usos para DrupalOtro de los usos que podemos darle a Drupal es para crear aplicaciones que manejen contenidos diferentes. Por ejemplo: sitio para manejo de calendario de eventos y registros; sitio para manejar solicitudes, quejas y reclamos; sitio para manejar atención al cliente en un centro de llamadas; entre otros.

Planear antes de empezar a trabajar en DrupalPara poder hacer esto, lo primero es planear lo que queremos y definir lo primordual que debe definirse en cualquier instalación de Drupal: los tipos de contenidos. ¿Qué es un tipo de contenido? Es como denominamos a cada uno de los grupos de información que vamos a trabajar en nuestro sitio, por ejemplo: vídeos, artículos, páginas, lugares. Cada uno de ellos se define por características propias que lo hacen diferente a los demás y permite agruparlos.

Después de saber cuál contenido, debemos definir qué llevaría cada contenido: un evento lleva una fecha y una descripción; un lugar un nombre y una posición en un mapa; una sugerencia un título y un contenido; un vídeo debe guardar el sitio de donde voy a mostrar el vídeo. Cada uno con nombre propio y si es posible (y necesario) con una ayuda para la persona que va a usar la herramienta. Igual se deben definir si hay relación entre el contenido, es decir, si tengo un tipo llamado eventos y otro llamado asistentes, debo reconocer la relación que hay: un asistente va a un evento.

Drupal - CCKYa finalizada esta planeación podemos iniciar a crear estos tipos de contenido en Drupal. Hasta Drupal 6 había sido un módulo que debía instalarse después de tener el sitio funcionando, pero a partir de la versión 7 fue incluido dentro de los móduos preinstalados de Drupal.Me refiero al “Content Construction Kit” que es el que permite que un simple tipo de contenido que por defecto lleva título y contenido, pueda creársele de forma fácil y visual nuevos campos de diferentes tipos: de texto, numérico, de fecha, de posición en un mapa.

Algunos complementos a éste módulo son:

  • ImageField: Manejar imágenes en un campo. (https://drupal.org/project/imagefield)
  • Date: Campos de fechas (https://drupal.org/project/date)
  • Email Field: Campo de texto para correos electrónicos (https://drupal.org/project/email)
  • Fieldgroup: Permite crear grupos de campos. (https://drupal.org/project/fieldgroup)
  • Link: Para agregar enlaces a páginas (https://drupal.org/project/link)
  • Money Field (https://drupal.org/project/money) Requiere otros módulos.
  • Serial Field: Crear un campo con número consecutivo (https://drupal.org/project/serial)
  • Format Numbers Api: Campo numérico con formato (https://drupal.org/project/format_number)
  • Computed Field: Campos generados por fórmulas (https://drupal.org/project/computed_field)

Drupal - Referencias y EntidadesPara crear relaciones entre distintos tipos de contenido, el módulo Entity Api (https://drupal.org/project/entity) provee la parte básica de manejo de entidades en Drupal, entendiendo entidad como cada contenido creado independiente de su tipo. Usando las entidades creadas, podemos relacionarlas a partir un tipo de campo nuevo generado por el módulo “Entity Reference” (https://drupal.org/project/entityreference). Este campo ´permite enlazar tipos de contenido, creando un campo de búsqueda de autocompletado que relaciona los diferentes tipos. Podemos usar el módulo “Entityreference prepopulate” (https://drupal.org/project/entityreference_prepopulate) para llenar este campo automáticamente por la dirección web.

Drupal - Contenido funcionalEn este punto, ya hemos solucionado lo referente al ingreso de información y vista de contenido único, podemos buscar otros módulos que permitan organizar mejor esas pantallas de ingreso, como el “Node form Columns” (https://drupal.org/project/nodeformcols) que permite organizar el formulario de ingreso en dos columnas.

Drupal - ViewsEl siguiente paso es generar las páginas de lista de contenido, organizada por cada uno de los tipos creados y además que permita filtrar por medio de búsquedas. Uno de los módulos primordiales en cualquier sitio web en Drupal es el módulo de “Views” (https://drupal.org/project/views), que permite generar listados del contenido y filtrarlos y organizarlos libremente. Igualmente podemos añadir columnas que permitan crear filtros entre diferentes vistas a partir de campos generados usando el módulo “Token” (https://drupal.org/project/token) que permite reemplazar dinámicamente información en los campos mostrados. Las listas generadas pueden ser mostradas como tablas, como lista html, en formato json, un calendario con el uso del módulo “Date” e incluso en puntos de un mapa con la ayuda del módulo OpenLayers. También calcular totales con “Views calc”.

Creamos en los listados un campo que permita llamar a otra vista, a un contenido o a un formulario por un vínculo usando el código de la entidad en su url. Un ejemplo es llamar la lista de asistentes al evento usando el token nid: http://sitio.com/asistentes/[nid] el último parámetro es reemplazado por el módulo, asignando el código actual del nodo mostrado.

De esta forma ya podemos crear el menú del sitio y la navegación básica para ver contenido, filtrarlo, organizarlo, ver nodos completos y añadir información.

Drupal - Content AccessDrupal - UsuariosYa con el sitio en funcionamiento, el siguiente paso es definir los roles de usuarios y permisos. Quiénes añaden información y de cuál de los tipos creados, quién puede borrar, quién puede editar. “Content access” (https://drupal.org/project/content_access) que de forma fácil nos permite modificar permisos en cada uno de los tipos de contenido.

Drupal - Perfiles de UsuariosPodemos para finalizar usar otros módulos para diferentes tareas. “Profile2” (https://drupal.org/project/profile2) permite crear una página de usuario más completa y “Privatemsg” (https://drupal.org/project/privatemsg) que permite comunicación entre los usuarios de la plataforma y para notificaciones de los mensajes enviados a los usuarios “Private Message Growl” (https://drupal.org/project/pmgrowl).

Drupal - RulesPara agregar algo de interactividad al sitio podemos usar “Rules” (https://drupal.org/project/rules) que permite a los administradores generar acciones cuando ocurran ciertos eventos. Un ejemplo es enviar un mensaje a un usuario cuando un contenido ha cambiado, y otro crear un mensaje al administrador cuando se ha creado un usuario. Las posibilidades son muchas aprendiendo a trabajar con este módulo.
De esta forma damos por terminado esta rápida revisión a Drupal y algunos de sus módulos que permiten creación de sitios más allá del manejo de contenidos.

Gracias.

Este artículo en formato PDF
Presentación en formato PDF


Imágenes usadas en esta presentación, fueron tomadas de OpenClipart.org
• http://openclipart.org/detail/4710/calendar-by-aqeeliz
Calendar – aqeeliz
• http://openclipart.org/detail/183401/event-tickets-by-barrettward-183401
Event Tickets – barrettward
• http://openclipart.org/detail/81337/interaction-designers-by-mairin
Interaction Designers – mairin
• http://openclipart.org/detail/34351/architetto—-signorina-by-anonymous
Architetto – signorina – Anonymous
• http://openclipart.org/detail/167203/help-desk-by-damyon
Help Desk – damyon
• http://openclipart.org/detail/128125/user-by-hector-gomez
User – hector gomez
• http://openclipart.org/detail/177209/text-input-by-snodnipper-177209
text input – snodnipper
• http://openclipart.org/detail/171799/simple-text-editing-icon-set-by-diamonjohn-171799
Simple text-editing icon set – diamonjohn
• http://openclipart.org/detail/25499/image-by-anonymous-25499
Image – Anonymous
• http://openclipart.org/detail/17371/email-by-ytknick
Email – ytknick
• http://openclipart.org/detail/173842/money-symbol-by-matzekatze-173842
money symbol – matzekatze
• http://openclipart.org/detail/73963/html-simple-radiobutton-by-3701
html simple radiobutton – 3701
• http://openclipart.org/detail/73969/html-simple-select-by-3701
html simple select – 3701
• http://openclipart.org/detail/174534/administrator-by-lbear-174534
Administrator – lbear
• http://openclipart.org/detail/18599/people-biz—female-cyan-by-yyycatch
people biz – female cyan – yyycatch
• http://openclipart.org/detail/88009/calendar-file-icon-by-jhnri4
Calendar file icon – jhnri4
• http://openclipart.org/detail/10762/personal-information-by-hawk88
personal information – hawk88
• http://openclipart.org/detail/130969/html-file-icon-by-gsagri04
HTML file icon – gsagri04
• http://openclipart.org/detail/18597/people-biz—male-pink-by-yyycatch
people biz – male pink – yyycatch
• http://openclipart.org/detail/18601/people-biz—female-pink-by-yyycatch
people biz – female pink – yyycatch
• http://openclipart.org/detail/18595/people-biz—male-blue-by-yyycatch
people biz – male blue – yyycatch
• http://openclipart.org/detail/122107/default-profile-picture-by-dear_theophilus
Default Profile Picture – dear_theophilus
• http://openclipart.org/detail/109267/message-by-anonymous
message – Anonymous

23
jun 13

El Emprendedor que llevo dentro

Este artículo fue publicado en el Blog de Bogodev el día 30 de Mayo de 2013. Vínculo

Desde hace unos años, la palabra emprendedor aparece continuamente en la mayoría de conversaciones en las que participo y siempre queda la referencia de que todos somos emprendedores y que debemos pensar en alguna propuesta de negocio.

Este mensaje ha dado vueltas por mi cabeza y he tratado de buscar una idea que cumpla los requisitos para buscar un ángel que me permita llevarla a cabo.

Mi propuesta – de la que estoy escribiendo una presentación de treinta segundos y aprovecharé este escrito para adelantar – es: “tejo para extranjeros”. Mucha gente se rió cuando se propuso una aplicación de tejo para el iphone, pero quien al día de hoy no la haya visto debe ser que no tiene uno de estos móviles o no sabe que ese aparato hace algo más que llamadas (y no estamos en el 2005 para preguntar con cara extrañada ¿qué es eso del “opera mini”?).

Estuve viendo terrenos cerca al parque de la 93, pero definitivamente no hay espacio, lo que me pone triste. Tocaría modificar un parqueadero para poder hacerlo, y creo que es más rentable este negocio de los carros como para ponerme en esas. Así que va a tocar por allá por la 200 con autopista. Lo bueno es que tendré espacio y habrá parqueaderos para visitantes y alumnos (y obvio que cobrando como parte del modelo de negocio. Claro está que habrá descuento para estudiantes de la escuela con carné. El descuento para profesores es un tema a discutir).

También voy a hacer aplicación móvil que informe a los estudiantes sobre los horarios de clase, estado de las canchas, el clima, estado de salud de los profesores, los atrasos de los proveedores de cerveza y otros; aún no tengo definido toda la información que llevará y si habrá versión gratuita con adwords y paga sin publicidad (insisto, la sostenibilidad es importante para hablar con el ángel de la guarda). Igual, los extranjeros si compran aplicaciones en línea y además no están pendientes de revisar cada noche el gasto de datos de su suscripción mensual móvil y podría poner más información para ellos (fiestas y descuentos en Chía ya que está más o menos cerca).

Y como hago apropiación de herramientas tecnológicas (acabo de demostrarlo), voy a presentar mi proyecto al Ministerio. Ellos siempre están aportando plata para todo lo que parezca emprendimiento. Aunque hablando con amigos me dicen que esa plata que dicen tener ya está gastada en proyectos casi propios, yo les respondo que quizá más del 70 por ciento del dinero se gasta en eventos, viajes, lobby y otros, pero siempre queda alguito, y no para sus amigos, que a mi parecer, más bien en el Min parecen estar jugando a la caza de patos con la pistola en una nintendo usando los ojos cerrados: Si salen 100 patos y se matan dos, no es importante el porcentaje de eficiencia, sino que hay dos patos muertos y que eso merece gastarse más presupuesto en un evento para quinientas personas con cóctel y comida incluídos. Y esto hace que tenga posibilidades.

Del modelo de negocios ya hablé, aunque toca aclarar igual pago de profesores (que imagino son caros porque deben hablar por lo menos inglés bien), adecuación del terreno y cosas así. Ya espero encontrar el apoyo para toda esta parte. Igual debo ponerle cuidado a la parte contable que siempre me hablan de ingresos y gastos, pero nunca de impuestos y otros temas, y eso me recuerda a alguien diciendo en estos días que lo que se pagaba en línea no pagaba impuestos y que iba a empezar a tener mano dura con ese tipo de compras. La verdad, no quiero terminar en la cárcel por darle al tema del emprendimiento.

Así que esa es mi idea, aunque aún creo que le faltan detalles. Hay que pulirla con la ayuda de un trabajo de campo y algunas entrevistas.

Igual no me preocupo, a veces cuando veo los proyectos de emprendimiento que están surgiendo, me doy cuenta que muchos de ellos no pasarán de más de dos años en funcionamiento y otros sólo serán una presentación en un papel que será rotado en un concurso sin mayor trascendencia, de la “repetición de la repetidera” (porque parece que para sugerir no importa que haya habido otro evento donde haya un proyecto muy similar) o de redes sociales especializadas (excluyentes). (Sin embargo, pensaré para una próxima propuesta una red social de amantes del tejo que permita en un mapa compartir las mejores canchas con destinos turísticos para los alumnos de la escuela y amantes de este deporte).

Al final todo es emprendimiento (nacional), y de ahora en adelante voy a pertenecer a este grupo (¿selecto?) de personas y me seguiré dando este título con el que se les conoce, tocará buscar al diseñador para actualizar las tarjetas que empezaré a repartir a quienes se me acerquen.

30
may 13

Infraestructuras digitales

Este artículo fue publicado en el Blog de Bogodev el día 18 de Mayo de 2013. Vínculo

Me inicié en la programación hace ya muchos años. El Integer Basic en un Apple II y el Microsoft Basic del MS-DOS 3 en un Tandy 1000 fueron mis primeros pasos en lo que llamamos desarrollo. Luego otros lenguajes me acompañarían, y mirando hacia atrás, los lenguajes de programación han cambiado bastante; unos permanecen en el debate y otros han sido relegados, superados o solamente olvidados.

Creo que siempre lo he considerado un hobbie. Siempre me ha parecido divertido tratar de resolver problemas a través de instrucciones que escribo en una pantalla para que luego sean ejecutadas por el ordenador. E igual, a veces es reconfortante sentirse estúpido después de pasar varias noches buscando un error en el mismo renglón para darse cuenta de que el problema era la falta de un signo en el anterior.

Aunque no me convertí en un programador de los que sólo usan VI y son capaces de aprenderse y reproducir las miles de combinaciones de teclas (cual si estuvieran tratando de usar el modo Dios de DOOM o de lograr ganar todas sus armas – sí, creo que ya estoy algo viejo si no lo han notado) para lograr que el programa cumpliera la orden de guardar un archivo, de compilar, de revisar la sintaxis o de cualquier otra orden; aprendí que para programar a veces era necesario leer y buscar información sobre esas funciones que servían para el cometido esperado. Y me di cuenta que muchas veces debía gastar mucho tiempo en resolver problemas la primera vez y que en adelante podría ser fácil si se era capaz de aprender de esas primeras respuestas correctas.

Con el paso del tiempo, para que fuera más eficiente el uso del lenguaje de programacion, puesto que muchos de los problemas basicos vendrian ya resueltos, empezaron a surgir diferentes infraestructuras digitales (o frameworks – no sé quién propuso esa traducción en Wikipedia, aunque no me disgusta) para cada uno de los lenguajes que iban existiendo. La idea de no tener que resolver temas complejos en el desarrollo, sino trabajar más en los requerimientos ha sido difundida y alabada por muchos. Resolver más problemas de forma que de fondo, podría decir.

Ya llegado a este punto el desarrollador no se enfrenta a un lenguaje completo. ¿Aprende a solucionar todos sus problemas? Quizás a resolverlos con las ayudas, pero no sin ellas. Y me refiero a ese “programador” que es capaz de enfrentar el lenguaje sin complementos, de entenderlo y decidir por sí mismo si java es o no es, si php podría haber sido, si ruby es el “cielo”, si python funciona, si perl fue menospreciado.

Pero cuando faltan esas ayudas: ¿qué? No se abarca ni se conoce al lenguaje, pues ya las herramientas han solucionado muchos problemas y no es necesario estudiar ni leer para terminar un proyecto. Los frameworks simplifican la vida pero no deben ser el punto final: Raphael JS es una biblioteca de trabajo de gráficos bastante interesante, igual que Paper.js. Cada una con sus puntos fuertes, sus diferencias, sus ventajas y desventajas, y la capacidad de no necesitar conocer toda la documentación sobre svg y sobre canvas en el html5 para hacer gráficos y dibujos. Pero no es eficiencia llegar a depender de alguna de ellas dos para pintar un simple circulo en pantalla y añadir unos 20 o 30 Kilobytes mas a la carga total de la pagina a mostrar.

Y no soy purista o algo así, he de aceptar que gracias a todas esas infraestrutcturas digitales cada vez el mundo de la programación es más amplio y con más posibilidades, pero debo pensar que no debe ser la última mirada a darle a un lenguaje sin darnos cuenta que podemos sacar mucho mas de todo lo que el creador del mismo nos ofrece.

02
abr 13

Deshabilitando elementos del menú en WordPress

Como siempre, termino realizando plugins para WordPress por peticiones.

Este es un plugin que agrega una nueva opción a cada uno de los elementos del menú para que se puedan deshabilitar, de esta forma no hay que borrarlos cuado no se quieran mostrar.

Se puede descargar del repositorio en gitorious o en el sitio web de siempre.

Queda faltando si lo aprueban en el sitio de WordPress.org


Actualización: 7-4-2013
El repositorio en wordpress ya fue aprobado y ya subí elcódigo del plugin:
Silencesoft Disable Menu Items
http://wordpress.org/extend/plugins/silencesoft-disable-menu-items/


Actualización: 20-4-2013
Elsitio de siempre acaba de cambiar de dirección: http://silencesoft.pw

18
dic 12

Y el carro de basura…

no pasó…
(17 de diciembre de 2012)

05
jul 12

Documentos Portables

Este artículo fue publicado en el Blog de Bogodev el día 1 de Julio de 2012. Vínculo

Cuando se necesitó empezar a divulgar contenido como documento electrónico, pero que no pudiera ser modificado y que quedara listo para imprimir si fuera necesario, un formato se coronó como el mejor para esto. Aunque en una época no mucha gente sabía o entendía lo que era, poco a poco empezó a estar en boca de todos y se volvió en el preferido para llevar documentos finalizados, y a ser exigido en ciertos correos electrónicos.

Y de repente los tiempos cambiaron: no fue necesaria una computadora para leer un documento. Y estos documentos seguían presentes. Las impresiones dejaron de ser lo más importante para los archivos. Y seguían presentes. Los dispositivos de lectura empezaron a hacerse más pequeños. Y aún seguían presentes. Los libros empezaron a cargarse directamente en dispositivos. Y continuaban ahí.

¿Alguna de esas personas que pretende publicar libros en este formato no ha intentado leerlo en una blackberry? Engorroso podría ser la palabra. Y eso sin contar algunos teléfonos de gamas menores que permiten leer estos documentos y que puede llegar a ser peor.

Los llamados smartphones tienen pantallas más grandes y mejores resoluciones, ¿Leen este formato sin problema? Claro. ¿Hay que hacer maromas con los dedos para poder leerlos? ¿Qué puedo hacer porque debo manejar el tamaño de la fuente porque la usada es muy pequeña? ¿Debo esperar a llegar a algo con pantalla más grande para poder saber qué dice en este documento?

Las librerías en red han adoptado otros formatos para la publicación de libros y parece que muchos no se enteran. ¿Y el software de lectura? Sí, hay que instalarlo. Al principio contaba que hace años muchas personas no sabían de qué hablaba cuando mencionaba este tipo de documento, actualmente al instalar un sistema operativo esas mismas personas preguntan si ya se instaló el reader.

Hoy existen muchos formatos de libros electrónicos en el mercado, con base en el xhtml o en el xml como el mobi o el epub. Estos poco ha poco han desplazado a otros y mostrado su fortaleza. Pero aún debo descargar publicaciones en el formato mencionado y aplicaciones como calibre se han vuelto necesarias para poder convertirlo a lo que considero un libro electrónico. No creo que se espere que descargue un archivo de más de 20 páginas (bueno, o de 5) para imprimirlo y no creo que muchas personas lo hagan en este momento.

Hay que hablar de documentos portables que sirvan para ver en cualquier dispositivo y sean cómodos para todos, no de un formato que porque todos lo conocen y saben cuál es siga siendo usado sin criterio.

Y no culpo al formato. El tiempo ha demostrado que es bastante bueno y versátil. La culpa es de quien publica, que no sabe a veces a quién dirige las cosas.



**************************************************
Prueba de código:
**************************************************

Tengo este simple plug-in para wordpress desarrollado y listo para publicar. El archivo se llama sil_last_flickr_widget.php y permite crear un widget que muestra una foto aleatoria o la última foto del sitio de Flickr.
Falta el código de inicialización para que wordpress lo reconozca, ¿cómo sería la mejor manera de hacerlo?
¿Qué errores tiene este plug-in? (y no son de puntos y comas ni nada de eso)
¿Cómo podría mejorarse?

<?php
/*
 * Plugin Name: Sil Random Flickr
 * Description: Simple widget that shows a random or last flickr photo
 * Version: 0.3
 * Plugin URI: http://silencesoft.co
 * Author: Byron Herrera
 * Author URI: http://byronh.axul.net
*/

/**
 * Adds Sil Random Flickr widget.
 */

class sil_random_flickr extends WP_Widget
{
	function sil_random_flickr() {
        parent::WP_Widget(false, $name = 'Sil Random Flickr', $description = 'aaa');	
	}

	public function widget( $args, $instance ) {
		extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );
		$user = apply_filters( 'widget_user', $instance['user'] );
		$display = apply_filters( 'widget_display', $instance['display'] );
		$count = apply_filters( 'widget_count', $instance['count'] );

		echo $before_widget;
		if ( ! empty( $title ) )
			echo $before_title . $title . $after_title;
		?><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=<?php print $count?>&display=<?php print $display?>&size=t&layout=v&source=user&user=<?php print $user; ?>&"></script><?php
		echo $after_widget;
	}

	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = strip_tags( $new_instance['title'] );
		return $instance;
	}

	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'From Flickr', 'text_domain' );
		}
		if ( isset( $instance[ 'user' ] ) ) {
			$user = $instance[ 'user' ];
		}
		else {
			$user = '';
		}
		if ( isset( $instance[ 'count' ] ) ) {
			$count = $instance[ 'count' ];
		}
		else {
			$count = '1';
		}
		if ( isset( $instance[ 'display' ] ) ) {
			$display = $instance[ 'display' ];
		}
		else {
			$display = 'random';
		}
		?>
		<p>
		<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
		<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		<label for="<?php echo $this->get_field_id( 'user' ); ?>"><?php _e( 'Flickr User Id:' ); ?></label> 
		<input class="widefat" id="<?php echo $this->get_field_id( 'user' ); ?>" name="<?php echo $this->get_field_name( 'user' ); ?>" type="text" value="<?php echo esc_attr( $user ); ?>" />
		<label for="<?php echo $this->get_field_id( 'count' ); ?>"><?php _e( 'Count:' ); ?></label> 
		<input class="widefat" id="<?php echo $this->get_field_id( 'count' ); ?>" name="<?php echo $this->get_field_name( 'count' ); ?>" type="text" value="<?php echo esc_attr( $count ); ?>" />
		<label for="<?php echo $this->get_field_id( 'user' ); ?>"><?php _e( 'Display:' ); ?></label>
		<select id="<?php echo $this->get_field_id( 'display' ); ?>" name="<?php echo $this->get_field_name( 'display' ); ?>">
			<option value="random"<?php print ($display == "random") ? ' selected="selected"' : ''; ?>><?php print _e('Random'); ?></option>
			<option value="last"<?php print ($display == "last") ? ' selected="selected"' : ''; ?>><?php print _e('Last'); ?></option>
		</select>
		</p>
		<?php 
	}

} // class sil_random_flickr_Widget
28
jun 12

Un tema para Drupal en pocos minutos

DrupalCamp : Tema en Minutos

Conferencia realizada en el DrupalCamp Bogotá 2012 el día 22 de Junio de 2012. Vínculo. Al final del contenido se encuentra para descargar los archivos del tema, de la presentación y de este artículo.

Para crear un tema para Drupal desde cero debe conocerse algo de programación (php) y algo de html.

DirectoriosLo primero que debe hacerse es crear el directorio donde vamos a guardar nuestros archivos.

Se recomienda usar la carpeta de themes que se encuentra dentro de la carpeta sites, la ruta es sites – all (o el nombre del sitio) – themes. En nuestro caso vamos a crear una carpeta llamada mi_tema y así llamaremos el tema nuevo que vamos a utilizar.

El siguiente paso es crear los archivos básicos de un tema, ellos son un archivo info que va a guardar la información de versión, de autor, de estilos y de regiones (que veremos más adelante); el otro archivo es page.tpl.php que llevará todo el html de nuestro tema; un archivo de README para dar información de uso y un archivo donde se guardarán los estilos del tema.

DirectoriosEl primer paso es crear un archivo de información de tema, que en nuestro caso llamaremos de la misma forma que nuestro directorio: mi_tema.info.

En el archivo debe existir inicialmente el nombre del tema (name), una descripción (description), aqué drupal va dirigido (core), el nombre del archivo de estilo (stylesheet),la versión de nuestro tema (version) y si se quiere la fecha de modificación del archivo en formato timestamp (datestamp).

name = Mi Tema
description = Un tema para probar Drupal
core = 7.x
stylesheets[all][] = style.css
; stylesheets[print][] = print.css
version = "0.1"
project = "drupal"
; 2012-05-02
datestamp = "1336866325"

DirectoriosCon este archivo creado, podemos ir al menú de administración de Apariencia y ver qué el tema ya es reconocido por Drupal para ser elegido.

Para el siguiente paso hay que definir las regiones o zonas que van a ser usadas dentro del tema. El tema básico de Drupal tiene un encabezado, dos barras laterales a cada lado del contenido y un pie.

Esas regiones pueden crearse libremente y deben ser definidas en el archivo info para que Drupal las reconozca y las despliegue al crear las variables de la página a mostrar. Cada región debe crearse con un nombre reconocible tanto para el usuario como para Drupal.

Directorios Directorios Directorios

Definir las regiones es definir cómo queremos que el usuario vea nuestro sitio. Puede ser simple su uso, o puede ser un diseño más complicado como se ve en la imagen 2. Para nuestro sitio usaremos las regiones como están diseñadas en la imagen 3 y crearemos varios divs en una página html que llamaremos page.tpl.php. Ademá agregaremos al archivo mi_tema.info la información del total de regiones que creamos con sus nombres y descripciones.

mi_tema.info

name = Mi Tema
description = Un tema para probar Drupal
core = 7.x
stylesheets[all][] = style.css
; stylesheets[print][] = print.css

regions[header] = Header
regions[menu] = Menu
regions[banner] = Banner
regions[content] = Content
regions[right_a] = Right sidebar A
regions[right_b] = Right sidebar B
regions[footer] = Footer

; 2012-05-02
version = "0.1"
project = "drupal"
datestamp = "1336866325"

Nos damos cuenta que cada región lleva un nombre interno que se escribe dentro de corchetes y un nombre descriptivo que es como lo verá el usuario en la pagina de configuiración de bloques.

Luego vamos a crear nuestra página de plantilla que muestre este html en el sitio y poder asignar la plantilla como predeterminada. Este es un html básico que puede generar la página que queremos después de agregarle estilos. Primero lo añadimos sin agregarle nada. Y vamos y lo activamos en la configuración de apariencia del sitio.

page.tpl.php

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="wrapper-main">
<div id="wrapper-content">
<div id="banner">Banner</div>
<div id="content">Content</div>
</div>
<div id="right_a">Right A</div>
<div id="right_b">Right B</div>
<div class="clear"></div>
</div>
<div id="footer">Footer</div>
</div>

</body>
</html>

Si se recuerda en el archivo de información de tema, un parámetro creado añadía un archivo de estilo, lo creamos para que tenga cara de nuestro diseño el sitio. Igual limpiamos el archivo page.tpl.php porque si revisamos el código fuente, Drupal ya está incljuyendo código predeterminado como las cabeceras de un sitio html. Y separamos el header y el footer en archivos diferentes para su fácil administración.

page.tpl.php

<?php require_once("header.tpl.php"); ?>
<div id="wrapper-main">
<div id="wrapper-content">
<div id="banner">Banner</div>
<div id="maion">Content</div>
</div>
<div id="right_a">Right A</div>
<div id="right_b">Right B</div>
<div class="clear"></div>
</div>
<?php require_once("footer.tpl.php"); ?>

header.tpl.php

<div id="wrapper">
<div id="header">Header</div>
<div id="menu">Menu</div>

footer.tpl.php

<div id="footer">Footer</div>
</div>

style.css

*
{
margin: 0;
padding: 0;
}
.clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header
{
width: 950px;
padding: 5px;
background-color: #BBEEDD;
}
#menu
{
width: 950px;
padding: 5px;
background-color: #EEEEBB;
}
#wrapper-main
{
width: 960px;
}
#wrapper-content
{
width: 480px;
margin-right: 10px;
float: left;
}
#banner
{
width: 480px;
background-color: #BBEEBB;
}
#maion
{
width: 480px;
background-color: #EECCDD;
}
#right_a
{
width: 220px;
margin-left: 10px;
margin-right: 10px;
background-color: #BBEEBB;
float: left;
}
#right_b
{
width: 220px;
margin-left: 10px;
background-color: #BBEEBB;
float: left;
}
#footer
{
width: 950px;
padding: 5px;
background-color: #EE99DD;
}

Ahora que ya hay un borrador del tema, se debe mostrar el contenido del sitio que en este momento no se está mostrando. Para esto añadimos el código php en cada una de las regiones creadas. Para probar se puede añadir el código siguiente cambiando el contenido del div main por el código que imprime este contenido, este código lleva el nombre de la región dentro de corchetes. Y agregando un bloque a este contenido en el administrador de Bloques.

regions[content] = Content
<div id="main">< ?php print render( $page['content'] ); ?></div>

Igual con el header y con el footer y con todos los otras regiones del tema.

regions[header] = Header
<div id="header">< ?php print render( $page['header'] ); ?></div>

regions[footer] = Footer
<div id="footer">< ?php print render( $page['footer'] ); ?></div>

Al header además se le agrega la información de logo por código php. El logo es un archivo que se añade al tema con extensión png que puede ser cambiado en las opciones que se agregan al módulo por defecto.

header.tpl.php


<div id="wrapper">
<div id="header">

< ?php if ($logo): ?>
<div id="logo">
<img src="<?php print $logo; ?/>" alt="< ?php print $site_name; ?>" title="< ?php print $site_name; ?>" id="logo" />
</div>
< ?php endif; ?>

< ?php print render( $page['header'] ); ?>
</div>
<div id="menu">< ?php print render( $page['menu'] ); ?></div>

Además hay que agregar dentro del código de contenido dos espacios especiales que son el de mensajes internos de drupal, de la navegación por tabs y también puede incluir la navegación por migajas de pan (breadcrumbs).

Además si se quiere mostrar bloques en caso de que solo tengan contenido y no en todo momento, puede usarse la condición if (si) para que lo esconda. En este caso se esconde el banner si no es necesario.

page.tpl.php


< ?php require_once("header.tpl.php"); ?>
<div id="wrapper-main">
<div id="wrapper-content">
< ?php if ($banner): ?>
<div id="banner">Banner</div>
< ?php endif; ?>
<div id="main">
<div id="breadcrumb">< ?php print $breadcrumb; ?></div>
< ?php if ($messages): ?>
<div id="messages">< ?php print $messages; ?></div>
< ?php endif; ?>
<div class="clearfix">< ?php if ($tabs): ?>< ?php print render($tabs); ?></div>< ?php endif; ?>

< ?php if ($page): ?>
<h2 <?php print $title_attributes; ?>>< ?php print $title; ?></h2>
< ?php endif; ?>

< ?php print render( $page['content'] ); ?></div>
</div>
<div id="right_a">< ?php print render( $page['right_a'] ); ?></div>
<div id="right_b">< ?php print render( $page['right_b'] ); ?></div>
<div class="clear"></div>
</div>
< ?php require_once("footer.tpl.php"); ?>

Si se quieren añadir imágenes dentro del tema para ser publicadas en regiones específicas, podemos hacer el llamado a la misma usando funciones internas de Drupal. Es recomendable usar una carpeta para organizar las imágenes igual que otra que se puede llamar js para el javascript. En este ejemplo estamos mostrando en la región del contenido una imagen permanentemente.

<img src="<?php print base_path() . path_to_theme(); ?/>/images/banner.png" />

DirectoriosPara finalizar, se debe crear una imagen de la pantalla para mostrarla en la página de selección de temas. Esta imagen llamada screenshot.png debe ser de 294 x 219 pixeles.

Si se conoce algo de programación, se pueden llenar ciertas regiones por programación sin permitir cambiarlas como por ejemplo agfegar ala región menú, el menú seleccionado como menú principal (primary menu) en el sitio. Para esto se usa el archivo template.php que se crea en la misma carpeta del tema y que mediante hooks (funciones que permiten interactuar con el núcleo y con otros módulos al momento de generar el código de drupal) nos permite modificar la salida final. Este ejemplo ilustra la lectura del menú principal:

template.php

<?php

function mi_tema_preprocess_page(&$vars, $hook)
{
if (isset($vars['main_menu'])) {
$vars['primary_nav'] = theme('links__system_main_menu', array(
'links' => $vars['main_menu'],
'attributes' => array(
'class' => array('links', 'main-menu'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
)
));
}
else
$vars['primary_nav'] = FALSE;
}
?>

Para crear la función debemos llamarla con el nombre del tema antes de preprocess_page (que es la función de preprocesamiento de página). Y lo que crea la variable $primary_nav que imprime este menú.

<div id="menu">< ?php print $primary_nav; ?></div>

Así es un tema en Drupal a grandes rasgos. Pueden descargar la plantilla funcional perocon bastantes falencias en estilos y diseño. Sólo es una muestra de cómo podemos generar una plantilla en Drupal desde cero. Hay otras formas de crearlas que es usando subtemas de temas generados como Omega y Zen que son proyectos que se deberían revisar para la generación de temas.

Gracias.


Archivos:

Tema Creado
Este artículo en formato PDF
Presentación en formato PDF

22
jun 12

¿html5? ¿eso no existía ya en el html4?

Este artículo fue publicado en el Blog de Bogodev el día 18 de Junio de 2012. Vínculo

Jolgorio y revuelo causó la noticia de que casi 10 años después, el html4 iba a ser superado y llegaban nuevas opciones para los navegadores. Pero nunca se supo si para los diseñadores, o para los desarrolladores o para otras razas del mundo tecnológico.

Por alguna razón se empezó a hablar del cambio del paradigma del uso de tablas para la organización del diseño y se empezaron a conocer nuevas etiquetas y el css dejó de ser sólo un archivo que se adjunta al archivo html para darles color a los fondos y a los textos. El “div” ganó puntos en el mundo internet y en el posicionamiento y en el diseño: ¿div? ¿Eso es html5 o html4? ¿Cómo se usa un div? ¿Hay programas que me “pinten” un div? ¿Puedo crear divs desde el diseño en una imagen?

Y eso que no hablamos de html5 sino de años atrás. Etiquetas desconocidas y de las que no se quiere aprender. O alguien sabe cómo se usa eso del “thead”. ¿Existe eso? ¿Una tabla? ¿Las tablas sirven de algo? (quien no sepa la respuesta que le pregunte a excel).

Pero, ¿hablamos de html5 o de versiones anteriores? “Con el html5 puedo trabajar animaciones”. Html5 se puede usar para hacer animaciones, pero ¿se hacen con html5 o con algún aditamento a la biblioteca tan conocida llamada jQuery? Conocemos a jQuery y a otras bibliotecas javascript hace años, ¿por qué vendemos la idea que es html5 cambiar la tira de imágenes en nuestro sitio hecha hace ya años en flash por una hecha con javascript que no usa ninguna opción de animación de html5?

Y parte de esta “confusión” (“mentira” – “actualización” – “invento”) fue la exigencia de cierto dispositivo en el mercado que mostró que flash no era una de sus prioridades. Si esto no hubiera pasado, ¿qué hubiera sido del html5?, ¿de las nuevas etiquetas multimedia?, ¿de las animaciones que pueden ser posibles gracias al css?

Aunque igual algo heredó del html4: la confusión en los navegadores, la larga espera por un estándar y alguna que otra solicitud al cielo porque para que un simple vídeo pueda ser visto en una alta variedad de dispositivos hay que tenerlo por lo menos en dos formatos de diferentes resoluciones y codificaciones (entre otros).

 



**************************************************
Prueba rápida de código
**************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Test</title>
<style type="text/css">
/*<![CDATA[*/
ul
{
color: #123123;
}
ul.lista
{
color: #435435;
}
ul#test li
{
color: #324345;
}
li
{
color: #326543;
}
li.item
{
color: #435435;
}
/*]]>*/
</style>
</head>

<body>
<ul class="lista" id="test">
<li class="item">213</li>

<li class="item">657</li>

<li class="item">435</li>
</ul>
</body>
</html>

Pregunta: ¿Cuál es el color de los ítems de esa lista?

13
mar 12

De toma pacífica a batalla campal

Toma pacífica

“¡Provóquenlos! Los malos no seremos nosotros.” Esa parecía haber sido la orden, cuando sin razón aparente y a pesar de los cánticos que se expresaban los muchachos del no uso de la violencia, allí estaba el grupo ESMAD lanzando gases lacrimógenos contra quiénes, unos minutos antes, cantaban y aplaudían en grupo mientras bloqueaban la avenida de la ruta transmilenio en la Avenida Caracas.

Ese había iniciado como un día normal. Hora de levantarse, tomar una ducha, comer algo, revisar si se tiene todo lo necesario para el día, contar las monedas y salir a la calle. Rituales que convierten todos los días en normales y a los que no hay mucho que contar a la pregunta: “¿Qué tal el día?”. Pero ese día fue diferente.

Como usuario regular del servicio de transmilenio llevo algo más de un par de años. He despotricado por las tantas veces que he llevado juiciosamente el papelito que me entregan desde la estación de partida hasta la de llegada los días que hacen ese “estudio”, para darme cuenta que para lo único que sirvió fue para estadísticas; he hablado mal por el diseño de las entradas de las estaciones que, en algunos horarios, es más la gente apiñada en la fila para entrar que la que espera bus adentro; he visto como – igual que muchos – en horarios donde las estaciones están tan llenas que ni se puede caminar, pasan y pasan buses vacíos de los llamados “en tránsito” sin recoger un pasajero; igual he visto como en la estación de la 127 las personas que esperan la ruta G12 saltan a la autopista a detener un bus – de los llamados “en tránsito” – porque llevan más de 20 minutos mirando cómo llegan buses de esa ruta tan llenos que no se puede ni entrar ni salir y sin esperanzas de que puedan tomar uno rápido; he pensado también que las personas que administran transmilenio nunca, al parecer, han montado en uno; he tenido que empujar e igual ser empujado para poder lograr llegar a mi destino; y también he agradecido porque el transporte para una ciudad como ésta fue mejorado en tiempos para llegar de un sitio a otro con estos buses (esto no se puede negar). Podría decir muchas cosas, pero a pesar de lo que me queje, no soy tan regular o asiduo a este transporte y no me han tocado situaciones tan graves como a otros que me han contado (nunca me han robado, por ejemplo, a pesar de montones de historias que cuentan en las que incluyen armas blancas dentro de sus protagonistas).

Estación MarlyPero para ese día, la historia fue otra. Cuando llegué a la estación y vi que se encontraba cerrada y observé que muchas personas tapaban la vía a los buses, recordé lo sucedido hacía unos días atrás en la estación de Banderas y tuve un pensamiento: “Tarde que temprano iba a pasar”. La disconformidad no era mía solamente. Ese 9 de marzo, se había citado por parte de diferentes sectores una jornada de protesta contra el servicio de buses por las diferentes quejas que presentan sus usuarios inconformes con el servicio (http://www.comosoc.org.co/?q=node/237). Y así había comenzado en la mañana con grupos en diferentes estaciones bloqueando el paso a los buses, protestando con diferentes carteles que pegaron en ellos, con cánticos, con montones de teléfonos móviles tomando fotos de la escena, con acordonamiento policial para evitar mayor caos vehicular.

El grupo de jóvenes se dispersó con los primeros lacrimógenos que cayeron y empezaron algunos a patear las latas para devolverlas a los policías. De nuevo se reunieron al momento pero eso no detuvo a que siguieran lanzando gases, algunos de los líderes gritaban “mentirosos” a los policías, otros muchachos con la adrenalina del momento empezaran a responder con piedras que tenían a la mano y empezó a las 11 de la mañana aproximadamente la batalla campal que continuó durante la tarde, ese toma y dame entre una tanqueta lanzando chorros de agua, un grupo de policías con escudo (que igual tosían), otros lanzando latas desde sus pistolas sin saber hacia adonde y unos muchachos con piedras de todos los tamaños repeliendo y atacando.

Estación MarlyYa los ánimos exaltados de unos y otros llegaron a los vidrios de las estaciones que fueron quebrados sin contemplación. Otros aprovecharon el momento para saquear y llevarse todo lo que pudieron sacar de las abandonadas taquillas (y de las estaciones) sin pertenecer (o quizás siéndolo) al grupo de manifestantes. Y de ese día solo quedaron las cifras y fotos de destrucción, fotos de muchachos supuestamente buscados por la policía por vandalismo y daños. Recuerdos de personas atrapadas y asustadas dentro de las estaciones en esa mañana, y de otras desesperadas dentro de los buses que estuvieron parados por más de una hora.

Más tarde miraría la calle desolada por un rato. Basura en el suelo regada. Escombros y piedras. ¿Cómo llega una toma pacífica a algo así? Mejor no contestar. ¿Diálogo?


Todas las imágenes fueron redimensionadas y degradadas en calidad para ser incluidas en el sitio.

22
jul 11

Saludo

Hola. No estoy acostumbrado a estas cosas. ¿Qué sigue? ¿Nos abrazamos?, beso ¿en la mejilla?, ¿apretón de manos?, o ¿solo nos miramos a los ojos a un metro de distancia y alzamos nuestras cabezas?



Señal al Cielo
Señal al Cielo
Bogotá :: 9-Jun-2011 9:49
Bh.

« Older Entries
Copyright © 2014 Silenceway
Proudly powered by WordPress, Free WordPress Themes

 Subscribe in a reader