Doctorado

\usepackage[Bjarne]{fncychap}
\usepackage{longtable}
\usepackage{sphinx}
\usepackage{multirow}


\title{Ubakye: Tutorial de Desarrollo}
\date{February 26, 2012}
\release{0.1}
\author{Offray Vladimir Luna Cárdenas}
\newcommand{\sphinxlogo}{}
\renewcommand{\releasename}{Release}
\makeindex

\makeatletter

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:introduccion-que-es-ubakye-y-que-es-este-documento]{Introducción: Qué es Ubakye y qué es este documento.}}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:a-quien-va-dirigido-este-documento]{A quién va dirigido este documento}}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:por-que-smalltalk]{Por qué \emph{Smalltalk}?}}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:convenciones-de-lecto-escritura]{Convenciones de lecto/escritura}}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:licencias-y-codigo-fuente]{Licencias y código fuente}}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:creditos-agradecimientos-y-coautoria]{Créditos, agradecimientos y coautoría}}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:queremos-saber-de-ti]{Queremos saber de ti}}

\end{itemize}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:primera-parte-preliminares-y-panoramica-breve]{Primera Parte: Preliminares y Panorámica Breve}}
\begin{itemize}
\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:descarga-y-ejecucion]{Descarga y ejecución}}

\item {} 
{\hyperref[ubakyeTutorialDeDesarrollo:abrebocas-un-vistazo-a-la-infraestructura-de-ubakye]{Abrebocas: Un vistazo a la infraestructura de Ubakye}}
\begin{itemize}

\subsection{A quién va dirigido este documento}
\label{ubakyeTutorialDeDesarrollo:a-quien-va-dirigido-este-documento}
Este documento va dirigido a personas que ya tienen experiencia en programación, en particular en programación orientada a objetos, aunque pueden no haber programado previamente en Smalltalk o programado para la web. Para algunas esta será una experiencia esclarecedora y refrescante, aunque tendrán que reevaluar mucho de sus hábitos de programación previos. Ya hablaremos en detalle de esto en la sección por qué Smalltalk.


\subsection{Por qué \emph{Smalltalk}?}
\label{ubakyeTutorialDeDesarrollo:por-que-smalltalk}
No solemos caminar por callejones desolados y en cosas como estas confiamos en la sabiduría de las mayorías. Además, si tomamos la elección popular y algo va mal, podemos decir que la responsabilidad no fue nuestra, pues elegíamos aquello que otros también, pero si elegimos permanentemente transitar aquellos que otros han elegido todo el tiempo podemos terminar atascandos en un embotellamiento, y en ocasiones ser pioneros implica transitar los caminos menos recorridos, si bien, cuando miremos al lado, podemos encontrar a menos personas a nuestro lado. Es por esto que las decisiones no convencionales requieren un poco más de explicación que aquellas que damos por sentadas. En esta sección explicamos nuestra elección por \emph{Smalltalk}.

\emph{Smalltalk} es un entorno particular. Es debido a la idiosincracia de ``objetos vivos'' de Smalltalk y a la idea de integrar el código fuente, el entorno de desarrollo y la aplicación misma en un único ambiente, lo cual es diferente a la idea más común de separarlos y lidiar con la responsabilidad de la integración por cuenta de uno, lo cual, si bien puede brindar más flexibilidad, nos enfrenta también a inconsistencia o fractura y genera la separación entre personas usuarias y hacedoras, en la cual las unas  reciben un producto binario terminado, pero no tan flexible en cuanto a su modificación e intentarlo implica lidiar con diferentes opciones respecto al código fuente, la gestión del mismo, el entorno de desarrollo, etc. En contraste, usualmente cuando uno distribuye la ``aplicación'' hecha en Smalltalk, se distribuye también el código fuente y todo el entorno para poder modificarla, integrado y listo para ser usado y extendido. Lo anterior es consistente con la idea de hacer difusa la distinción entre individuo usuario y hacedor y falicitar los tránsitos del uno al otro que hemos querido alentar durante todo este proyecto.

