16 ago

Durante las clases, cuando muestro algún ejemplo de javascript/jquery, suelo recurrir al método de escribir código en un editor (mi favorito es el scite) y para ver el resultado, voy al browser (generalmente firefox) y ahi suelo ejecutar o recargar la página.

El punto es que en esos cursos iniciales, me encuentro en la mayoría de los casos, que tengo que mostrar ejemplos muy pequeños de lo que es la manipulación del DOM.

Pantallazo-jquery editor (más…)
7 jul
Una experiencia realmente interesante resultó ser el curso inicial-avanzado de javascript que debí dar en 10 clases. El objetivo fue que el estudiante, el cual no tiene mucha noción acerca de esta tecnología aunque está capacitado para maquetar xhtml y css, pudiera trabajar de manera avanzada con scripts en js y finalmente jQuery. ilustración de curso javascript Si bien resulta algo ambicioso esperar que quien haga el curso logre tales objetivos, vale la pena realizarlo a la par que se hagan los ejercicios y se investigue profundizando en los temas planteados. Recopilé en este post todo el material que produje: Temario, ejericios y ejemplos. Valió la pena.

Clase Nº1

  • Temario: Clase N° 1
  • ejemplo: Estructura de control IF
  • Trabajo práctico:
    Al iniciar la app el usuario se encuentra con un boton de iniciarApp. clickea y le aparece un cuadro de dialogo que le pregunta si desea realmente iniciarla. (confirm) Al negarse el navegador se dirige a google.com al aceptarla se muestra un cuadro de diàlogo pidiendole al usuario que ingrese su nombre. (prompt) Si el usuario deja el cuadro vacio o bien apreta cancelar el sistema vuelve a reclamarle que ingrese su nombre. Cuando el usuario lo ingresa en la pantalla aparecerá un texto que dice “bienvenido “+nombre y desaparece el boton de” iniciar” Para asignar los eventos al a href usamos window.onload = function( ) aplicamos tambien: document.getElementByid(“id del elemento”); window.location.href = “http://www.google.com”; uso del “or” > if(nombre == “” || nombre == null ) document.getElementByid(“mensaje”).innerHTML = “Bienvenido”+nombre;
    bajar archivo

Clase Nº2

  • Temario: Clase N° 2
  • Ejemplo:
  • Trabajo práctico:
    Continua la aplicacion:  El mensaje de bienvenida debe ahora validar por género: Si el nombre ingresado termina en “o” dirá “Bienvenido”+nombre. De terminar en “a” dirá “Bienvenida”+nombre. De ser otra letra dirá “BIenvenido/a”+nombre. Al aceptar muestra la pantalla principal div id=”pantalla-inicial” y oculta el div del bt iniciar. En la pantalla principal aparece un menú con el bt iniciar Form. Creamos un archivo crearForm que tenga una funcion del mismo nombre que agrega los elementos form, y un grupo de campos de texto (conjunto de pares de label, input). los campos son Nombre, apellido dirección y el botón de submit. el Formulario debe ser xhtml válido. con sus elementos, atributos y valores. este formulario se agregará en el div id=”principal”.
    bajar archivo

Clase Nº3

  • Temario: Clase N° 3
  • ejemplo:
  • Trabajo práctico:
    Continua la aplicacion: El boton que antes creaba un formulario, creará ahora un submenu con 3 items. que se encuentran en un array. cada item de ese array abrirá un formulario distinto. Uno abrirá un formulario para guardar los datos de un disco. Otro para guardar los datos de un libro. Y otro para grabar los datos de un programa. disco: artista,album,año,guardado en libro: autor,nombre,año, guardado en programa: nombre, utilidad, guardado en Construiremos la clase formulario y esta tendrá un método público para generar campos.
    bajar archivo

Clase Nº4

Clase Nº5

Clase Nº 6

Clase Nº 7

Clase Nº 8

Clase N° 9

  • Trabajo práctico evaluatorio: jQuery
    Al iniciarse la aplicación se llamará a un archivo .xml que tiene una estructura de datos de una colección de libros. En el menú de la izquierda (ul id=”menu”) se cargarán los títulos de los libros y en el id de results se muestra un texto pidiendo al usuario que elija uno de ellos. El usuario hará click sobre el título y: en h2 se cargará el título, en h3 el autor y en el div id=”result” el resumen de contenido.
    bajar archivo ver resultado

