Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Cosas por hacer

Taller de demostración del uso de PHP, Ajax y Prototype.

Introducción, requisitos y herramientas.

Jorge Iván Meza Martínez <jimezam@gmail.com>

http://www.jorgeivanmeza.com/
http://educacion.misservicios.net/

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 1

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Contenido
● Introducción.
● Requisitos.
● Herramientas.
● Fuentes de información.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 2

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Introducción

Bienvenido al mini taller de desarrollo de aplicaciones

con PHP, AJAX y Prototype.

El objetivo principal de este taller es el guíar al lector

a través del desarrollo práctico de una aplicación web
dinámica implementada en PHP del lado del servidor
y adobada con JavaScript a través del uso de la
librería Prototype del lado del cliente para el
enrriquecimiento de la experiencia del usuario y el
uso de la comunicación asíncrona con el servidor.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 3

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Introducción

Durante el desarrollo de las sesiones prácticas el

interés principal del curso es que el lector note como
es posible desarrollar de manera rápida y sencilla
aplicaciones web dinámicas al estilo Web2.0
utilizando únicamente herramientas libres o gratuitas
cuyas últimas versiones pueden ser obtenidas a
través de internet.

La metodología del curso es la que he llamado

Copie/Pegue/Experimente/Aprenda ya que la
documentación lo guiará paso a paso en la
implementación del proyecto objetivo, brindándole
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 4
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Introducción
suficientes herramientas y oportunidades para que
aclare sus dudas, cree nuevas inquietudes mas
elaboradas y experimente contrastando
inmediatamente la teoría con la práctica a través del
proyecto en desarrollo.

El curso ha sido dividido en tres capítulos o sesiones

de la siguiente manera.

● Implementación de la interfaz de usuario

(XHTML/CSS).
● Implementación de la lógica del cliente (Prototype).

● Implementación de la lógica del servidor (PHP).

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 5

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Introducción

A través de los cuales se espera que el lector

reconozca con claridad cada una de las tecnologías
asociadas así como sus límites y medios de
interrelación.

En el presente documento se discutirán los

prerequisitos sugeridos para el desarrollo del curso y
se describirán las herramientas propuestas para el
mismo así como se presentarán fuentes de
información de interés particular de cada una de las
tecnologías.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 6
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Requisitos

Para obtener el máximo nivel de provecho de este

curso, el lector deberá estar familiarizado con la
programación procedimental y el desarrollo de
aplicaciones web. También se sugiere tener
conocimientos básicos de HTML, CSS, PHP,
JavaScript y tener la noción conceptual de AJAX.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 7

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Herramientas

Aptana IDE
http://www.aptana.com/
Editor de código HTML, JavaScript, PHP y CSS basado en
Eclipse.

Firefox
http://www.firefox.com/
Navegador web con buen cumplimento de estándares y
soporte de plugins.

Firebug
http://www.getfirebug.com/
Ayudante para la depuración de HTML, JavaScript y CSS
en tiempo real.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 8
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Herramientas

HTML Validator
http://users.skynet.be/mgueury/mozilla/
Ayudante para la validación de errores del código HTML.

SQLite Manager
http://code.google.com/p/sqlite-manager/
Ayudante para la administración de bases de datos SQLite.

SQLite
http://www.sqlite.org/
Motor de base de datos relacional con soporte para
consultas SQL basado en archivos.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 9

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Herramientas

Prototype
http://www.prototypejs.org/
Framework de JavaScript que facilita el desarrollo de
aplicaciones dinámicas, incluyendo el soporte para AJAX.

Scriptaculous
http://script.aculo.us/
Librería de efectos basada en Prototype.

Swazz JavaScript Calendar

http://calendar.swazz.org/
Calendario JavaScript muy simple para la selección fácil de
fechas.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 10
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Herramientas

XAMPP Lite
http://www.apachefriends.org/en/xampp-windows.html#646
Distribución de Apache+PHP+MySQL para memorias USB.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 11

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Aptana: Presentación

Editor de código HTML, JavaScript, PHP y CSS.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 12
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Aptana: Instalación
● Descargue el archivo .ZIP con la distribución del
sitio web oficial:
http://www.aptana.com/studio/download/1.1.

● Descomprima el archivo en su ubicación final que

