Documentación:Desarrollo


Máxima
A Punto
Local



Contenido

Introducción

Objetivo

El propósito de esta página es la presentación de cómo se ha desarrollado este proyecto-wiki. Se mostrarán todas las herramientas empleadas y ejemplos de utilización de las mismas.

Herramientas utilizadas

Organización de las Aplicaciones

Base de Datos

La base de datos utilizada es MySQL. Para Wikitel, se ha creado una base de datos en la cual se han utilizado los siguientes prefijos para las tablas:

Es decir, en primer lugar se indica el código ISO del idioma (es, en) y, en segundo lugar, se indica la aplicación:

Apache

En Apache, se ha configurado un host con la opción "AllowOverride All" en las opciones del directorio del site. De esta forma, es posible incluir archivos ".htaccess" en los directorios de las aplicaciones y configurar, por directorio, los accesos a estos directorios.

Además y para poder servir las aplicaciones dependiendo del dominio y página a los que el usuario intenta acceder, en el directorio raíz se ha incluido el siguiente archivo .htaccess: 

php_flag	register_globals off
php_value	output_handler ob_gzhandler

# página principal
RewriteCond	%{HTTP_HOST}		^(www\.)?wikitel\.info$			[NC]
 RewriteRule	^/?$			http://es.wikitel.info/wiki/Portada	[R,L]

# Wiki-es
RewriteCond	%{HTTP_HOST}		^es\.wikitel\.info$			[NC]
 RewriteRule	^/?$			/wiki/Portada				[QSA,L]

# Wiki-en
RewriteCond	%{HTTP_HOST}		^en\.wikitel\.info$			[NC]
 RewriteRule	^/?$			/wiki/Main_Page				[QSA,L]

# Blog 
RewriteCond	%{REQUEST_URI}		^/blog/?.*
RewriteCond	%{REQUEST_FILENAME}	!-f
RewriteCond	%{REQUEST_FILENAME}	!-d
 RewriteRule	.			/blog/index.php				[L]

# Wiki
RewriteCond	%{REQUEST_URI}		^/wiki/?.*
RewriteCond	%{REQUEST_FILENAME}	!-f
RewriteCond	%{REQUEST_FILENAME}	!-d
 RewriteRule	^wiki/?(.*)$		/w/index.php?title=$1			[QSA,L]

Configuración de las Aplicaciones

Todas estas aplicaciones web utilizan como base de datos MySQL y lenguaje PHP. Las herramientas WordPress y Simple Machines Forum se han instalado y configurado según se indica en la documentación de cada una, sin realizar modificaciones / ampliaciones de las mismas, únicamente se han configurado de forma que puedan servir tanto para castellano como para inglés.

Esto se ha realizado incluyendo el siguiente código: 

$site = strtolower($_SERVER['SERVER_NAME']);
if ($site == 'en.wikitel.info') {
    $table_prefix  = 'en_wp_';   // Only numbers, letters, and underscores please!
    define ('WPLANG', 'en');
} else { // Default 'es_ES'
    $table_prefix  = 'es_wp_';   // Only numbers, letters, and underscores please!
    define ('WPLANG', 'es_ES');
}

$site = strtolower($_SERVER['SERVER_NAME']);
if ($site == 'en.wikitel.info') {
    $mbname = 'Wikitel Forum';		# The name of your forum.
    $boardurl = 'http://en.wikitel.info/forum';		# URL to your forum's folder. (without the trailing /!)
    $language = 'english';	# The default language file set for the forum.
    $db_prefix = 'en_smf_';
} else { // default: ES
    $mbname = 'Foro de Wikitel';		# The name of your forum.
    $boardurl = 'http://es.wikitel.info/forum';		# URL to your forum's folder. (without the trailing /!)
    $language = 'spanish_es-utf8';		# The default language file set for the forum.
    $db_prefix = 'es_smf_';
} // if

$site = strtolower($_SERVER['SERVER_NAME']);
if ($site == 'en.wikitel.info') {
    # MySQL specific settings
    $wgDBprefix     = 'en_mw_';
    $wgLanguageCode = 'en';
    $wgGoogleAnalytics = 'UA-2582520-6';
} else { // default: ES
    # MySQL specific settings
    $wgDBprefix     = 'es_mw_';
    $wgLanguageCode = 'es';
    $wgGoogleAnalytics = 'UA-2582520-4';
} // if

Desarrollo del proyecto

El desarrollo del proyecto se ha realizado creando en primer lugar un nuevo skin de forma que se modifique la apariencia por defecto de la herramienta MediaWiki. Asimismo, se han desarrollado una serie de extensiones gráficas que permiten organizar el contenido de las páginas. El skin generado es éste.

Estructura de directorios

El skin de Wikitel se ha creado teniendo en cuenta la siguiente estructura de directorios (esta estructura está bajo el directorio "w/skins"):

Imagen:estructura_directorios.png

El orden en el que se indican las hojas de estilo es muy importante ya que determina qué estilo prevalece. Así, el estilo del último fichero que se carga es el que modifica al resto.

