\documentclass[12pt,a4paper,openright,oneside]{article}
\usepackage{amsfonts, amsmath, amssymb,latexsym,amsthm, mathrsfs, enumerate}
\usepackage[catalan]{babel}
\usepackage{epsfig}

\parskip=5pt
\parindent=15pt
\usepackage[margin=1.2in]{geometry}
\usepackage{graphicx}
%imatge entorn al text
\usepackage{wrapfig}
\usepackage[latin1]{inputenc}
%bibliografia
\usepackage{cite}
\usepackage{float}
%Pels annexos
\usepackage{appendix}
%Estil codi php
\usepackage{listings,xcolor}
\definecolor{dkgreen}{rgb}{0,.6,0}
\definecolor{dkblue}{rgb}{0,0,.6}
\definecolor{dkyellow}{cmyk}{0,0,.8,.3}

\definecolor{editorLightGray}{cmyk}{0.05, 0.05, 0.05, 0.1}
\definecolor{editorGray}{cmyk}{0.6, 0.55, 0.55, 0.2}
\definecolor{editorPurple}{cmyk}{0.5, 1, 0, 0}
\definecolor{editorWhite}{cmyk}{0, 0, 0, 0}
\definecolor{editorBlack}{cmyk}{1, 1, 1, 1}
\definecolor{editorOrange}{cmyk}{0, 0.8, 1, 0}
\definecolor{editorBlue}{cmyk}{1, 0.6, 0, 0}
\definecolor{editorPink}{cmyk}{0, 1, 0, 0}
\usepackage{upquote}
  
\definecolor{lightgray}{rgb}{.9,.9,.9}
\definecolor{darkgray}{rgb}{.4,.4,.4}
\definecolor{purple}{rgb}{0.65, 0.12, 0.82}

