Diferencia entre revisiones de «Diseño Web/Retos Javascript»
Contenido eliminado Contenido añadido
Agregué la traducción de los retos 5 al 8 |
Agregué la traducción de los retos 8-10 |
||
Línea 673:
Eso es sólo el principio, pero esperamos que te haya hecho pensar acerca de las posibilidades.
== Reto 9: Una introducción a YUI - Un calendario ==
[[Image:YUICalendar.gif|right]] Imagina que tienes un formulario que requiere que el usuario introduzca una fecha. Hay varios formatos que podrían usarse, algunos de los cuales son ambiguos, tales como 08/06/2007 (¿se trata del 8 de junio de 2007 o del 6 de agosto de 2007? Esto depende de dónde vivas.).
Actualmente hay muchas soluciones Javascript que permiten a los usuarios dar click en una opción de calendario en lugar de escribir la fecha directamente. Esta es una forma mucho más certera de obtener esa información del usuario. para esto vamos a conocer las bibliotecas de la Interfaz de Usuario de Yahoo! (YUI).
La biblioteca YUI es muy extensa, y está ampliamente documentada. Por el momento usaremos el elemento Calendario sin entrar en demasiados detalles, pero si quieres conocer más, hay documentación para aventar para arriba (incluyendo tablas de referencia) y videos tales como este: [http://www.dustindiaz.com/screencast-episode-01/ YUI Basics and DOM hacking].
Para comenzar:
* Crea un documento (X)HTML que contenga la declaración de tipo de documento (doctype), y las etiquetas html, head, title y body, así como un encabezado de nivel 1 (h1) y un párrafo de introducción (tal como, "Una prueba del control de Calendario de YUI").
* Agrega un pequeño formulario con un campo, incluyendo una etiqueta (label) "Introduce el nombre de tu evento:", seguido por un campo de texto y un botón para enviar los datos.
* Lee la introducción en [http://developer.yahoo.com/yui/calendar/ YUI Calendar control] y sigue las instrucciones de la primera sección "Getting Started" paso a paso. Si te atoras con algo, revisa el código de abajo para saber qué hacer, pero debes resistirte a copiar y pegar.
Una vez que tienes un control de calendario en tu página:
* Agrega una nueva función a tu Javascript, llamada mostrarFecha(), vincula esta función con el evento onsubmit del formulario y verifica que funcione (por ejemplo, agrega una alerta que diga "Sí, la función se activó").
* Lee la sección de la documentación de YUI titulada "Obtaining selected dates", pero ten en cuenta que sabemos que solamente se puede elegir una fecha, así que podemos obtener la fecha y almacenarla en una variable de esta manera:
** var fecha_elegida = cal1.getSelectedDates()[0]
* Usa el código de arriba en tu función mostrarFecha para mostrar la fecha usando window.alert. Podrías requerir el uso de los métodos getDate(), getMonth() y getFullYear() del objeto date (esto es, fecha_elegida.getMonth() para obtener el mes). Vela [http://www.w3schools.com/jsref/jsref_obj_date.asp referencia del objeto date en W3Schools] si requieres más ayuda.
Solamente si estás realmente entusiasmado:
* Agrega un nuevo campo de texto a tu formulario con la etiqueta "Fecha elegida", y ve si puedes usar el propio evento selectEvent del Calendario para transferir la fecha elegida al nuevo campo (nota: hay mucho por aprender si no has usado los eventos de YUI antes).
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Calendario YUI</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/calendar/assets/skins/sam/calendar.css">
<!-- Dependencias -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!-- Archivo fuente -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/calendar/calendar-min.js"></script>
<script type="text/javascript">
var cal1;
function configMisEventos() {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
cal1.render();
}
window.onload = configMisEventos;
</script>
</head>
<body class="yui-skin-sam">
<h1>Calendario - Yahoo! User Interface</h1>
<p>Este es un ejercicio para probar el calendario de YUI</p>
<form action="">
<p>Este formulario deberia tener muchos otros campos</p>
<p>
<label>
Pon aquí el título de tu evento:
<input type="text" name="tituloevento" id="tituloevento">
</label>
</p>
<p>
<label>
Elige la fecha del evento:
<input id="fechaevento" type="text">
</label>
</p>
<div id="cal1Container"></div>
<p>
<input type="submit" value="Enviar">
</p>
</form>
</body>
</html>
</pre>
== Reto 10: Una introducción a jQuery - revisando los elementos que se esconden ==
La biblioteca Yahoo! User Interface que se usó en el reto anterior tiene una cantidad increíble de características, pero también puede, por eso mismo, constituir algo muy difícil de aquilatar de principio para quienes sólo buscan hacer unas cosas simples, como mostrar/ocultar un campo de un formulario.
Aquí entra [http://jquery.com/ jQuery]:
: jQuery es una biblioteca que simplifica la forma en que exploramos los documentos (X)HTML, manejamos eventos, realizamos animaciones, y agregamos interacciones de Ajax a nuestras páginas web. jQuery ha sido diseñada para cambiar el modo en que escribes Javascript.
Así que empecemos. Un buen lugar para comenzar es el tutorial [http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery Getting started with jQuery]. Incluye un kit para principiantes (starter kit) y te guiará a través de un ejemplo hola mundo. Después de terminar las primeras dos secciones (Setup y Hello jQuery), ya estás listo para este reto: revisando los elementos que desaparecen. También puedes buscar otro tutorial de jQuery que te enseñe a hacer lo más básico antes de abordar este reto.
* Copia y pega el siguiente código HTML en un nuevo archivo - fíjate en que es el mismo formulario del Reto 1 (y queremos implementar la misma funcionalidad).
* Asegúrate de que tienes la versión más reciente de jQuery guardada en el mismo folder que tu archivo, con el nombre jquery.js
* Lee el código Javascript para que revises si sabes lo que intenta hacer.
* Pruébalo en el navegador.¿Hace lo que se espera? ¿Qué es lo que no funciona bien aún? (piensa: "No pensé que tenía que fijarme en eso").
* Ahora, para el reto, revisa la página [http://docs.jquery.com/Events jQuery Event documentation], y ve si puedes solucionar el problema que identificaste en el paso previo.
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Javascript reto 10</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Configura un codigo para ser ejecutado cuando el documento este listo
$(function(){
// Primero esconde todo el parrafo con el campo de correo:
$("p#emailpara").hide();
// Agrega una funcion que deberia ejecutarse cada vez que se
// active la casilla subscribe:
$("input#subscribe").click(function(){
$("p#emailpara").show("slow");
});
});
</script>
</head>
<body>
<h1>Probando jQuery</h1>
<form action="mailto:me@example.com" method="post">
<fieldset>
<legend>Suscripciones de correo</legend>
<p id="subscribepara">
<label>
<input type="checkbox" name="subscribe" id="subscribe">
Me gustaría recibir el boletín vía correo-e.
</label>
</p>
<p id="emailpara">
<label>
Email Address:
<input type="text" name="email" id="email">
</label>
</p>
</fieldset>
</form>
</body>
</html>
</pre>
Una vez que estés listo, fíjate en el código Javascript que usaste en este reto y compáralo con tu código del Reto 1 ... ¿cuál preferirías escribir?
Al final revisa el Reto 4 (donde se mejoró la validación), y reescribe tu solución usando jQuery.
| |||