/Presentacion/src/jquery3.tex

\input{preambulo.tex}

% Titulo
\title[WebDesign] {Diseño Web | Tecnologías Involucradas}
\author[Walter Vargas]{ info@covetel.com.ve \inst{1}}
\subtitle{JQuery}
\institute[covetel.com.ve]{ \inst{1} Cooperativa Venezolana de Tecnologías Libres R.S. }
\date

\begin{document}

\begin{frame} % (fold)
    \titlepage 
\end{frame}

\begin{frame} % (fold)
    \tableofcontents
\end{frame}

\section{Métodos de Efecto} % (fold)

\subsection{Efectos Pre-empaquetados} % (fold)

\begin{frame}[fragile]{Efectos Pre-empaquetados} % (fold)
\begin{itemize}
    \item .show([speed][, callback]) \textit{ speed= una cadena o un número para determinar cuánto tiempo se ejecutara la animación.}

    \textit{callback= una función para saber cuando ha finalizado la animación.}
    \begin{lstlisting}
    <div class="content">
      <div class="trigger button">Trigger</div>
      <div class="target"><img src="hat.gif" width="80" height="54"></div>
      <div class="long"></div>
    </div>
    \end{lstlisting}
    \begin{lstlisting}
    $('.trigger').click(function() {
      $('.target').show('slow',  function() {
        $(this).log('Effect Complete.');
      });
    });
    \end{lstlisting}
    \item .hide().
    \item .toggle().
    \item .slideDown() .slideUp() .slideToggle()
    \item .fadeIn() .fadeOut() .fadeTo()
\end{itemize}
\end{frame}

\subsection{Efectos Personalizados} % (fold)

\begin{frame}[fragile]{Efectos Personalizados} % (fold)
\begin{itemize}
    \item .animate(properties [, speed][, easing][, callback])  \textit{
    properties= un mapa de propiedades CSS por los que se moverá la animación.}

    \textit{ speed= una cadena o un número para determinar el tiempo que se ejecutara la animación.}

    \textit{ easing= una cadena facilita el uso de la función en la transición.}

    \textit{ callback= una función para saber cuando ha finalizado la animación.}
    \begin{lstlisting}
    <div class="content">
      <div class="trigger button">Trigger</div>
      <div class="target"><img src="hat.gif" width="80" height="54"></div>
      <div class="long"></div>
    </div>
    \end{lstlisting}
    \begin{lstlisting}
    $('.trigger').click(function () {
      $('.target').animate({
      'width': 300, 
      'left': 100, 
      'opacity': 0.25
      }, 'slow', function() {
        $(this).log('Effect Complete');
      });  
    });
    \end{lstlisting}
\end{itemize}
\end{frame}

\section{Métodos AJAX} % (fold)

\subsection{Interfaz de Bajo Nivel} % (fold)

\begin{frame}[fragile]{Interfaz de Bajo Nivel} % (fold)
\begin{itemize}
    \item .ajax(settings) \textit{ settings= un mapa que contiene las siguientes opciones para loas solicitudes:}
    \begin{itemize}
      \item url.
      \item dataType.
      \item timeout.
      \item error.
      \item success.
    \end{itemize}
    \begin{lstlisting}
    $.ajax({
      url: 'ajax/test.html', 
      success: function(data) {
        $('.result').html(data);
        $().log('Load was performed');
      }, 
    });
    \end{lstlisting}
    \item .ajaxSetup(settings) \textit{ settings= un mapa de opciones para
    solicitudes a futuro.} 
    \begin{lstlisting}
    $.ajaxSetup({
      url: 'ping.php', 
    });
    \end{lstlisting}
\end{itemize}
\end{frame}

\subsection{Métodos de Taquigrafía} % (fold)

\begin{frame}[fragile]{Métodos de Taquigrafía} % (fold)
\begin{itemize}
    \item .get(url[, data][, success]) \textit{ url= una cadena que contiene la URL donde la solicitud debe ser enviada.}

    \textit{ data= un mapa de datos enviados con la solicitud.}

    \textit{ success= una función que se ejecuta cuando la solicitud a sido procesada.}
    \begin{lstlisting}
    $.get('ajax/test.html', function (data) {
      $('.result').html(data);
      $().log('Load was performed');
    })
    \end{lstlisting}
    \item .getModified().
    \item .loadModified().
    \item .post().
\end{itemize}
\end{frame}