\lstdefinelanguage{JavaScript}{
  keywords={typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break},
  keywordstyle=\color{blue}\bfseries,
  ndkeywords={class, export, boolean, throw, implements, import, this},
  ndkeywordstyle=\color{darkgray}\bfseries,
  identifierstyle=\color{black},
  sensitive=false,
  comment=[l]{//},
  morecomment=[s]{/*}{*/},
  commentstyle=\color{purple}\ttfamily,
  stringstyle=\color{red}\ttfamily,
  morestring=[b]',
  morestring=[b]"
}

\lstdefinelanguage{HTML5}{
  language=html,
  sensitive=true,   
  alsoletter={<>=-+},   
  morecomment=[s]{<!-}{-->},
  tag=[s],
  otherkeywords={
  % General
  % >,
  % Standard tags
    <!DOCTYPE,
  </html, <html, <head, <title, </title, <style, </style, <link, </head, <meta, />,
    % body
    </body, <body,
    % Divs
    </div, <div, </div>, 
    % Paragraphs
    </p, <p, </p>,
    % scripts
    </script, <script,
  % More tags...
  <canvas, /canvas>, <svg, <rect, <animateTransform, </rect>, </svg>, <video, <source, <iframe, </iframe>, </video>, <image, </image>,
  <tbody>, <tr, <tr>, <td, <td>, <h3>, </h3>, <h4>, </h4>,<label, <table, <table>, <span, <strong>, </span>, </strong>, submit, radio, select,
  </label>
  },
  ndkeywords={=,
  % General
  +=,
  % HTML attributes
   charset=, src=, id=, width=, height=, style=, type=, rel=, href=,
  % SVG attributes
  fill=, attributeName=, begin=, dur=, for=, from=, to=, poster=, controls=, x=, y=, repeatCount=, xlink:href=,
  % CSS properties
  margin:, padding:, background-image:, border:, top:, left:, position:, width:, height:,
    % CSS3 properties
  transform:, -moz-transform:, -webkit-transform:,
  animation:, -webkit-animation:,
  transition:,  transition-duration:, transition-property:, transition-timing-function:,
  },
}

\lstset{
   language=JavaScript,
   alsolanguage=HTML5,
   backgroundcolor=\color{lightgray},
   extendedchars=true,
   basicstyle=\footnotesize\ttfamily,
   showstringspaces=false,
   showspaces=false,
   numbers=left,
   numberstyle=\footnotesize,
   numbersep=9pt,
   tabsize=2,
   breaklines=true,
   showtabs=false,
   captionpos=b
}
  
\setcounter{page}{0}


\numberwithin{equation}{section}
\newtheorem{teo}{Teorema}[subsubsection]
\newtheorem*{teo*}{Teorema}
\newtheorem*{prop*}{Proposició}
\newtheorem*{corol*}{Corol·lari}
\newtheorem{prop}{Proposició}[subsubsection]
\newtheorem{corol}{Corol·lari}[subsubsection]
\newtheorem{lema}{Lema}[subsubsection]
\newtheorem{defi}{Definició}[subsubsection]
\newtheorem{nota}{Notació}

\theoremstyle{definition}
\newtheorem{prob}{Problema}
\newtheorem*{sol}{Solució}
\newtheorem{ex}{Exemple}
\newtheorem{exs}{Exemples}
\newtheorem{obs}{Observació}
\newtheorem{obss}{Observacions}

\def\qed{\hfill $\square$}

\newcommand{\co}[1][\texttt]{#1}

%per les figures \imatge{0.75}{mostra.png}{titol}{ref}
%mida lletra caption
%http://tex.stackexchange.com/questions/86120/font-size-of-figure-caption-header
\usepackage[font=scriptsize,labelfont=bf]{caption}
\newcommand{\imatge}[4]{\begin{figure}[h!]
    \centering
    \includegraphics[width=#1\textwidth]{imatges/#2}
    \caption{#3}
    \label{fig:#4}
	\end{figure}}
\renewcommand{\refname}{Bibliografia}
%evitar sangria a partir del segon paragraf
\setlength{\parindent}{0ex}
%Annexos
\renewcommand{\appendixname}{Annexos}
\renewcommand{\appendixtocname}{Annexos}
\renewcommand{\appendixpagename}{Annexos}

%Taula pels casos d'us
\newcommand\addmulrow[3]{
	\, & \, \\[-2mm]%salt de linia mes petitet
	\textbf{#1}  & \begin{minipage}[t]{0.77\textwidth}
  					  \begin{enumerate} 
  					  %comencem a enumerat partir del #2
  					  \setcounter{enumi}{#2}
  					  #3
  					 \end{enumerate} 
  				 \end{minipage} \\
    \, & \, \\ \hline }

\newcommand\addrow[2]{ 
 \, & \, \\[-2mm] %salt de linia mes petitet
\textbf{#1} 
  & #2 \\[2mm] \hline }
\usepackage{longtable}

% Diagrama de seqüències
\usepackage{tikz}
\usepackage{pgf-umlsd}
\usepgflibrary{arrows} % for pgf-umlsd
\usepackage{tikz-uml} 

%simbol d'euro \euro \, 
\usepackage{eurosym}
%figures consecutives
\usepackage{subfig}


%Simbols en els peus de pagina
%instead of num you can put the number of the symbol you like:
%http://tex.stackexchange.com/questions/826/symbols-instead-of-numbers-as-footnote-markers?lq=1
%1   asterisk    *   2   dagger  ?   3   double dagger   ?
%4   section symbol  §   5   paragraph   ¶   6   parallel lines  \\
%7   two asterisks   **  8   two daggers ??  9   two double daggers  ??
\renewcommand{\thefootnote}{\fnsymbol{footnote}}
%  $\dagger$ $\star$
%bibliografia
%\usepackage[style=authoryear-comp,natbib]{biblatex}
%\bibliography{bibliografia.bib} 
%\usepackage[style=authoryear,backend=biber]{biblatex}
%\addbibresource{bibliografia.bib}

%footref
\usepackage{scrextend}
%enumrate 1.1
\renewcommand{\theenumii}{\arabic{enumi}.\arabic{enumii}}
\renewcommand{\labelenumii}{\theenumii}

%Hiperlinks
\usepackage{hyperref}
\hypersetup{
    colorlinks=true,
    linkcolor=blue,
    filecolor=magenta,      
    urlcolor=cyan,
}
 
\urlstyle{same}
\newcommand{\web}[1]{\href{#1}{\texttt{#1}}}
% --------------------------------------------------
\usepackage{fancyhdr}

\fancyhf{}
\newcommand{\titol}{Integració d'un sistema open-source de gestió de continguts per a la organització de congressos}
\lhead{}
\lfoot{\footnotesize{Autor: Arnau Sánchez Farreras}}
\rhead{\scriptsize{Treball final de grau: \titol}}
\cfoot{}
\rfoot{\thepage}

\begin{document}

\bibstyle{plain}

\thispagestyle{empty}

\begin{titlepage}
\begin{center}
\begin{figure}[htb]
\begin{center}
\includegraphics[width=6cm]{imatges/ub_color.pdf}
\end{center}
\end{figure}

\textbf{\LARGE Treball final de grau} \\
\vspace*{.5cm}
\textbf{\LARGE GRAU D'ENGINYERIA INFORMÀTICA } \\
\vspace*{.5cm}
\textbf{\LARGE Facultat de Matem\`atiques \\ Universitat de Barcelona} \\
\vspace*{1.5cm}
\rule{16cm}{0.1mm}\\
\begin{Huge}
\textbf{\titol} \\
\end{Huge}
\rule{16cm}{0.1mm}\\

\vspace{1cm}

\begin{flushright}
\textbf{\LARGE Autor: Arnau Sánchez Farreras}

\vspace*{2cm}

\renewcommand{\arraystretch}{1.5}
\begin{tabular}{ll}
\textbf{\Large Directors:} & \textbf{\Large Dr. Eloi Puertas Prats } \\
,\ & \textbf{\Large i Sr. Raül Fernàndez Hernàndez } \\
\textbf{\Large Realitzat a:} & \textbf{\Large  Departament Matemàtiques i Informàtica   } \\
 & \textbf{\Large Departament d'Ensenyament} \\
 & \textbf{\Large \, \, \, \, \, \, \, \, \, \, \, \,de la Generalitat} \\
\\
\textbf{\Large Barcelona,} & \textbf{\Large \today }
\end{tabular}

\end{flushright}

\end{center}


\end{titlepage}


\newpage
\pagenumbering{roman} 

\section*{Abstract}

Recently, educators have produced a huge amount of activities, projects, conferences, talks and workshops in the field of mathematics. As a result, FEEMCAT\footnote[4]{\label{note1}Federació d'Entitats per a l'Ensenyament de les matemàtiques a Catalunya} has been put on guard and felt the need to compile all this teaching experience in a congress so as to share experiences and discuss the future of the teaching of mathematics.

My final year project work is about the computer tools that have been used by congress organizers, including registration protocols, submission of essays and the administration of events and accreditations. I have carried out this project having in mind the philosophy of the organizers and teacher experience, who are sympathetic to the use of free software.

\section*{Resum}

L'acumulació d'activitats, tallers, experiències, projectes, conferències, seminaris... en l'entorn educatiu i en l'àmbit matemàtic en els últims any ha posat en guàrdia FEEMCAT, que ha vist la necessita de recollir tota aquesta efervescència docent en un congrés per tal de compartir experiències i debatre les línies futures de l'educació matemàtica.

Aquest treball final de grau tracta de les eines informàtiques s'han fet servir per ajudar als organtizadors del congrés, posant especial èmfasi en la gestió d'inscripcions, el control d'enviament de treballs per part dels participants i l'administració d'esdeveniments i acreditacions.
Tot plegat seguint la mateixa filosofia que transmeten els organitzadors i d'acord amb unes regles no escrites dels docents i afins al programari lliure.

\newpage 

\section*{Agraïments}

Vull manifestar la meva gratidud a l'Eloi Puertas per pensar que podia ajudar en aquest projecte, al Raül Fernàndez per la seva paciència a l'hora de veure l'enèssim error de programació. Tots dos m'han transmés confiança i suport, vitals en molts punts allà on m'he sentit bloquejat.

No vull deixar d'agraïr a la meva dona que ha hagut de suportar escaquejos de feines familiars durant aquest temps i a la meva filla per demostrar-me que puc treballar fins i tot per les nits.

\newpage

\renewcommand{\contentsname}{Llista de continguts}
\tableofcontents 

%\listoffigures
 
%\listoftables

\newpage

\pagestyle{fancy}
\pagenumbering{arabic} 
\setcounter{page}{1}

\section{Introducció}

Cada congrés té les seves necessitats, ja sigui per la temàtica, el públic a qui va dirigit, tipus de continguts, espais,... Així que per molt que ja hi hagi al mercat opcions que permètin una gestió de mínims d'aquests, no cobreixen tots els desitjos dels responables del \texttt{C2EM}. Aquest \textit{Treball Final de Grau} pretent confirmar aquest fet i ajudar a assolir les necessitats d'aquests a partir dels objectius generals:
\begin{enumerate}
	\item Implementar el màxim de requiments demanats i especificats en l'annex \ref{sec:req} i que ren resum són:
	\begin{enumerate}
		\item L'usuari es pugui inscriure i pagar amb tarjeta de crèdit online
		\item L'administrador pugui controlar els pagaments
		%Gestió d'inscripcions i pagaments online \label{ges1}
		%\item L'usuari pugui enviar documentació
		\item El sistema gestioni la documentació enviada pels usuaris des del portal
		%Gestió d'enviament de treballs a través de la web\label{ges2}
		\item Gestió de la planificació 
		\item Gestió de reserves de tallers i activitats que durant el congrés
		\item Gestió de l'acreditació dels participants
		\item Implementar-ho duran el primer semetre de l'any 2016
	\end{enumerate}
	\item Arribar al màxim de les demandes no funcionals següents:
	\begin{enumerate}
	  \item Utilitzar software lliure aprofitant al màxim codi de tercers
	  \item Facilitat d'ús del programari i la seva configuració per un administrador 
	  \item Estalviar que l'usuari hagi de fer un nou aprenentatge amb aquest nou programari
	  \item Evitar al màxim la interacció entre l'usuari i l'entorn web.
	\end{enumerate}

\end{enumerate}

A més, en aquesta memòria es reflectirà com s'ha arribat a la majoria d'aquest objectius a partir dels apartats:
\begin{itemize}
	\item \textsf{Anàlisis}, amb els requisits demanats i els conseqüents rols necessaris i els casos d'ús que s'en desprenen
	\item \textsf{Disseny}, on s'hi explica les taules necessitades, feines de tercers aprofitades, adaptades o creades de zero.
	\item \textsf{Implementació}, apartat dedicat a l'explicació de com es portar a terme tot plegat. 
	\item \textsf{Resutats} obtinguts amb les dades reals de la web 
	\item \textsf{Conclusions} amb un resum dels objectius complerts
	\item En l'\textsf{annex}, entre altres coses, s'hi pot trobar explicacion més extesses o ampliacions de seccións.
\end{itemize}



\newpage
\section{Antecedents al congrés}

Els organitzadors\footnote[4]{FEEMCAT, \web{http://feemcat.org/}} ja tenen l'experiència de coordinar les \texttt{XIV} JAEM,  un congrés similar però d'àmbit espanyol al 2009. En aquella ocasió es va fer servir \texttt{Joomla!} davant les alternatives \texttt{Drupal} i \texttt{WordPress} per considerar que oferia un millor ventall d'extensions i una gestió excel·lent d'usuaris i permisos. En canvi, per al \textsl{C2EM}, van inclinar-se per \texttt{WordPress} més amigable, amb més extensions que \texttt{Joomla!} i, sobretot, per la gestió de \texttt{themes}, les plantilles per canviar l'aparènça del web.

Tot i no influenciar en la elecció del \texttt{WordPress} com a base web per la gestió del congrés, es considera la millor opció entre totes les del mercat ja que com a careterístiques particulars té:

\begin{itemize}
	\item És un programari lliure
	\item User-friendly, i.e., l'usuari el troba còmode al fer servir aquesta plataforma i hi confia
	\item És el mateix \texttt{CMS} que el \textsl{Departament d'Educació} ha escollit per oferir als institut com a portal web
	 \footnote[4]{\web{http://agora.xtec.cat/demoinstitut/}} \footnote{\href{https://github.com/projectestac/agora_nodes}{https://github.com/projectestac/agora\textunderscore nodes}}
	\item Hi ha molta informació disponible a l'abast de qualsevol que hi vulgui dedicar un mínim d'atenció i per tant no es depengui d'un professional absolut del tema
	\item És responsive, sent adaptat a tota mena de dispositius com mòbils i tablets 
	\item Hi ha una gran varietat d'extensions (\texttt{plugins})  que poden modelar el comportament del portal
	\item Flexibilitat per adaptar els \texttt{plugins} a les nostres necessitats
	\item Facilitat per alterar l'aparènça del lloc web a partir del \texttt{themes}, la majoria gratuïts i amb molta varietat
	\item Es disposa del 100\% del control del host on s'allotja la web
	\item Actualitzacions senzilles i constants
\end{itemize}

Si es compara amb els dos gestors de continguts mencionats, \texttt{Joomla!} i \texttt{Drupal}, no tenen ni la meitat dels punts anteriors amb coincidència, tot i guanyar en robustesa (\texttt{Drupal}) o en la gestió (\texttt{Joomla!}). A més, han perdut popularitat d'ús al llarg del temps en detriment de \texttt{WordPress}.

Per altra banda, les opcions que hi ha de paquest informàtics especialitzats en congrés tampoc han convençut:
\begin{enumerate}
	\item \texttt{OpenConference System}\footnote{\web{https://pkp.sfu.ca/ocs/}} es descarta ja que tot i ser lliure, requereix un alt aprenentatge per part dels organitzadors. Es pot disposar d'un manual a \cite{ocs} o llegir una experiència del seu ús per a un congrés a \cite{ocse}
	\item \texttt{EasyChair}, a part de ser de pagament, no es pot moldar als interessos d'un i l'allotjament del host no és pròpi.
\end{enumerate}
 
\section{Planificació}
 
En la primera reunió, el divendres 15 de gener del 2016, amb Eloi Puertas, en Raül Fernàndez i en Sergi Muria, em van explicar  la idea del projecte que necessitaven:
	\begin{enumerate}
		\item Per un costat, els requisits els quals ja es trobaven  indicats en un document (Annex \ref{sec:req}).
		\item En aquell moment no quedava clar si es trobaven en ordre de prioritats però es posava èmfasi en el plugin d'inscripcions i la manera de fer pagament a través TPV.
		\item Tot i que el congrés començava  l'11, 12 i 13 de juliol, al llarg del treball es tenien que anar implementant funcionalitats.
El projecte ja es va adjudicar a un altre alumne però en un punt va declinar seguir-lo fent, pel contrari al què sembla, no vaig poder aprofitar res.
	\end{enumerate}
	
\subsection{Estat inicial del projecte}

Els coneixements del coordinador de la comissió WEB en l'àmbit informàtic del Congrés, Raül Fernàndez Hernàndez, han fet que em  trobés en una sèrie d'estats del projecte ja avançat o feines que no calia que fes com:

\begin{itemize}
  \item Comprar del domini 
  \item Contractar un hosting amb el requisits per montar un \texttt{WordPress}
  \item Instal·lació del \texttt{WordPress}
  \item Configuració inicial i gestió de la plantilla \texttt{WordPress} 
  \item Manteniment de les còpies de seguretat del lloc web
\end{itemize}
 
\subsection{Metodologia }

En un principi es volia utilitzar el \texttt{github} com a eina de control de feina tan per part per mantenir un control de les versions dels fitxers creats, com per administrar els diferents requeriments. Però al dubtar de si es pujarien dades confidencials, he descarta aquesta opció ja que la versió gratuïta deixa públiques totes les pujades. 

L'alternativa escollida ha estat \texttt{bitbucket}, on el concepte és el mateix però he pogut estar més tranquil al saber que els arxius penjats eren privats fins que es digui el contrari.
 
A partir del requisits que marcava el document de l'Annex \ref{sec:req}, es van desglossar en issues per tal de poder fer un seguiment més acurat de la feina, aquestes han quedat enregistrades al \texttt{bitbucket}. l'entorn que ofereix aquest web és recomanable per tal de sincronitzar-se i portar un bon control del procés de feina.

Els issues més importants  s'han anat aclarint amb en Raül ja sigui via telemàtica, telefònica o presencial, clau per saltar entrebancs o millorar funcionalitats. 
La retroacció de cada funcionalitat que s'anava tancant es feia bàsicament pel mateix \texttt{bitbucket}, on es reobria la issue o se'n creava una de nova en el cas que fos rellevant per ser important de per si.

%La corba d'aprenentatge a esta seguint el teorema de Pareto, on el 80\% de l'esforç dedicat només omplia un 20\% dels requisits, però entrant en la recta final del projecte, s'han girat les tornes, i un 20\% de l'esforç es beneficiava un 80\% de les feina.

El primer que es feia al començar un requisit era comprovar que no hi hagués un plugin que ja estigués implementat. Si no trobava el 100\% del que es volia, l'adaptava a les nostres necessitats.
 
\subsection{Dedicació al projecte}

\imatge{1}{plan.png}{Dedicació al projecte}{plan}

\section{Anàlisis}
\subsection{Requisits}

A partir dels requisits que es tenien ben clars des del principi i força desglossats en subtasques (Annex \ref{sec:req}), s'han resumit en 5 blocs:


\subsubsection*{Gestió d'inscripcions i pagaments}

La metodologia de les incripcions i pagaments han vingut forçades pels dos plugins que ja es trobaven instal·lats en el moment d'agafar el projecte i els quals, sense fer cap estudi previ, s'ha confiat en que eren els millors per a tal efecte, les extensions són \texttt{Contact Form 7} (secció \ref{sec:cf7p}) i \texttt{Contact Form DB} (secció \ref{sec:cfdbp}).

El primer, com genera formularis d'una manera molt còmode, compleix amb el requisit d'usabilitat acceptable per un no desenvolupador; el segon, per emmagatzemar en una taula interna el què s'envia pels formularis. Ambdos junts resulten ideals per portar a termer el poder inscriure els usuaris i que paguin en el moment

El procediment de pagament es té que fer per la plataforma \texttt{RedSys} (Veure Annex \ref{sec:redsys} per ampliar informació del seu us) ja que les alternatives de pagament
cobren una quantitat molt alta de comissió (en l'annex \ref{sec:pag} pàgina \pageref{sec:pag} hi ha una comparativa). 

En quan a temes de factura, l'usuari inscrit i que ha fet un pagament ha de poder crear un rebut  (secció \ref{sec:rebuts}).

S'ha de remarcar que un usuari registrat ha de poder pagar la d'un altre ja subscrit.

\subsubsection*{Gestió d'enviament de treballs}

Des d'uns formulari bàsic, s'envïin les aportacions per part d'alguns usuaris inscrits en diferents fitxers i aquests es pugin a un compte de \texttt{Google Drive} amb una estructura de directoris determinada.

En els intents i opcions per assolir aquest requisit, no s'ha pogut trobar cap plugin de \texttt{WP} (En l'Annex \ref{sec:fit} hi ha els intents amb algun plugin), ni adaptant-ne un. Finalment s'ha aconseguit amb les eines de \texttt{Goolge App Script}(secció \ref{sec:envfit}).

\subsubsection*{Gestió de la planificació}

La idea incial que es volia de la planificació s'ha gairebé anul·lat pel fet que el plugin \texttt{Event Manager} (secció \ref{sec:em}) gestiona d'una altra manera però ampliant opcions tal com la reserva de tallers i activitats, només hi falta adaptar les necessitats de que l'usuari no s'apunti a més d'una activitat especial i que el calendari només mostri els tres dies que dura els congrés.


\subsubsection*{Gestió de l'acreditació}

Pel què fa a com controlen les acreditacions, com es volia comprovar les assistències posteriorment a l'esdeveniment, s'ha canviat a que es llegirà l'acreditació en forma de \texttt{QR} tant en la recepció del primer dia del congrés com en cada esdeveniment i es validarà \textsl{insitu} si l'usuari s'ha presentat.

\subsection{Conceptes del \texttt{WordPress}}

Sense entendre els següents conceptes, un perd l'essència del \texttt{WordPress} i el motiu pel qual cada cop és més reconegut en tots el sentits i que són claus en l'actual projecte.

\subsubsection*{Plugins}

Anomenats també extensions o complements.
Són paquets de codi que amplien la funcionalitat de \texttt{WP} i que s'instal·len de manera fàcil des del taulell d'administrador. En el moment de fer aquesta memòria, se'n disposava de $45242$ segons la pàgina oficial\footnote{\web{https://es.wordpress.org/plugins/}}.

\subsubsection*{Hooks}

Són connexións que gestiona el \texttt{WordPress} i que permeten accedir a zones de codi del propi nucli de \texttt{WP} o d'altres Plugins sempre i quan estiguin configurats per a tal efecte.
Es poden declara tant en el fitxer \texttt{function.php} del tema que treballa el WP com en un plugin, que és com s'ha escollit.

Hi ha dos tipus: \texttt{accions} i \texttt{fitres}; i tots dos permeten executar noves funcions en el lloc on estan definides alterant el procés de lectura del codi. Els \texttt{filtres},  a més, estan pensants per modificar la informació de sortida.

En la web \cite{hooks} tenim la llista de \texttt{hooks} que disposa el \texttt{plugin} \texttt{Contact Form 7} com a tall d'exemple.

\subsubsection*{Option}

Per desar informacó com a variables globals i utilitzar-les entre diferents plugins o funcions, \texttt{WordPress} ofereix aquesta estandarització d'emmagatzemar dades. \footnote{\href{https://codex.wordpress.org/Options_API}{https://codex.wordpress.org/Options\textunderscore API}}

Tot i que en un principi s'ha volgut utilitzar en el pluguin de pagaments, s'ha descartat per evitar ascrinonies en dades delicades.

\subsubsection*{Rols i capacitats}

Un \texttt{rol} es pot entendre com un \textit{grup} on pots anar afegint usuaris, i cada \textit{grup}, té un sèrie de \textit{permisos}, que \texttt{WP} anomena \texttt{capacitats}.

En el moment de la instal·lació, hi ha creats els \texttt{rols} d'\texttt{administrador}, \texttt{Editor}, \texttt{Autor}, \texttt{Col·laborardor} i \texttt{Subscrit} i les seves \texttt{capacitats} són les que intuïtivament es necessitarien per gestionar un \texttt{blog}.

Per entendre els \texttt{rols} que \texttt{WP} crea per defecte es pot llegir el post: \cite{rols}.


\subsubsection*{Themes}

Un tema, theme o plantilla és el \textit{look\&feel} de la pàgina web. No afecta al comportament d'aquesta sinó com l'usuari percep la informació. 
La elecció i instal·lació ja venien fetes per part del coordinador web del \textsl{C2EM}.

\subsubsection*{Shortcode}
Un \texttt{shortcode} en \texttt{WordPress} és un tros curt de codi pensat per afegir en cos d'una pàgina article o giny i que està vinculat a una funció escrita en PHP. Depenen de com es trobi implementada, se li poden passar paràmetres.


\subsection{Rols dels congrés}

\begin{wrapfigure}{r}{0.45\textwidth} %this figure will be at the right
    \centering
    \includegraphics[width=0.45\textwidth]{imatges/piramide_rols_wp.png}
    \label{fig:rols}
    	\caption{Piràmide els rols}
\end{wrapfigure}
Al llarg del procés han anat apareixen derivats dels \texttt{rols} que hi ha per defecte.

Els creats per al congrés són:

\begin{itemize}
	\item \texttt{Inscrit}: Assignat a tot usuari \texttt{subscrit} i que ha fet el pagament (i diferent de 30\euro \, ) correctament. És un \texttt{rol} que deriva del \texttt{subscrit} però que se l'hi permetrà accedir a llegir pàgines puntuals i a l'entrada del menú associat.
	\item \texttt{Inscrit-30}: Assignat a l'usuari \texttt{subscrit} i que ha fet el pagament de 30\euro \, correctament (sessió matinal). Els privilegis deriven de l'\texttt{inscrit}, però se li retira la opció de triar els tallers o triar la sortida del dimarts per la tarda.
	\item \texttt{Acreditor}: És independent de qualsevol altre (tot i que es similar al \texttt{subscrit}) i la seva única finalitat serà la de permetre accedir a la pàgina per poder acreditar als usuaris.
\end{itemize}

Tots els rols estan encaixats de manera piramidal en quan a graus de capacitats a excepció de \texttt{Acreditor} per ser molt simple.

%\imatge{0.45}{piramide_rols_wp.png}{Piràmide els rols}{rols}

\subsection{Casos d'ús}

En la \textit{figura \ref{fig:cu}} només s'especifiquen els casos d'ús que s'han hagut de crear o modificar. Els casos d'us relacionat amb la planificació per exemple, s'han omés per estar ben representats amb el plugin \texttt{Events Manager}

\begin{figure}[h!]
\begin{tikzpicture}
\begin{umlsystem}{}

\umlactor[x=-1]{Usuari} 
\umlactor[x=-1, y=-2]{Acreditor} 
\umlactor[x=-1, y=-4]{Administrador}
\umlactor[x=14, y=1]{Subscrit} 
\umlactor[x=14, y=-2]{Inscrit-30} 
\umlactor[x=14, y=-5]{Inscrit}

\umlusecase[x=3, y=0]{Inscriure's} 
\umlusecase[x=10]{Fer un pagament} 
\umlusecase[x=10,y=-2]{Descarregar rebut}
\umlusecase[x=9,y=-4]{Triar una única activitat}
\umlusecase[x=10,y=-6]{Fer una aportació}
\umlusecase[x=3,y=-2]{Veure acreditacions}
\umlusecase[x=3,y=-4]{Afegir QR}
\umlusecase[x=3,y=-8]{Gestionar pagaments}
\umlusecase[x=3,y=-10]{Modificar pagament}
\umlusecase[x=10,y=-8]{Validar pagament}
\umlusecase[x=3,y=-6]{Classificar Aportacions}

\umlassoc{Usuari}{usecase-1} 
\umlassoc{Subscrit}{usecase-2} 
\umlassoc{Inscrit-30}{usecase-3} 
\umlassoc{Inscrit}{usecase-4} 
\umlassoc{Inscrit}{usecase-5} 
\umlassoc{Acreditor}{usecase-6} 
\umlassoc{Administrador}{usecase-7} 
\umlassoc{Administrador}{usecase-8} 
\umlassoc{Administrador}{usecase-11} 

%\umlassoc{Inscrit-30}{usecase-3}

\umlinherit{Inscrit-30}{Subscrit} 
\umlinherit{Inscrit}{Inscrit-30} 
\umlinclude[name=incl]{usecase-2}{usecase-1} 
\umlextend{usecase-9}{usecase-8} 
\umlextend{usecase-10}{usecase-8} 
\end{umlsystem}

\end{tikzpicture}
\caption{Diagrama Casos d'ús}
\label{fig:cu}
\end{figure}

\newpage

\subsection{Casos d'ús textuals   }

A continuació es mostren els casos d'us textuals més rellevants.

\subsubsection*{CU1-Inscriure's}
\begin{longtable}{||lp{0.77\textwidth}||}
 \hline
%\addrow{Descripció :}{CU1-Inscriure's}
\addrow{Resum :}  { Resgitrar-se al sistema per disposar de les seves dades i tenir la opció de pagar en el mateix moment  }
\addrow{Actors :} {Ususari no registrat  }
\addrow{Precondicions :}{L'administrador ha d'haver creat un formulari en \texttt{CF7} a tal efecte (anomenat per exemple \texttt{incripcions}) i l'usuari s'ha de trobar en la pàgina per inscriure's }
\addmulrow{Flux bàsic:}{0}{
	\item El sistema mostra una formulari a omplir. De tots els camps, els més importants són \texttt{NIF} i correu electrònic 
	\item L'usuari entra la informació que se li demanen sobre les dades personals 
	\item L'usuari, de l'apartat de pagament, escull no pagar en el moment.
	\item El sistema comprova que el \texttt{NIF} tingui 8 xifres i la lletra li correspongui, que el correu electrònic en sigui un i el \texttt{NIF} no es trobi en la base de dades de registrats.
	\item El sistema crea un nom d'usuari amb el \texttt{NIF} propocionat i una constresseña aleatòria de 12 caràcters i el registre amb rol \texttt{subcriber}.
	\item El sistema dona un avís que s'ha creat l'usuari satisfactoriament
	\item El sistema envia un correu a l'usuari amb el nom d'usuari i contrasenya creats.
	\item El sistema envia un correu a l'usuari amb la informació per pagar posteriorment
	\item Finalitza el cas d'us
	}
\addmulrow{Flux alternatiu:}{3}{
	\item L'usuari introdueix un NIF erroni o el correu electrònic o el NIF ja existeixen
	\item Es torna al pas 1 del flux bàsic
	\item El sistema dona una avís del què està malament 
	\item Finalitza el cas d'us
	}
\addmulrow{Flux alternatiu:}{2}{
	\item L'usuari, de l'apartat de pagament, escull pagar amb targeta
	\item Pas 4 i 5 del flux bàsic
	\item El sistema llança un prompt avisant que s'ha creat amb èxit l'usuari al sistema
	\item Pas 7 del flux bàsic
	\item Seguir amb el pas 4 del flux bàsic del \texttt{CU2-Pagament inscrit}(\textit{taula \ref{tab:CU2} pàgina \pageref{tab:CU2}})
	\item Finalitza el cas d'us 
}
\addrow{Postcondicions:} {Hi ha d'haver un DNI creat com a usuari de \texttt{WordPress} amb rol \texttt{subcriber} i un registre amb un codi únic indicant que l'usuari està pendent de pagament}
	\caption{CU1 - Registrar-se}
\label{tab:CU1}
\end{longtable}

\subsubsection*{CU2-Pagament amb targeta}
\begin{longtable}{||lp{0.77\textwidth}||}
 \hline
%\addrow{Descripció :}{CU2-Pagament amb targeta}
\addrow{Resum :}  { Fer un pagament amb targeta }
\addrow{Actors :} {Subscrit}
\addrow{Precondicions :} {L'administrador ha d'haver creat un formulari en \texttt{CF7} a tal efecte (anomenat per exemple \texttt{pagaments}). L'usuari subscrit s'ha de trobar en la pàgina de pagament }
\addmulrow{Flux bàsic:}{0}{
	\item 	El sistema mostra un formulari amb el camp \texttt{NIF} a omplir i les opcions dels preus a pagar 
	\item L'usuari introdueix el \texttt{NIF} i escull el preu a pagar
	\item El sistema desa el preu pagat sense confirmar
	\item El sistema redirigeix a la pasarel·la de pagament amb targeta \texttt{Redsys}
	\item L'usuari introdueix les dades de la targeta a pagar correctament
	\item La passarel·la de pagament dona la confirmació del pagament al sistema
	\item El sistema actualitza el registre de l'usuari confirmant el pagament, registrant el preu pagat  canviant el rol de \texttt{subcriber} a \texttt{inscrit} o \texttt{inscrit-30} segons si ha pagat 30\euro \, o no
	\item L'usuari clica a continua en la web de la passarel·la de pagament
	\item La passarel·la de pagament redirigeix a una pàgina de confirmació del pagament del sistema
	}
\addmulrow{Flux alternatiu:}{2}{
	\item L'usuari introdueix un NIF erroni o el NIF ja existeix
	\item Es torna al pas 1 del flux bàsic
	\item El sistema dona una avís del què està malament 
	\item Finalitza el cas d'us 
	}

\addrow{Postcondicions :} { El sistema té marcat que l'usuari ha pagat i la seva quantitat. L'usuari té el rol canviat a \texttt{inscrit} o \texttt{inscrit-30}}
	\caption{CU2-pagament amb targeta}
\label{tab:CU2}
\end{longtable}

\subsubsection*{CU3-Modificar pagaments \label{doc:modpag}}
\begin{longtable}{||lp{0.77\textwidth}||}
 \hline
%\addrow{Descripció :}{CU3-Modificar pagaments}
\addrow{Resum :}  {Modificar els pagaments que han fet els usuaris subscrits o inscrits}
\addrow{Actors :} {Administrador}
\addrow{Precondicions :} { ser administrador i trobar-se en la pàgina que internament té el shortcode \texttt{[c2em\textunderscore update\textunderscore preu form\textunderscore name=``inscripcio'' field\textunderscore names=``camp1;camp2;camp3"]}. Ha d'existir el formulari amb el nom que es posa en el camp \texttt{form\textunderscore name}}
\addmulrow{Flux bàsic:}{0}{
	\item El sistema mostra una taula-formulari de dues columnes com a mínim: \texttt{preus} i \texttt{comprovar\textunderscore tresorer}
	\item L'usuari canvia les files que vulgui segons les opcions del combo de la columna \texttt{preus}
	\item El sistema mostra el botó actualitzar
	\item L'usuari clicar al botó actualitzar
	\item El sistema actualitza el camp \texttt{preus} i \texttt{comprovar\textunderscore tresorer} de les files que hi ha hagut canvis
	\item Es torna al pas 1 amb un missatge conformirmant  s'ha fet la modificació.
	}
\addrow{Postcondicions :} { El sistema té marcat la confirmació que l'usuari ha pagat i la seva quantitat, l'usuari té el rol canviat a \texttt{inscrit} o \texttt{inscrit-30}}
	\caption{CU3-Modificar pagaments}
\label{tab:CU3}
\end{longtable}

\subsubsection*{CU4-Enviament de fitxers}

\begin{longtable}{||lp{0.77\textwidth}||}
 \hline
%\addrow{Descripció :}{CU4-Enviament de fitxers}
\addrow{Resum :}  {L'usuari enviar fitxers per tal que es desin al sistema i aquest els classifiqui}
\addrow{Actors :} {Usuari inscrit}
\addrow{Precondicions :} {L'usuari inscrit ha d'estar loguejat i s'ha de trobar en la pàgina del formulari d'enviament de fitxers\footnote[4]{En el fitxer \texttt{codis/formulari\textunderscore enviament\textunderscore fitxers\textunderscore cf7.txt} hi ha un exemple}}
\addmulrow{Flux bàsic:}{0}{
	\item El sistema mostra un formulari  amb dues parts, una per les dades de l'autor de l'aportació (no cal que sigui el mateix que l'inscrit)   i un apartat amb dos camps per l'enviament de fitxers de capacitat màxima 25MB (el segon per si es necessita envia un zip).
	\item El sistema omple les dades que té de  l'usuari registrat als camps de les dades de l'autoria 
	\item L'usuari acaba d'omplir el formulari i l'envia
	\item El sistema comprova que les dades estan introduïdes correctament tal com que el DNI i el correu electrònic tinguin l'estructura correcta.
	\item El sistema desa les dades 
	\item El sistema prepara i envia per correu electrònic les dades amb un assumpte  \texttt{[tipus]-[cognom] [nom]} al compte de gmail de l'administrador
	\item L'adminitrador del gmail (o un filtre creat) mou el correu en l'etiqueta de gmail adequada per classificar-lo
	\item El sistema modifica els noms dels fitxers adjunts segons el què posa l'assumpte del missatge més un comptador
	\item El sistema mou el fitxer al directori del \texttt{Google Drive} que té per nom igual a \texttt{[tipus]}
	}
\addrow{Postcondicions :} { En el Google Drive s'han de veure els efectes desitjats, i.e., els fitxers amb els noms canviats i classificats}
	\caption{CU4-Enviament de fitxers}
\label{tab:CU4}
\end{longtable}


\section{Disseny}
\texttt{WordPress} està considerat com un \texttt{Sistema de Gestor de Continguts}, és a dir un entorn web el qual permet administrar, dissenyar i publicar continguts online amb un nivell baix de coneixements informàtics. Això també implica que hom es pot oblidar-se (relativament) de:
\begin{itemize}
	\item L'arquitectura Model Vista Controlador (\texttt{MVC})
	\item El patró d'arquitectura dirigida per esdeveniments (s'evita de gestionar les dependències)
	\item Seguretat i protocols d'encriptació
	\item Controlar la resposta visual en els diferents dispositius
	%\item Pensar en la indexació i posicionament SEO 
\end{itemize}


Per assolir tot aquest dinamisme, \texttt{WordPress} 4.5.2 treballa amb diferents llenguatges de progamació i conceptes: \texttt{HTML, CSS3, PHP 5.2.4, JavaScript:,JQuery, MYSQL 5.0, FTP, APACHE, AJAX}.\footnote{Per saber la versió: \web{http://c2em.feemcat.org/readme.html}}.


S'ha de dir que per utilitzar la llibreria \texttt{JQuery}, s'ha escrit en mig del cos de la pàgina ($<$\texttt{body}$>$) en comptes de fer-ho per un mètode més ortodox, que seria creant un fitxer i carregar-lo des de la capçalera de la pàgina on s'utilitza. Això fa que no es pugui utilitzar el simbol \$ per accedir a les seves funcions, sinó únicamnet \texttt{JQuery}.

On no s'ha pogut assolir els requisits definitius amb \texttt{WordPress}, s'han cobert amb \texttt{Google Apps  Script} per crear l'apartat de la gestió per classificar els fitxers adjunts d'un missatge, basat en \texttt{JavaScript}.

\subsection{La base de dades}

Només s'ha necessitat de modificar els continguts de la taula que genera el plugin \texttt{Contact Form DB} i crear-ne una per al control de la numeració del rebuts de pagament.
\begin{table}[h!]
\centering
\begin{tabular}{||l l ||} 
 \hline
 \multicolumn{2}{| c |}{Taula continguts modificats: \texttt{c2emcf7dbplugin\textunderscore submits}} \\[0.5ex] 
 \hline\hline
 \texttt{submit\textunderscore time}: & Moment es què s'ha fet el submit del formulari \\ 
\texttt{form\textunderscore name}: &  Nom del formulari CF7 associat\\ 
\texttt{field\textunderscore name}: &  Nom del camp del formulari\\ 
\texttt{field\textunderscore value}:  & Valor del camp \\ 
\texttt{field\textunderscore order}:  & Ordre en què es troba el camp al formulari \\ [1ex] 
 \hline
\end{tabular}
\caption{Camps principals taula \texttt{c2emcf7dbplugin\textunderscore submits}}
\label{table:cfdb}
\end{table}

A primera vista sembla que sigui una taula amb moltes dades redundants per repetir-se ja que hi haurà un registre per camp d'un formulari, així el nom del formulari i el temps d'enviamet seran els mateixos. També fa que sigui difícil de mostrar sinó es fa pels propis shortcodes del plugin.

A continuació es motra la taula creada per a la gestió dels rebuts:

\begin{table}[h!]
\centering
\begin{tabular}{||l l||} 
 \hline
 \multicolumn{2}{| c |}{Taula creada: \texttt{c2emrebuts}} \\[0.5ex] 
 \hline\hline
\texttt{id} &  \texttt{mediumint(9) NOT NULL AUTO\textunderscore INCREMENT}   \\
\texttt{time}  & \texttt{ datetime DEFAULT '0000-00-00 00:00:00' NOT NULL} \\
\texttt{num\textunderscore ordre}  & \texttt{LONGTEXT CHARACTER SET utf8}  \\ [1ex] 
 \hline
\end{tabular}
\caption{Camps principals taula \texttt{c2emrebuts}}
\label{table:rebut}
\end{table}

\begin{table}[h!]
\centering
\begin{tabular}{||l l ||} 
 \hline
 \multicolumn{2}{| c |}{Descripció de la Taula: \texttt{c2emrebuts}} \\[0.5ex] 
 \hline\hline
\texttt{id} &   Identificador autoincremental del rebut\\
\texttt{time}  &  Moment en què es demana el rebut\\
\texttt{num\textunderscore ordre}  &  Número d'ordre relacionat amb el pagament \\
 & (desat en la taula \texttt{c2emcf7dbplugin\textunderscore submits)} \\ [1ex] 
 \hline
\end{tabular}
%\caption{Camps principals taula \texttt{c2emcf7dbplugin\textunderscore submits}}
\label{table:rebutdesc}
\end{table}

\subsection{Plugins}

En aquesta secció es parla de les extensions que s'han instal·lat i activat, per a dur a terme les necessitats del congrès.

En l'annex hi ha el resum de totes les pàgines web per descarregar-los i veure un exemple

\subsubsection*{Contact Form 7}\label{sec:cf7p}

Extensió bàsica a partir de la qual s'ha desenvolupat el projecte. 

La seva utilitat principal és la de crear formularis de contacte d'un manera senzilla, a l'avast de qualsevol usuari.

El fet que amb el plugin es puguin instal·lar d'altres de complementaris \cite{ext}, com \texttt{Contact Form DB}, per desar la informació enviada pels formularis en la base de dades local, junt amb la flexibilitat de modificar el seu codi i la documentació que hi ha d'aquesta, fan que sigui ideal per a les nostres necessitats.

\subsubsection*{Contact Form DB}\label{sec:cfdbp}
Tal com hem dit en la secció anterior, és complement al plugin \texttt{Contact form 7} el qual permet desar en la base de dades de \texttt{WordPress} les dades que s'envien pels formularis generats amb \texttt{CF7} entre altres. A més, disposa d'un ampli ventall de \texttt{shortcodes} ven documentats per mostrar aquestes dades de la manera que més en convingui, així com mètodes d'exportació d'aquestes tal com \texttt{xls} o \texttt{csv}.

Aquest complement és essencial en el nostre projecte. 

La versió gratuïta no permet fer modifcacions posteriorment a les dades que s'han desat, només eliminar. Així que també s'ha necessitat crear codi que alterir la taula que genera.

\subsubsection*{Members} \label{doc:members}

%Permet gestionar els rols i les capacitat que tenen, així com fer visibles les pàgines a certs usuaris segons el rol que se'ls hi ha assignat.

Els \texttt{rols} van lligats a unes \texttt{capacitats} que són les que donen els permisos per accedir a les funcionalitats que ofereixen els diferents plugins: crear, modificar, llegir, amagar...

L'extensió \texttt{Members} s'ha instal·lat per agilitzar aquesta gestió. 

Per altra banda, no s'ha calgut aprofundir gaire en la seva gestió ja que el motiu principal de separar els usuaris per \texttt{rols} ha sigut més aviat com classificació de grups per a què puguin o no veure certes pàgines o menus que no pas de sistema.

Per exemple, un \texttt{rol} que es podia haver creat especificant certes \texttt{capacitat} com accedir a la base de dades per moficar-la, és el tresorer del congrés, però no ha estat cap requerim ja que ha sigut el mateix administrador de la web qui ho ha portat.

\subsubsection*{Nav Menu Roles}

La necessitat de mostra pàgines segons un \texttt{rol} desitjat ve acompanyat del menú a partir del qual la fem accessible. 
Aquest plugins ens permet amagar les entrades del menú per \texttt{rols}

\subsubsection*{WP FullCalendar}

\begin{wrapfigure}{r}{0.65\textwidth} %this figure will be at the right
    \centering
    \includegraphics[width=0.65\textwidth]{imatges/fullcalendar.png}
    \label{fig:agenda}
    	\caption{Exemple de l'agenda en 3 dies}
\end{wrapfigure}

Complement per fer més visual i atractiu el calendari del \co{WordPress}, és compatible amb els events del plugin \co{Event Manager} i permet canviar el comportament del calendari, que en el cas que ens convé és una vista dels tres dies que dura el congrés amb els esdeveniment situats en format d'agenda. %(veure \textit{figura \ref{fig:agenda}}).

Té una amplia documentació encara que amb pocs exemples i totes les modificacions s'han de fer a través de \co{JQuery} ja que el shostcode associat no té implementat passar-hi paràmetre per alterar el comportament del calendari.

Per altra banda, hi ha hagut problemes de conflicte amb la llibreria \co{JavaScript JQuery} i en comptes de crear un script nou dintre d'una pàgina \co{WP} per alterar el contingut del calendari que genera el shortcode \co{[fullcalenar]}, s'ha hagut de modificar un fitxer intern, encarregat d'incloure al peu de pàgina el codi \co{js}.

El fitxer modificat es diu \co{inline.js} i es localitza a \newline
 \texttt{ /wp-content/plugins/wp-fullcalendar/includes/js}
 
També es pot trobar a \texttt{codis/inline.js}.

És \textbf{important} destacar que la modiciació d'aquest fitxer fa que s'hagi d'anar en compte al actualitzar el plugin ja que eliminaria els canvis desitjats. Per evitar aquest fer es podria haver creat un plugin totalment nou amb el fitxer \co{inline.js} únicament canviat. 

%\begin{figure}[h]
%    \centering
%    \includegraphics[width=0.75\textwidth]{imatges/fullcalendar.png}
%    \caption{Exemple de l'agenda en 3 dies}
%    \label{fig:agenda}
%\end{figure}



\subsubsection*{Inline Google Spreadsheet Viewer \label{sec:dt}}

Cercant alternatives al plugin \texttt{TablePress} comentat en la secció \ref{doc:tp} i que també construïssin taules a partir de dades externes, s'ha instal·lat aquesta opció, però no la fem servir per la seva funcionalitat sinó perquè instal·la unes llibreres \texttt{JQuery} que faciliten la gestió d'aquestes. Només posant el codi següent allà on volem, la taula es comporta d'una manera dinàmica.

\begin{lstlisting}[language=JavaScript]
jQuery('#taula').DataTable( {});
\end{lstlisting}

El codi anterior mostra la taula amb la possibilitat d'ordenar-les o cercar pel seu contingut. Útil per millorar la visió i gestió de les dades que surten de veure la pàgina amb el \texttt{shortcode} \texttt{[c2em\textunderscore update\textunderscore preu]} (veure \textit{figura \ref{fig:control} pàgina \pageref{fig:control}}) o \texttt{[c2em\textunderscore update\textunderscore roles\textunderscore 30 form\textunderscore name=``inscripcio'']} (veure \textit{figura \ref{fig:con30} pàgina \pageref{fig:con30}})


\subsubsection*{Visualizer: Charts and Graphs}\label{sec:vis}

Permet crear gràfic interactius a partir d'un menú del \texttt{backend}, el problema es troba d'on treu les dades per a fer el gràfic,  que han de ser d'un fitxer \texttt{CSV}. 

S'ha d'alterar aquest comportament amb l'ajuda de dos \texttt{filtres} per personalitzar les series i les dades. 
les modificacions s'engloben en el plugin \texttt{C2EM gràfic estadístic} (secció \ref{sec:visc2}).

\subsubsection*{QR Code Generator}

Generador de codi \texttt{QR} a partir del text que es vulgui. Utilitza un \texttt{shortcode} particular, però nosaltres l'utilitzarem per ampliar el \texttt{shortcode} \texttt{[c2em\textunderscore qr size=``240'' page=``control-acreditacions'']} (veure secció \ref{sec:qr}).

\subsubsection*{Event Manager}\label{sec:em}

Extensió que permet cobrir les necessitats de la \textsf{Gestió de la planificació}, \textsf{Gestió de reserves de tallers} i \textsf{Gestió d'activitats extres}.  

De les seves característiques destaquem: 
\begin{itemize}
	\item És molt versàtil a partir del què anomenen \texttt{placeholder}
	\item Permet fer reserves i cancel·lació d'esdeveniments
	\item El mateix formulari de reserves permet generar usuaris del \texttt{WordPress}, i.e., que es registrin
	\item Permet fer un pagament per \texttt{PayPal}
	\item Es poden classificar els esdeveniments per categories o etiquetes
	\item Molt documentat 
	\item Està traduït al català
\end{itemize}

Només s'ha hagut d'utilitzar un \texttt{filtre} (\texttt{em\textunderscore bookings\textunderscore has\textunderscore booking}) per restringir que els usuaris només puguin fer una sola reserva als esdeveniments que tinguin l'etiqueta \texttt{Tallers} o \texttt{Sortides}.

%\subsection{Plugins no utilitzats}
%
%Els següents plugins no s'han utilitzat, però per comparar amb els seus equivalents que si que s'han acabat activant o per recomanar-los, s'acaben de situar i informar en aqquesta secció
%%\protect\footnote[4]{No instal·lat, no es fa servir. És a títol informatiu}
\subsubsection*{TablePress (no utilitzat) \label{doc:tp}}
En el moment que es va demanar que es podés fer una taula d'esdeveniments a partir d'un \texttt{Google Calendar}, vaig pensar en la possibilitat de fer servir aquest plugin ja que permet crear taules important un fitxer.

Com el resultat no quadrava amb les expectatives i, a més, es tenia que modificar codi per tal que els continguts fossin vinculats a ampliar informació, es va descartar utilitzar-lo. Tot i així es recomanable pels administradors que desitgin fer taules complexes sense necessitat de saber \texttt{HTML}.
%
%Versió utilitzada:\texttt{ 1.7}
%
%\subsubsection{Timetable by MotoPress}	 
%Permet crear una llista	d'esdeveniments i posar-los en forma de taula, visualment és molt bo, però no permet fer reserves per la qual l'hem descartat. Serviria si volguéssim per exemple muntar una taula d'horaris setmanals de les assignatures (veure \cite{timetable})
%
%\newpage

\subsection{Plugins creats}




\subsubsection{Contact Form 7 - TPV C2EM Add-on}\label{sec:tpv}

Genera una pestanya nova (\texttt{C2EM-TPV}) en el backend de l'edició del formulari de contactes del \texttt{CF7} (veure \textit{figura \ref{fig:tpv} pàgina \pageref{fig:tpv}}). Consta de dues funcionalitat per tal de poder fer que el formulari que estem creant serveixi per pagar o registrar usuaris al \texttt{WordPress} (o amdues coses).  

Em vaig ajudar de l'article \cite{cf7c2em} com a exemple de com implementar el registre i creació de la constrasenya dels usuaris amb el plugin \texttt{CF7}.

La passarel·la de pagament s'ha fer amb l'ajuda de RedSys (veure Annex \ref{sec:redsys}).

Per validar correctament que el camp \texttt{DNI} tingui una estructura adequada, s'ha copiat la major part del plugin \texttt{Validar DNI, NIF, NIE y CIF}\footnote{\web{https://wordpress.org/plugins/validar-dni-nif-nie-y-cif/}}

Per no haver de crear més pluguins i que tot es trobi més centralitzat, aquesta extensió també inclou:
\begin{itemize}
	\item \texttt{[c2em\textunderscore update\textunderscore preu form\textunderscore name=``inscripcio'' \\ field\textunderscore names=``camp1;camp2;camp3...'']} (secció \ref{sec:upreu})
	\item \texttt{[c2em\textunderscore update\textunderscore roles form\textunderscore name=``inscripcio'']} (secció \ref{sec:rol})
	\item \texttt{[c2em\textunderscore update\textunderscore roles\textunderscore 30 form\textunderscore name=``inscripcio'']} (secció \ref{sec:rol30})
	\item \texttt{[c2em\textunderscore acreditacions]} (secció \ref{sec:acre})
	\item \texttt{[c2em\textunderscore qr size=``240'' page=``control-acreditacions'']} (secció \ref{sec:qr})
	\item El \texttt{filtre} per crear la reserva única relacionada amb el plugin Even Manager (secció \ref{sec:em})
\end{itemize}

\subsubsection{C2EM Crear rebuts} \label{sec:rebuts}

Extensió que permet crear i descarregar a l'usuari inscrit un rebut en \texttt{PDF}  del pagament realitzat a través dels formularis creats amb \texttt{CF7} i seguint els camps necessaris que marca el plugin \texttt{contact-form-7-c2em-TPV} (veure seccio \ref{sec:tpv}).

Tot i que l'usuari pot fer més d'un pagament i es mostren tots els que ha fet, només és permet generar l'últim.

Els documents generats es van desant al servidor, al directori  \\
\texttt{/wp-content/plugins/factura\textunderscore c2em/rebuts}.

Conté el \texttt{shortcode} per inicialitzar la taula que gestiona els números de rebuts (veure secció \ref{sec:inirebuts}).

Depent de la llibreria \texttt{FPDF}\footnote[4]{\web{http://www.fpdf.org/?lang=es}} i se n'ha tret profit de l'article \cite{fpdfa}.

\subsubsection{C2EM gràfic estadístic} \label{sec:visc2}

Només inclou el \texttt{shortcode} \texttt{[c2em\textunderscore visualizer id=``538''  form\textunderscore name=``Aportacions'' field\textunderscore name=``tipus'']} (veure \ref{sec:viss}).

\subsection{Shortcodes}\label{sec:short}

A Continuació es mostren les descripcions del \texttt{shortcodes} creats.

\subsubsection{\texttt{[c2em\textunderscore num\textunderscore ordre]}}

Codi relacionat directament amb el cas d'ús de pagament.
Inserta dos camps amagats \texttt{num\textunderscore ordre} i \texttt{comprova\textunderscore tresorer} i un codi \texttt{JavaScript} que al fer el submit del formulari on suposadament es troben col·locats, actualitzarà el valors del primer camp al moment en que s'hi ha clicat. 

Aquest camp farà de número únic per al control d'ordre de pagament. 

El segon camp té per defecte el valors $-1$  que vol dir que encara no s'ha comprovat, ni per al banc, ni manualment pel tresorer del congrès.

Es troba implementat en el fitxer: \texttt{plugins/contact-form-7-c2em-TPV/c2em\textunderscore tpv.php}
 
\subsubsection{\texttt{[c2em\textunderscore update\textunderscore preu form\textunderscore name=``inscripcio'' \\ field\textunderscore names=``camp1;camp2;camp3...'']}} \label{sec:upreu}

Per alterar els valors dels pagaments que es fan en un formulari concret (paràmetre \texttt{form\textunderscore name}), es pot utilitzar aquest \texttt{shortcode} que mostrarà una taula-formulari per modificar la columna \texttt{preus}, generant la funcionalitat \textit{Control de pagaments} (veure secció \ref{sec:ctrl_pag} pàgina \pageref{sec:ctrl_pag}).

Per defecte només es mostraran dos camps, \texttt{preus} i \texttt{comprovar\textunderscore tresorer}. Si se'n volen més, s'ha d'utilizar el paràmetre \texttt{field\textunderscore names=``camp1;camp2;camp3...''} i aquests han de coincidir amb dels formulari.%\footnote{Es troba implementat en el fitxer: \texttt{plugins/contact-form-7-c2em-TPV/c2em\textunderscore update\textunderscore num\textunderscore ordre\textunderscore preu.php}}


\subsubsection{\texttt{[c2em\textunderscore update\textunderscore roles form\textunderscore name=``inscripcio'']}}\label{sec:rol}

Al llarg del procés van haver bugs.  Un d'ells no actualitzava correctament els rols a \texttt{inscrits} dels usuaris que havien pagat.
El vincle entre els qui han pagat (i confirmat)  i els que tenen el rol \texttt{subscrit} no es automàtic degut a com està configurat la taula \texttt{c2emcf7dbpluginform\textunderscore submits} (\textit{taula \ref{table:cfdb} pàgina \pageref{table:cfdb}}), així que s'ha necessitat de crear aquesta funció.

S'ha d'especificar els formulari \texttt{CF7} d'on s'ha enviat la petició en el paràmetre \texttt{form\textunderscore name}.

És una funcionalitat puntual, que només s'ha d'executat en el cas que es necessiti.%\footnote{Es troba implementat en el fitxer: \texttt{plugins/contact-form-7-c2em-TPV/c2em\textunderscore update\textunderscore roles.php}}

\subsubsection{\texttt{[c2em\textunderscore update\textunderscore roles\textunderscore 30 form\textunderscore name=``inscripcio'']}}\label{sec:rol30}

Per un requisit posterior a la previsió inicial, es necessitava d'un nou rol, \texttt{inscrit-30}, on hi han de formar part els \texttt{subscrits} que han pagat 30\euro \,  (i confirmats). Com la petició venia amb un nombre elevat d'usuari amb aquesta condició però que es trobaven en el rol de \texttt{inscrits} o \texttt{subscrits}, s'ha volgut agilitzar la situació amb aquest \texttt{shortcode}, que per altra banda és similar a l'anterior (secció \ref{sec:rol}).%\footnote{Es troba implementat en el fitxer: \texttt{plugins/contact-form-7-c2em-TPV/c2em\textunderscore update\textunderscore roles30.php}}
En la figura \ref{fig:con30} es mostra la taula-formulari per veure i actualitzar si es vol els rols.
 
\imatge{0.85}{convertir30.png}{Opció per convertir als usuaris que han pagat 30\euro \, }{con30}


\subsubsection{\texttt{[c2em\textunderscore inicialitzar\textunderscore rebuts]}}\label{sec:inirebuts}

Al fer proves, la taula relacionada amb el \texttt{rebuts} (\textit{taula \ref{table:rebut} pàgina \pageref{table:rebut}}), que disposa d'un camp autoincremental, anava generant la seva numeració, al passar a producció era convenient començar de zero. 

Aquest \texttt{shortcode} elimina el contingut de la taula i situa l'identificador de rebuts a zero.

Es troba implentat en el fitxer \texttt{./wp-content/plugins/factura\textunderscore c2em/factura\textunderscore c2em.php} que forma part del pluguin \textsf{C2EM Crear rebuts} (seccio \ref{sec:rebuts} pàgina \pageref{sec:rebuts}).

\subsubsection{\texttt{[c2em\textunderscore acreditacions]}}\label{sec:acre}
%Es troba implentat en el fitxer .\texttt{/wp-content/plugins/contact-form-7-c2em-TPV/c2em\textunderscore acreditacions.php}.
S'ha d'afegir entre els camps de formulari que es crea en el plugin \texttt{CF7}, que ha de tenir el camp amb nom \texttt{codi} de tipus de text
\footnote[4]{exemple a \texttt{./codis/formulari\textunderscore acreditacions\textunderscore cf7.txt}}.
Tot i que és un formulari molt senzill, es fa per \texttt{CF7} ja que així es desaran les dades amb el plugin \texttt{CFDB}.

Si en la \texttt{url} hi ha el paràmetre \texttt{dni}:
\begin{enumerate}
	\item S'omplirà el camp \texttt{codi} amb el valor del \texttt{dni}
	\item Automàticament s'enviarà el formulari 
	\item S'amagarà el camp
	\item Es mostrarà els esdeveniments els quals està apuntat l'usuari amb aquest \texttt{dni}
\end{enumerate}
 
La pàgina on es mostri ha de veure's cómodement en un mòbil, per tant, es recomanable que es fassin invisibles tots els widgets per aquest lloc. A més ha de poder ser visible únicament pels usuaris amb rol \texttt{acreditacions}.

\subsubsection{\texttt{[c2em\textunderscore qr size=``240'' page=``control-acreditacions'']}}\label{sec:qr}

Situant aquest \texttt{shortcode} en una pàgina només visible pels usuaris \texttt{inscrits}, es mostrarà un codi \texttt{QR} amb el contingut serà de de l'estil \\
\texttt{http://c2emtest.feemcat.org/control-acreditacions?dni=46136564J}    
on el número és el nom d'usuari que està visitant la web.

El \texttt{QR} està pensant perquè es llegeixi amb un amplicació de mòbil (per exemple \texttt{QR Code Reades}).

Aquesta implementació s'ajuda del plugin \texttt{qrcode\textunderscore wprhe}, així que s'ha de tenir instal·lat perquè funcioni.



\subsubsection{\texttt{[c2em\textunderscore factura form\textunderscore name1=``inscripcio'' \\ form\textunderscore name2=``pagament'']}}

Situant aquest \texttt{shortcode} en una pàgina només visible pels usuaris \texttt{inscrits}, es mostrarà tots els pagaments que ha fet l'usuari i un formulari per generar-lo.
Els paràmetres \texttt{form\textunderscore name1} i  \texttt{form\textunderscore name2} són el nom dels dos formularis pels quals es fa el pagament.


\subsubsection{\texttt{[c2em\textunderscore visualizer id=``538''  form\textunderscore name=``Aportacions'' \\ field\textunderscore name=``tipus'']}} \label{sec:viss}


El camp \texttt{form\textunderscore name} és el nom del formulari \texttt{CF7} d'on es volen treure les dades (que es troben desades gràcies a \texttt{CFDB}) 

El camp \texttt{field\textunderscore name=``tipus''} és la sèrie a partir de la qual es farà el gràfic.


\subsection{Classificació de fitxers}
\section{Implementació}



\subsection{Creació d'un gràfic estadístic}

\begin{wrapfigure}{l}{0.17\textwidth} %this figure will be at the right
    \centering
    \includegraphics[width=0.17\textwidth]{imatges/grafic.png}
    	\caption{Gràfic total d'inscripcions segons l'associació}
\end{wrapfigure}

Com administrador, 
\begin{enumerate}
	\item Es crea i dissenya un gràfic amb el plugin \texttt{Visualizer: Charts and Graphs} (secció \ref{sec:vis}), un cop creat, genera un identificador 
	\item Amb l'identicador anterior (suposem \texttt{538}), es situa el \texttt{shortcode} \texttt{[c2em\textunderscore visualizer id=``538''  form\textunderscore name=``Aportacions'' field\textunderscore name=``tipus'']} (veure \ref{sec:viss} per més informació del seu ús) en qualsevol pàgina, article o giny on es mostrarà el gràfic traient les dades del formulari \texttt{Aportacions} que contè al nom del camp \texttt{tipus}.
\end{enumerate}

L'exemple que es fa servir a la web és \texttt{[c2em\textunderscore visualizer id=``589'' form\textunderscore name=``inscripcio'' field\textunderscore name=``associacio'']} (\textit{ figura 21}) i es troba situat en un \texttt{widget} lateral.
\\ 
%\imatge{0.2}{grafic.png}{Gràfic total d'inscripcions segons l'associació}{graf}

\subsection{Control d'acreditacions}
Per portar a terme el control de les acreditacions per part del personal del congrés, l'administrador ha de:
\begin{enumerate}
	\item Generar un formulari \texttt{CF7} (suposem, anomenat \textit{acreditacions}) i s'inclou en \texttt{shortcode} \texttt{[c2em\textunderscore acreditacions]} tal com marca la secció \ref{sec:acre} de la pàgina \pageref{sec:acre}
	\item Crear una pàgina on es situarà el shortcode que et facilita el pluguin \texttt{CF7} de l'estil \texttt{[contact-form-7 id="452" title="acreditacions"]}
	\item Fer-la visible per als usuaris amb \texttt{rol} \texttt{acreditors}
	\item Desactivar que els gins del tema es vegin per aquesta pàgina (ja que es veurà des d'un mòbil bàsicament).
	\item Crear una pàgina amb \texttt{\texttt{[c2em\textunderscore qr size=``240'' page=``control-acreditacions'']}} en el seu cos.
	\item Fer-la visibles per als usuaris amb \texttt{rol} \texttt{inscrits} o \texttt{inscrits-30}
\end{enumerate}

\imatge{0.85}{proces_acreditacio.png}{Procés per acreditar}{proacre}

\subsection{Formulari d'inscripció}\label{sec:form_insc}
Configuració del formulari d'inscripció per als usuaris i que puguin pagar en el moment.
\begin{enumerate}

	\item Crear un formulari amb \texttt{CF7} (veure \textit{figura \ref{fig:CF7Crear}}). amb el contingut desitjat\footnote{En el fitxer \texttt{codis/formulari\textunderscore incripcio\textunderscore cf7.txt} hi ha un exemple} \\
\noindent \textbf{Nota:}	Tal com indica la pestanya \texttt{C2EM-TPV}, és molt \textbf{important} mantenir els noms de cada identificador de camp següents:
	\begin{itemize}
		\item \textbf{identidad}: (\texttt{[text* identidad placeholder ``12345678Z'']} ) Serà el nom d'usuari de \texttt{WordPress}, amb aquest identificador, internament  es comprova si té estructura de \texttt{DNI} i, a més, no es troba com a nom d'usuari en la base dades de \texttt{WP}.
		\item \textbf{nom} i \textbf{cognoms}: (\texttt{[text* nom placeholder ``Nom''] i [text* cognoms placeholder ``Cognom1 Cognom2'']}) Els necessita per a omplir els mateixos camps de la fitxa interna d'usuari.
		\item \textbf{email}: \texttt{[email* email]}, amb aquest identificador, el sistema comprova, a més que té forma de correu electrònic, si és nou en la base de dades de \texttt{WP} com a usuari.
		\item \textbf{preus}: camp de tipus \texttt{radio button} 
	\end{itemize}
	\begin{figure}[h!]
    \centering
    \includegraphics[width=0.8\textwidth]{imatges/crear_formulari.png}
    \caption{Crear un formulari amb \texttt{CF7}}
    \label{fig:CF7Crear}
	\end{figure}
	
	\item En la pestanya \texttt{C2EM-TPV } (veure \textit{figura \ref{fig:tpv}}):
	\begin{itemize}
		\item Habilitar\textit{ que es registrin els usuaris (...)}. Així se'n genera un a partir del DNI (camp identidad) i una contrasenya aleatòria i s'envia aquesta informació pel correu electrònic facilitat en el camp email.
		\item Escollir \textit{Permetre pagar amb targeta }
		\item Omplir els camps els quals només et pot facilitar el banc associat a l'empresa
	\end{itemize}
	\begin{figure}[h!]
    \centering
    \includegraphics[width=1.1\textwidth]{imatges/crear_formulari_tpv.png}
    \caption{Pestanya \texttt{C2EM-TPV}}
    \label{fig:tpv}
	\end{figure}
	\item La pestanya \texttt{correu} (veure \textit{figura \ref{fig:CF7MAIL}}) permet generar un mail amb els camps del formulari. En el nostre cas, s'envia un correu al propi congrés per informar d'una nova inscripció. \\
\noindent \textbf{Nota}: internament s'envien dos mails, un a l'usuari, tal com s'ha dit, amb la contrasenya generada, i  un altre al tresorer informant del preu i el codi únic generat per controlar els possibles pagaments. Aquests dos correus no es poden generar per aquesta pantalla ja que necessiten d'informació processada posteriorment.	
		\imatge{0.85}{crear_formulari_mail.png}{Pestanya \texttt{CORREU}}{CF7MAIL}
	\item Crear una pàgina amb el contingut: \\ \texttt{[contact-form-7 id=``429'' title=``inscripcions'']} \\on el \texttt{429} pot variar, sent el codi \texttt{id} que indica i genera \texttt{CF7} al fer el formulari.
	\item Afegir una entrada al menú que apunta a la pàgina anterior
	
\end{enumerate}


\subsubsection*{Diagrama de seqüències: incriure's}
A continuació es mostra el diagrama de seqüencies relacionat al procés intern
%\subsubsection{DS1}
\begin{sequencediagram}
  \newthread{t}{:Usuari no registrat}
 
   \newinst[3]{b}{:Banc}
   \newinst[2]{S}{:Sistema}
\begin{call}{t}{}{S}{}
\begin{sdblock}{loop}{\scriptsize {[!usr\textunderscore exist(identidad)  \&\& validatNIF(identidad)  \&\& !email\textunderscore exists(email)]}}
   \begin{call}{t}{ \scriptsize OmplirFormulari(identidad, email, nom, preus)}{S}{}
 	
  \end{call}
\end{sdblock}

  \begin{call}{t}{ \scriptsize pwd: crear\textunderscore username\textunderscore pwd\textunderscore de\textunderscore inscripcio(identidad, email, nom)}{S}{\scriptsize missatge(identidad, pwd)}
    \end{call}
    
   \begin{call}{S}{ \scriptsize connectarPassarel·lar(preus, num\textunderscore ordre)}{b}{}
 	  \end{call}
   \begin{call}{S}{\scriptsize update\textunderscore confirmacio(num\textunderscore ordre, codi);}{S}{}
 	  \end{call}
   \begin{call}{S}{\scriptsize update\textunderscore preu(num\textunderscore ordre, preu, identidad)}{S}{}
 	  \end{call}
  \begin{call}{S}{\scriptsize update\textunderscore role(identidad, preu)}{S}{}
 	  \end{call}

    \end{call} 
\end{sequencediagram}


\subsection{Formulari d'enviament de fitxers}\label{sec:envfit}
Per configurar la gestió de les aportacions:
\begin{enumerate}

	\item Crear un formulari amb \texttt{CF7} (\textit{figura \ref{fig:CF7Crear}}). amb el contingut desitjat\footnote[1]{En el fitxer \texttt{codis/formulari\textunderscore enviament\textunderscore fitxers\textunderscore cf7.txt} hi ha un exemple d'aquest formulari} 
	\item Configuració de la recepció de correus adjunts (basat en \cite{rebremails})
	\begin{enumerate}
		\item Accedim a un fitxer qualsevol de \texttt{Google Drive} del compte que administrem
	 	\item Creem un fitxer nou a partir d'una plantilla (\textit{figura \ref{fig:crearplan}})
	\begin{figure}[h!]
    \centering
    \includegraphics[width=0.85\textwidth]{imatges/crear_desde_plantilla.png}
    \caption{Fitxer \texttt{\textbackslash Nou \textbackslash A partir de la plantilla...}}
    \label{fig:crearplan}
	\end{figure}
		\item Cerquem la plantilla amb la paraula \texttt{C2EM}. La plantilla es diu \texttt{C2EM Archive Gmail messages to Google Drive}. (\textit{figura \ref{fig:plantilla}} punt 1)
	\begin{figure}[h!]
    \centering
    \includegraphics[width=0.85\textwidth]{imatges/utilitzar_plantilla.png}
    \caption{Galeria de plantilles del \texttt{Google Drive}.}
    \label{fig:plantilla}
	\end{figure}
		\item Cliquem en el botó \texttt{Utilitar aquesta plantilla} (\textit{figura \ref{fig:plantilla} punt 2} )
		\item Del full de càlcul que ens apareix, modifiquem els noms del directori,  subdirectoris,  etiqueta i subetiqueta al nostre interès. En el cas que es mostra per defecte (\textit{figura \ref{fig:classificacio} punts 1, 2, 3 i 4}) es crearà un directori anomenat \texttt{C2EM\textunderscore apo} i d'ell penjaran quatre més anomenats \texttt{taula}, \texttt{taller}, \texttt{Comunicació} i \texttt{poster}, el nom dels qual és clau per fer la classificació ja que cada arxiu adjunt anirà a parar a un d'aquest subdirectoris segons si en l'assumpte del missatge inclou un d'aquests noms o no. Per altra banda, només es fixarà en els missatges que es trobin dintre l'etiqueta anomenada (en aquest cas particular) \texttt{C2EM\textunderscore apog}. Quan acabi d'ubicar els arxius, situarà el correu en l'etiqueta \texttt{c2em\textunderscore apog\textunderscore classi}
		\begin{figure}[h!]
    \centering
    \includegraphics[width=0.85\textwidth]{imatges/modificar_classificacio.png}
    \caption{Fitxer nou a partir de la plantilla ja creat}
    \label{fig:classificacio}
	\end{figure}
		\item Cliquem a \texttt{Crear Directoris i Etiquetes} per tal de crear-les en el cas que no existeixin (\textit{figura \ref{fig:classificacio} punt 5}).
		\item El primer cop que fem aquesta acció, ens demarà una autorització per excutar l'script intern i seguidament hem de permetre que hi pugui accedir (\textit{figura \ref{fig:auth}} i \textit{figura \ref{fig:permet}})
		\begin{figure}[h!]
 \centering
  \subfloat[]{
   \label{fig:auth}
    \includegraphics[width=0.4\textwidth]{imatges/autoritzacio.png}}
  \subfloat[]{
   \label{fig:permet}
    \includegraphics[width=0.3\textwidth]{imatges/permet.png}}
 \caption{a) Avís d'autorització; b) Permètre accés}
 
\end{figure}
		\item Seguint els transcurs de les accions normals, l'script ens avisa de les noves creacions (\textit{figura \ref{fig:okdir}},  \textit{ \ref{fig:oketi} i \textit{ \ref{fig:direti}}})
\begin{figure}[h!]
 \centering
  \subfloat[]{
   \label{fig:okdir}
    \includegraphics[width=0.33\textwidth]{imatges/ok_dir.png}}
  \subfloat[]{
   \label{fig:oketi}
    \includegraphics[width=0.33\textwidth]{imatges/ok_eti.png}}
    \subfloat[]{
   \label{fig:direti}
    \includegraphics[width=0.33\textwidth]{imatges/dir_eti.png}}
 \caption{Tres avisos consecutius com a molt}
\end{figure}
		\item Podem classificar els fitxers del missatges en qualsevol moment, per això només cal clicar en \texttt{Arxivar missatges i adjunts} (\textit{figura \ref{fig:plantilla} punt 6})
		\item L'script per classificar s'executarà periòdicament, per comprovar que funciona o es vol modificar el temps hem de:
		\begin{enumerate}
			\item Anar a \texttt{Eines\textbackslash Editor de scripts...} (\textit{figura \ref{fig:edi_sc}})
			\item De la nova finestra que s'obra, que és el codi font\footnote[4]{Es pot veure tot el codi a \texttt{codis/Code.gs}}, anar a \texttt{Recursos\textbackslash Disparador del projecte actual} (\textit{figura \ref{fig:trigger}})
			\begin{figure}[h!]
 \centering
  \subfloat[]{
   \label{fig:edi_sc}
    \includegraphics[width=0.33\textwidth]{imatges/editor_script.png}}
  \subfloat[]{
   \label{fig:trigger}
    \includegraphics[width=0.33\textwidth]{imatges/trigger.png}}
 \caption{Accedir a la modificació del \texttt{trigger}}
\end{figure}
			\item Al ser el primer cop que arribem aquí, no veiem cap \texttt{disparador}, n'hem de crear un (veure \textit{figura \ref{fig:trigger1}})
\begin{figure}[h!]
    \centering
    \includegraphics[width=0.85\textwidth]{imatges/trigger_1r.png}
    \caption{Creant el primer \texttt{disparador} del projecte actual}
    \label{fig:trigger1}
\end{figure}	
			\item Escollim la funció a executar \texttt{ScanGmail}, basat en el temps i fer-ho cada dues hores (veure \textit{figura \ref{fig:scan} punt 1})
\begin{figure}[h!]
    \centering
    \includegraphics[width=0.85\textwidth]{imatges/scangmail.png}
    \caption{Característiques del disparador}
    \label{fig:scan}
\end{figure}	
			\item Optativament es pot configurar també que notifiqui el detectar errors d'execució (veure \textit{figura \ref{fig:scan} punt 2})
		\end{enumerate}	
	\end{enumerate}	
\end{enumerate}

\subsection{Control de pagaments: inscripcions i posteriors}\label{sec:ctrl_pag}

Hi ha diferents casuístiques en les quals l'administrador necessita modificar els valors dels pagaments realitzats pels usuaris i validadar-los. Ja sigui perquè ha fet el pagament per transferència bancaria, hi ha hagut un error intern independent del banc... 

Per alterar les entrades relaciondes, es necessita d'aquesta opció.

La seva activació seria, suposant que ja hi ha un formulari creat amb \texttt{Contact Form 7} amb els camps necessaris que marca la pestanya \texttt{C2EM-TPV} (veure \textit{figura \ref{fig:tpv} pàgina \pageref{fig:tpv}}), en el nostre cas d'exemple s'anomena \texttt{inscripcio}:
\begin{enumerate}
	\item Es crea un nova pàgina 
	\item En el cos es posa  el \texttt{shortcode}  \texttt{[c2em\textunderscore update\textunderscore preu form\textunderscore name=``inscripcio'' field\textunderscore names=``cognoms;nom;identidad;associacio;num\textunderscore ordre'']}  on 
		\begin{enumerate}
			\item \texttt{form\textunderscore name} és el nom del formulari des d'on s'han enviat les dades, que gràcies al plugin \texttt{Contact Form DB}, es troben desades en una taula de \texttt{WordPress}
			\item \texttt{field\textunderscore names} són alguns dels camps del formulari i que ara es volen mostrar
		\end{enumerate}
	\item Gràcies al plugin \texttt{Members} (secció \ref{doc:members} pàgina \pageref{doc:members}) , donem permisos només a l'administrador en l'apartat \texttt{Content Permissions}, d'aquesta manera la pàgina només serà visible per aquest rol (\textit{figura \ref{fig:members}})
		\imatge{0.85}{control_permisos.png}{Apartat \texttt{Content Permissions}}{members}
	\item Publicar la pàgina i visualitzar-la
\end{enumerate}

Com també hi ha la opció de fer el pagament a posteriori de la inscripció, també s'ha de fer el mateix procediment però amb el formulari \texttt{pagament}(hi ha un exemple en el fitxer \texttt{codis/formulari\textunderscore pagament\textunderscore cf7.txt}).

En la \textit{figura \ref{fig:pagaments} punt 2} es pot observar la facilitat que dona el plugin \texttt{Inline Google Spreadsheet Viewer} (veure secció \ref{sec:dt} ) per ordenador els resultats mostrats, així com fer un cerca, amaga columnes o descarregar-los.
A més s'hi pot observar els rols en la columnat \texttt{identidad}. 

	\imatge{0.85}{control_pagaments.png}{Exemple de resultats pàgina amb el \texttt{shortcode} \\ \scriptsize \texttt{[c2em\textunderscore update\textunderscore preu form\textunderscore name=``inscripcio'' field\textunderscore names=``cognoms;nom;identidad;associacio;num\textunderscore ordre'']}}{pagaments}
	
A continuació s'expliquen les diferents opcions que s'hi poden fer i les seves conseqüències( \textit{figura \ref{fig:control}}): 

\begin{enumerate}
	\item Si es canvia la columna \texttt{preus} a 30 \euro \, , el rol es canviarà a \texttt{inscrit-30} i \texttt{comprovar\textunderscore tresorer} es posarà a 2 (ok blau), recordant que el pagament s'ha validat per aquest formulari.
	\item Si el preu que es marca és un altre, també es posarà \texttt{comprovar\textunderscore tresorer} a 2 però el rol serà el de \texttt{inscrit}
	\item Si volem que es desin la dades de l'usuari conforma a pagat amb tarjeta i no pas validat per aquest formulari, s'ha d'escollir la opció ``preu anterior pagat per TPV'' 
	\item La opció ``No comprovat'' desa la fila com si encara no s'hagués fet la comprovació. \texttt{comprovar\textunderscore tresorer} el deixa a -4 i el rol a \texttt{subscriber}
	\item Pels usuaris que es vol que l'entrada sigui  gratuïta (pagat 0 \euro \, ), s'ha d'escollire ``Gratuït''
\end{enumerate}

	\imatge{0.85}{control_pagaments.png}{Opcions que es poden fer amb el control de pagaments}{control}
	
\textbf{Nota de millora}: Si es modifica el formulari en \texttt{CF7} creant nous camps i s'han fet enviaments en cada versió (antiga i nova), els resultats poden no sortir bé; si es vol mostrar el nou camp, la taula es mostrarà esbiaixada.


\subsection{Generar Rebuts}

Com administrador, es segueixen els mateixos passos de l'1 al 4 que els descrits en la secció \ref{sec:ctrl_pag} però amb el \texttt{shortcode} \texttt{[c2em\textunderscore actura form\textunderscore name1=``inscripcio'' form\textunderscore name2=``pagament'']}
on  \texttt{form\textunderscore name1} i  \texttt{form\textunderscore name2} són els noms dels dos formularis pels quals es fa el pagament.

Com a usuari, 
\begin{enumerate}
	\item Si no té rebuts per generar, li sortirà un missatge: \textit{No hi ha dades de pagament per a l'usuari *****} 
	\item Si ha fet algun pagament, se li mostrarà un formulari  i una taula informant del rebut que es generarà (si està validat) (veure \textit{figures \ref{fig:ok_clau}, \ref{fig:ok_ok} i \ref{fig:clau_clau}})
\end{enumerate}

Un cop introduïdes les dades de l'empresa  i clicat a \textsf{Crear Rebut}, es refrescarà la pàgina amb un botó-vincle per poder descarregar el PDF generat.

\imatge{0.67}{rebut_ok_clau.png}{El 1r pagament es generà, el 2n no i informa que no està validat}{ok_clau}

\imatge{0.67}{rebut_ok_ok.png}{El 1r pagament es generà, el 2n no i informa que està validat}{ok_ok}

\imatge{0.67}{rebut_clau_clau.png}{Cap pagament està validat, amb un avís }{clau_clau}


\section{Resultats}

\subsubsection*{Inscripcions} \label{sec:insc}
A finals de juny els nombres d'inscrits a traves del\textsf{ formulari inscripcions} han estat $597$ dels quals 
\begin{enumerate}
	\item $468$ han utilitat el \texttt{TPV-Virtual} per pagar
	\item $124$ han pagat per \textsf{transfarència bancària} (i.e. el tresorer els ha validat a través de la web, conforma han pagat)
	\item $5$ han tingut un problema amb a l'hora de pagar que encara no està solucionat (el tresorer pot veure més informació en la pàgina d'administració del TPV de la Caixa). \label{error}
\end{enumerate}

\subsubsection*{Canvi de pla hosting}
Degut al alt nombre de fitxers generats per al projecte, junts amb l'alt nombre de peticions d'inscripcions en un moment determinat, el responsable web del congrés va haver de canviar el pla amb més opcinos de hosting.\footnote[4]{\web{https://www.siteground.es/hosting-web.htm}}.

\imatge{0.85}{mesvisites.png}{Gràfic amb el pic de visites }{vis}


\subsubsection*{Classificació d'aportacions}

En quan a les aportacions fetes, gestionades per \ref{sec:envfit}, se n'han classificat $151$.
També afecta al pluguins \texttt{Event Manager} i \texttt{WP FullCalendar} que han hagut de suportar a mateixa carrega sense cap problema.


\subsubsection*{Control de les acreditacions}

Els resultats respecte al \textit{Control de les acreditacions} no els podem mostrar ja que es farà entre els dies 11, 12 i 13 de juliol, en el moment de les entrades al congrés i als seus tallers. Ara bé, si que és gràcies a les possibilitats que ofereix el \texttt{WordPress}, que s'ha canviat el procediment per gestionar-les. Al principi es pretenia controlar l'entrada al congrés disposant d'ordinadors al hall de l'edifici i amb un lector de codi de barres anar passant les acreditacins. Pel què fa a l'accés a cada taller es volia fer firmar a les persones per després comprovar la seva assistència manualment. 

Ara l'acreditació funcionarà amb un codi \texttt{QR} i tota persona amb permisos adequats, podrà llegir-la amb el seu mòbil que li redirigirà a una la web que li mostrarà si aquella persona pot accedir tant al congrés com al taller on es trobi. 

\subsubsection*{Descarregues de rebuts}

Observant els fitxer que s'han desat al servdor, s'han generat $159$ rebuts

\subsection{Treball futur} \label{sec:treb}

Al llarg de projecte, s'han anat trobant punts que es podien millorar, no s'han fet per diverses raons, per temps, por a espatllar-ho, no són claus...

Algunes d'aquestes millores que es poden fer són:

\subsubsection*{Radiobutton als formularis de pagement o inscripció}

Per escollir el preu en el formulari de pagament i d'inscripció es fa per un \texttt{radiobutton}, bàsicament per no deixar moltes opcions a l'usuari i així controlar les casuístiques, tant per escollir el preu com per si es vol pagar, que són el mateix \texttt{radiobutton}.

S'ha vist que els usuaris s'equicoven facilment al no veure una exclosió entre pagar amb tarjeta i pagar per transferència bancària.

A més internament, el \texttt{radiobutton} és un array, a diferència del camp \texttt{select}, que és directament un valor.

\subsubsection*{Crear una pàgina de menú al backend} \label{sec:back}
Així com s'ha fet una pestanya nova en el plugin \texttt{Contact Form 7}, es podria haver creat una pàgina nova al \texttt{backend} amb totes les funcionalitats que s'han creat, entre altres,  relacionades amb els \texttt{shortcodes} (secció \ref{sec:short} pàgina \pageref{sec:short}) creats i d'aquesta manera estalviar i agilitzar la feina de l'administrador web del congrés.

\subsubsection*{MVC no aplicat}

Tot i que al prinicpi hem dit que \texttt{WordPress} ens permet oblidar de pensar en el \texttt{MVC}, la veritat és que no cert al 100\% ja que en tots els punts on hi ha text en català dintre el codi, aquest s'hauria de substituir per variables que es modifiquin a través, per exemple, d'una pàgina al backend complementària a l'apartat \ref{sec:back}.

\subsubsection*{Patró d'arquitectura dirigida per esdeveniments}

També hem dit que ens podiem mínimament deixar de pensar en el \textsf{patró d'arquitectura dirigida per esdeveniments}, però tampoc és cert ja que quan es passen les dades entre el moment d'enviar el formulari i redigirir la pàgina a la passarel·la de pagament es fa amb una \texttt{update\textunderscore option}, i pot generar una asincronia de dades si es fan dues peticions de pagament en el mateix moment. Així les dades finals de la primera petició de la variable \texttt{cfc2em\textunderscore options} que feiem servir podrien ser incorrectes.

Per evitar jugar amb sincronies que podrien bloquejar processor, es descarta directament utilitzar el concepte \texttt{option} de \texttt{WP}.

S'ha detectat aquest error a finals de juny i que per sort, tal com es fa, com a molt es perdrien les dades de la primera petició i no es faria el seu pagamanet.

Les $5$ persones que hem dit en el punt \ref{error} de la secció \textbf{\ref{sec:insc}.Inscripcions} podrien ser causa d'aquest \textsf{bug}.


\subsubsection*{Camps vitals}

Tot i que es remarca a l'hora de generar-ho, hi ha camps que són vitals per al bon comportament de la web, aquests són \texttt{identitat}, \texttt{dni} i \texttt{preus}. Aquí, si un llegeix bé les instruccions, no hauria de passar res, i tot aniria com el planificat, però ho estic veient des del punt de vista del responsable web d'aquest congrés i meu, que sabem d'aquestes delicadesses. 

Faltaria saber com recciona una tercera persona i les necessitats de canvi que desitja per evitar errors que depenguin d'aquesta imposicions de noms respecte aquests camps.

\subsubsection*{Codi font}

El codi font es volia fer públic al \href{https://bibucket.org}{\texttt{bibucket.org}} però hi ha un fitxer amb les claus d'encriptació per poder connectar-se a la passarel·lela que fa que no sigui viable poder-ho fer.

Finalment s'obta per donar adjunt a aquesta memòria la part del directori de plugins i deixant en blanc la variable \texttt{kc} del fitxer \texttt{plugins/contact-form-7-c2em-TPV/includes/recepcioPeticio.php} en comptes de les claus.

A més, per estalviar espai, només es lliuren les extensions creades o retocades.

Els organitzadors del congrès però tenen accés a \web{https://bitbucket.org/feemcat/c2em/} que és on s'ha treballat al llarg del projecte.

\section{Conclusions}

En global estic satisfet de la feina realitzada i dels objectius aconseguits ja que he ajudat en la seva mesura en la posada a punt d'aquest projecte.
Tot i així, tal com es remarca en la secció \ref{sec:treb}, hi ha molt a millorar, però com una de les condicions era que es el codi es pugués reaprofitar per tercers, aquests tenen la oportunitat, no tant sol d'apatar-ho a les seves necessitats, sinó de millorar-ho.


L'aprenentatge ha estat constant, des de la creació i adaptació de plugins, l'API de \texttt{WordPress}, passant per l'API de \texttt{Google Script}, recordant i millorant els coneixements en PHP, MYSQL, CSS i JQuery, sense comptar en què ara conec un punt de vista del congressos, què vol dir un pagament online des del punt de vista de la seva implementació, quina és la gestió de les aportacions dels participants i com es controlen les seves acreditacions.

Personalment m'ha agradat haver treballat d'aquesta manera, oferint un servei, sense comptar les hores que s'hi dedica, sinó que depenent dels resultats i que aquests es vagin millorant a partir de noves demandes o errors propis fins aconseguir el resultat definitiu. Per portar aquesta dinàmica de feina, és clau que a l'altre banda hi hagi algú que recolzi la teva feina, fent que t'impliques més i proposis alternatives que finalment s'han portat a terme, com el canvi de control de les acreditacions o la gestió d'enviaments de fitxers, que per coneixement o incapacitat no he sabut fer a través del \texttt{WordPress}.

Veient l'estudi sobre les possibilitats que hi ha al mercat per gestionar congressos i el què s'ha aconseguit, puc considerar que aquesta ha estat la millora manera d'assolir la voluntat dels responsables i que qui vulgui aprofitar aquest projecte, segur, encara que es trobès totalment realitzat, que l'haurà d'adaptat ja que hi haurà apartats que no els hi cobrirà les seves necessitats, però com a mínim tindran el codi per modificar o ampliar.

En quan a la llibertat de codi, en el sentit de la \texttt{Free Software Foundation} \footnote[4]{\texttt{http://www.fsf.org/}}, al ser publicada al dipòsit digital de la UB\footnote[3]{\texttt{http://diposit.ub.edu/dspace/}} es troba sota la llicència GPL3 i aquesta documentació sota la llicència de Reconeixement-CompartirIgual (BY-SA) de Creative Commons \footnote[5]{\texttt{https://creativecommons.org/licenses/by-sa/3.0/deed.ca}}

%
%\begin{enumerate}
%	\item Implementar el màxim de requiments demanats i especificats en l'\ref{sec:req}) i que són:
%	\begin{enumerate}
%		\item L'usuari es pugui inscriure i pagar amb tarjeta de crèdit online
%		\item L'administrador pugui controlar els pagaments
%		%Gestió d'inscripcions i pagaments online \label{ges1}
%		%\item L'usuari pugui enviar documentació
%		\item El sistema gestioni la documentació enviada pels usuaris des del portal
%		%Gestió d'enviament de treballs a través de la web\label{ges2}
%		\item Gestió de la planificació 
%		\item Gestió de reserves de tallers i activitats 
%		\item Gestió de l'acreditació 
%		\item Implementar-ho duran el primer semetre de l'any 2016
%	\end{enumerate}
%	\item Arribar al màxim de les demandes no funcionals següents:
%	\begin{enumerate}
%	  \item Utilitzar software lliure aprofitant al màxim codi de tercers.
%	  \item Facilitat d'ús del programari i la seva configuració
%	  \item Estalviar que l'usuari hagi de fer un nou aprenentatge amb aquest nou programari
%	  \item Evitar al màxim la interacció entre l'usuari i l'entorn web.
%	\end{enumerate}
%
%\end{enumerate}


\normalfont
\newpage

\appendix
\cleardoublepage
\addappheadtotoc
\appendixpage

%\section{Annex: Manual d'us}

\section{Annex: Vincles a pluguins} \label{sec:fit}

\textbf{Contact Form 7} Autor: \textsc{Miyoshi, Takayuki}
\begin{itemize}
	\item Descarrega: \texttt{https://es.wordpress.org/plugins/contact-form-7/}
	\item Documentació: \texttt{http://contactform7.com/docs/}
	\item Versió utilitzada:\texttt{ 4.4.2}
\end{itemize}


\textbf{Contact Form DB} Autor: \textsc{Simpson, Michael}
\begin{itemize}
	\item Descarrega: \texttt{https://wordpress.org/plugins/contact-form-7-to-database-extension/}
	\item Documentació: \texttt{http://cfdbplugin.com/}
	\item Versió utilitzada:\texttt{ 2.10.9}
\end{itemize}

\textbf{Members} Autor: \textsc{Tadlock,Justin}
\begin{itemize}
	\item Descarrega: \texttt{wordpress.org/plugins/members/}
	\item Versió utilitzada:\texttt{ 1.1.1}
\end{itemize}

\textbf{Nav Menu Roles} Autor: \textsc{helgatheviking}
\begin{itemize}
	\item Descarrega: \texttt{wordpress.org/plugins/nav-menu-roles/}
	\item Versió utilitzada:\texttt{ 1.8.1}
\end{itemize}

\textbf{WP FullCalendar} Autor: \textsc{Sykes, Marcus}
\begin{itemize}
	\item Descarrega: \texttt{wordpress.org/plugins/wp-fullcalendar/} 
	\item Demostració: \texttt{demo.wp-events-plugin.com/calendar/} 
	\item Versió utilitzada:\texttt{ 1.2}
\end{itemize}

\textbf{Inline Google Spreadsheet Viewer} Autor: \textsc{Moscovitz, Meitar}
\begin{itemize}
	\item Descarrega: \texttt{https://es.wordpress.org/plugins/inline-google-spreadsheet-viewer/} 
	\item Versió utilitzada:\texttt{ 0.10.1}
\end{itemize}

\textbf{TablePress (no utilitzat)} Autor: \textsc{Bäthge, Tobias}
\begin{itemize}
	\item Descarrega: \texttt{https://es.wordpress.org/plugins/tablepress/} 
	\item Demostració: \texttt{https://tablepress.org/demo/} 
\end{itemize}

\textbf{Visualizer: Charts and Graphs} 
\begin{itemize}
	\item Descarrega: \texttt{https://es.wordpress.org/plugins/visualizer/}
	\item Versió utilitzada:\texttt{1.5.5}
\end{itemize}

\textbf{QR Code Generator}  Autor: \textsc{Rene Hermenau}
\begin{itemize}
	\item Descarrega: \texttt{https://es.wordpress.org/plugins/qrcode-wprhe/}
	\item Versió utilitzada:\texttt{1.2.6}
\end{itemize}


\textbf{Event Manager}  Autor: \textsc{Sykes, Marcus; }
\begin{itemize}
	\item Descarrega: \texttt{https://es.wordpress.org/plugins/events-manager/}
	\item Versió utilitzada:\texttt{5.6.4}
\end{itemize}


\section{Annex: Enviament de fitxers} \label{sec:fit}

Abans d'optar per la classificar dels documents adjunts d'un correu a partir d'un script de \texttt{Google} (veure article \cite{rebremails}), s'ha provat diferents opcions:

\subsection*{Google Drive WP Media}

El plugin \texttt{Google Drive WP Media} ( veure \cite{drivemedia}) permet desar els fitxers al \texttt{Google Drive}. Incorpora una bona ajuda (s'hauria d'actualitzar a la nova versió) de com configurar  l'\texttt{API} del propi \texttt{Drive} per tal de que es sincronitzi. 
L'inconvenient és que la pujada dels fitxers només es pot fer des del backend del \texttt{WordPress}. 
S'ha intentat modificar el plugin per tal que funciones des del frontend, però sense èxit.
També s'ha intentat separar la part \texttt{API} per treballar directament amb el \texttt{Google Drive} i \texttt{PHP}, però tampoc hi ha hagut èxit.

\subsection*{Google APIs Client Library for PHP}
Amb l'apartat anterior, la llibreria del \texttt{Google APIs Client Library for PHP} i \texttt{la guia ràpida PHP per Drive API} s'ha volgut fer un plugin que donés resposta al requeriment desitjats. S'ha seguit la guia \cite{apia},  \cite{apid} i \cite{apig} però un altre cop no hi ha hagut manera de que funcionés. 


\section{Annex: RedSys} \label{sec:redsys}

La plataforma de pagament virtual que s'ha escollit és \texttt{TPV virtual} facilitada pel tresorer del \texttt{C2EM} que a la vegada els de \textit{la Caixa} li han enviat la informació de com configurar-ho.

Els passos de posada en actiu han estat:
\begin{itemize}
	\item Accedir per canviar la contrasenya a \\
	\texttt{https://sis-t.redsys.es:25443/canales/lacaixa/} que és el que anomenen\textsf{ mòdul d'administració de la passarel·la de pagament}, des d'aquí es poden configurar alguns paràmetres que rebrà la nostre web cada cop que es fassi un pagament, també es poden veure els pagaments que es fan o fer devolucions. (\textit{figura \ref{fig:tpv}})
	
\imatge{0.65}{tpv_virtual.png}{Accés al servei \texttt{TPV Virtual}}{tpv}	
	\item Del mateix mòdul, anem a l'apartat Documentació (\textit{figura \ref{fig:tpvadmin}}) i descarraguem els dos fitxers que hi ha per poder entendre l'estructura i les associacions dels paràmetres que té.\footnote[2]{Els documents es poden consultar adjunts a la memòria a \\ \texttt{documents/GUIACOMERCIOSSISv5.pdf} i \texttt{documents/Transferencias y Domiciliaciones.doc}} \footnote[3]{També s'ha utilitzat el fitxer \texttt{documents/Manual integración para conexión por Redirección.pdf}}


	\imatge{0.65}{modul_admin.png}{Aparta \texttt{Documentació}}{tpvadmin}	
	
	\item Des de la pàgina \texttt{http://www.redsys.es/ } descarraguem l'\texttt{API} per \texttt{PHP} (una llibreria bàsica per fer la connexió)
	\item Configurem la pàgina web per enllaçar-la amb la passarel·la per a un entorn de proves, enviant les dades a \texttt{https://sis-t.redsys.es:25443/sis/realizarPago}
	\item Es fan les proves amb un número de tarjeta fals que et facilita el propi banc. Els resultats es poden consultar en el mòdul d'administrador, apartat \texttt{admin. TPV virtual}  (\textit{figura \ref{fig:tpvadmin}})
	
	\item Un cop es fan amb èxit les proves, el banc et permet passar a producció, canviant la clau d'encriptació.
	
\end{itemize}

El punt crític al qual em vaig trobar va ser com fer que des del formulari \texttt{CF7} es passes a una pàgina amb un formulari amb tots els paràmetres necessaris que demana la passararel·la i que es redirigix automàticament a \\ 
\texttt{//sis-t.redsys.es:25443/sis/realizarPago}. 

La solució la vaig trobar copiant la idea d'un plugin que feia el pagament a \texttt{PayPal}.

Un altre factor que em va fer ballar el cap vas ser com es podia recuperar les dades que venien del banc i alterar les taules internes del \texttt{WordPress} ja que un cop l'usuari passa a pagar, sortia de l'entorn del nostre \texttt{CMS}, les solució es troba dintre el fitxer \texttt{wp-content/plugins/contact-form-7-c2em-TPV/includes/recepcioPeticio.php}.

En aquest fitxer hi ha les claus d'encriptació, per un tema de seguretat, s'hi esborren.

\section{Annex: Alternatives de pagament} \label{sec:pag}

Les alternatives de pagament cobren:
\begin{itemize}
	\item \texttt{easyTPV}\footnote[4]{http://www.easytpv.com/}:  5\%
	\item \texttt{PayPal}: $3\%$ general i $1,9\% +0,35$\euro \,   per transacció en el cas d' Organitzacions sense ànim de lucre
	\item  \texttt{TPV de LaCaixa} (RedSys): $100$\euro \,  inicials més $1,8\%$ per cada transacció (negociant es pot arribar a l'$1\%$).
\end{itemize}

Suposant una mitjana de 100\euro \,  la inscripció, amb 600 inscripcions, les comissions finals serien (sobre un total de $60000$\euro \, :
\begin{itemize}
	\item \texttt{easyTPV}: $3000$\euro \, 
	\item \texttt{PayPal}: $1800$\euro \,  o $1350$\euro \,  en el cas de si ets una Organitzacions sense ànim de lucre
	\item  \texttt{TPV de LaCaixa}: $1180$\euro \,  o $700$\euro \, si s'arribar a poder negociar 
\end{itemize} 

\section{Annex: Desenvolupament del web del Congrés Català d'Educació Matemàtica 2016} \label{sec:req}

La web es basaria en un motor de WordPress, al qual intentant tocar el mínim el codi del nucli, s'anirien afegint funcionalitats en forma de plugins.
D'aquesta manera es crearia un paquet (wordpress+plugins) orientat a muntar i gestionar congressos, i seria, d'alguna manera una referència a l'hora de muntar un congrés, de manera que a cada congrés, només s'hauria de canviar el theme, i potser, tocar un fitxer de configuració, on hi consti dates límit, preus,? segons el plugin on pertoqui.
La idea és portar aquest projecte en github, de manera que sigui lliure.

Les especificacions (o plugins a afegir) serien:

\begin{enumerate}
	\item Gestió de les inscripcions al congrés.Com a base es pot partir d'un plugin existent que gestiona formularis, on podem afegir o treure camps.
	\begin{enumerate}
		\item Formulari amb les dades personals, les quals es guarden en bbdd, i amb possibilitat de descarregar-les de cop en un CSV, incloent, també l'hora i dia de la inscripció.
		\item Al finalitzar la inscripció, donar opcions de pagament, on una d'elles és saltar a una passarel·la de pagament mitjançant TPV. En aquest cas, a l'obtenir un ``ok'' de l'entitat, posar un 1 al camp PAGAT.
		\item L'import del pagament dependrà de varies condicions, i l'admin ha de poder accedir a un formulari per anar afegint o traient condicions, entre les que destaquen:
			\begin{enumerate}
				\item Pagament avançat abans d'una data concreta
				\item Si són socis d'alguna associació afí
				\item Si són estudiants, o jubilats, o presenten treballs, ...
			\end{enumerate}
		\item Al final de la inscripció, cal enviar dos emails, un a la persona inscrita, amb les dades d'inscripció, i de pagament (si no ho ha fet per TPV), i un a un email genèric (també configurable)
		\item A partir del DNI, s'ha de generar un codi de barres (en EAN-13, per exemple) per tal d'afegir-lo a la targeta d'identificació, o bé, per presentar-lo directament de cares a les acreditacions.
		\item Portar una estadística en temps real (publicable) del número de persones inscrites, i d'algun dels camps del formulari (localitat)
	\end{enumerate}
	\item Gestió d'enviament de treballs:(pot ser una variant de l'anterior plugin)
		\begin{enumerate}
			\item A diferència d'altres sistemes (com ara easychair), només cal que la persona (ja inscrita, o s'incriu in situ) ompli uns camps (títol, autors, resum, nucli temàtic,...) i envii un (o varis) fitxers. Aquestes dades es guarden en una bbdd, també exportable, i els fitxers desar-los en un directori del servidor. Seria molt interessant que aquest fitxer es desés en una carpeta del DRIVE (fent servir les API de google), a més, podria crear-se una estructura dins el drive segons el nucli temàtic, autor,tipus de comunicació..., definits en varis camps al formulari d'enviament de treballs.
			\item No cal assignar revisors, ni res, simplement desar els fitxers en un drive.
			\item També s'ha de preveure un segon enviament amb els escrits finals i revisats, que es desaran en una altra carpeta del drive, amb els definitius.
			\item Si es creu convenient, es podria fer servir easychair (o altres) en background, però hauria de ser transparent per l'usuari, i evitar dobles inscripcions.
		\end{enumerate}
	\item Gestió de la planificació
		\begin{enumerate}
			\item A partir d'un fitxer XML, o CSV (amb el format que pertoqui), es pujarà a la web (i es publicarà), un planning pels dies de congrés, posant per setmana, o per dies quines són les xerrades en paral·lel.
			\item L'usuari, a partir d'aquest planning ha de poder triar a quines conferències té previst anar-hi, i a partir de la selecció, es crearà un ical per importar-lo al seu google calendar, i també una versió en pdf per imprimir.
			\item Aquestes dades també es desaran en el servidor, a efectes de planificació de places i espais.
		\end{enumerate}
	\item Gestió de reserves de tallers. Els tallers solen tenir molta demanda, per la qual cosa, es fa preinscripció.
		\begin{enumerate}
			\item El plug-in ha de permetre crear una llista de tallers, on hi haurà un títol, un resum, autors i horaris. També hi ha d'haver un camp amb el número de places ofertades.
			\item L'usuari, un cop tingui la llista, ordenada per dia i hora, triarà a quins tallers es vol apuntar. S'ha de preveure que no es pugui triar dos tallers coincidents en hores. I també la possibilitat de canviar la selecció, i alliberar, si s'escau les places corresponents.
			\item En tot moment han de sortir el número de places lliures de cada taller, i si està ple, hi ha d'haver una llista d'espera, amb un límit de places, també configurable.
			\item El dia i hora a partir del qual es poden triar els tallers ha de ser configurable per l'admin.
			\item Un cop tancades les inscripcions, es generarà una llista amb els assistents per a cada taller.
		\end{enumerate}
	\item Gestió de l'acreditació: A partir d'una pàgina interna de la web (accessible amb un password), s'ha de poder portar un llistat de l'assistència a cada dia del congrés.
		\begin{enumerate}
			\item Hi ha d'haver un desplegable que coincideixi amb unes franges horàries definides per l'admin (o que es poden prendre del fitxer de planificació) , per exemple, matí del primer dia, tarda del primer dia, matí del segon?
			\item Un cop triada la franja horària, hi haurà un camp on es llegirà directament amb escànner làser, i que basicament és el DNI del assistent. En altres camps no editables, apareixerà l'hora i data de la lectura, i les dades personals (nom i cognoms).
			\item També apareixerà un camp tipus ``warning'' on s'avisi si aquest assistent no ha ``fitxat'' algun dels dies, indicant quin o quins dies ha fallat.
			\item Totes aquestes llistes s'han de poder descarregar juntes (una columna per franja, indicant ``ok'' si es va fitxar)
		\end{enumerate}
	\item Gestió d'activitats extres: Com ara excursions a la tarda, sopars,...
		\begin{enumerate}
			\item Amb uns formularis semblants als del tallers (que es pot partir com a base, o bé el mateix afegint alguna funcionalitat), s'han de poder afegir activitats, també la franja horària, i si són de pagament o no.
			\item En el cas que siguin de pagament, també s'hauria d'habilitar les diferents formes de pagament, entre les quals, hi ha la crida al TPV.
			\item Aquest plugin pot ser el MATEIX que els dels tallers, si a aquell, se li afegeix la possiblitat que les activitats tinguin un cost, i sempre que es puguin crear varies instàncies (una pels tallers, una altra pel sopar, per excursions,...)
		\end{enumerate}
\end{enumerate}

\newpage
%\section{Bibliografia}
\addcontentsline{toc}{section}{Bibliografia}
\begin{thebibliography}{25}

\bibitem{ocs}  \textit{Manual de uso del sistema abierto de conferèncias \texttt{OCS}} \newline
 \href{http://bvsayuda.sld.cu/ayudas/manual/manual-de-uso-del-sistema-abierto-de-conferencias-ocs/referencemanual-all-pages}{\texttt{\small{http://bvsayuda.sld.cu/ayudas/manual/ \\ manual-de-uso-del-sistema-abierto-de-conferencias-ocs/referencemanual-all-pages}}} \newline
30 de juny de 2016.

\bibitem{ocse} \textsc{Ramírez Vega, Alexa}: \textit{El uso de la plataforma Open Conference Systems en la organización de eventos académicos la experiencia de la \texttt{XIII} CIAEM} \newline
\href{https://www.academia.edu/1798301/El_uso_de_la_plataforma_Open_Conference_Systems_en_la_organizaci\%C3\%B3n_de _eventos_acad\%C3\%A9micos_la_experiencia_de_la_XIII_CIAEM}{\texttt{\small{https://www.academia.edu/1798301/ \\ El\textunderscore uso\textunderscore de\textunderscore la\textunderscore plataforma\textunderscore Open\textunderscore Conference\textunderscore Systems\textunderscore en\textunderscore la\textunderscore organizaci\%C3\%B3n\textunderscore de \textunderscore eventos\textunderscore acad\%C3\%A9micos\textunderscore la\textunderscore experiencia\textunderscore de\textunderscore la\textunderscore XIII\textunderscore CIAEM}}}  \newline
30 de juny de 2016.


\bibitem{ocs}  \textit{Hosting a sientific coference with \texttt{WrdPress}} \newline
\href{http://whatsamknows.tumblr.com/post/40304065562/hosting-a-scientific-conference-with-wordpress}{\texttt{http://whatsamknows.tumblr.com/post/40304065562/ \\ hosting-a-scientific-conference-with-wordpress}} \newline
30 de juny de 2016.

\bibitem{rebremails} \textsc{Agarwal, Amit}: \textit{How to Receive Files in your Google Drive from Anyone} \newline
\href{http://www.labnol.org/internet/receive-files-in-google-drive/19697/}{\texttt{http://www.labnol.org/internet/receive-files-in-google-drive/19697/}} \newline
30 de juny de 2016.

\bibitem{drivemedia} \textsc{Amir, Moch}: \textit{Descàrrega Plugin \texttt{Google Drive WP Media}} \newline
\href{http://wordpress.org/plugins/google-drive-wp-media/}{\texttt{wordpress.org/plugins/google-drive-wp-media/}} \newline
30 de juny de 2016.

\bibitem{apia} \textsc{Kluge, Tobias}: \textit{\texttt{Google Client API with PHP}  step by step tutorial with (some) screenshots} \newline
\href{http://enarion.net/programming/php/google-client-api/google-client-api-php/}{\texttt{http://enarion.net/programming/php/google-client-api/google-client-api-php/}} \newline
30 de juny de 2016.

\bibitem{apid} \textsc{Shaffer, Brent}: \textit{\texttt{Google APIs Client Library for PHP}} \newline
\href{https://github.com/google/google-api-php-client/tree/v1-master}{\texttt{https://github.com/google/google-api-php-client/tree/v1-master}} \newline
30 de juny de 2016.

\bibitem{apig} \textsc{The Drive platform}: \textit{PHP Quickstart} \newline
\href{https://developers.google.com/drive/v3/web/quickstart/php}{\texttt{https://developers.google.com/drive/v3/web/quickstart/php}} \newline
30 de juny de 2016.

\bibitem{usecsript} \textit{How to use Google App Scripts} \newline
\href{https://blogdelbarba.wordpress.com/2015/10/01/how-to-use-google-app-scripts/}{\texttt{https://blogdelbarba.wordpress.com/2015/10/01/how-to-use-google-app-scripts/}} \newline
30 de juny de 2016.

%\bibitem{timetable} MotoPress: \textit{Timetable and Event Schedule by MotoPress} \newline
%\texttt{https://it.wordpress.org/plugins/mp-timetable/} \newline
%3 de juny de 2016.

%\bibitem{dtdoc} \textsc{sprymedia}: \textit{Documentació i demostració \texttt{datatables}} \newline
%\texttt{https://www.datatables.net/} \newline
%3 de juny de 2016.

\bibitem{cf7c2em} \textsc{Hislop, Robin}: \textit{WordPress Contact Form 7 user registration} \newline
\href{http://www.mootpoint.org/blog/wordpress-contact-form-7-user-registration/}{\texttt{http://www.mootpoint.org/blog/wordpress-contact-form-7-user-registration/}} \newline
30 de juny de 2016.

\bibitem{dni} \textsc{HodeiDesign}: \textit{Plugin \texttt{Validar DNI, NIF, NIE y CIF}} \newline
\href{https://wordpress.org/plugins/validar-dni-nif-nie-y-cif/}{\texttt{https://wordpress.org/plugins/validar-dni-nif-nie-y-cif/}} \newline
30 de juny de 2016.

\bibitem{fpdfa}  \textit{FPDF: Rectas Curiosas :D} \newline
\href{https://huguidugui.wordpress.com/2013/12/02/fpdf-rectas-curiosas-d/}{\texttt{https://huguidugui.wordpress.com/2013/12/02/fpdf-rectas-curiosas-d/}} \newline
30 de juny de 2016.

\bibitem{hooks} \textsc{Grossi, Junio}:\textit{Recopilació \texttt{hooks} de \texttt{CF7}} \newline
\href{https://github.com/jgrossi/contact-form-7-hooks}{\texttt{https://github.com/jgrossi/contact-form-7-hooks}} \newline
30 de juny de 2016.

\bibitem{rols} \textsc{Boluda, Joan}:\textit{Roles de usuario en WordPress} \newline
\href{https://boluda.com/tutorial/roles-de-usuario-en-wordpress/}{\texttt{https://boluda.com/tutorial/roles-de-usuario-en-wordpress/}} \newline
30 de juny de 2016.

\bibitem{ext} \textsc{Foley, Joe}:\textit{10 Super Useful WordPress Plugins to Extend \texttt{Contact Form 7}} \newline
\href{https://theme4press.com/10-super-useful-wordpress-plugins-extend-contact-form-7/}{\texttt{https://theme4press.com/\\10-super-useful-wordpress-plugins-extend-contact-form-7/}} \newline
30 de juny de 2016.
\end{thebibliography}


\end{document} 