\emph{Smalltalk} tiene un lenguaje minimalista fácil de entender y un paradigma consistente de objetos todo el tiempo, además de una preocupación, prácticamente desde sus orígenes, por el aprendizaje de lo novatos, usualmente niños y jóvenes, ofreciendo metáforas visuales de programación en entornos como Scratch \footnote{
El sitio de \emph{Scratch} en la web: \href{http://scratch.mit.edu/}{http://scratch.mit.edu/}. También hace parte de los proyectos OLPC y Sugar y
su sitio web alberga un número de millones.proyectos hechos por niños, niñas y jóvenes, principalmente en varios lenguajes.
Hay otras variantes de \emph{Scrach} como BYOB (Build your Own Blocks) y Scat, hecho en \emph{Pharo Smalltalk}. Para una recopilación de varios
enlaces sobre Scratch recomendamos visitar:

\href{http://hackbo.co/home/lenguajes-de-programacion/scratch}{http://hackbo.co/home/lenguajes-de-programacion/scratch}
}, eToys \footnote{
Etoys en la web del proyecto Squeak original: \href{http://www.squeakland.org/}{http://www.squeakland.org/}. También hace parte de los proyectos OLPC y Sugar
} o Bots Inc \footnote{
Bots Inc (\href{http://rmod.lille.inria.fr/botsinc}{http://rmod.lille.inria.fr/botsinc}) es un proyecto ya
orientado a una población interesada en el aprendizaje del código textual,
que brinda una interface gráfica de unos robots, inspirada en las tortugas de
Logo, de manera que la aprendiz puede explorar las consecuencias de la
escritura de código visualmente, pero tener acceso a la libertad que brinda
tener acceso a todos los constructos del lenguaje. Se podría decir que
\emph{Etoys}, \emph{Scratch} y sus variantes, \emph{Bots Inc} y finalmente Pharo son un
camino que brinda metáforas visuales que son progresivamente más cercanas al
código y al entorno completo de programación objetual mediante la escritura
de texto, al comienzo intentando proveer metáforas visuales como las de los
rompecabezas, que evitan los errores pero restringen la escritura, pasando
por la definición de nuestros propios comandos en dichas metáforas y luego
llegando al texto con toda la libertad y precauciones que esto conlleva (sin
embargo en entornos como \emph{Bots Inc} o \emph{Pharo} se brinda soporte para la
escritura de modo que los errores son mínimos y fáciles de detectar).
}, que de todos modos pueden desnudarse hasta llegar al código fuente y al entorno como un todo. Es tan extremadamente flexible que también puede ser usado por programadoras profesionales para usos muy sofisticados y muchas de las ideas que ahora son un hecho en las mejores prácticas de programación de hoy en día, como el Desarrollo Orientado a Pruebas (TDD por \emph{Test Driven Development}) fueron ideas pioneras primero en Smalltalk, así como la noción original de desarrollo orientado a objetos que hoy es paradigma dominante para el desarrollo de sistemas complejos (sin embargo, debemos cuidarnos de los monocultivos, tanto los biológicos, como aquellos que crecen silenciosamente en el pensamiento, así que hay que mirar más allá del ``paradigma dominante''). Otro de los usos de este lenguaje usa en proyectos investigativos en Metaversos 3D (Open Croquet) o en proyectos como COLA que indagan sobre la posibilidad de reinvetar la programación y dar control al programador en el lenguaje como un todo, no sólo en el código fuente y la aplicación. Smalltalk así es fiel al espíritu del dynabook, un computador como una máquina para niños de 6 a 100 años, de Alan Kay, así como a la idea de una máquina al servicio del espíritu creativo de quien lo usa de Dan Ingals, dos de sus autores en el equipo original.

Sin embargo usar \emph{Smalltalk} implica comprometerse con el paradigma de objetos todo el tiempo y con la experiencia de desarrollo integrada por omisión. Para quienes hemos tenido otras experiencias de programación en otros paradimas y entornos, esto quiere decir renunciar a otras sintaxis y sus idiosincracias (como la programación funcional, la imperativa, la lógica, entre otras), así como usar otras herramientas distintas a aquellas con las cuales nos sentimos más cómodos. Otros lenguajes como Ruby o Python han tenido éxito gracias a su soporte para este otro tipo de sintaxis e indiosincracias (si bien son objetuales en el fondo, como Smalltalk), así como siendo más eclécticos respecto al entorno de desarrollo. Se requiere entonces iniciar esta exploración con mente abierta y con disposición de dejar, al menos durante ella, ciertos hábitos arraigados y si realmente lo están, sabemos que cuesta mucho trabajo dejarlos. Smalltalk nos recompensará al respecto mostrándonos ideas originales, innovadoras y poderosas, además los proyectos de investigación mencionados, así como otros tantos, brindarán en el futuro soporte a aquello que ya sabemos \footnote{
Gnu Smalltalk, Coral y Spoon son variantes y proyectos realizados para aquellos que prefieren la consola de comandos y a quienes les arrancarán \emph{vi} o \emph{emacs} de sus fríos dedos muertos (bueno así lo dicen algunos de los más fervientes fanáticos de este par de excelentes editores). Mientras el primero es un entorno de desarrollo altamente estable y maduro, los siguientes son aún proyectos en maduración. En la sección de referencias encontrarás más acerca de todos ellos.
}, si dejamos que la semilla de este lenguaje y sus experiencias, crezcan junto al acervo de aquellas otras que ya tenemos con nosotros.


\subsection{Convenciones de lecto/escritura}
\label{ubakyeTutorialDeDesarrollo:convenciones-de-lecto-escritura}
Debido a que estamos leyendo este manual, es conveniente que tengas algunas conveciones de lectura que nos guíen durante el proceso:
\begin{itemize}
\item {} 
\emph{el texto en cursiva} indica una palabra en inglés, extrangerismo ó algo que queramos resaltar.

\item {} 
El \code{texto en fuente monospace} está referido a comandos, direcciones web, ó código. En este último
caso hemos usando un resaltador sintáctico (llamdo pygments \footnote{
Pygments: \href{http://pygments.org/}{http://pygments.org/}
}) que permite diferenciar las palbras
especiales de un lenguaje, del resto de elementos, para facilitar su lectura.

\item {} 
la convención ``\code{Menú \textgreater{} submenú}'' indica la secuencia en que se elije un submenú dentro de un menú.

\item {} 
\code{CamelCase}, en el cual las palabras van sin espacios y se indica cuándo inicia una nueva palabra a través de mayúsculas \footnote{
Para más información sobre lo que es CamelCase puedes ver estas páginas en la wikipedia:
\begin{itemize}
\item {} 
\href{https://en.wikipedia.org/wiki/Camelcase}{https://en.wikipedia.org/wiki/Camelcase}

\item {} 
\href{https://es.wikipedia.org/wiki/CamelCase}{https://es.wikipedia.org/wiki/CamelCase}

\end{itemize}
}, se
emplea para indicar categorías y clases en \emph{Smalltalk}. Cuando las palabras empiezan es mayúscula estamos hablando de una categoría o
una clase, por ejemplo \code{AcercaDe}, mientras que si usamos minúsculas nos referiremos a un método, por ejemplo \code{renderContentOn:}.
Si queremos especificar a qué clase corresponde un método usaremos la convención \code{NombreDeLaClase\textgreater{}\textgreater{}nombreDelMetodo}, siguiendo la
tradición en \emph{Smalltalk}, por ejemplo \code{AcercaDe\textgreater{}\textgreater{}renderContentOn:} se refiere al método \code{renderContentOn:} dentro de la clase
\code{AcercaDe}. La parte de la clase no se ve propiamente dentro del editor de código, sino en el \emph{System Browser} pero ayuda a ubicarnos.

\item {} 
Cuando nos refiramos a atajos de teclado colocaremos en nombre de la tecla dentro de paréntesis. Por ejemplo {[}Ctrl{]} se refiere a la
tecla ``Control'' y {[}s{]} se refiere a la tecla ``s''. Si queremos expresar la aplicación simultánea de varias teclas usamos el caracter más
(+), así por ejemplo ``{[}Ctrl{]} + {[}s{]}'' quiere decir presionar simultáneamente la tecla ``Control'' y la tecla ``s''.

\item {} 
Si estás viendo una versión en borrador de este documento quizás encuentres unas notas colocadas en llaves dobles tipo ``{[}{[}esta es una
nota{]}{]}'', que sirven para indicar información que pensamos agregar más tarde. Otra de esta información ha sido colocada en la forma de
notas a pie de página, con una convención de autor que empieza por sus iniciales. Esto puede ser muy probable, si leiste las primeras
versiones del documento y aún ves mucho del andamiaje y los ``pedazos sin pintar'' de este texto, pero la idea es desde el comienzo hacer
visibles esos andamios y trozos crudos para que cuando quieras nos ayudes y veas claramente donde tu ayuda es requerida, también puedes

de autoras novatas y estamos abiertas a las sugerencias. Hemos usado el plural pues suponemos que es una obra no sólo escrita en plural,
sino en la que el lector se involucra activamente y por tanto las actividades son realizadas en plural. Cuando nos referimos a la segunda
persona del singular, ``tuteamos'' para aclarar el tono cercano y cordial que queremos tener para con ustedes.

\end{itemize}


\subsection{Licencias y código fuente}
\label{ubakyeTutorialDeDesarrollo:licencias-y-codigo-fuente}
Este documento está cubierto por una licencia dual:


\begin{itemize}
\item {} 
Creative Commons Attribución Share Alike 3, Unported license, que te da las siguientes libertades:
\begin{itemize}
\item {} 
\textbf{Compartir:} copiar, distribuir y transmitir la obra.

Para un texto completo de la licencia y otros enlaces para ampliarla puedes visitar:

\href{http://creativecommons.org/licenses/by-sa/3.0/deed.es\_ES}{http://creativecommons.org/licenses/by-sa/3.0/deed.es\_ES}

\end{itemize}

Por otro lado coincidimos con un movimiento cada vez más ampio de personas que considera que la legislación actual derecho de autor es increiblemente desbalanceada y atenta contra la innovación, así como lo hace la actual legislación de patentes de software y otras que caen en el régimen de ``propiedad intelectual'', bajo la premisa de las ideas de que las ideas tienen dueños únicos y no se deben a la cultura en la que las personas las conciben, nutren y fortalecen, y si bien es lo que actualmente tenemos (por eso la elección de la licencia anterior), queremos dejar manifiesto que requerimos una revisión profunda, como ya lo indica el movimiento \emph{Libre Society} y \emph{Copy South}, así que hemos elegido también una licencia \emph{`(L) Libre  Commons Res Communes License'.} que hace visible lo anterior. A continuación el texto de la misma:

La licencia \emph{Res Communes} está diseñada para recharzar un constructo legal
de los bienes comunes centrado en el estado (o un bien común sin comunalidad)
a fin de concentrar un bien común que es compartido entre nosostros en
las prácticas colectivas (un bien común con comunalidad).

La `Comuna' o la `Comunalidad' originalmente significaba `la gente de
todo el reino' o `todos los sujetos del Rey' en contraste a el Rey, los
Nobles lo los `Comunes' en el Parlamento. Nosotros acá nos referimos a
la comunidad para referirnos a la multitud global, la gente de todo el
mundo.
\begin{enumerate}
\item {} 
Este trabajo está fuera de toda jurisdicción legal y toma su fuerza
y acción de las prácticas radicales democráticas constitutivas de
la multitud global contra la lógica del capital.

\item {} 
Toda obra que sea así inscrita debe llevar el texto  `(L) Libre
Commons Res Communes License'.

\item {} 
Como un usuaria de esta licencia, la obra está disponible para ser
usada como parte de un sustrato común que es compartido entre
nosotros y nosotras.

\end{enumerate}

Sabemos que existe una tensión entre estas dos licencias (la segunda es de hecho una crítica al movimiento del \emph{copyright} y la postura de
creative commons, pues se requiere un desmonte progresivo de sus excesos que aún no ha sido abordado por el segundo), sin embargo, es la práctica y defensa de las libertades la que ambas alientan. Por tanto, si creas obras derivadas de este libro o ayudas en alguna forma a extenderlo, debes mantener las mismas libertades consagradas en las licencias. Ahora bien, para que el espíritu de estas libertades sea respetado, tanto el código fuente del libro, como el software para modificarlo deben ser fácilmente accesible. Por esto hemos elegido el lenguaje de etiquetamiento ligero \emph{reStructuredText} para escribirlo, que es muy sencillo de aprender y se puede editar en prácticamente cualquier procesador de palabra, aunque hay excelentes editores con soporte especializado para el mismo. El código fuente y las herramientas recomendadas para la edición de este libro pueden encontrarse en \href{http://ubakye.net/libro}{http://ubakye.net/libro}


\subsection{Créditos, agradecimientos y coautoría}
\label{ubakyeTutorialDeDesarrollo:creditos-agradecimientos-y-coautoria}
La primera vez que se dicto este taller fue el Software Freedom Day Bogotá 2011. La idea era la construcción de documentación colaborativa en tiempo real usando Etherpad y aunque no funcionó muy bien, sembró la semilla de lo que ahora ves en este momento. El documento sigue evolucionando y aunque es una obra colectiva, está escrita por individuos que se relacionan con otros gracias a los cuales este documento ha tomado cuerpo. Así que aca es donde el documento se torna personal: Acá están los respectivos créditos.

\textbf{Coautoría}
\begin{itemize}
\item {} 
Offray Vladimir Luna Cárdenas: idea, documento y autor original.

\end{itemize}

\textbf{Créditos y agradecimientos:}
\begin{itemize}
\item {} 
Jorge Ernesto Guevara Cuenca: cómplice primario y quien montó el primer etherpad de Intranet.

\item {} 
Luis Alejandro Bernal, María del Pilar Saenz y Gloria Patricia Meneses, quienes escuchan a Offray como a un loco, sin ellos
probablemente él jamas hubiera empezado a escribir el código de Ubakye :-P, según dice.

\subsection{Queremos saber de ti}
\label{ubakyeTutorialDeDesarrollo:queremos-saber-de-ti}
Este libro fue escrito gracias a y mediante Internet. Para quienes lo escribimos es importante mantener un contacto fluído con quienes nos leen, así que esperamos saber de ti. Puedes escribirnos al sitio web del libro en: \href{http://ubakye.net/tutorial}{http://ubakye.net/tutorial} (aún por construir).


\section{Primera Parte: Preliminares y Panorámica Breve}
\label{ubakyeTutorialDeDesarrollo:primera-parte-preliminares-y-panoramica-breve}

\subsection{Descarga y ejecución}
\label{ubakyeTutorialDeDesarrollo:descarga-y-ejecucion}
Ubakye está hecho con \emph{Pier}, que a su vez está hecho en Pharo Smalltalk, que viene en un formato llamado \emph{One Click Experience}, el cual no necesita de instalación, sólo se descomprime y ejecuta \footnote{
Otras variantes de Smalltalk, entre las que está Squeak(\href{http://squeak.org}{http://squeak.org}), vienen en el mismo formato.
}. Lo cual nos permite llevarlo con nosotros en una memoria USB y ejecutarlo desde plataformas Windows, Gnu/Linux o Mac, así como copiarlo y entregar un sistema totalmente funcional a quienes se lo pasamos. Estos son los pasos para usarlo.
\begin{enumerate}
\item {} 
Vamos a \href{http://piercms.com}{http://piercms.com} .

\item {} 
Elegimos el enlace ``Descargas''.

\item {} 
Descomprimimos el software descargado en el paso anterior en cualquier lugar del disco duro, o en una memoria USB.

\item {} 
Ejecutamos el archivo correspondiente a la plataforma en la que estamos:
\begin{itemize}
\item {} 
\code{Pier.app} para Mac.

\item {} 
\code{Pier.app/Pier.sh} para Linux.

\item {} 
\code{Pier.app/Pier.lnk} para Windows

\end{itemize}

{[}{[}Falta: captura de pantalla de cuando se ejecuta el entorno por primera vez{]}{]}

\item {} 
Abrimos nuestro navegador y vamos a \code{http://localhost:8080} . Veremos que Pier está listo para usar, copiar y transportar.

{[}{[}Falta captura del navegador cuando se entra a pier por primera vez{]}{]}

\end{enumerate}


\subsection{Abrebocas: Un vistazo a la infraestructura de Ubakye}
\label{ubakyeTutorialDeDesarrollo:abrebocas-un-vistazo-a-la-infraestructura-de-ubakye}
Usualmente nos muestran una aplicación desde el punto de vista del usuario, y esto tiene mucho sentido si sólo vamos a usar la aplicación, pero como en este caso queremos trascender la frontera entre la persona usuaria y la hacedora, vamos a abrir un poco ``la caja negra'', mirarla por dentro y ver sus posibilidades, de modo que podamos apreciarla de manera más integral y saber las ventajas que nos ofrece.

\end{quote}

Las direcciones feas se deben a que Seaside, usa estas urls para codificar el estatus de la aplicación de forma que es posible saber qué está ocurriendo en el navegador a partir de ellas. Veamos un ejemplo.


\subsubsection{La aplicación \emph{welcome}}
\label{ubakyeTutorialDeDesarrollo:la-aplicacion-welcome}
Lancemos \emph{Pier} y vayamos a la dirección \code{localhost:8080/welcome}. Allí veremos la página de bienvenida de \emph{Seaside}, que nos muestra enlaces a demostraciones de varias de las características de Seaside.

{[}{[}Falta: captura de pantalla de entrada a la aplicación welcome{]}{]}
\begin{quote}
\begin{enumerate}
\item {} 
Escojamos la aplicación llamada ``Counter''. Veremos una página que muestra un contador cuyo valor inicial es cero.

\end{enumerate}

{[}{[}Falta: captura de pantalla de la aplicación Counter{]}{]}
\begin{enumerate}
\item {} 
\emph{Sin hacer nada más en esta página} vayamos atrás en nuestro navegador.
Veremos la página \code{welcome}, como era de esperarse, pues estamos navegando
entre páginas web, como estamos acostumbrados.

\item {} 

diligenciado damos click en ``Save'' justo al final del formulario y listo, habremos creado nuestro usuario.

\end{itemize}


\subsubsection{Agregar un blog}
\label{ubakyeTutorialDeDesarrollo:agregar-un-blog}
Ahora agreguemos una nueva sección que sea un blog. Nos vamos a la parte inferior de ...


\section{Segunda Parte: Componentes!}
\label{ubakyeTutorialDeDesarrollo:segunda-parte-componentes}
Para nuestro enrutador de identidad digital requerimos algo que pueda usarse en con buena conectividad, baja o ninguna y que no dependa de un navegador específico. Acá trabajaremos en los primeros prototipos de algo así y lo iremos extendiendo hasta convertirlo en aquello que queremos por completo, un sistema personal para toda nuestra identidad digital. Este es el plan de despligue de nuestra aplicación:
\begin{itemize}
\item {} 

Empezaremos por un breve recorrido por el sistema y luego iremos desarrollando uno a uno los componentes antes mencionados, así que, sin más preámbulos, manos a la obra!


\subsection{El navegador del sistema}
\label{ubakyeTutorialDeDesarrollo:el-navegador-del-sistema}
Antes de iniciar con nuestra primera aplicación, exploremos el sistema, para saber cómo modificarlo luego. Para esto vamos al menú contextual y elegimos: ``System Browser'', lo que despliega un navegador de sistema, el cual nos lo muestra organizado por jerarquías en distintos páneles: 4 en la parte superior y uno en la perte inferior (ver gráfica {[}SystemBrowser{]}). Para entender la organización del sistema es importante que sepamos que en Smalltalk/Seaside/Pier se programa escribiendo algo llamado ``clases''. Una clase es una forma de declarar tanto la información como el comportamiento contenido en una entidad informática. La información se organiza con variables (llamadas las variables de clase) que toman valores particulares y el comportamiento usando métodos o mensajes. Con esta breve introducción en mente, tenemos que:
\begin{figure}[htbp]
\centering
\capstart

\scalebox{0.700000}{\includegraphics{systemBrowser.png}}
\caption{El navegador del sistema (\emph{System Browser})}\end{figure}
\begin{itemize}
\item {} 
De izquierda a derecha los páneles superiores son:
\begin{itemize}
\item {} 
el primero de categorias, que organiza las diferentes clases relacionadas con un problema o modelo.

Queremos un método sencillo que muestre una pequeña explicación de la aplicación. Los métodos empiezan con el nombre del método y
luego se adicionan los argumentos. Seaside ya tiene un método que nos permite mostrar contenido en una página web, mediante HTML,
llamado \emph{renderContentOn:}, que usaremos y explicaremos a continuación. Empezamos modificando el código anterior por el siguiente
(que explicaremos dentro de poco):

\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nc}{AcercaDe}\PYG{n+nf}{\textgreater{}\textgreater{}}\PYG{n+nf}{renderContentOn:} \PYG{n+nv}{html}

 \PYG{n+nv}{html} \PYG{n+nf}{paragraph:} \PYG{l+s}{'Ubakye es una "red social p2p" que permite conectar a las}
\PYG{l+s}{                  personas entre sí, usando las ya redes sociales ya}
\PYG{l+s}{                  existentes pero sin depender de ellas'}
\end{Verbatim}

cuando salvemos este código (presionando las teclas {[}Ctrl{]} + {[}s{]}), el sistema nos pedirá que coloquemos nuestro nombre usando la
convención \emph{CamelCase}. Así el nombre ``Fulanita De Tal'', expresado en \emph{CamelCase} sería ``FulanitaDeTal''. Colocamos nuestro nombre en
\emph{CamelCase}, sin seudónimos, siguiendo la convención de la comunidad de Smalltalk.

Falta un pequeño paso para hacer visible nuestra aplicación y es registrarla en alguna dirección dentro de nuestro servidor,
para que se puede acceder a través de un navegador web, vía tal dirección. Es también una oportunidad para presentar por primera vez
otro elemento del entorno Smalltalk, el Shout Workspace. Un \emph{workspace} es un un lugar para arrojar código rápidamente, que invoca
a otros objetos en el entorno y nos permite enviarles mensajes particulares. Podemos pensar en ellos como la consola de comandos de
Unix, o la no tan buena, consola de DOS o Windows \footnote{
Power Shell es una buena consola de Windows que ha incorporado muchas de las ideas de las consolas de Unix a este entorno, desafortunadamente, no viene por omisión como parte del sistema operativo. Mac, en cambio, al estar basado en Unix, al igual que Gnu/Linux tienen una buena consola de comandos integrada desde el comienzo.
}. Para abrir el \emph{Shout Workspace} vamos a \code{Tools \textgreater{} Shout Workpace}. Veremos
que se abre una consola como la que se muestra a continuación:
\begin{figure}[htbp]
\centering
\capstart

\scalebox{0.700000}{\includegraphics{shoutWorkspace.png}}
\caption{El \emph{Shout Workspace} con un código para registrar una aplicación. La esquina superior derecha en naranja, quiere
decir que aún no se ha invocado todos los comandos contenidos en el \emph{workspace}}\end{figure}

Escribamos en el workspace

\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nc}{AcercaDe} \PYG{n+nf}{registerAsApplication:} \PYG{l+s}{'acerca-de'}
\end{Verbatim}

y presionemos {[}Ctrl{]} + {[}d{]} (que es el atajo de teclado para hágalo o \emph{do it}). Ahora vayamos a la dirección
\code{http://localhost:8080/acerca-de} y veamos qué página obtenemos{[}\#urlnocamelcase{]}\_:
\begin{figure}[htbp]
\centering
\capstart

\scalebox{0.700000}{\includegraphics{acercaDeUbakye-1.png}}
\caption{``Acerca de Ubakye'' en nuestra primera iteración. Pronto lo depuraremos progresivamente.}\end{figure}

Se ve aún muy pobre. Quizás merece algo de depuración, que es perfecto para el estilo incremental de programación que ofrece
\emph{Smalltalk}. Vayamos de nuevo al código del método pero esta vez modifiquémoslo un poco para que quede así:

\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nc}{AcercaDe}\PYG{n+nf}{\textgreater{}\textgreater{}}\PYG{n+nf}{renderContentOn:} \PYG{n+nv}{html}

 \PYG{n+nv}{html} \PYG{n+nf}{heading:} \PYG{l+s}{'Acerca de Ubakye...'}\PYG{p}{.}

 \PYG{n+nv}{html} \PYG{n+nf}{paragraph:} \PYG{l+s}{'Ubakye es una "red social p2p" que permite conectar a las}
\PYG{l+s}{                  personas entre sí, usando las ya redes sociales ya}
\PYG{l+s}{                  existentes pero sin depender de ellas'}
\end{Verbatim}

Hagamos un recuento de lo hecho hasta el momento, antes de entrar en la explicación de nuestro primer código: Hemos aprendido como
descargar y usar nuestro sistema Pier de manera elemental. Luego hemos empezado a modificar el sistemas creando nuestra primera
categoría, allí hemos colocado nuestro primer método.

Ahora bien, adentrándonos en nuestro primero método, lo que éste hace es que usa \emph{renderContentOn:} para mostrar la explicación de
nuestra aplicación. Una metáfora \footnote{
que es una adaptación libre de la que aparece en el libro Dynamic Web Development with Seaside (disponible en \href{http://book.seaside.st/book}{http://book.seaside.st/book})
} útil para entender cómo funciona dicho método es que usa un lienzo, llamado de acuerdo a la
convención ``html'' (pero podríamos llamarlo de cualquier otra forma) y sobre este hemos invocado unos ``pinceles'' que nos permiten dibujar
sobre él. Dichos pinceles son, para el ejemplo mostrado ``heading:'' y ``paragraph:'' y los hemos invocado con un valor particular (el
texto de cada uno de ellos), de modo que vamos dibujando gracias a ellos nuestra página web. Un listado completo de los pinceles, así
como una explicación más detallada puede encontrarse en {[}{[}Falta referencia{]}{]}. Sin embargo por lo pronto sólo resaltamos el
hecho de que \emph{Seaside} se encarga de traducir todos estos pincelazos en el código html adecuado, \emph{sin necesidad de saber html} y
manteniéndonos siempre dentro de la sintaxis objetual de Smalltalk. Esto brinda ventajas interesantes.

\end{enumerate}


\subsection{Intermezzo: Guardando nuestro código en la nube}
\label{ubakyeTutorialDeDesarrollo:intermezzo-guardando-nuestro-codigo-en-la-nube}