Clase N° 10

  • Trabajo práctico evaluatorio: Final
    El examen es de javascript/jQuery y Ajax, adjunto se encuentran todos los archivos necesarios para la consigna. Es necesario que utilicen un localhost.
    1. El usuario ingresa al index.html. Allí se encuentra con un form de user y pwd.
    2. El sistema se contacta via POST contra el archivo lector.php. Chequea si el user y pass son correctos (que como podràn ver en el php son “admin” y “1234”) de no ser asi los reclama (“ingrese el user y pass correctos”).
    3. Una vez que el usuario ingresa la data correspondiente debe mostrarse dos opciones de idiomas (es, en) estos vienen en formato JSON. Usar el método de jQuery parseJSON
    4. Las dos opciones son links al catalogo.html. la variable de idioma puede ir acompañado a la url como url#idioma o url?idioma= 
    5. En el archivo catálogo se captura el idioma y dependiendo de este tomara datos de data_es.xml y data_en.xml.
    6. Cada archivo xml trae un catálogo de libros en diferentes idiomas. el sistema será un catálogo que permita navegarlos como si fuera un slide show, con botones “anterior” y “siguiente”.
    7. Al iniciarse se muestra el primer libro. con los botones de navegacion. el bt anterior estará desactivado (clase .pasivo de css) mientras que el siguiente estará activo (clase .activo de css)
    8. Al clickear en siguiente, se hará en efecto de ocultamiento del libro anterior y un fadeIn del libro siguiente. y se activará el boton de “anterior”.
    9. El usuario puede navegar hasta el último libro. Allí se desactivará el boton “siguiente”.
    10. El contenido de “titulo”,”autor” y “contenido” se mostrarán en el <div id=”content”> mientras que la imagen se mostrará dentro de <div id=”image-wrapper”>
    bajar archivo
23 jun
desarrollo web para ipad Definitivamente la explosión de dispositivos móviles en el mercado ha acelerado lo que es el desarrollo html5/css3/javascript, sumado a eso, los dispositivos touchscreen han creado una serie de novedosas interacciones que hacen el trabajo de desarrollo web bastante más desafiante. Estuve haciendo una web exclusiva para ipad y me encontré con un par de cuestiones que hicieron del proyecto algo bastante interesante. (más…)
17 may
Hace ya un tiempo estoy investigando el elemento CANVAS. La API de dibujo de html5. Lo primero que invita a pensar es que este elemento sería el reemplazo ideal para flash. La mejor manera de poner a prueba esto sería desarrollar un juego. Ya hay cientos de juegos dando vueltas por la web, sin contar esta excelente página sobre el canvas mismo. Pero eso no invalida la experiencia personal, obviamente. imagen del juego (más…)
3 may
tapa del libroTerminé de leer la semana pasada el libro de Daniel Domscheit-Berg: Dentro de Wikileaks. Lo mas consistente para definir la impresión que me dejó: sumamente divertido. Lo que se diría un libro pochoclero. A lo largo de la historia el otrora conocido como Daniel Schmitt repaza unas cuantas anécdotas de su paso por wikileaks. Daniel ingresó al proyecto como mero colaborador, pero su pasión por wikileak fue ganandole la vida al punto de abandonar su empleo de técnico en redes en una gran empresa para dedicarse full time al sitio de Julian Assange. Schimitt fue portavoz del sitio, y un gran sector de la prensa llegó a llamarlo “el fundador de wikileaks” valiendole esto el odio del mismisimo Assange, a quien veía como un competidor interno dispuesto a disputarle el poder y protagonismo. Es asi como el autor nos muestra un Julian Assange totalmente egocéntro, paranoico y obsesionado con la fama. En numerosas oportunidades se refiere a él como una “estrella Pop”. Assange aparece como un total narcisista que dice frases como “Voy a detener una guerra” al referirse a la publicación de los documentos referidos al conflicto bélico de Irak con los Estados Unidos. (más…)
26 abr
Finalmente creé mi blog personal, y creo que para inaugurarlo, el primer post va dedicado a la creación de este theme de wordpress. captura de este theme de wp Es un recurso bastante habitual que bajemos alguno de los millones de themes disponibles en la blogoesfera y le cambiemos el logo, los colores y algún widget, pero por una cuestión de tratar de ser un poco mas profesional me pareció necesario ver la posibilidad de crear uno theme a partir del mockup psd/png que sea diseñado sin tener en cuenta algún modelo de theme que ande dando vueltas. Tenía el diseño en png desde hacia un par de años (de verdad, hacía dos años que tenía pensado hacer esto). Hice algunas actualizaciones en el collage de la cabecera -objetos por los que me puedo sentir mas o menos representados- y luego de eso me puse a trabajar para convertir eso en algo real. (más…)


Contacto