puede ser una memoria USB (menor desempeño).

● Ejecute el programa AptanaStudio.exe.

● Instale el módulo de PHP haciendo click sobre el

enlace Install correspondiente como se muestra
en la gráfica anterior.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 13
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Firefox: Presentación

Navegador web con buen soporte de estándares y

amigable con los desarrolladores.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 14
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Firefox: Instalación

● Descargue el instalador haciendo click sobre el

área marcada con amarillo en la imagen anterior.

● Realice una instalación convencional.

● Haga doble click sobre el ícono Mozilla Firefox

sobre el escritorio.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 15

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Firebug: Presentación

Ayudante para la depuración de HTML, JavaScript y

CSS en tiempo real.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 16
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Firebug: Instalación

● Acceda al sitio oficial del plugin:

https://addons.mozilla.org/es-ES/firefox/addon/1843.

● Haga click sobre el enlace Añadir a Firefox

resaltado en la imagen anterior.

● Instale el complemento.

Para activarlo desde Firefox haga click sobre el

bicho ubicado en la parte inferior o presione la
tecla F12.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 17
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

HTML Validator: Presentación

Ayudante para la validación de errores del código

HTML.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 18
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

HTML Validator: Instalación

● Acceda al sitio oficial del plugin:
http://users.skynet.be/mgueury/mozilla/download.html

● Haga click sobre el enlace correspondiente a su

plataforma: Download HTML Validator for Windows.

● Si Firefox evita la instalación del software (barra

superior amarilla), haga click sobre el botón
Permitir.

Para utilizar el complemento acceda al código

fuente de la página consultada (Ver > Código
fuente de la pagina) o presione CTRL+U.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 19
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

SQLite Manager: Presentación

Ayudante para la administración de bases de datos

SQLite.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 20
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

SQLite Manager: Instalación

● Acceda al sitio oficial del plugin utilizando FireFox como navegador
web.
http://code.google.com/p/sqlite-manager/

● Haga click sobre el enlace correspondiente a la última versión XPI

disponible bajo la sección Featured Downloads.

● Si Firefox evita la instalación del software (barra superior amarilla),

haga click sobre el botón Permitir.

● Para utilizar el complemento acceda a través de los siguientes

menúes: Herramientas > SQLite Manager.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 21

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

XAMPP Lite: Presentación

Distribución de Apache+PHP+MySQL para memorias USB.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 22
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

XAMPP Lite: Instalación

● Acceda al sitio oficial y descargue la versión .ZIP
mas reciente de XAMPP Lite.

● Descomprima el archivo .ZIP descargado en su

ubicación final. Ejemplo: e:\xampplite.

● Ejecute el script setup_xampp.bat para

personalizar sus ubicaciones.

● Ejecute el programa xampp-control.exe.

● Inicie (start) o detenga (stop) el servicio de Apache

según considere necesario.
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 23
Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Fuentes de información

XHTML
● http://es.wikipedia.org/wiki/XHTML

● http://www.w3c.es/Divulgacion/Guiasbreves/XHTML

● http://developer.mozilla.org/es/XHTML

● http://www.w3schools.com/xhtml/

CSS
● http://es.wikipedia.org/wiki/Css

● http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo

● http://www.webestilo.com/css/

● http://www.w3.org/Style/CSS/

● http://www.w3schools.com/css/

PHP
● http://es.wikipedia.org/wiki/.php

● http://www.php.net/

● http://www.webestilo.com/php/

● http://www.programacion.com/php/

● http://www.w3schools.com/php/

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 24

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Fuentes de información

SQLite
● http://es.wikipedia.org/wiki/SQLite

● http://www.sqlite.org/

● http://www.sqlite.org/features.html

● http://www.sqlite.org/docs.html

● http://www.sqlite.org/lang.html

Prototype
● http://es.wikipedia.org/wiki/Prototype

● http://www.prototypejs.org/

● http://www.prototypejs.org/learn

● http://www.prototypejs.org/api

Scriptaculous
● http://en.wikipedia.org/wiki/Script.aculo.us

● http://script.aculo.us/

● http://github.com/madrobby/scriptaculous/wikis

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 25

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Introducción

Fin de la presentación.

Creative Commons (CC)

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 26