\begin{frame}[fragile]{Métodos de Taquigrafía} % (fold)
\begin{itemize}
    \item .load(url[, data][, success]) \textit{ url= una cadena que contiene la URL donde la solicitud debe ser enviada.}

    \textit{ data= un mapa de datos enviados con la solicitud.}

    \textit{ success= una función que se ejecuta cuando la solicitud a sido procesada.}
    \begin{lstlisting}
    $('.result').load('ajax/test.html');
    \end{lstlisting}
    \item .getJSON(url[, data][, success]) \textit{ url= una cadena que contiene la URL donde la solicitud debe ser enviada.}

    \textit{ data= un mapa de datos enviados con la solicitud.}

    \textit{ success= una función que se ejecuta cuando la solicitud a sido procesada.}
    \begin{lstlisting}
    $.getJSON('ajax/test.json', function(data) {
      $('.result').html('<p> + data.foo + '</p><p>' + data.baz[1] + '</p>');
      $().log('Load was performed');
    });  
    \end{lstlisting}
    \item .getScript().
\end{itemize}
\end{frame}

\subsection{Controladores Globales de Eventos} % (fold)

\begin{frame}[fragile]{Controladores Globales de Eventos} % (fold)
\begin{itemize}
    \item .ajaxComplete(handler) \textit{ handler= la función que se invoca.}
    \begin{lstlisting}
    $('.log').ajaxComplete(function() {
      $(this).log('Triggered ajaxComplete handler');
    });
    \end{lstlisting}
    \item .ajaxError().
    \item .ajaxStart().
    \item .ajaxStop().
    \item .ajaxSuccess().
    \item .ajaxSend(handler) \textit{ handler= la función que se invoca.} 
    \begin{lstlisting}
    $('.log').ajaxSend(function() {
      $(this).log('Triggered ajaxSend handler');
    });
    \end{lstlisting}
\end{itemize}
\end{frame}

\subsection{Funciones de Ayuda} % (fold)

\begin{frame}[fragile]{Funciones de Ayuda} % (fold)
\begin{itemize}
    \item .serialize(param)
    \begin{lstlisting}
    <form>
      <div><input type="text" name="a" value="1" id="a" /></div>
      <div><input type="text" name="b" value="2" id="b" /></div>
      <div><input type="text" name="c" value="3" id="c" /></div>
      <div><textarea name="d" rows="8" cols="40">4</textarea></div>
      <div><select name="e">
        <option value="5" selected="selected">5</option>
        <option value="6">6</option><option value="7">7</option>
      </select></div>
      <div><input type="checkbox" name="f" value="8" id="f" /></div>
      <div><input type="submit" name="g" value="Submit" id="g" /></div>
    </form>
    \end{lstlisting}
    \begin{lstlisting}
    $('form').submit(function() {
      $(this).log($('input, textarea, select').serialize());
      return false;
    });
    \end{lstlisting}
\end{itemize}
\end{frame}

\section{Otros Métodos} % (fold)

\subsection{Otros Métodos} % (fold)

\begin{frame}[fragile]{Métodos de Codificación y decodificación base-64} % (fold)

\begin{itemize}
\item .atob() \textit{Método que decodifica una cadena codificada en base-64.}

\item .btoa() \textit{Método para codificar una cadena en base-64. Este método utiliza los caracteres A-Z,  a-z, 0-9, +, / y = para la codificación de una cadena.}
\end{itemize}

\textbf{Ejemplo}
\begin{lstlisting}
<html>
<head>
    <script type="text/javascript">
        function EncodeDecode () {
            input = document.getElementById ("myInput");

            encodedData = window.btoa (input.value);
            alert ("encoded data: " + encodedData);

            decodedData = window.atob (encodedData);
            alert ("decoded data: " + decodedData);
        }
    </script>
</head>
<body>
    <input type="text" id="myInput" value="The text to encode"/>
    <button onclick="EncodeDecode ();">Encode in base-64!</button>
</body>
</html>
\end{lstlisting}
\end{frame}

\begin{frame}[fragile]{JSON.parse} % (fold)
Método para convertir un array en Objeto.
\begin{itemize}
\item Usando JavaScript
\textbf{Ejemplo}
\begin{lstlisting}
var JsonString = '[{"name": "Jhon", "apellido":"Smith"}]';
var JsonObjects = JSON.parse(JsonString);
alert(JsonObjects);
\end{lstlisting}
\item Usando JQuery
\textbf{Ejemplo}
\begin{lstlisting}
var obj = jQuery.parseJSON('{"name": "Jhon", "apellido":"Smith"}');
alert(obj.name === "Jhon");
\end{lstlisting}
\end{itemize}
\end{frame}

\end{document}