% Generated by Sphinx.
\def\sphinxdocclass{report}
\documentclass[letterpaper,11pt,english]{sphinxmanual}
\usepackage[utf8]{inputenc}
\DeclareUnicodeCharacter{00A0}{\nobreakspace}
\usepackage[T1]{fontenc}
\usepackage{babel}
\usepackage{times}
\usepackage[Bjarne]{fncychap}
\usepackage{longtable}
\usepackage{sphinx}
\usepackage{multirow}
\title{Ubakye: Tutorial de Desarrollo}
\date{March 02, 2012}
\release{0.1}
\author{Offray Vladimir Luna Cárdenas}
\newcommand{\sphinxlogo}{}
\renewcommand{\releasename}{Release}
\makeindex
\makeatletter
\def\PYG@reset{\let\PYG@it=\relax \let\PYG@bf=\relax%
\let\PYG@ul=\relax \let\PYG@tc=\relax%
\let\PYG@bc=\relax \let\PYG@ff=\relax}
\def\PYG@tok#1{\csname PYG@tok@#1\endcsname}
\def\PYG@toks#1+{\ifx\relax#1\empty\else%
\PYG@tok{#1}\expandafter\PYG@toks\fi}
\def\PYG@do#1{\PYG@bc{\PYG@tc{\PYG@ul{%
\PYG@it{\PYG@bf{\PYG@ff{#1}}}}}}}
\def\PYG#1#2{\PYG@reset\PYG@toks#1+\relax+\PYG@do{#2}}
\def\PYG@tok@gd{\def\PYG@tc##1{\textcolor[rgb]{0.63,0.00,0.00}{##1}}}
\def\PYG@tok@gu{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.50,0.00,0.50}{##1}}}
\def\PYG@tok@gt{\def\PYG@tc##1{\textcolor[rgb]{0.00,0.25,0.82}{##1}}}
\def\PYG@tok@gs{\let\PYG@bf=\textbf}
\def\PYG@tok@gr{\def\PYG@tc##1{\textcolor[rgb]{1.00,0.00,0.00}{##1}}}
\def\PYG@tok@cm{\let\PYG@it=\textit\def\PYG@tc##1{\textcolor[rgb]{0.25,0.50,0.56}{##1}}}
\def\PYG@tok@vg{\def\PYG@tc##1{\textcolor[rgb]{0.73,0.38,0.84}{##1}}}
\def\PYG@tok@m{\def\PYG@tc##1{\textcolor[rgb]{0.13,0.50,0.31}{##1}}}
\def\PYG@tok@mh{\def\PYG@tc##1{\textcolor[rgb]{0.13,0.50,0.31}{##1}}}
\def\PYG@tok@cs{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.50,0.56}{##1}}\def\PYG@bc##1{\colorbox[rgb]{1.00,0.94,0.94}{##1}}}
\def\PYG@tok@ge{\let\PYG@it=\textit}
\def\PYG@tok@vc{\def\PYG@tc##1{\textcolor[rgb]{0.73,0.38,0.84}{##1}}}
\def\PYG@tok@il{\def\PYG@tc##1{\textcolor[rgb]{0.13,0.50,0.31}{##1}}}
\def\PYG@tok@go{\def\PYG@tc##1{\textcolor[rgb]{0.19,0.19,0.19}{##1}}}
\def\PYG@tok@cp{\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@gi{\def\PYG@tc##1{\textcolor[rgb]{0.00,0.63,0.00}{##1}}}
\def\PYG@tok@gh{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.00,0.50}{##1}}}
\def\PYG@tok@ni{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.84,0.33,0.22}{##1}}}
\def\PYG@tok@nl{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.13,0.44}{##1}}}
\def\PYG@tok@nn{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.05,0.52,0.71}{##1}}}
\def\PYG@tok@no{\def\PYG@tc##1{\textcolor[rgb]{0.38,0.68,0.84}{##1}}}
\def\PYG@tok@na{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@nb{\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@nc{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.05,0.52,0.71}{##1}}}
\def\PYG@tok@nd{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.33,0.33,0.33}{##1}}}
\def\PYG@tok@ne{\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@nf{\def\PYG@tc##1{\textcolor[rgb]{0.02,0.16,0.49}{##1}}}
\def\PYG@tok@si{\let\PYG@it=\textit\def\PYG@tc##1{\textcolor[rgb]{0.44,0.63,0.82}{##1}}}
\def\PYG@tok@s2{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@vi{\def\PYG@tc##1{\textcolor[rgb]{0.73,0.38,0.84}{##1}}}
\def\PYG@tok@nt{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.02,0.16,0.45}{##1}}}
\def\PYG@tok@nv{\def\PYG@tc##1{\textcolor[rgb]{0.73,0.38,0.84}{##1}}}
\def\PYG@tok@s1{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@gp{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.78,0.36,0.04}{##1}}}
\def\PYG@tok@sh{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@ow{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@sx{\def\PYG@tc##1{\textcolor[rgb]{0.78,0.36,0.04}{##1}}}
\def\PYG@tok@bp{\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@c1{\let\PYG@it=\textit\def\PYG@tc##1{\textcolor[rgb]{0.25,0.50,0.56}{##1}}}
\def\PYG@tok@kc{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@c{\let\PYG@it=\textit\def\PYG@tc##1{\textcolor[rgb]{0.25,0.50,0.56}{##1}}}
\def\PYG@tok@mf{\def\PYG@tc##1{\textcolor[rgb]{0.13,0.50,0.31}{##1}}}
\def\PYG@tok@err{\def\PYG@bc##1{\fcolorbox[rgb]{1.00,0.00,0.00}{1,1,1}{##1}}}
\def\PYG@tok@kd{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@ss{\def\PYG@tc##1{\textcolor[rgb]{0.32,0.47,0.09}{##1}}}
\def\PYG@tok@sr{\def\PYG@tc##1{\textcolor[rgb]{0.14,0.33,0.53}{##1}}}
\def\PYG@tok@mo{\def\PYG@tc##1{\textcolor[rgb]{0.13,0.50,0.31}{##1}}}
\def\PYG@tok@mi{\def\PYG@tc##1{\textcolor[rgb]{0.13,0.50,0.31}{##1}}}
\def\PYG@tok@kn{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@o{\def\PYG@tc##1{\textcolor[rgb]{0.40,0.40,0.40}{##1}}}
\def\PYG@tok@kr{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@s{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@kp{\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@w{\def\PYG@tc##1{\textcolor[rgb]{0.73,0.73,0.73}{##1}}}
\def\PYG@tok@kt{\def\PYG@tc##1{\textcolor[rgb]{0.56,0.13,0.00}{##1}}}
\def\PYG@tok@sc{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@sb{\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@k{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.00,0.44,0.13}{##1}}}
\def\PYG@tok@se{\let\PYG@bf=\textbf\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYG@tok@sd{\let\PYG@it=\textit\def\PYG@tc##1{\textcolor[rgb]{0.25,0.44,0.63}{##1}}}
\def\PYGZbs{\char`\\}
\def\PYGZus{\char`\_}
\def\PYGZob{\char`\{}
\def\PYGZcb{\char`\}}
\def\PYGZca{\char`\^}
\def\PYGZsh{\char`\#}
\def\PYGZpc{\char`\%}
\def\PYGZdl{\char`\$}
\def\PYGZti{\char`\~}
% for compatibility with earlier versions
\def\PYGZat{@}
\def\PYGZlb{[}
\def\PYGZrb{]}
\makeatother
\begin{document}
\maketitle
\tableofcontents
\phantomsection\label{index::doc}
Contents:
\chapter{Tutorial de Desarrollo de Ubakye}
\label{ubakyeTutorialDeDesarrollo:ubakye-tutorial-de-desarrollo}\label{ubakyeTutorialDeDesarrollo::doc}\label{ubakyeTutorialDeDesarrollo:tutorial-de-desarrollo-de-ubakye}\setbox0\vbox{
\begin{minipage}{0.95\linewidth}
\textbf{Contents}
\medskip
\begin{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:tutorial-de-desarrollo-de-ubakye]{Tutorial de Desarrollo de Ubakye}}
\begin{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:antes-de-empezar]{Antes de empezar...}}
\begin{itemize}
\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}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:la-aplicacion-welcome]{La aplicación \emph{welcome}}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:integracion-con-jquery-y-jqueryui]{Integración con JQuery y JQueryUI}}
\end{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:primeros-pasos-con-pier]{Primeros pasos con Pier}}
\begin{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:cambiar-la-apariencia]{Cambiar la apariencia}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:contrasena-administrativa]{Contraseña administrativa}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:hacer-los-contenidos-persistentes]{Hacer los contenidos persistentes}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:cambiar-el-titulo]{Cambiar el titulo}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:crear-un-nuevo-usuario]{Crear un nuevo usuario}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:agregar-un-blog]{Agregar un blog}}
\end{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:intermezzo-expresiones-y-sintaxis-en-smalltalk]{Intermezzo: expresiones y sintaxis en Smalltalk}}
\end{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:segunda-parte-componentes]{Segunda Parte: Componentes!}}
\begin{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:el-navegador-del-sistema]{El navegador del sistema}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:componente-acerca-de]{Componente ``Acerca de...''}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:intermezzo-guardando-nuestro-codigo-en-la-nube]{Intermezzo: Guardando nuestro código en la nube}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:componente-enlaces-para-que-la-web-no-se-desteja]{Componente Enlaces: para que la \emph{web} no se desteja}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:componente-microblog-conectemonos-a-twitter-identica-y-muchos-mas]{Componente microblog: conectémonos a Twitter, Identica y muchos más}}
\end{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:tercera-parte-material-complementario]{Tercera Parte: Material Complementario}}
\begin{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:glosario]{Glosario}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:referencias]{Referencias}}
\begin{itemize}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:learning-web-development-with-seaside]{Learning web development with seaside}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:url-coral-smalltalk]{@url Coral Smalltalk}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:url-gnu-smalltalk]{@url Gnu Smalltalk}}
\item {}
{\hyperref[ubakyeTutorialDeDesarrollo:url-spoon]{@url Spoon}}
\end{itemize}
\end{itemize}
\end{itemize}
\end{itemize}
\end{minipage}}
\begin{center}\setlength{\fboxsep}{5pt}\shadowbox{\box0}\end{center}
\section{Antes de empezar...}
\label{ubakyeTutorialDeDesarrollo:antes-de-empezar}
\subsection{Introducción: Qué es Ubakye y qué es este documento.}
\label{ubakyeTutorialDeDesarrollo:introduccion-que-es-ubakye-y-que-es-este-documento}
Ubakye es un \emph{enrutador de identidad digital} o una ``red social p2p'' ó ``red social entre pares'', que permite conectar a las personas entre sí usando las ya redes sociales ya existentes, pero sin depender de ellas, al mismo tiempo que provee un lugar unificado y \emph{bajo el control de cada persona} para tener presencia en Internet, publicar y compartir diferentes contenidos. Queremos con ella ponerte a ti en el centro de la red y darte el control sobre qué, cómo y con quienes te comunicas. Retornar la red para que vuelva a ser por y paras las personas. El nombre de Ubakye nació de dos palabras chibchas, una lengua indígena del centro de Colombia: Uba, que quiere decir semilla, y Kye, que quiere decir árbol. Es una metáfora de cómo vemos nuestra identidad digital y la red que nos une, pero también se extiende a escenarios fuera de Internet.
Este borrador tutorial en construcción nació a como notas complementarias al taller sobre Ubakye que se ha realizado en varios lugares y se ha continuado dictando y por tanto es el fruto de varias personas y lugares (ver créditos y autores). No pretenden, por lo pronto, ser comprehensivas y se espera que sean usadas en conjunción con una explicación verbal. Eventualmente pueden evolucionar hasta convertirse en una documentación mucho más autocontenida, entre más se repita, extienda y recontextualice esta experiencia. El orden sugerido de lectura es el que aparece en la tabla de contenido. El documento no es muy complejo aún, ni tiene órdenas alternativos, pero en caso de desarrollarse para leerse de diferentes formas, éste será el lugar donde lo avisemos. La idea es aprender a usar y modificar Ubakye y hacer fluído ese tránsito de personas usuarias a hacedoras de tecnologías digitales, no sólo de los contenidos publicados en línea, sino también de las infraestructuras que las soportan. Se espera llegar a un ejemplo completo de una aplicación web, que sea pertinente para su uso cotidiano por la mayor cantidad de personas y en ese sentido marca una diferencia con otros tutoriales, que si bien son excelentes, eligen como ejemplo, trozos de diferentes aplicaciones o desarrollan una sóla, pero dicha aplicación algo que no seguiremos usando una vez hallamos acabado el tutorial \footnote{
Algunos eligen el desarrollo de video juegos y nosotros mismos hemos recorrido ese camino, pero a pesar de su caracter lúdico, la mayoría de ellos no siguen siendo jugados o desarrollados después de la clase. Otros como el excelente Ruby Rails Tutorial (\href{http://ruby.railstutorial.org/}{http://ruby.railstutorial.org/}) desarrolla desde cero una interesante aplicación, un clon del popular sitio de \emph{microblogging} \emph{Twitter}, pero a menos que estemos metidos en el negocio de proveer microblogs a otros, quizás esta no sea una aplicación que continuemos desarrollando, mientras que Ubakye, al ser un enrutador de identidad \emph{personal}, supone que las personas querrán seguir teniendo sitios propios en la web, cada vez más personales y bajo su control.
}. La idea es hacer algo que ``rompa las fronteras del aula'' y sea útil también fuera de esta y, en el mejor de los casos, que adquiera vida propia.
\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}
\emph{Convenciones de lectura}
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''. Si bien mantenemos la
convención {[}Ctrl{]} expandida en sistemas \emph{Windows} on \emph{Gnu/Linux}, pues en este último fue escrita buena parte de este texto, nos referimos
de manera genérica al operador de teclado y en sistemas Mac deberá ser reemplazado por la tecla ``Command''.
\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
sugerirnos nuevas secciones o enviarnos nuevos documentos. Mira la sección ``Queremos saber de ti'' para mirar cómo contactarnos y
``Licencia y código fuente'' si quieres empezar a ser parte de la escritura de este texto o ayudar con las traducciones u otro tipo de
obras derivadas (puedes escribir una canción o hacer una obra de teatro o ganar dinero con la venta de copias y si logras cualquiera
de ellas puedes contarnos cómo!)
\end{itemize}
\emph{El tono y la información complementaria}
\begin{itemize}
\item {}
Aún nos debatimos entre dos tonos, queremos ser cercanos y con cierto sentido del humor, pero al mismo tiempo brindar información oportuna
y útil. Queremos que el texto venga acompañado por dibujos y que haya una lectura paralela o complementaria desde ellos, pero aún
no están incoporados del todo, así que notarás este debate e incompleción en varios lugares, con tu ayuda sbremos qué tono es más
adecuado y como mejorar en comunicar este saber y lograr un balance entre la cordialidad y la utilidad, sin caer en la aridez propia
de los documentos técnicos, pero haciendo ubicables y claras las explicaciones.
\item {}
En general hemos intentado mantener un tono incluyente y conciente del genero, pero para hacer fluida la lectura hemos intercalado
el género femenino y masculíno indistintamente, así que en general haremos alusión a ``la persona usuaria/hacedora'' y en ocasiones a ``la
programadora'' ó ``el usuario'', sin suponer un tipo de género siempre por omisión. En esto, como en otras tantas cosas somos un colectivo
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 quienes nos leen.
\item {}
Hemos colocado información complementaria en la forma de bastantes notas a pie de página, algunas de ellas con gran extensión. Ellas
procuran ser una invitación a ampliar la mirada hacia algunas otras partes del ecosistema de Smalltalk y brindan enlaces web para
hacerlo. Creemos que desarrollar esta ``mirada periférica'' es importante, pues muestra que elegir una tecnología y un lenguaje en
particular, es elegir un ecosistema y toda una cultura de la que se hace parte con este lenguaje. De hecho este libro \_no\_ pretende ser
autocontenido y debe ser complementado con alguna de esta información, en particular en lo referente a los ``lienzos'' y ``trazos'' para el
despliege (\emph{rendering}) de objetos HTML. Cuando sea así te lo haremos saber colocando las referencias dentro del texto mismo (algunas de
estas llevan a documentación en inglés).
\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.
\item {}
\textbf{Remezclar:} adaptar la obra.
\item {}
\textbf{Comercializar:} hacer usos comerciales de la obra.
\end{itemize}
Siempre y cuando te comprometas a:
\begin{itemize}
\item {}
\textbf{Atribuir}: Debes atribuir la obra en la manera especificada por los autor o licenciantes
(pero no en alguna forma que sugiera que te respalda a ti o tus usos de la obra).
\item {}
\textbf{Compartir igual:} Si alteras, transformas, o creas a partir de este trabajo, debes distribuir
la obra resultante sólamente bajo la misma licencia o una similar a esta.
\end{itemize}
Con la comprensión de que:
\begin{itemize}
\item {}
\textbf{Renuncia}, Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor
\item {}
\textbf{Dominio público:}, cuando el trabajo o cualquiera de sus elementos esté en el dominio público, bajo
la ley vigente aplicable, ese estatus no es afectado en forma alguna por esta licencia.
\item {}
\textbf{Otros Derechos:} En ninguna forma, alguno de los siguientes derechos es afectado por la licencia:
\begin{itemize}
\item {}
Los derechos derivados de usos legítimosu otras limitaciones reconocidas por ley no se ven afectados por lo anterior.
\item {}
Los derechos morales del autor;
\item {}
Derechos que pueden ostentar otras personas sobre la propia obra o su uso, como por ejemplo derechos de imagen o de privacidad.
\end{itemize}
\end{itemize}
Aviso — Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta 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}.
Si estás usando una de las versiones en borrador de este libro puedes usar el sistema de control de versiones multiplataforma Fossil \footnote{
\href{http://fossil-scm.org}{http://fossil-scm.org} Una introducción a los comandos de fossil está en: {[}{[}falta url introfossil{]}{]}, Si ya tienes experiencia con sistemas de control de código (SCM, por su sigla en inglés), te recomendamos visitar {[}{[}falta url fossil-motivación{]}{]} y si eres una persona novata en el control de versiones, valdría la pena revisar {[}{[}falta url wikipedia{]}{]}
}, instalarlo en tu máquina y luego acceder a todo el código fuente del libro, mediante el comando:
Y si quieres tener permisos de escritura en el repositorio basta con que sigas los lineamientos explicados en el archivo \code{leeme.txt}, después de hacer la descarga
\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.
\item {}
Gustavo González, ``Xtingray'', quien me sugirió por primera vez que escribiera en comics y Scott McCloud, maestro de
maestros, quien deconstruyó los comics y señaló la explicación como uno de los usos más poderosos. \emph{Why the lucky stiff} (ese
es su apodo y pocos conocieron su nombre antes de que desapareciera misteriosa y súbitamente) mostró como esas dos sugerencias podían
combinarse.
\item {}
Las y los asistentes a los diferentes talleres por ayudarnos a depurar la idea y por su paciencia
y posterior participación en otros eventos, entre ellos:
\begin{itemize}
\item {}
Camilo Cuadros, primer taller del SFD Bogotá 2011.
\item {}
Estudiantes de la maestría en didáctica de las ciencias, cohorte x:
\end{itemize}
\end{itemize}
\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.
Quizás una de las cosas que más nos incomode y que notarás más rápidamente, si es que no los has hecho ya, sean las ``direcciones feas'' que produce Pier. Las arreglaremos luego, pero ellas nos sirven para aclarar una de las frases que dijimos antes: que Pier estaba hecho en Pharo Smalltalk. Esto es cierto, pero en el medio hay un Web Application Framework, un sistema para crear aplicaciones web (de la cual Pier es un interesante ejemplo). Es decir, que un bosquejo de la arquitectura es:
\begin{quote}
\begin{tabulary}{\linewidth}{|L|}
\hline
Pier
\\\hline
Seaside
\\\hline
Smalltalk
\\\hline
\end{tabulary}
\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 {}
Ahora demos click en ``adelante'' en el navegador. Regresaremos a la página ``Counter'', como
es natural. \emph{Acá es donde viene lo interesante}: Hagamos click 5 veces en el enlace ``++'',
cercano al número ``0''. Veremos como este número se incrementa hasta 5, y ahora démos click
en el botón ``atrás'' de nuestro navegador. Qué pasa entonces? regresamos a la página \code{welcome}
como ocurriría tradicionalmente?
\begin{itemize}
\item {}
\textbf{No!}, \emph{en contador se pone en 4!}, esto quiere decir que el Seaside sabe qué ha ocurrido
en el navegador y sabe que algo \emph{dentro} de la página ha cambiado y por tanto nos lleva
al estado anterior de \emph{ese componente específico, sin cambiar por completo de página}. Es
para embeber el estado de los componentes de una página que Seaside usa estas direcciones
extrañas y ``feas'' y se ocupa de toda la programación y el almacenamiento del estado de los
componentes por nosotros. Y es esta programación por componentes la que nos da gran poder a
la hora de construir aplicaciones web a partir de la recombinación de los mismos, del mismo
modo a como lo haríamos en una aplicación de escritorio tradicional.
\end{itemize}
\end{enumerate}
\end{quote}
Veamos ahora otras aplicaciones interesantes de Seaside.
\subsubsection{Integración con JQuery y JQueryUI}
\label{ubakyeTutorialDeDesarrollo:integracion-con-jquery-y-jqueryui}
Esta es una de las partes más agradables de Seaside. Dentro de la aplicación welcome, nos vamos al enlace que dice ``JQueryUI'' o entramos a
\code{http://localhost:8080/javascript/jquery-ui/}. Allí veremos un conjunto de ejemplos que hacen uso de JQueryUI. Lo interesante de ellas es que \emph{no tenemos que programar en JQuery}, sólo en Smalltalk \footnote{
Comic note: un sólo lenguaje para dominarlos a todos y en la oscuridad atarlos... bua ha ha!!!
}. Veremos en cada ejemplo código fuente en Smalltalk y su traducción en JQuery (hecha automáticamente por seaside!!!)... tomémonos un tiempo y disfrutemos un paseo de exploración en cada una de ellas, mientras nos tomamos algo... salud!
\subsection{Primeros pasos con Pier}
\label{ubakyeTutorialDeDesarrollo:primeros-pasos-con-pier}
Una vez en \code{http://localhost:8080} veremos a pier en funcionamiento. Aprenderemos cómo cambiar la apariencia, agregar un blog, poner un blog post dentro de él y dejaremos planteado un problema e iniciaremos parte de su solución, para lo cual requeriremos revisar algunos rudimentos Smalltalk, el lenguaje y entorno con el que está Pier.
\subsubsection{Cambiar la apariencia}
\label{ubakyeTutorialDeDesarrollo:cambiar-la-apariencia}
Cambiar la apariencia es quizás una de las primeras cosas que queramos hacer. Por lo pronto sólo elegiremos entre las apariencias predeterminadas de Pier. Si cargamos Pier por primera vez veremos un mensaje que dice:
\begin{quote}
If you are not satisfied with the current look, perhaps you want to choose another one:
\begin{quote}
Book
Event
Default
\end{quote}
\end{quote}
Si hacemos click en cada uno de ellos veremos los cambios de la interface propuestos.
\textbf{Nota:} Si está leyendo este documento en el contexto de un taller, usaremos
la interface que dice ``Event'' a lo largo del mismo.
\subsubsection{Contraseña administrativa}
\label{ubakyeTutorialDeDesarrollo:contrasena-administrativa}
Por omisión los datos del usuario administrador son:
\begin{itemize}
\item {}
Usuario: admin
\item {}
Contraseña: pier
\end{itemize}
\textbf{Advertencia:} Es conveniente cambiar la contraseña administrativa por una que sea fácil de recurdar para uno, pero difícil de adivinar
para los demás, particularmente si el sistema se va a colocar en accesible públicamente en Internet. Para cambiar la contraseña, una vez hayamos ingresado como usuario administrador vamos a la parte inferior de la página y buscamos donde dice: ``Logged in as admin'' y hacemos click en donde dice ``change password'' justo al lado derecho. Entonces nos será presentado un formulario con los datos del administrador (incluida la contraseña --pasword) que podremos cambiar a nuestro acomodo, siguiendo las recomendaciones antes dadas.
\subsubsection{Hacer los contenidos persistentes}
\label{ubakyeTutorialDeDesarrollo:hacer-los-contenidos-persistentes}\begin{enumerate}
\item {}
Una vez hallamos ingresado como administradores vamos a:
\begin{quote}
\href{http://localhost:8080/seaside/pier/system/management}{http://localhost:8080/seaside/pier/system/management}
\begin{enumerate}
\item {}
Ubicamos en en esa página la sección que dice:
\begin{quote}
Persistency
\begin{enumerate}
\item {}
En el menú desplegable que aparece escogemos:
\begin{quote}
Image Persistency
\end{quote}
\end{enumerate}
Allí escogemos el menú que dice ``Edit'', aparecerá un formulario con las opciones
para la persistencia de nuestra imagen y escogemos ``Save''.
\end{quote}
\end{enumerate}
\end{quote}
\end{enumerate}
\textbf{Nota:} Existen otras formas de hacer persistencia en Pier/Seaside/Smalltalk, pero la más usada es
la persistencia dentro de la imagen, que es suficientemente poderosa y portatil para cosas sencillas.
Sin embargo se pueden usar opciones de persistencia asociadas a múltiples bases de datos que sean portables
o usar una imagen que se extienda en varios computadores y de varios Terabytes (para esta última opción
véase Gemstone Smalltalk).
Cuando salgamos de Pier usamos el menú contextual (también conocido como el menú del mundo) y elegimos ``Save and Quit'', que es similar a dejar un computador en modo de hibernación. La siguiente vez que abramos la imagen, la veremos exactamente en el estado en que la dejamos \footnote{
Esta idea de ``la hibernación'' provino de ``@url Learning web dev...''
}.
\subsubsection{Cambiar el titulo}
\label{ubakyeTutorialDeDesarrollo:cambiar-el-titulo}
Para cambiar el título hacemos lo siguiente:
\begin{enumerate}
\item {}
Ingresamos usando la contraseña administrativa.
\item {}
Vamos a \code{http://localhost:8080/pier/system/components}
Allí veremos un listado de opciones para cambiar dentro de Pier.
\begin{enumerate}
\item {}
Cambiemos el título.
\begin{enumerate}
\item {}
Vamos a:
\code{http://localhost:8080/pier/system/components/eventtitle}
\item {}
Ubicamos en enlace que dice: ``Edit''. Se desplegará un formulario
que muestra Dos campos:
\end{enumerate}
\begin{itemize}
\item {}
El primero muestra el título.
\item {}
El segundo muestra los contenidos. Allí veremos algo que dice:
\begin{Verbatim}[commandchars=\\\{\}]
\PYGZob{}\PYGZob{}\PYGZob{}\PYG{n+nt}{\textless{}h1} \PYG{n+na}{class=}\PYG{l+s}{"heading"}\PYG{n+nt}{\textgreater{}}Event\PYG{n+nt}{\textless{}/h1\textgreater{}}
\PYG{n+nt}{\textless{}h2}\PYG{n+nt}{\textgreater{}}Location\PYG{n+nt}{\textless{}/h2\textgreater{}}\PYGZcb{}\PYGZcb{}\PYGZcb{}
\end{Verbatim}
es un código html que indica lo que visualizamos en la página.
Por ejemplo, cambiemos \emph{Event} por \emph{Web personal de {}` y nuestro nombre.
y {}`Location} por \emph{parte del proyecto Ubakye} y demosle hacemos click en
el botón ``Save''
\end{itemize}
\end{enumerate}
\end{enumerate}
\subsubsection{Crear un nuevo usuario}
\label{ubakyeTutorialDeDesarrollo:crear-un-nuevo-usuario}
Para organizar los permisos de acceso a diferentes partes del sistema web, Pier usa un esquema de grupos y usuarios. Dependiendo de en qué grupo esté un usuario esté será capaz de hacer todo aquello que le es permitido a ese grupo. Por esto todos los usuarios y usuarias deben tener al menos un grupo. Como este es nuestro primer usuario, procederemos a crear primero un grupo diferente al que ya existe por omisión (que es para usuarios de perfil administrativo) y luego agregaremos un nuevo usuario a dicho grupo.
\textbf{Parte 1: Agregar un nuevo Grupo}:
\begin{itemize}
\item {}
En caso de no estar allí, entramos a:
\begin{quote}
\code{http://localhost:8081/pier/system/management}
\end{quote}
y veremos un formulario con un listado de acciones administrativas, dividas por secciones. La segunda de ellas es referida a los
grupos de usuarios y se nos da un pequeño formulario para colocar el nombre de grupo. Una vez hallamos puesto uno, que para este
ejemplo será ``users'' hacemos click en ``Add''.
\item {}
Lo anterior nos llevará a otra página donde aparece un formulario más detallado con los datos extra del grupo. Lo llenamos y Una vez
diligenciado damos click en ``Save'' justo al final del formulario y listo. habremos creado nuestro primer grupo.
\end{itemize}
\textbf{Parte 1: Agregar un nuevo usuario}:
\begin{itemize}
\item {}
En caso de no estar allí, entramos a:
\begin{quote}
\code{http://localhost:8081/pier/system/management}
\end{quote}
y veremos un formulario con un listado de acciones administrativas, dividas por secciones. La primera de ellas es referida a los
usuarios y se nos da un pequeño formulario para colocar el nombre de alguno. Una vez lo hallamos puesto, hacemos click en ``Add''.
\item {}
Lo anterior nos llevará a otra página donde aparece un formulario más detallado con los datos extra del usuario. Lo llenamos \_sin\_
seleccionar la casilla ``Superuser'' y asignándole algún grupo de los preexistentes (de preferencia que no sea el grupo admin, a
menos que queramos que tenga todos lo permisos de un administrador web, lo cual no es deseable en la mayoría de los casos) y una vez
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 ...
\subsection{Intermezzo: expresiones y sintaxis en Smalltalk}
\label{ubakyeTutorialDeDesarrollo:intermezzo-expresiones-y-sintaxis-en-smalltalk}
Cuando presentamos este texto, dijimos que las personas a quienes iba dirigido eran ya conocedoras de la programación orientada a objetos y quizás hayan manejado algunos de los lenguajes populares, como Java o C++. La sección actual pretende mostrar las diferencias entre esos lenguajes y \emph{Smalltalk}, pues dentro de poco estaremos, en la segunda parte, usando este lenguaje para programar nuestras primeros componentes web. El texto que leerás a continuación está ampliamente inspirado en el artículo \emph{I Can Read C++ and Java But I Can’t Read Smalltalk} {[}lal01{]} (Puedo leer C++ y Java pero no puedo leer Smalltalk), pues ha sido una de las referencias que, en nuestra experiencia, más ha esclarecido la nueva sintaxis a quienes eran familiares con otras populares \footnote{
Por el camino también revisaremos algunos lenguajes no tan populares como Java y C++, pero que han tomado fuerza ultimamente,
como son Python y Ruby, éste último particularmente cercano a Smalltalk.
}. Una vez establecido dicho puente, presentamos algunas de las ideas particulares de \emph{Smalltalk}, que le son propias y que hacen que 1 + 2 * 3 sea 9 y no 7... pero por lo pronto este es un anzuelo a la curiosidad para que llegues hasta el final del texto. Empecemos pues.
Supongamos que estamos programando una animación y digamos que queremos mover un objeto \emph{o}, en la dirección expresada con el ángulo \emph{d} y a una velocidad \emph{v}. Si quisieramos expresar tal operación lenguajes como C++ ó Java escribiríamos, respectivamente:
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n}{o}\PYG{o}{.}\PYG{n+na}{mover}\PYG{o}{(}\PYG{n}{d}\PYG{o}{,}\PYG{n}{v}\PYG{o}{)}
\end{Verbatim}
Por supuesto, ahora sabemos qué representa cada variable, pues hemos introducido previamente una convención para cada variable, pero si un lector de dicho código que no la conoce, quisiera hacer sentido de la misma tendría que ubicar declaraciones en el código como:
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n}{object} \PYG{n}{o}\PYG{o}{;}
\PYG{n}{vector} \PYG{n}{d}\PYG{o}{;}
\PYG{k+kt}{float} \PYG{n}{v}\PYG{o}{;}
\end{Verbatim}
Debido a que \emph{Smalltalk} \emph{no es} un lenguaje con tipos fuertemente declarados, es una buena práctica tradicional es indicar la naturaleza de las variables de la siguiente forma:
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{o}{\textbar{}}\PYG{n+nv}{ object unaDireccion unaVelocidad }\PYG{o}{\textbar{}}
\end{Verbatim}
Siguiendo el ejemplo de LaLonde (lal01), iremos adaptando la sintaxis de C++ o Java para ver cómo esta se convierte en la sintaxis de \emph{Smalltalk}.
Para transformar aún más la sintaxis, es necesario indicar qué significan cada una de las variables:
Hemos reemplazado las comas por palabras de forma tal que nos dicen más acerca de qué es aquello que separan, pero debido a que el orden importa, sería conveniente una forma de indicarlo. Para esto \emph{Smalltalk} introduce los dos puntos, de la sigueinte forma:
Falta unos pequeños pequeños elementos estéticos que ayudan a la legibilidad del código en \emph{Smalltalk} y son parte de la tradición de escritura en este lenguaje: los métodos se nombran en minúsculas y se juntan las palabras, que solicitan los argumentos para hacerlo más legible. Con este último cambio nuestro método quedaría:
Con lo cual queda claro, al final, que estamos enviándolo al objeto \emph{o} el mensaje de que se mueva, en una dirección particular y con una velocidad específica \footnote{
De hecho, cuando se programa en Smalltalk, las variables ``o'', ``d'' y ``v'' se reemplazan explícitamente indicando que se
espera recibir algo de ese tipo. El resultado final sería algo como:
\code{objeto mover enDireccion: unaDireccion conVelocidad: unaVelocidad //Así sí es Smalltalk}
}. Este tipo de escritura que privilegia la lectura sobre la escritura es parte importante de la tradición es \emph{Smalltalk} y se ha cobrado mucha importancia en otros lenguajes como Ruby o Python y, si bien puede parecer engorrosa, no lo es si se piensa en \emph{Smalltalk} no sólo como un lenguaje o una sintaxis particular, sino como un entorno, que soporta la escritura de código de forma tal que \emph{no} es necesario escribir todas las palabras, sino sólo el comienzo y de allí en adelante el entorno nos muestra las opciones y las autocompleta por nosotros en la medida en que escribimos, de modo que favorecer la lectura no hace demorada la escritura. La política de \emph{Smalltalk} es que, es mejor gastar unos segundos escribiendo de modo explícito, que minutos u horas intentando hacer sentido de un código pobremente escrito.
Podemos ahora introducir algunos elementos más de la sintaxis de Smalltalk, pero
para hacerlo usaremos el entorno, de manera tal que lo podamos probar
interactivamente. El código anterior también se podría probar interactivamente
usando el \emph{System Browser}, pero eso será parte de la siguiente sección. Esta es
también una oportunidad para presentar por primera vez otro elemento del entorno
Smalltalk, llamado el \emph{Workspace} o \emph{Shout workspace} \footnote{
La diferencia entre el \emph{Workspace} y el \emph{Shout Workspace} es que este último soporta el resaltado sintáctico del
código y ya viene incorporado por omisión en el entorno que hemos instalado (\emph{Pier/Seaside/Pharo}) y en otros como \emph{Squeak}.
}. 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 \emph{workspace}:
\begin{Verbatim}[commandchars=\\\{\}]
"Los comentarios son escritos entre comillas dobles".
'Las cadenas de texto se colocan en comillas sencillas'.
'Si quiero colocar comillas sencillas dentro de una cadena de texto
las duplico para escapar a ellas: ay homb''e'.
\end{Verbatim}
Ahora parémonos en la primera línea y presionemos la combinación de teclas {[}Ctrl{]}+{[}p{]}, que imprime el resultado de ejecutar el comando en la línea en la que estamos parados (``p'' es por \emph{print}). Veremos entonces que la primera línea no se imprime, mientras que las dos siguientes sí. Apreciemos en la última qué pasa con la doble comilla sencilla. También notamos que hemos introducido sutilmente otro operador, el punto ''.'', que sirve para separar un comando de otro. Si quisiéramos anexar cadenas de texto, usamos el operador '','', por ejemplo:
y coloquemosla en el workspace e imprimámosla.
Existe 1 operador de asignación ``\code{:=}'' probémoslo con el siguiente código:
Parémonos en la segunda línea y presionemos la combinación de teclas {[}Ctrl{]}+{[}d{]} (la ``d'' es por \emph{do it}, que es para hacer o ejecutar un comando) y luego parémonos en la tecera e imprimamos p. De acá en adelante hemos empezado a usar interactivamente el \emph{workspace} para conocer sobre la sintaxis de \emph{Smalltalk}, pero existe ya una utilidad que nos permite revisar todo ello dentro del entorno. Se trata del Profesor Stef, que es un tutorial interactivo de la sintaxis de Smalltalk. Para invocar al profesor Stef escribamos y ejecutemos el siguiente código:
\begin{Verbatim}[commandchars=\\\{\}]
\end{Verbatim}
{[}{[}Falta: pantallazo del lanzamiento de Prof Stef{]}{]}
{[}{[}Posible Actividad: Traducción de las páginas del profesor Stef{]}{]}
{[}{[}Revisar: si el siguiente trozo es necesario o ya fue tratado por el Prof Stef{]}{]}.
Las expresiones en Smalltalk son de la siguiente forma:
\begin{itemize}
\item {}
Receptor: Es la forma más sencilla de expresión. Se coloca sólo a un objeto, sin ningún mensaje. Por ejemplo ``1''
\item {}
Unarias = Receptor + mensaje: Se coloca un objeto y un mensaje, por ejemplo ``1 negated'' lo cual nos da ``-1''
\item {}
Binarias = Receptor + mensaje + argumento: Ejemplo 1 + 3.
\item {}
Keyword = receptor + \emph{keyword1}: + argumento1 + \emph{keyword2}: + argumento2 + ... + \emph{keywordN}: argumentoN.
\end{itemize}
\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 {}
Una página ``Acerca de...'' que explique el propósito de la aplicación.
\item {}
Un pequeño formulario donde solicitemos el enlace y podamos agregar y asociar luego un listado de palabras clave que sean la forma de catalogarlo y recuperarlo a modo de \emph{nube de etiquetas}.
\item {}
Un sistema para crear, almacenar y compartir pequeños mensajes tipo microblog y replicarlos a redes como \href{http://twitter.com}{Twitter} e \href{http://identi.ca}{Identica}.
\end{itemize}
\begin{itemize}
\item {}
Más extensiones hacia otro tipo de contenidos como blogs, fotos, videos, etc., que ya iremos diseñando.
\end{itemize}
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.
\item {}
el segundo de clases, propiamente dichas.
\item {}
el tercero de protocolos, que organiza los diferentes tipos de mensajes de acuerdo a su funcionalidad.
\item {}
el cuarto de mensajes, propiamente dichos.
\end{itemize}
\item {}
El panel inferior muestra el código específico de una clase o mensaje y nos muestra plantillas que facilitan su escritura.
\end{itemize}
La mejor forma de familiarizarse realmente con el \emph{Navegador del Sistema} es empezar a usarlo, así que iniciaremos con la creación de nuestro primer componente y luego uno más y otro y otro... :-)
\subsection{Componente ``Acerca de...''}
\label{ubakyeTutorialDeDesarrollo:componente-acerca-de}
Smalltalk tiene una forma muy orgánica de ser programado y modificado, en el cual se crean o transforman pequeñas aplicaciones o componentes Empecemos por desplegar una primera página para nuestra aplicación donde podamos colocarle un pequeño título y una breve explicación de qué hace, luego la iremos extendiendo iterativamente para que incluya aquello que mencionamos en la introducción.
\begin{enumerate}
\item {}
Desplegamos el navegador del sistema (véase la sección respectiva para una breve explicación de cómo hacerlo y de las partes del mismo).
\item {}
En el panel de categorías hacemos click con el botón contextual y elegimos ``Create category''. En la ventana que se despliega a
continuación escribimos ``Ubakye'' (sin las comillas) y hacemos click en el botón ``Ok''.
\item {}
El paso anterior nos retornará al \emph{System Browser} con la nueva categoría, Ubakye, creada y resaltada. En el panel inferior veremos una
plantilla de clase. Modificaremos esa plantilla para que se adecue a lo que queremos. El texto actual de la plantilla es:
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nc}{Object} \PYG{n+nf}{subclass:} \PYG{l+s+ss}{\PYGZsh{}NameOfSubclass}
\PYG{n+nf}{instanceVariableNames:} \PYG{l+s}{''}
\PYG{n+nf}{classVariableNames:} \PYG{l+s}{''}
\PYG{n+nf}{poolDictionaries:} \PYG{l+s}{''}
\PYG{n+nf}{category:} \PYG{l+s}{'Ubakye'}
\end{Verbatim}
lo anterior quiere decir que estamos enviando al objeto llamado ``Objeto'' un mensaje tipo \emph{keyword} que con varias palabras claves
y argumentos que definen cómo será un objeto en particular (para mayor información veáse la sección ``Las expresiones en Smalltalk).
Es por esto que encontramos el \emph{keyword} ``subclass:'', pues le indicamos a ``Object'' que queremos sacar una subclase de él, es decir
algo que herede parte de sus datos o su comportamiento, pero adaptado de alguna forma. Pensemos acá en algo similar a un mamífero,
cuya subclase es ``gato'', pues hereda parte de sus datos y comportamiento (tener 4 extremidades o lactar), pero es más específico.
Sin embargo, dado que se trata de una aplicación web hecha en Smalltalk, no queremos heredar de un objeto tan genérico como ``Object'',
sino de uno más específico empleado por Seaside para crear aplicaciones web. Dicho objeto se llama WAComponent y lo que sigue
después será nuestra clase en particular. Empezaremos por un pequeño componente que se encargue de indicar para que sirve la aplicación
y tradicionalmente se le llama ``Acerca de''. Así las cosas, nuestro código modificado queda de la siguiente manera:
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nc}{WAComponent} \PYG{n+nf}{subclass:} \PYG{l+s+ss}{\PYGZsh{}AcercaDe}
\PYG{n+nf}{instanceVariableNames:} \PYG{l+s}{''}
\PYG{n+nf}{classVariableNames:} \PYG{l+s}{''}
\PYG{n+nf}{poolDictionaries:} \PYG{l+s}{''}
\PYG{n+nf}{category:} \PYG{l+s}{'Ubakye'}
\end{Verbatim}
Una vez hallamos cambiado el código en la plantilla, salvamos haciendo click en \code{menú contextual \textgreater{} Accept(s)}. Veremos que aparece,
la clase ``AcercaDe'' en el panel de clases (segundo panel), con un pequeño ícono similar a una pieza de lego, que indica su naturaleza
de componente remezclable, como lo veremos posteriormente.
\item {}
Nos ubicamos en la clase ``AcercaDe'' y luego en el panel de protocolos (tercer panel) en el donde dice ``\emph{all}''. El panel inferior
mostrará una plantilla con la que podemos agregar métodos. Su código es:
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nf}{messageSelectorAndArgumentNames}
\PYG{c}{"comment stating purpose of message"}
\PYG{o}{\textbar{}}\PYG{n+nv}{ temporary variable names }\PYG{o}{\textbar{}}
\PYG{n+nv}{statements}
\end{Verbatim}
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. Lancemos el \emph{Shout Workspace} y escribamos en él:
\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 \footnote{
Hemos evitado la convención de CamelCase en las url para facilitar su ubicación, pues las personas no
familiarizadas con esta convención pueden no combinar las mayúsculas y las minúsculas apropiadamente, por lo cual usar
guiones para separar las palabras es más conveniente.
}:
\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}
Veamos cómo queda ahora:
\begin{figure}[htbp]
\centering
\capstart
\scalebox{0.700000}{\includegraphics{acercaDeUbakye-2.png}}
\caption{``Acerca de Ubakye'' en nuestra segunda iteración. Agregando un título bien visible.}\end{figure}
Ahora bien, adentrándonos en nuestro primer 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 las sección 7,
\emph{Rendering Components} \footnote{
Rendering components en Dynamic Web Development with Seaside:
\href{http://book.seaside.st/book/fundamentals/rendering-components}{http://book.seaside.st/book/fundamentals/rendering-components}
} del libro \emph{Dynamic web development with
Seaside}, a cuya lectura remitimos para entender de mejor manera los
detalles del manejo de páginas en Seaside. 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, por ejemplo que podemos usar las instrucciones
del lenguaje de Smalltalk para modificar la apariencia de la página un poco
más. Insertemos, por ejemplo, un par de imágenes para dar crédito a las tecnologías
que hacen posible Ubakye, lo cual lo podemos hacer con la instrucción:
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nc}{AcercaDe}\PYG{n+nf}{\textgreater{}\textgreater{}}\PYG{n+nf}{renderContentOn:} \PYG{n+nv}{html}
\PYG{c}{"[trozo de código]"}
\PYG{n+nv}{html} \PYG{n+nf}{image}
\PYG{n+nf}{altText:} \PYG{l+s}{'Pharo Smalltalk'}\PYG{p}{;}
\PYG{n+nf}{url:} \PYG{l+s}{'http://www.pharo-project.org/images/pharo.png'}\PYG{p}{;}
\PYG{n+nf}{width:} \PYG{l+m}{50}\PYG{p}{.}
\PYG{n+nv}{html} \PYG{n+nf}{image}
\PYG{n+nf}{altText:} \PYG{l+s}{'Seaside'}\PYG{p}{;}
\PYG{n+nf}{url:} \PYG{l+s}{'http://www.seaside.st/styles/logo-plain.png'}\PYG{p}{;}
\PYG{n+nf}{width:} \PYG{l+m}{50}\PYG{p}{.}
\PYG{c}{"[trozo de código]"}
\end{Verbatim}
que, como podemos notar en cada caso, es un simple conjunto de mensajes en cascada \footnote{
para los mensajes en cascada véase la sub-sección ``Las Expresiones en Smalltalk, en el material complementario
}, indicando,
respectivamente, que texto alternativo mostrar cuando el ratón se coloque sobre ellas, o cuando no
pueda verse directamente la imagen en el navegador y donde está
ubicada la imagen. Agreguemos este código al final de nuestro
método \code{AcercaDe\textgreater{}\textgreater{}renderContentOn:} y recarguemos el navegador.
\begin{figure}[htbp]
\centering
\capstart
\includegraphics{creditosLogosPharoSeaside.png}
\caption{``Acerca de...'', tercera iteración: Insertando las imágenes de créditos de \emph{Pharo Smalltalk} y \emph{Seaside}}\end{figure}
Ahora coloquemos un ciclo para indicar, en letras pequeñas, cuán agradecidos \footnote{
Podría colocarse una caricatura de alguien que repita una planta en el
tablero usando un ciclo en Smalltalk.
} estamos con Pharo y Seaside, con el siguiente código
\begin{Verbatim}[commandchars=\\\{\}]
\PYG{n+nv}{html} \PYG{n+nf}{small:} [
\PYG{l+m}{50} \PYG{n+nb}{timesRepeat:} [
\PYG{n+nv}{html} \PYG{n+nf}{text:} \PYG{l+s}{'gracias! '}]
]
\end{Verbatim}
Recarguemos de nuevo la página.
\begin{figure}[htbp]
\centering
\capstart
\includegraphics{muchasGraciasPharoSeaside.png}
\caption{Muy agradecidos con \emph{Pharo Smalltalk} y \emph{Seaside}. Es de anotar que todas las
gracias las dimos dentro de un único ciclo.}\end{figure}
Nuestro código, una vez hechas todas las adiciones, debió quedar de la siguiente forma:
\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 personas entre sí, usando}
\PYG{l+s}{ las ya redes sociales ya existentes pero sin depender de ellas.'}\PYG{p}{.}
\PYG{n+nv}{html} \PYG{n+nf}{paragraph:} \PYG{l+s}{'Este proyecto es posible debido al uso de:'}\PYG{p}{.}
\PYG{n+nv}{html} \PYG{n+nf}{image}
\PYG{n+nf}{altText:} \PYG{l+s}{'Pharo Smalltalk'}\PYG{p}{;}
\PYG{n+nf}{url:} \PYG{l+s}{'http://www.pharo-project.org/images/pharo.png'}\PYG{p}{;}
\PYG{n+nf}{width:} \PYG{l+m}{150}\PYG{p}{.}
\PYG{n+nv}{html} \PYG{n+nf}{image}
\PYG{n+nf}{altText:} \PYG{l+s}{'Seaside'}\PYG{p}{;}
\PYG{n+nf}{url:} \PYG{l+s}{'http://www.seaside.st/styles/logo-plain.png'}\PYG{p}{;}
\PYG{n+nf}{width:} \PYG{l+m}{150}\PYG{p}{.}
\PYG{n+nv}{html} \PYG{n+nf}{small:} [
\PYG{l+m}{50} \PYG{n+nb}{timesRepeat:} [
\PYG{n+nv}{html} \PYG{n+nf}{text:} \PYG{l+s}{'gracias! '}]
]
\end{Verbatim}
Hagamos un recuento de lo hecho hasta el momento: 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 para mostrar una página web y posteriormente
lo hemos venido depurando hasta que tiene la apariencia que nos gustaría para ésta. Con esto último, en realidad, no hemos
hecho más que una versión ``maximalista'' del clásico ejemplo ``Hola mundo!'' al que procuramos \emph{no} rendirle \emph{ningún} homenaje,
sino, por el contrario, mostrar lo desactualizado e inconveniente de dicho ejemplo, que no modela nada
interesante (salvo un aburrido teletubi), ni son el ejemplo de alta interactividad que fue en el pasado \footnote{
Hay una crítica extensa al ejemplo de hola mundo, que compartimos ampliamente en:
{[}{[}falta agregar url{]}{]}
}. Ya es hora
de superarlo(!) y esperamos que esta sea una modesta muestra de cómo un contexto más rico, como los que abundan hoy en día, nos puede
revelar, a partir de un ejemplo sencillo, cosas interesantes, digamos, sobre la programación incremental, o los dialectos
de dominio específico (que nos permiten, sin salirnos de \emph{Smalltalk}, programar en otro dominio, en este caso, el html de las
página web).
Usualmente, luego del ``hola mundo'' vienen ejemplos de la entrada y procesamiento de datos. Ya llegaremos a ellos, pero por
el camino tendremos algunos \emph{intermezzos} sobre cómo guardar y compartir nuestro código de manera segura con otras personas, usando
la red, cómo depurar errores e incluso como incorporar librerías que hacen amigable nuestra aplicación para los cada vez más expandidos
dispositivos con pantallas táctiles. Afortunadamente el entorno integrado de \emph{Smalltalk} nos provee utilidades para todo ello. Parece
un buen plan, así que adelante!
\end{enumerate}
\subsection{Intermezzo: Guardando nuestro código en la nube}
\label{ubakyeTutorialDeDesarrollo:intermezzo-guardando-nuestro-codigo-en-la-nube}
\subsection{Componente Enlaces: para que la \emph{web} no se desteja}
\label{ubakyeTutorialDeDesarrollo:componente-enlaces-para-que-la-web-no-se-desteja}
Frecuentemente encontramos información interesante en Internet. Sería conveniente estar en condiciones de guardar los enlaces de dicha información interesante y si bien hay varias maneras de hacerlo, como usar sistemas de guardado fuera de línea (como el excelente \emph{outliner} Leo) o sincronización de enlaces (como \emph{mozilla sync}), ellos están a un sólo lado del espectro: o bien fuera de línea, o bien en línea y son dependientes del navegador.
Queremos, entonces, algo que nos permita almacenar y etiquetar enlaces de cosas interesantes que encontremos en la web y que nos gustaría consultar luego. Llamémos, a este componente ``Enlaces''.
\subsection{Componente microblog: conectémonos a Twitter, Identica y muchos más}
\label{ubakyeTutorialDeDesarrollo:componente-microblog-conectemonos-a-twitter-identica-y-muchos-mas}
\section{Tercera Parte: Material Complementario}
\label{ubakyeTutorialDeDesarrollo:tercera-parte-material-complementario}
\subsection{Glosario}
\label{ubakyeTutorialDeDesarrollo:glosario}\begin{itemize}
\item {}
Salvar:
\end{itemize}
\subsection{Referencias}
\label{ubakyeTutorialDeDesarrollo:referencias}
\subsubsection{Learning web development with seaside}
\label{ubakyeTutorialDeDesarrollo:learning-web-development-with-seaside}\begin{quote}\begin{description}
\item[{author}] \leavevmode
\item[{year}] \leavevmode
\end{description}\end{quote}
\subsubsection{@url Coral Smalltalk}
\label{ubakyeTutorialDeDesarrollo:url-coral-smalltalk}
\subsubsection{@url Gnu Smalltalk}
\label{ubakyeTutorialDeDesarrollo:url-gnu-smalltalk}
\subsubsection{@url Spoon}
\label{ubakyeTutorialDeDesarrollo:url-spoon}
\chapter{Indices y tablas}
\label{index:indices-y-tablas}\begin{itemize}
\item {}
\emph{genindex}
\item {}
\emph{modindex}
\item {}
\emph{search}
\end{itemize}
\renewcommand{\indexname}{Index}
\printindex
\end{document}