presentacion-20171006.tex

 \documentclass{beamer}

\usepackage{graphicx}

\usecolortheme[named=blue]{structure}

\mode<presentation>
{
  \usetheme{Warsaw}
  \setbeamercovered{transparent}
  \setbeamertemplate{items}[ball]
  \setbeamertemplate{theorems}[numbered]
  \setbeamertemplate{footline}[frame number]
  
% custom colors
  \setbeamercolor{structure}{fg=red!90!black}
  
  \setbeamerfont{section number projected}{%
  	family=\rmfamily,series=\bfseries,size=\normalsize
  }
  \setbeamercolor{section number projected}{bg=red,fg=white}
  \setbeamercolor{frametitle in head}{fg=Brown,bg=Brown!20}
  
}

% \usecolortheme{spruce}

\usepackage{beamerthemesplit}
\usepackage{graphics}
\usepackage{graphicx}
\usepackage{hyperref}
\usepackage{color}
\usepackage{listings}
\usepackage[utf8]{inputenc}

\newcommand{\code}[1]{\texttt{\small{#1}}}
\hypersetup{%
  colorlinks=true,
  urlcolor=red,
  linkcolor=red,
  pdfborderstyle={/S/U/W 1}
}

\definecolor{javared}{rgb}{0.6,0,0} % for strings
\definecolor{javagreen}{rgb}{0.25,0.5,0.35} % comments
\definecolor{javapurple}{rgb}{0.5,0,0.35} % keywords
\definecolor{javadocblue}{rgb}{0.25,0.35,0.75} % javadoc

\lstdefinelanguage{scala}{
  morekeywords={abstract,case,catch,class,def,%
    do,else,extends,false,final,finally,%
    for,if,implicit,import,match,mixin,%
    new,null,object,override,package,%
    private,protected,requires,return,sealed,%
    super,this,throw,trait,true,try,%
    type,const,var,while,with,yield},
  otherkeywords={=>,<-,<\%,<:,>:,\#,@,>,<},
  sensitive=true,
  morecomment=[l]{//},
  morecomment=[n]{/*}{*/},
  morestring=[b]",
  morestring=[b]',
  morestring=[b]"""
}
\lstset{
%   frame=tb,
  language=Scala,
  aboveskip=3mm,
  belowskip=3mm,
  columns=flexible,
  basicstyle=\ttfamily\small,
  keywordstyle=\color{javapurple}\bfseries,
  stringstyle=\color{javared},
  commentstyle=\color{javagreen},
  morecomment=[s][\color{javadocblue}]{/**}{*/},
  numbers=none,
  numberstyle=\tiny\color{black},
  stepnumber=2,
  numbersep=10pt,
  showspaces=false,
  showstringspaces=false,
  tabsize=4
}

\newcommand{\screenshot}[1]{\centerline{%
    \includegraphics[height=7.8cm,transparent]{#1}}}  % 7.8in

\title
  [Wollok: language + IDE]
  {Wollok: language + IDE for a gentle and industry-aware introduction to OOP}
\author[Passerini]{%
  Nicolás Passerini\inst{1} \and
  Fernando Dodino\inst{1,2,3} \\
  Javier Fernandes\inst{1} \and
  Pablo Tesone\inst{4} \and
  Carlos Lombardi\inst{1}
}  

\institute{
  \inst{1}Universidad Nacional de Quilmes \\
  \inst{2}Universidad Nacional de San Martin \\
  \inst{3}Universidad Nacional del Oeste \\
  \inst{4}Institut National de Recherche en Informatique et en Automatique.
}

\date[LACLO 2017]{\small Twelfth Latin American Conference on Learning Technologies\\
Universidad Nacional De La Plata -- Facultad de Informática\\
11/10/2017}
\subject{Computational Sciences}

%\logo{\includegraphics[height=1.0cm]{fsu_logo.pdf}}

\begin{document}
  \frame
  {
    \titlepage
  }

  \frame
  {
    \frametitle{Agenda}
    \tableofcontents
  }

\section{Introduccion}
\defverbatim[colored]\helloWorldJava{
\begin{lstlisting}[language=Java]
		package examples;
		
		public class HelloWorld {
			public static void main(String[] args) {
				System.out.println("Hello World");
			}
		}
\end{lstlisting}
}

\frame{
	\frametitle{Contexto}
	\begin{itemize}
	    \item Nos interesa la enseñanza de \textbf{programación con objetos}
	    \medskip
	    \item Principalmente en tecnicaturas e ingenierías
	    \begin{itemize}
    		\item es decir: futuros desarrolladores de software
	    \end{itemize}
	    \medskip
	    \item Fundamentalmente universitarios
	    \begin{itemize}
	    	\item Pero también estamos trabajando con secundarios
	    \end{itemize}
	\end{itemize}
}

\frame{
	\frametitle{Problema}
	\begin{itemize}
		\item Bajos niveles de aprobación
		\pause
		\item Suelen propagarse malas prácticas de programación
		\item Dificultades en la comprensión de los conceptos básicos
		\item Baja calidad del código producido
	\end{itemize}
	\pause
	\bigskip
	¿Por qué pasa eso?
	\begin{itemize}
		\item Capacidad de abstracción insuficiente
		\item Base matemática débil
	\end{itemize}
	\pause
	\bigskip
	Es nuestra responsabilidad cubrir esas falencias.
}

\frame{
	\frametitle{¿Por qué es difícil aprender OOP?}	
	\begin{itemize}
    \item Enfoque en un lenguaje particular
    \item Demasiados conceptos
    \medskip
    \helloWorldJava
    \pause
    \item \textbf{Entornos de desarrollo} limitados o inadecuados
    \item Aprender a programar exige \textbf{aprender a abstraer}
	\end{itemize}
}

\frame<0>[noframenumbering]{
	\frametitle{Introducción}
	\framesubtitle{Antecedentes}
	\includegraphics[width=9pt,
			 	height=9pt,natwidth=66pt,natheight=50pt]{images/ozono-icon.png}
	\textbf{Ozono} \hfill \texttt{\footnotesize
	\href{http://ozono.uqbar-project.org/}{http://ozono.uqbar-project.org/}}
	\begin{itemize}
		\item Basado en Smalltalk
		\item \textbf{Recorrido incremental}
		\\\hspace{2em} Metamodelo simplificado: sin clases ni herencia
		\\\hspace{2em} Foco en objeto - mensaje - referencia - polimorfismo
		\item Herramientas de visualización de código
		\\\hspace{2em} Diagramas de objetos / clases
	\end{itemize}
	
	\pause\bigskip
	\includegraphics[width=9pt,
			 	height=9pt,natwidth=313pt,natheight=365pt]{images/gobstones-icon.png}
	\textbf{Gobstones} \hfill \texttt{\footnotesize
	\href{http://www.gobstones.org/}{http://www.gobstones.org/}}
	\begin{itemize}
		\item Cuidadosa selección de los elementos sintácticos
		\item Elimina la necesidad de entrada-salida
		\item Separación entre elementos con efecto y elementos puros
	\end{itemize}
}

\frame{
	\frametitle{Propuesta pedagógica}
	\framesubtitle{Objetivos}
	\begin{itemize}
		\item \textbf{Inclusión}
		\\ Diseñar la currícula a partir de las características de los estudiantes.
		\medskip
		\item \textbf{Calidad}
		\\ A la vez que incrementar la calidad
		\medskip
		\item \textbf{Aplicabilidad}
		\\ Asegurando que los saberes impartidos sean aplicables en el ámbito profesional actual y futuro
		\medskip
		\item \textbf{Perspectiva futura}
		\\ Y liderando el desarrollo y la incorporación de nuevas ideas y tecnologías
	\end{itemize}
}

\frame{
	\frametitle{Propuesta pedagógica}
	\framesubtitle{Pilares}
	\begin{itemize}
		\item \textbf{Temario:} modernización de los conceptos enseñados
			\begin{itemize}
				\item Más alto nivel
				\item Visión integral del desarrollo de software
			\end{itemize}
		\item \textbf{Recorrido}
			\begin{itemize}
				\item Postergar los conceptos más abstractos y/o secundarios
				\item Priorizar la capacidad de diseñar
			\end{itemize}
		\item \textbf{Seguimiento personalizado}
			\begin{itemize}
				\item Ritmo de estudio guiado por el docente
				\item La \textbf{autonomía} como parte de los objetivos de la materia
			\end{itemize}
		\item Favorecer la \textbf{deducción} e \textbf{intuición}
		\pause
		\medskip
		\item Necesitamos \textbf{herramientas de soporte} para estudiantes y profesores
	\end{itemize}
}

\section{Wollok Language + IDE}
\frame{
	\frametitle{¿Qué es Wollok?}
	\framesubtitle{Introducción}
	\begin{itemize}
	 \item Lenguaje + muchas herramientas
	 \item Soporte para nuestro enfoque pedagógico
	 \item Cercano a las herramientas profesionales \emph{mainstream}
	\end{itemize}
	
	\begin{center}
		\begin{figure}
			\includegraphics[height=0.5\textheight,natwidth=701,natheight=310]{images/wollok-learning-path.png}
		\end{figure}
	\end{center}
}

\frame{
	\frametitle{¿Qué es Wollok?}
	\framesubtitle{Un entorno optimizado para la enseñanza}
	\begin{itemize}
		\item \textbf{Sintaxis} diseñada para la enseñanza 
			\begin{itemize}
			  \item selección de keywords (ej: \code{const}, \code{method})
			  \item \code{return} obligatorio
			  \item énfasis en objetos y mensajes \footnote {¡Aunque no todo es objeto-mensaje!}
			\end{itemize}
		\item \textbf{Reducir características poco adecuadas} a un principiante
			\begin{itemize}
				\item Constructores simplificados (proximamente)
				\item No tiene \textit{reflection}
				\item No usamos entrada / salida
			\end{itemize}
		\item Combina \textit{object-based} con \textit{class-based programming}
		\item \textit{Import system}
		\item Testing integrado
	\end{itemize}
}

\frame{
	\frametitle{¿Qué es Wollok?}
	\framesubtitle{Cuidado: No perderle pisada la evolución de las herramientas industriales}
	\begin{itemize}
		\item Ambiente de objetos \textbf{basado en archivos}
	    \smallskip
		\item \textbf{Sintaxis} concisa y "moderna"\\
		{\footnotesize Ej: lambdas, literales para colecciones, excepciones, constructores}
	    \smallskip
		\item \textbf{Sistema de tipos} \emph{pluggeable} (en proceso)
	    \smallskip
		\item Mixins
	    \smallskip
	    \item \textbf{Testeo} automático integrado.
	    \smallskip
	    \item \textbf{Versionado y trabajo en grupo} (básico, git).
	    \smallskip
	    \item \textbf{Debugger} (en proceso).
	\end{itemize}
}

%
% FEATURE AVANZADOS
%

\frame{
	\frametitle{Wollok IDE \textit{Core Features} -- \textit{Error reporting}}
	\vspace{-0.5cm}
	\begin{center}
    	\includegraphics[scale=0.45]{images/errorReporting.png}
	\end{center}
	\vspace{-0.25cm}
	\begin{itemize}
		\item Resalta los errores en el código y a medida que se escribe.
		\item Errores comprensibles para el estudiante.
		\item Internacionalizado.
		\item \textbf{Favorece la autonomía en el aprendizaje.}
	\end{itemize}
}

\frame{
	\frametitle{Wollok IDE \textit{Core Features} -- \textit{Content assist}}
	\vspace{-0.5cm}
	\begin{center}
    	\includegraphics[scale=0.45]{images/codeCompletion.png}
	\end{center}
	\vspace{-0.25cm}
	\begin{itemize}
		\item Guía al estudiante, mostrando opciones para continuar.
		\item Reduce la necesidad de memorizar sintaxis y \textit{APIs}.
		\item Evita errores de tipeo.
		\item \textbf{Permite concentrarse en cuestiones de más alto nivel.}
	\end{itemize}
}

\frame{
	\frametitle{Wollok IDE \textit{Core Features} -- Herramientas de visualización}
	\vspace{-0.5cm}
	\begin{center}
    	\includegraphics[scale=0.40]{images/outline.png}
	\end{center}
	\vspace{-0.5cm}
	\begin{itemize}
	    \item Diagramas estáticos automáticos y \textit{customizables}.
	    \item \textit{Outline}.
	    \item (Próximamente) diagramas dinámicos.
	    \item \textbf{Proveen una vista de más alto nivel del programa.}
	\end{itemize}
}

\frame{
	\frametitle{Wollok IDE \textit{Core Features} -- \textit{Quick Fixes}}
	\vspace{-0.5cm}
	\begin{center}
    	\includegraphics[scale=0.50]{images/wollok-paper-check-unusedVariable.png}
	\end{center}
	\vspace{-0.25cm}
	\begin{itemize}
	    \item Soluciones automatizadas para errores comunes.
	    \item Aceleran la resolución de problemas simples y/o secundarios.
	    \item Favorecen el \textit{Test Driven Development}.
	    \item Evita perder el foco de la tarea en curso.
	\end{itemize}
}

\frame{
	\frametitle{Wollok IDE \textit{Core Features} -- Tests integrados}
	\begin{center}
		\begin{figure}
			\includegraphics[width=1\textwidth,natwidth=1734,natheight=498]{images/tests.png}
		\end{figure}
	\end{center}
	\begin{itemize}
	    \item Se incorpora el testing como una parte esencial de la práctica de la programación.
	\end{itemize}
}

\frame{
	\frametitle{Wollok IDE \textit{Core Features}}
	\begin{itemize}
	    \item \textbf{Refactorings}
	    \\ Simplifican modificaciones sencillas al código, favoreciendo las metodologías de trabajo iterativas.
	    \smallskip
	    \item \textbf{Formateo automático}
	    \\ Ayuda al estudiante a incorporar buenas prácticas de organización espacial de código.
	    \smallskip
	    \item Soporte para editores livianos (Sublime) y web (Mumuki, otros en proceso)
	\end{itemize}
}

%
% WOLLOK GAME
%

\frame{
	\frametitle{Wollok Game}
	\begin{itemize}
		\item Permite construir pantallas interactivas muy sencillas
	    \smallskip
		\item Complementa al testeo unitario y consola interactiva
	    \smallskip
		\item Se evita la utilización de E/S
	    \smallskip
		\item Motivación en el aprendizaje fomentando la participación
	\end{itemize}

	\begin{center}
		\includegraphics[width=0.25\textwidth]{images/wollok-game-farmville.png}
		\hspace{2cm}
		\includegraphics[width=0.25\textwidth]{images/wollok-game-sokoban.png}	
	\end{center}
}

\section{Experiencia en el Aula}
\frame{
	\frametitle{Experiencia en el Aula}
	Los alumnos se apropian intuitivamente de las herramientas
	\begin{itemize}
		\item Integración class-based / object-based
		\item El REPL resulta más intuitivo que los workspaces de Smalltalk
		\item Mayor control sobre los tests unitarios
		\item Editores
	\end{itemize}
	\pause
	\medskip
	\begin{center}
		Un \textbf{recorrido incremental} apoyado en \textbf{herramientas} adecuadas,\\
		\pause
		permite aprovechar la \textbf{intuición} del estudiante\\
		\pause
		fomentando su \textbf{autonomía, creatividad y motivación}\\
	\end{center}
}


%\section{Próximos Pasos}
%\frame{
%	\frametitle{Próximos pasos}
%	Próximos Pasos
%	\begin{itemize}
%		\item Separación de void y nothing
%		\item Nuevos constructores
%		\item ... y muchas otras discusiones sobre la mejor sintaxis
%		\item \textit{Contract-based} programming
%	\end{itemize}
%	
%	Y muchas actividades para sumar más gente al proyecto.
%}

\frame{
  \frametitle{Muchas gracias}

  \hspace{6cm}
  \includegraphics[width=0.4\textwidth]{images/logo-fun.png}

  {\LARGE \vspace{-1.2cm} ¡Muchas Gracias!}

  \bigskip
  \medskip
  \begin{itemize}
  	\item Para saber más 
  	\\\url{www.wollok.org/}
  	\medskip
  	\item Para colaborar con el desarrollo 
  	\\\url{github.com/uqbar-project/wollok}
  	\medskip
  	\item Para participar en las discusiones
  	\\\url{groups.google.com/forum/\#!forum/wollok-docentes}
  \end{itemize}
}
\end{document}