El blog de Wewewew

 Después de mucho trabajo (por eso tenía tan abandonado el blog) la aplicación web de la que les hablé hace ya unos cuantas entradas al fin está viva y en un grado estable.

Al parecer nos va a dar para un 10 en la asignatura y nos valió (dicen) felicitación hasta del subdirector académico de la ESCOM :P.


A recordar y para hacer un pequeño resumen de lo que es y qué hace:

Chuirer es una red social nueva, usando(copiando) el concepto de Twitter por completo. Tienes la ocpión de registrarte, iniciar sesión, seguir gente, unirte a grupos, publicar mensajes, calificar los mensajes... aún faltan cosas por desarrollar pero ya no cubrían los requerimientos que se nos hicieron para obtener una calificación (muy) buena. Sin embargo no se queda para la historia, al menos yo seguiré desarrollando Chuirer.

Ahora bien, para realizarla utilizamos varias tecnologías:

• Se utlilizó Java como lenguaje de servidor. Con ello se usaron servlets y para las pantallas se utilizó JSP y HTML
• También se hace uso de AJAX para las comunicaciones asíncronas y dotar de mayor dinamismo a la aplicación.
•  Cuando se hace una petición con AJAX, el servidor responde en formato JSON(JavaScript Notation Object), para lo cual se utilizaron las librerías JSONObject y JSONArray
• Para la implementación de AJAX así como de muchos otras acciones del lado del cliente se utilizó el framework de Js, JQuery.
• Se utilizó el framework Struts para la implementación del patron MVC.
• Se utlilizó JDOM, para realizar la persistencia de la información en formato XML(No olvides que para esta versión de Chuirer no se implementó el uso de un SGBD conocido ¡toda la información se guarda en archivos XML brutos!) 
• Se emplea CSS3 para mejorar el diseño de la aplicación en las pantallas finales, las que ve el usuario.

Lo presentamos en la EXPO ESCOM y pues de ahí surgieron ideas, lo que viene para Chuirer es mover la aplicación para que funcione con una base de datos como MySQL, Implementación de busqueda semántica y ahora que estoy tomando, un curso de programación para dispositivos con Android, realizar una app para Chuirer.

El código es libre, lo puedes encontrar en GitHub: Chuirer on GitHub
Así mismo puedes verlo en funcionamiento: Chuirer en línea

Recuerda que estoy a tu disposición para cualquier duda, aclaración y ayuda que puedas llegar a necesitar. ¡Coménta!


¡Saludos!
@fferegrino :)

Pues así es como he decidido nombrar (para mi y mis conocidos, sin permiso del resto de mi equipo) a la aplicación en la que estaré trabajando durante lo que resta del semestre.

Resulta que para la clase de Tecnologías para la Web, se nos dió a elegir entre diversos proyectos a implementar para obtener calificación del semestre. Entre las propuestas que nos presentó el maestro estaban unas muy interesantes como crear un editor de textos en la nube, crear un foro de discusión orientado a la educación, desarrollar un sistema de almacenamiento de marcadores, crear una red social tipo Facebook y otra tipo Twitter. A esta última es a la que decidí dedicarme junto con el resto de mi equipo, somos 4 integrantes ;).

Todo iría "normal" hasta el momento en el que se nos informó que no debíamos usar ningún sistema gestor de bases de datos, como MySQL, SQL Server o PostgreSQL. Todo el almacenaje persistente debería de ser en archvos xml.

:S Ahora tengo a en que se irán mis madrugadas, se ve que estará un poco pesado.

De mientras y para no perderse en el tema, econtré dos puntos de partida:

• Bases de datos nativas XML(Wikipedia)
• XMLBD(Presentación en pdf)

¡Saludos!
@fferegrino :)

De nuevo, y para no variar tarea de Tecnologías para la Web, esta vez correspondió hacer un servlet que se valiera de una película hecha en flash para presentar imágenes que el usuario elige.
El proceso es el siguiente:

1. Mediante la interfaz se le solicita al usuario el número de imágenes que desea en su presentación
2. Se crean los campos correspondientes al número de imágenes, para que el usuario suba sus archivos
3. Ya dentro del servlet se leen las descripciones y se guardan en una lista
4. Se obtiene el ID de la sesión actual para crear una carpeta única en el servidor que alojará los archivos necesarios para la presentación
5. Posteriormente se suben las imágenes al directorio creado, al tiempo que se crea una etiqueta de XML por cada imagen, al cual se le añaden los atributos de descripción que guardamos en la lista en el paso anterior y la url en la que el servlet las guardó
6. Una vez que las imágenes han sido cargadas, se procede a guardar el documento XML dentro del directorio creado para el cliente y a copiar el archivo SWF dentro de la misma carpeta
7. Una vez que llegamos a este paso, ya está listo para ser devuelto al cliente para lo cual se comprime la carpeta completa
8. Y se reenvía al cliente una vez comprimida
9. El cliente disfruta de su presentación para la cual solo tuvo que subir imágenes :D

En resumen, lo que se hace es implementar la subida de archivos al servidor para lo cual se usan las librerías de Apache Commons(IO y FileUpload), se crea un documento XML para lo cual se usa la librería JDOM, de la cual ya tengo tiempo escribiendo cosas y utilizo una clase llamada SimpleZip para comprimir el archivo, la cual viene incluida.

Más detalles y código en el resto de la entrada

Como ya mencioné, se utilizan las librerías de Apache Commons para la subida del archivo:

try {
     items = upload.parseRequest(request);//Parseo de la petición 
} catch (FileUploadException fE) {
}
// ...
for (Object item : items) {// Recorrer el arreglo de parámetros
     if (!uploaded.isFormField()) {
         try {
// ...
              File archivo = new File(ruta, nombreArchivo);
              uploaded.write(archivo);// Escritura del archivo imagen
         } catch (IOException e) {
// ...

JDOM para la creación del archivo XML:

Element root = new Element("slideshow");// Se crea el nodo raíz del documento XML
// ...
Element image = new Element("image"); // Parámetros de la etiqueta image
image.setAttribute("title", descripcion);
root.addContent(image);
// ...

Y la clase SimpleZip(que encontré en internet LOL), para comprimir el archivo

// ...
ZipEntry zipEntry = new ZipEntry(file.toString());
//Create a buffered input stream out of the file         
//we're trying to add into the Zip archive.         
FileInputStream fin = new FileInputStream(file);
BufferedInputStream in = new BufferedInputStream(fin);
zos.putNextEntry(zipEntry);
//Read bytes from the file and write into the Zip archive.         
while ((len = in.read(buf)) >= 0) {
     zos.write(buf, 0, len);
}
//Close the input stream.
// ...

Más detalles en el proyecto:

Proyecto


¡Saludos! @fferegrino :)

Hay dos tipos de documentos XML:

Bien formados

Es un tipo de documento que cumple ciertas normas, tales como incluir información sobre la versión de XML que usa o el juego de caracteres que contiene. También debe de tener un único elemento raíz además de llevar una sintaxis correcta para documentos XML.

Válido

Este tipo, además de estar bien formado, cumple con normas que se especifican dentro de el DTD(Document Type Definition). Para que sea válido debe cumplir con todas esas normas.

Ahora, este servlet que preparé para la clase de Tecnologías para la Web, toma cualquier archivo que elijas y lo sube al servidor para validarlo. Utiliza las librerías de JDOM de las cuales ya les había hablado antes la validación es simple con esta herramienta y el manejo de excepciones, ya que al momento de cargarlo a memoria se le puede especificar que revise o no la validez del documento; La buena forma la revisa al estar leyendo el archivo. En el momento en el que no se cumpla alguno de los parámetros una excepción es lanzada.

Digo que es online ya que está pensado para que trabaje montado en un servidor, sin embargo es posible convertirlo a una aplicación de escritorio.

Las pocas, y de verdad pocas, líneas que tuve que escribir para la validación fueron estas(en las que se pide se construya el archivo y se valide):

public void checkConforme(SAXBuilder builder, File archivo) throws JDOMException, IOException {

        builder.build(archivo);
    }

public void checkValido(SAXBuilder builder, File archivo) throws JDOMException, IOException {
        builder.setValidation(true);
        builder.build(archivo);
    }

Dejo el proyecto completo hecho en NetBeans, que además contiene un adelanto de la próxima tarea: Para escribirlo, me basé en: Validación con JDOM y Subir archivo al servidor

Descarga SegundoParcial(proyecto)

¡Saludos!
@fferegrino :D

Esta es una biblioteca para Java que facilita el uso y manipulación de documentos XML en memoria y de manera persistente. Similar al DOM del W3C, con la potente diferencia de que este se refuerza con las características de Java.

Me lo presentó el profesor de Tecnologías para la Web.


Del siguiente código XML:

<tienda nombre="tienda para geeks" ubicacion="Tokio, Japon">
  <computadora nombre="iBook" precio="$1200" />
  <historieta nombre="Dragon Ball Volumen 1" precio="$9" />
  <nivel_geek_de_la_tienda precio="sin precio" /> 
</tienda>

Mediante Java y JDOM se puede obtener la información de la siguiente manera:

SAXBuilder builder = new SAXBuilder ();
Document doc = builder.build (new FileInputStream ("foo.xml"));
Element root = doc.getRootElement ();
root.getName ();                            // devuelve "tienda"
root.getAttributeValue ("nombre");          // devuelve "tienda para geeks"
root.getAttributeValue ("ubicacion");       // devuelve "Tokio, Japon"
root.getChildren ();                        // devuelve una java.util.List de objetos que tiene tres Element

Ejemplo extraído de Wikipedia 

JDOM

¡Saludos! @fferegrino :)

Esta noche les traigo mis tareas teóricas de la asignatura Tecnologías para la Web, aclaro que no son nada buenas, aún me falta mucho para aprender a redactar bien pero... ¿qué le vamos a hacer?

Prometo de a poco ir mejorando en la redacción.

Incluídas en el súper paquete:

1. Conceptos básicos de la web
2. Historia del internet y la www
3. Estándares de la web
4. La Web 2.0
5. Entornos de desarrollo
6. Historia y diferencias entre navegadores
7. Historia de XHTML
8. Diferencias entre HTML y XHTML

Si las quieren en paquete aquí las dejo:

Tareas teóricas

¡Saludos! @fferegrino :)

De las primeras tareas en ESCOM, clase de Tecnologías para la Web. Basándonos en el generador de tablas de la suite Dreamweaver, se nos quedó de tarea hacer un Servlet que imitara el funcionamiento del mismo. Se puede mejorar la implementación pero últimamente carezco de tiempo :(

 Dejo el proyecto completo(hecho en NetBeans).
Tablas App

 ¡Saludos!

@fferegrino :)