Interfaz de usuario

El interfaz de usuario se ha desarrollado utilizando la librería Ext JS, que proporciona componentes para la creación de interfaces de usuario gráficas (GUI) y uso de AJAX mediante la utilización del lenguaje JavaScript.

En primer lugar se ha implementado un nuevo skin basándose en el ejemplo de presentación compleja.

Para este skin además se ha utilizado la librería de PHP Smarty para llegar a un modelo semi-MVC, independizando el código de la presentación. Esto permite disponer de plantillas genéricas para la cabecera (header), pie de página (footer) y contenido (body) de la página global y, a partir de código, disponer la información en estas plantillas.

La página está dividida en:

Colores utilizados

RGB Nombre del color Utilización
#ffcc00 Naranja Bordes de las diferentes secciones de la página.
#88857b Gris medio Línea en el header y fondo de las pestañas cuando no están activas.
#323232 Gris marengo Fondo del header.
#e9e9df Gris claro Fondo de la página.
#ffffff Blanco Fondo del contenido y del menú lateral izquierdo.
#000000 Negro Principalmente, color del texto del contenido aunque también se ha utilizado para los bordes del cuadro de las pestañas.

Extensiones

Extensiones desarrolladas

Además de la interfaz estática, se han desarrollado varias extensiones que emplean la librería Ext JS y que pueden emplearse para ampliar la interfaz gráfica de forma dinámica. Estas extensiones son:

Extensiones utilizadas

Plantillas generadas

Herramientas online

Google

Para la realización del proyecto se han utilizado diversas aplicaciones / herramientas proporcionadas por Google.

Google Analytics

Esta herramienta permite obtener información de los accesos realizados a cada una de las páginas definidas. El modo de implementación es simple: Disponer un código JavaScript en cada una de las páginas (normalmente en el pie de página) incluyendo el identificador del sitio web que se quiere gestionar.

En el caso de Wikitel, cada aplicación tiene su propio identificador:

Google Docs

Esta herramienta permite disponer de documentación on-line accesible desde cualquier lugar. Los tipos de documentos son de texto y hojas de cálculo (es posible importar documentos generados con las herramientas de Microsoft: Word y Excel).

La documentación generada ha sido principalmente:

Motores de búsqueda personalizados

Esta funcionalidad permite crear motores de búsqueda que pueden utilizarse directamente desde cualquier sitio web.

Se ha utilizado en sustitución del buscador específico de MediaWiki.

FeedBurner

FeedBurner es una pasarela a las fuentes RSS que se le indiquen. Esta herramienta almacena en caché la información y la facilita a los usuarios. El mayor beneficio de su uso es que los usuarios no acceden a la fuente original, si no a la fuente de FeedBurner, no provocando sobre saturación en la fuente original.

Las fuentes generadas son (también está la versión en inglés):

Yahoo! Pipes

Con esta herramienta de Yahoo! es posible generar fuentes RSS a partir de otras fuentes, transformando, mediante distintos "plug-in's" dichas fuentes.

Esta herramienta se ha utilizado para combinar las fuentes "Wikitel-Feeds" comentadas anteriormente y generar una única teniendo en cuenta los parámetros facilitados desde el Lector de Noticias. Esto se ha hecho mediante la siguiente regla.

Asimismo, en relación a la fuente "Wikitel-News", también se ha generado la siguiente regla.

Por último, se ha generado un pipe específico para mostrar las últimas modificaciones de las páginas, de modo que filtre determinadas páginas, tales como páginas especiales, estadísticas,...

Netvibes

Netvibes es una herramienta que permite a cada usuario crear dos páginas web:

Cada página puede configurarse a gusto del propietario de la misma, insertando lectores RSS, notas, fotos, agendas, páginas web y "widgets". Netvibes emplea técnicas Ajax

Netvibes ofrece una amplia cantidad de widgets realizados y ofrecidos por otros usuarios. (Vea una breve explicación)

Los métodos para añadir y configurar los elementos se describen en la propia página de entrada a Netvibes y en su blog. A este respecto es importante señalar que un error frecuente es confundir la página pública con la privada, de manera que cuando se edita la página privada (creyendo que es la página pública) y se salvan los datos, el efecto de la edición no se refleja en la página pública. Para arreglar este error hay dos vías: a) repetir la edición, pero esta vez en la página pública, b) volver a la página privada y decir que copie el widget nuevo o el editado en la página pública.

Cada página pública se debe corresponder con un usuario Netvibes, Wikitel ha dado de alta tres usuarios:

  1. espanol@wikitel.info
  2. english@wikitel.info
  3. wikitel@gmail.com

Y se emplean los siguientes Universos (en sus correspondientes páginas públicas):

  1. Universo en español (Usuario: espanol@wikitel.info)
  2. Universo en inglés (Usuario: english@wikitel.info)
  3. Selección de Universos o página de error (Usuario: wikitel@gmail.com)

Materias relacionadas

Obtenido de "http://es.wikitel.info/wiki/Documentaci%C3%B3n:Desarrollo"