TI2K12. Tecnologías de la Información 2012.

Conclusión final

noreply@blogger.com (Biel Maimó) — Wed, 06 Feb 2013 16:27:00 +0000

Una frase que uso a menudo, es "Los trabajos no se acaban, simplemente se entregan".
Con eso quiero decir que siempre hay algo que mejorar, algo que cambiar, que añadir, nunca veo el momento de darlo por terminado, pero llega el día de la entrega, y hay que entregarlo.
Imagino que eso me pasa, porque a medida que vas desarrollando el trabajo, vas aprendiendo sobre el tema que versa el trabajo (ese es el sentido de hacer los trabajos), y al ir mejorando nuestros conocimientos, muchas veces nos hace replantear cosas que hemos hecho antes de disponer de los conocimientos que acabamos de obtener.

Para mi el trabajo y la asignatura han sido muy positivos, me ha permitido profundizar en muchos temas del desarrollo web, que quizás conocía, pero sin duda no con el nivel de profundidad que los conozco ahora. Como en muchos otros ámbitos de la vida, en el mundo web cuanto más sabes, más cuenta te das de lo poco que sabes, se abre un mundo enorme delante, que es imposible abarcar.

Me matricule en esta asignatura, como créditos de libre configuración, ya que no tengo pensado cursar ingeniería superior de informática. Actualmente necesito cuatro créditos de libre configuración y pensé que seria más positivo cursar una asignatura, que no obtenerlos en conferencias. Evidentemente pensé en matricularme en algo que me gustara, por eso son de libre elección, y me alegro de haber elegido esta asignatura puesto que no me ha sido complicado conciliarlo con mi trabajo, y el bagaje que me llevo de conocimientos del mundo web es muy positivo, ahora solo falta obtener una buena nota, mi trabajo ya está hecho, y aunque todo es mejorable, personalmente estoy contento del resultado final de la web, así como del contenido de este blog.

La metodología me ha gustado, creo que los talleres presentados por los alumnos es un buen sistema de aprendizaje, tanto para el que los prepara como para el resto. Las evaluaciones son poco objetivas, resulta difícil puntuar mal a tus compañeros.

Personalmente me gustaría ver con más profundidad optimización web, y SEO, seguramente porque son los temas que más me han gustado. Al margen de los talleres se podría hacer una especie de competición, por ejemplo con un hmtl+css+js+n imagenes base, conseguir la máxima puntuación de optimización en algún medidor de rendimiento web tipo gtmetrix o similar. Mantener la funcionalidad del original aportado, pero mejorando su rendimiento.
Posicionar una página por algún concepto común a todos los grupos.
Pero claro, soy consciente que cuatro meses son escasos para poder realizar todas estas cosas, pero como que en la web del curso se nos anima a participar y aportar ideas, aprovecho esta conclusión para exponerlas.

Posiblemente, esta sea la última entrada de este blog, o no, quien sabe, el tiempo lo dirá.

Últimos retoques

noreply@blogger.com (Biel Maimó) — Sun, 03 Feb 2013 15:53:00 +0000

Está práctica esta tocando ya a su fin, y solo nos queda el incluir algunos remates finales. Básicamente lo que haremos es insertar código que nos proporcionan terceros, para integrar la web con redes sociales, controlar las estadísticas de visitas, etc.

La verdad es que todo esto no tiene mucho truco, y simplemente se trata de perder un poco el tiempo buscando la información y pegando el código (java script habitualmente) en nuestro html.

En el apartado de redes sociales, hemos incluido el botón "meg gusta" de facebook, y el botón G+1, de gooogle plus. En los dos casos, hemos encontrado documentación calara y sencilla de como integrarlo y tanto facebook como google, nos ha proporcionado el código necesario para implementarlo.

Pero como no solo de facebook y google vive el hombre, hemos decidido utilizar las facilidades que nos brinda AddThis, para incluir compartición de contenidos en facebook, twits, envío por gmail, linkedin, y muchos más. Nuevamente facilidad, y potencia a cambio de poco esfuerzo.

Para el control de visitas estadísticas de uso, nuevamente nos apoyaremos en las herramientas que nos provee google, en este caso google analytics y herramientas para web masters de google.
Dos fabulosas herramientas que nos permiten hacer un seguimiento de la audiencia de nuestro sitio, la forma de darse de alta es muy sencillo (web 2.0), tan solo tres pasos:

Dar de alta nuestro sitio web
Autentificar el sitio, colocando un fichero en nuestra carpeta raiz.
Incuir un pequeño código php en todas las páginas que queramos auditar.

Este es un ejemplo de la información que podemos recuperar.

Y para terminar este apartado de remates de última hora, hemos incluido un motor de búsqueda personalizado de google. Nos hemos topado con esta herramienta y nos ha sorprendido la facilidad de configuración y potencia de uso que añade a nuestra web. En concreto lo que hace es utilizar el motor de búsqueda de google, pero podemos parametizar donde realiza las búsquedas y en nuestro caso dichas búsquedas solo se realizan sobre el contenido de nuestra propia web.

Para poder usar esta opción, debemos crear un nuevo motor de búsqueda personalizado en http://www.google.es/cse, donde definimos el ámbito de la búsqueda y su comportamiento visual, tanto del caudro de búsquedad, como de los resultados de la misma.

Una vez configurado, nos proporciona un código fuente que debemos insertar en los lugares donde deseamos que aparezca el buscador, es un código genérico, pero utilizando un ID de motor de busqueda único. Con esto conseguimos incluir una sola vez el código, y si realizamos algún cambio sobre el motor de búsqueda, lo haremos desde la consola de google haciendo referencia a ese ID, y repercutiendo en todos los sitios donde lo usemos, sin necesidad de reescribir código.

Podemos configurar, donde queremos los resultados, debajo de la búsqueda, en un div separado, en un marco sobre el contenido de nuestra ventana, en una ventana nueva,... así como modificar la apariencia de los mismo.

Foro phpBB

noreply@blogger.com (Biel Maimó) — Mon, 28 Jan 2013 09:49:00 +0000

Como estrategia de promoción de nuestra web, y para dotarla de servicios de valor añadido hemos decidido crear un foro.

Hemos decidido usar phpBB, que es un sistema de foros gratuito desarrollado en PHP, y bajo licencia publica general (GNU), su implementación es muy sencilla, y las posibilidad de personalización muy amplias.

El proceso de instalación y configuración esta totalmente automatizado (rollo web 2.0), cualquiera con unos mínimos conocimientos puede montarlo.

El primer paso es descargarnos el paquete de instalación, con esto obtendremos un fichero ZIP comprimido, el cual pasamos a descomprimir en nuestro ordenador.

Una vez descomprimido, nos conectaremos vía FTP con nuestro servidor, y crearemos una carpeta nueva, que sera el lugar donde se instalara el foro, en nuestro caso www.rezetas.tk/foro (carpeta foro). Una vez creada la carpeta, subiremos via FTP todo el contenido del fichero que hemos descomprimido, y lo colocaremos en la carpeta recién creada.

Antes de seguir con la instalación de phpBB, si no la tenemos creada, debemos crear una base de datos en nuestro servidor. En nuestro caso ya tenemos una base de datos creada, para los datos de las rezetas, podriamos usar esta misma base de datos, aunque ya que no tenemos restricciones de número de bases de datos, hemos decidido crear una base de datos nueva y separada de la que alberga el contenido de la web. Una vez creada, guardamos los datos de conexión, ya que nos haran falta al iniciar la instalación de phpBB.

Ya estamos listos para empezar la instalación de nuestro foro, dicha instalación la realizamos con el navegador web, y siguiendo un comodo he intuitivo asistente.

Para acceder al instlador tecleamos la url donde hemos copiado los ficheros anteriormente www.rezetas.tk/foro y nos aparece una pantalla como la siguiente.

Pulsamos en la pestaña INSTALL , seleccionamos el motor de base de datos que quermos usar (MySql en nuestro caso), y seguimos con el siguiente paso.

Rellenamos los datos de conexión que hemos anotado anteriormente, seguimos avanzando. Normalmente el apartado 2 y 3, no será necesario rellenar. En nuestro servidor de hosting, si que debe rellenarse el parado 2, ya que las bases de datos no son accesibles via localhost. Dependera del servicio de hosting que estemos usando, por defecto en blanco.

Si la conexión es correcta, en este paso se crearan todas las tablas necesarias para que funcione el módulo de foros.

A parir de aquí ya "simplemente" se trata de configurar el foro a nuestro gusto, definir usuarios, administradores, crear foros, aplicar estilos, cambiar idioma, y un largo etc.

Hay que acordarse de eliminar la carpeta install, donde se hallan los scripts de instalación, hasta que no la eliminamos el foro no esta activo.

Optimización Web

noreply@blogger.com (Biel Maimó) — Thu, 24 Jan 2013 16:25:00 +0000

Como ya comente en entradas anteriores, vamos a dedicar máximo esfuerzo a que la web de nuestra práctica este optimizada.

Antes de empezar, tenemos una cosa clara, es que cuanto más pequeños sean los ficheros (html, cssl, jpg,...) y cuantas menos peticiones realicemos, más rápida será la página. Pero claro, para obtener unos resultados aceptables, requerimos de unos mínimos.

Las herramientas que usaremos, será un analizador de velocidad y rendimiento web. En el guión de la práctica, se nos propone usar, WebSiteOptimization . En mi opinión esta herramienta está un poco anticuada (última versión Sept 2008), constantemente hace referencia a modems de 56K (los cuales han pasado a la historia), por ejemplo en el apartado de tamaño dice "Consider reducing total page size to less than 100K", partiendo que por ejemplo jQuery v1.9.0 en su formato minificado pesa 91K, conseguir el objetivo de 100K es prácticamente imposible. Otra pega que le veo, es que en el fondo es publicidad de un libro, y efectivamente te indica que cosas están mal de nuestra web, pero nos remite al libro para solucionarlo.

En nuestro caso vamos a utilizar tres páginas alternativas, que desde mi punto de vista nos ofrecen una información más actualizada y completa, así como una guía para solucionar los problemas.

Las dos primeras serán gtMtrix.com y PingDom Tools, y la tercera Page Speed de Google Developers. Aunque las puntuaciones mejoran simultáneamente en las tres, damos especial importancia a la de Google, porque en el fondo, durante toda la práctica hemos usado herramientas de google (sites, blogger, youtube, trend,drive,...), y nuestro objetivo es mejorar para conseguir posicionamiento en las búsquedas, búsquedas de Google.

La primera vez que evaluamos nuestra página, fue bastante desolador, parecía que todo estaba mal, pero poco a poco ha ido mejorando.

Antes de empezar a realizar los cambios que recomendaban los analizadores, mi primera intuición es que habría mucho trabajo a realizar en la codificación HTML, pero me equivoque, el apartado que había que manipular era la configuración del servidor, y el mecanismo para hacerlo era mediante el uso del fichero .htaccess.

Como que hasta la fecha nunca había editado este fichero, ni sabia que podía hacerse en él, toco tirar de buscador y documentarse sobre el tema.

En este fichero haremos varias coas importantes para mejorar el rendimiento de nuestro sitio:

Definir que todas las cabeceras servidas son UTF-8, y sacar esta información de nuestro código HTML
Habilitar compresión, las paginas servidas serán comprimidas con gZip, lo cual permitirá mejorar uno de los objetivos principales, reducción de tamaño.
Especificar cache de navegador, se trata de definir un tiempo de caducidad alto para los elementos estáticos de nuestra web, de esa forma no es necesario que cada vez se recarguen, y el navegador puede usarlos de la cahe.
Y otros pequeños cambios, como desactivar ETag, ...

Este es un estracto del fichero .htaccess con los diferentes ajustes que he realizado:

AddDefaultCharset UTF-8 Header unset ETag FileETag None # BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> ...

# END Cache-Control Headers # compress text, HTML, JavaScript, CSS, and XML AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html ...

Con esto ya hemos mejorado bastante, hemos conseguido reducir el tamaño de los ficheros servidos, y hacemos un uso más óptimo de la cache.

El objetivo ya lo dijimos al principio de esta entrada, reducir el tamaño de los ficheros, y reducir el número de peticiones.

Sigamos reduciendo los tamaños de ficheros:

Imagenes, por supuesto debemos utilizar imágenes que nos aporten la mejor calidad con el menor tamaño, JPG. Pero aún suponiendo que estamos usando un formato adecuado, es bueno pasar todas las imagenes por un compresor de imágenes como Smush.it de Yahoo, esto nos permitirá ahorrarnos unos cuantos K. El siguiente punto importante con las imágenes en no servir imágenes de tamaño mayor al que queremos visualizar, es un derroche de bytes el tener que reescalar una imagen, las imágenes deberian ser servidas al tamaño que queremos visualizarlas.

Minimizar CSS, JS. Se trata de eliminar los datos innecesarios de los ficheros CSS y JS, mayormente espacios en blanco, comentarios, tabulaciones. En lar red podemos encontrar muchas herramientas para reducir el tamaño (minify tools), nostros usamos http://refresh-sf.com/yui/ . Los JS ademas de minificar también podemos aplicarle Obfuscation, nosotros no lo hemos usado, este método lo que hace es renombrar variables y nombres de funciones, a nombres más cortos, para así ahorrar bytes. El resultado de minify y obfuscation, es un código fuente prácticamente ilegible, pero eso no nos importa, lo importante es que funcione la web bien, y rápido. Nosotros nos guardamos una copia de código fuente sin reducir para su mantenimiento y le aplicamos la reducción antes de subirla al servidor. Aunque no lo hemos hecho, el código HTML también se puede minimiizar.

En este punto ya no podemos reducir mucho más los tamaños, ahora vamos a intentar reducir el numero de peticiones http. Como sabemos cada petición tiene un coste de bytes (cabeceras de petición y respuesta), la idea es combinar en la medida de lo posible todos los ficheros JS y CSS en un solo fichero de cada tipo, en lugar de tener n ficheros .JS, concentrar todo nuestro JS en un solo fichero, con lo que solo haremos una petición GET. Esto no nos ha llevado mucho trabajo, simplente combiar los ficheros.

El analizador nos informa que ahora donde hacemos más peticiones es al cargar las imágenes para montar menús, logos, etc, y nos sugiere que apliquemos la técnica de CSS sprites. Otra vez toca documentarse, esta técnica consiste en unificar todas las pequeñas imágenes de nuestra web, en una sola (de esa forma solo haremos una petición ), y para visualizarlas haremos referencia a las coordenadas y tamaño de la porción de imagen que queremos usar. Suena complicado, pero es fácil encontrar generadores de CSS sprites que nos juntan las imágenes y nos devuelven un CSS con los tamaños y coordenadas de cada imagen, en nuestro caso usamos la siguiente imagen combinada con el CSS.

Con esto hemos conseguido rebajar 9 peticiones http.

Llegados a este punto, hemos conseguido mejorar mucho el rendimiento de nuestra web, y aunque siguen habiendo posibles mejoras, su impacto es menor, o bien no lo podemos aplicar.

Una recomendación es usar CDN, pero salvo para jQuery, el resto no podemos, otra se refiere a problemas de rendimiento de código de terceros (botón me gusta de FaceBook), y otras sencillamente no han significado mejoría (usar diferente fuentes para descarga de imágenes y de esa forma paralizarlas, en teoría debiera mejorar, pero perdemos la mejora con el tiempo de DNS).

HML5, nos permite hacer carga asíncrona de algunos elementos, no reduce el tiempo global, pero evita bloqueos.

SEO Search Engine Optimization

noreply@blogger.com (Biel Maimó) — Tue, 15 Jan 2013 16:55:00 +0000

"El tiempo pone a cada uno en su lugar, y si hace SEO, un poco más arriba"

No se quien es el autor original de la frase, pero la he leído y escuchado varias veces, y sencillamente me parece genial. Creo que define claramente lo que es SEO (Search Engine Optimization), en el fondo las webs llegan a ocupar su puesto natural en el buscador, por su estructura, su contenido, su popularidad, y si hacemos SEO, pues eso, un poquito más arriba.

En definitiva SEO, no es magia, puede ayudar a subir posiciones, pero detrás debe de haber una buena web, con unos buenos contenidos y un indice de popularidad alto.

Pero siempre se puede intentar forzar la máquina, y sobrevalorar o posicionar más arriba una página de lo que realmente le corresponderia, viene a ser una batalla entre el SEO y Google. Los algoritmos de Google van evolucionando día a día y cambiando alguno de sus criterios, con la intención de detectar "malas prácticas" por parte de los SEO (texto oculto, sobre-optimizción, backlinks, contenido duplicado, ...).

Los dos ultimo cambios más importantes en esa batalla, son la aparición de Google Panda y Google Penguin.

Groso modo Google Panda es un cambio en el algoritmo de calificación de los resultados de búsqueda. Es una variación en la forma en que Google puntúa y valora cada sitio web.

Google Penguin es un filtro que mide la calidad global del contenido de un sitio web, y penaliza con un mal resultado a las web que considera irrelevantes para el usuario, webs con contenido basura, o que no tiene nada que ver con los enlaces que tiene o recibe.

Hasta hace unos años se podia hacer SEO, siguiendo una serie de recomendaciones, paso a paso. Hoy en día esto ha pasado a la historia, si bien algunas de las recomendaciones siguen siendo válidas, su peso en la puntuación se ha visto mermado, cosas como los METATAGS, las etiquetas TITLE, H1, etc siguen pesando, pero mucho menos. Ahora se da mucha más importancia a las redes sociales, retwits, Like de facebook, y sobre todo +1 de Google + (barriendo para casa), pero lo que es evidente es que ha dejado de haber una guia de como hacer SEO, hay unas lineas básicas a seguir, pero el resto es experimentación y adaptación a los algoritmos de google, que como sabemos son cambiantes, y con criterios diferenciados según la temática de la web, sector, volumen de tráfico, etc.

Y que podemos hacer como humildes estudiantes que somos, con un dominio recién creado, y con un contenido inventado para una práctica. Difícilmente conseguiremos posicionar nuestra página en los primeros lugares, pero intentaremos hacerlo lo mejor posible, una de las cosas que tiene en cuenta actualmente los algoritmos de Google, es la estructura del HTML, y la velocidad de carga.

Nuestros contenidos quizás no sean reales, pero la parte técnica de HTML5, CSS, JS si lo son. Intentaremos ser mejores que nuestra competencia, por lo menos en ese aspecto, también seguiremos la guía de recomendaciones que vimos en clase con referencia a metatags, palabras claves, generación de sitemap, ...

Algunas de las acciones que haremos para mejorar nuestra web serán:

Validar la no existencia de errores
Incluir alt en todas las imágenes
Crear robot.txt y sitemap.xml
No usar imágenes escaladas
Nos fijamos los siguiente objetivos de obtimización:

Servir la página en menos de 1.5 s
Peso total de página inicial menor de 1 MB
Peticiones para carga la página menor de 60

De tamaño y peticiones vamos bien, pero nos queda bastante por optimizar en cuanto a velocidad.

Taller de accesibilidad

noreply@blogger.com (Biel Maimó) — Mon, 07 Jan 2013 17:30:00 +0000

Después de las vacaciones de Navidad, empezamos el curso con el que será el último taller, accesibilidad.
Este es un tema importantisimo, y del cual hasta hace poco no estaba demasiado concienciado, pero después de asistir a una conferencia de Ángel García Crespo en el transcurso del IV congreso de Televisión Digital Interactiva organizado el año pasado por el LTIM, me di cuenta de lo importante que era tener en cuenta la accesibilidad en nuestros desarrollos, porque de lo contrario estamos discriminado un porcentaje elevado de gente.

Como todo, no diré que hacer una web accesible sea fácil, pero si nos imponemos una serie de hábitos y pautas al ir creando contenido web, nos permitirá crear contenidos accesibles, en el taller de hoy se han repasado las principales puntos a tener en cuenta, las categorias existentes de accesibilidad, y las herramientas disponibles para validar que todo esta en orden.

Un punto importante, es que WCAG 2.0 (Web Content Accessibility Guidelines) de W3C, se ha convertido en un estándar ISO, en concreto el ISO/IEC 40500:2012. El hecho de que sea un estándar ISO permitirá que su implementación sea menos ambigua y uniforme en todos los países. Otro tema a tener en cuenta, es que la mayoría de países vayan incluyendo en su legislación la obligatoriedad del cumplimiento de normas con referencia a la accesibilidad en la web.

En España, esta legislado, y es de obligatorio cumplimiento, aunque es cierto que queda mucho trabajo por hacer, por lo menos las bases legales ya existen, y en el futuro imagino que la mayoría de empresas y organismos oficiales se irán adecuando a la ley, sin duda las denuncias y multas ayudaran a que se cumpla la ley, pero espero que también la sociedad se vaya concienciando de la necesidad de disponer de contenidos accesibles, sin que existan discriminaciones.

Para profundizar sobre la ley de accesibilidad, el blog usable&accesible de Olga Carreras nos ofrece abundante e interesante información

Registro de dominio y alta de web

noreply@blogger.com (Biel Maimó) — Sat, 05 Jan 2013 23:59:00 +0000

Como ya comente en una entrada anterior, para realizar la practica subiremos nuestro trabajo a un hosting gratuito(Nixiweb), y usaremos también un dominio gratuito de dot.tk.

El primer paso que haremos es registrar un dominio tk ( islas Tokelau ) que este disponible, en nuestro caso rezetas.tk.
Para comprobar la disponibilidad, tecleamos el dominino que nos interera en la página de dot.tk

Si el dominio esta disponible, ya nos aparece la pantalla donde debemos rellenar la información, espceialmente importante es la configuracion del servidor DNS, que nos permitirara asociar nuestro dominio con nuestra cuenta en el servicio de hosting de NixiWeb. La información de DNS la conseguimos en la página de nuestro proveedor de hosting. En nuestro caso estos los parametros.

En este punto ya tenemos registrado nuestro dominio por un periodo de doce meses, y asociado a nuestrop proveedor de hosting.

El siguiente paso es darnos de alta en Nixiweb, al crear una nueva cuenta, indicamos cual será el dominio asocidado (justo el que acabaos de crear).

Una vez concluido este paso, recibiremos en nuestra cuenta de correo un mail con información para poder acceder a nuestro hosting. Entro otras dispondremos de acceso via FTP, cuentas de correo para nuestro dominio, base de datos MySql, ...

Este es el panel de control

En definitiva, un proceso nada complicado, que nos permite estar en la red de una forma muy económica (gratis), y que nos brinda unos excelentes servicios.

Taller AJAX y Frameworks

noreply@blogger.com (Biel Maimó) — Thu, 20 Dec 2012 09:35:00 +0000

Al fin, y después de semanas de preparación llega el día de realizar nuestra presentación.

Personalmente con los trabajos me sucede algo curioso, y es que nunca veo el momento de darlo por concluido, siempre encuentro algo que puedo mejorar, algo que añadir, imagino que es debido al hecho de que a medida que vas realizando el trabajo, también vas aprendiendo sobre el tema, y ese nuevo conocimiento hace que puedas ampliar el trabajo, cambiar el enfoque, mejorar, ... Pero al final hay que cumplir unos plazos, y el trabajo se tiene que dar por terminado.

Personalmente estoy muy contento del taller, era un tema amplio, y lo difícil era centrarse sobre las cosas más importantes, no se trata de un taller para enseñar AJAX, sino de explicar que es, en que consiste, y marcar unas pautas iniciales, que permita a la audiencia interesada, profundizar sobre el tema.

Sobre el taller en si no voy a contar mucho, porque serán mis compañeros quienes en sus entradas del blog comenten y evalúen nuestro trabajo. Para mi ha sido muy positivo, posiblemente de los talleres que se podían hacer, este era el que más desconocía y la necesidad de realizar el taller me ha obligado a aprender AJAX y sobre todo de jQuery, de lo cual estoy bastante contento. Otra cosa que también he aprendido a manejar y que no había usado hasta la fecha es prezi (otro gran descubrimiento).

En la presentación tuve un contratiempo con el ejemplo de autocompletado de provincias, lo había probado mil veces, pero ya se sabe, la mil una fallo. Que decir, si a Bill Gates le salen pantallas azules presentado windows, que no puede pasarme a mi.

En el momento de la presentación achaque a un problema con el servidor, ya en ese momento sabía que no se trataba de ningún problema con el servidor, pero tampoco sabia cual era el posible problema, había que decir algo y seguir adelante, improvise.

Por supuesto después de la presentación revise el ejemplo hasta dar con cual era el problema, y di con él. No se controlaban todos los eventos de teclado y ratón, durante las pruebas en el ordenador desktop de casa siempre utilizaba el teclado para realizar la selección, pero en la presentación y con el portátil use el ratón, y el evento de selección no se disparo.

Taller XML

noreply@blogger.com (Biel Maimó) — Fri, 14 Dec 2012 09:09:00 +0000

En esta ocasión el taller trata de XML (eXtensible Markup Language) y tegnologías asociadas. XML como su nombre indica, es un lenguaje extensible de etiquetas. Es el formato más utilizado para intercambiar infomración el mundo web, aunque también es ampliamente usado en otros sectores.

Este taller se ha adelantado de fecha, y debia ser poseterior al nuestro de AJAX, pero por cambios de programación se realiza justao antes que el nuestro. Este cambio nos viene muy bien, ya que en AJAX se hace uso de XML, y ya no será necesario explicar mucho sobre él, puesto que ya se habra visto en este taller, si acaso podremos explicar JSON, que es otro mecanismo de intercambio de información, que esta tomando fuerza frente a XML.

Personalmente el tema XML, no es un desconocido para mi, y la mayoria de las cosas comentadas ya las había visto, y estudiado el año pasado en la asignatura Tecnologia Multimedia.

Se ha hecho un repaso a su sintaxis, ficheros de definición de estructura, se ha comentado DTD y XML Schema. DTD esta prácticamente en desuso y para mi no merece mas que eso una breve mención a su existencia, en mi opinión actualmente debiera usarse XML Schema.

Una vez vista la estructura básica de XML, se ha pasado a una segunda parte del taller, donde se han explicado las diferentes tecnologías aplicables sobre XML, que nos permiten realizar transformaciones, selecciones, aplicar formatos,... (XPath, XSL-T, XSL-FO)

También se ha estado comentado la utilidad e idoneidad del uso de XML, como base de datos, solo para transferencia de pequeños bloques de información, etc

Ciertamente XML, se usa en infinidad de ámbitos incluyendo Base de datos, existiendo algunos motores basados sobre XML, como formatos de de intercambio de documentos (e-factura), envio de parametros para web-services, ficheros de configuración, hojas de cálculo, y un largo etcetera.

Preparando nuestro taller de Ajax y frameworks

noreply@blogger.com (Biel Maimó) — Sun, 02 Dec 2012 10:31:00 +0000

El taller que nuestro grupo debe presentar es el de AJAX y frameworks, aunque según las encuestas que se realizaron en clase, AJAX es la tecnología más desconocida para la mayoría en el fondo no es así porque AJAX es un compendio de otras tecnologías (JavaScript, XML,...) que si son conocidas por la mayoría aunque lo que realmente no conocen es el que se esconde detrás de las siglas AJAX, ni cual es su forma de funcionar.

Nos hemos distribuido el trabajo entre los miembros del grupo, y la parte que me ha correspondido a mi ha sido la de frameworks, la idea es preparar el taller, documentarlo extensamente sobre la wiki, y a partir de la wiki preparar la presentación. De esta forma la documentación más extensa estará en la wiki, y la presentación sera un resumen de la wiki, ampliada por el ponente.

Para consolidar la teoría, preparare varios ejemplos paso a paso de uso de Ajax con un framework (jQuery).

He estado revisando talleres de años anteriores, la mayoría han explicado el framework jQuery, pero enfocando mucho el taller a explicar su API. Mi idea es cambiar un poco el enfoque, lo primero a explicar será que es un framework, para después pasar a detallar unos cuantos de los existentes(jQuery, dojo, ...), que creo son los más importantes. Solo daremos una breve explicación de cada uno, y nos centraremos en el que creemos que a día de hoy es el más importante, explicando cuales deberían ser los criterios a la hora de elegir un framework, que son los que hemos seguido nosotros.
Una vez seleccionado el framework a usar, una breve pincelada de su funcionamiento básico, para después centranos en las funciones que nos dan soporte para AJAX, y para terminar unos ejemplos explicados paso a paso de como hacer uso de las mismas. La idea de los ejemplos es que sean progresivos de mas fácil a mas complicado, se usar el html mínimo ya que queremos focalizar la codificación con jQuery.

Taller PHP

noreply@blogger.com (Biel Maimó) — Fri, 30 Nov 2012 22:39:00 +0000

Si en el taller anterior estuvimos viendo programación del lado del cliente, en esta ocasión nos toca ver el lenguaje de programación por excelencia del lado del servidor.

Como en la mayoría de talleres comenzamos con un repaso histórico de la evolución del lenguaje, para después pasar a un introducción a su sintaxis básica, así como al sistema de pase de parametros y funciones más importantes. Se ha visto como poder ejecutar php, haciendo uso del servidor local xampp que ya vimos en un taller pasado.

La segunda parte se ha centrado en el uso de un framework para php, el codeIgniter, y hemos visto de una forma rápida (muy rápida) como hacer uso del mismo. Por el poco tiempo disponible, la verdad es que se han visto bastantes aspectos funcionales de code Igniter. Me hubiera gustado una explicación de porque usar code igniter y no otro, pero en general esta parte ha sido muy interesante, ya que no conocia ningún framework para php.

Ha sido un taller muy accidentado con diferentes problemas técnicos en el aula.

Taller JavaScript y DOM

noreply@blogger.com (Biel Maimó) — Thu, 15 Nov 2012 19:09:00 +0000

El taller de esta semana trata sobre el lenguaje JavaScript y el Document Object Model, dos imprescindibles para la programación del lado del cliente. Aunque conocía JavaScript y DOM, el taller ha resultado muy interesante y nos ha permitido descubrir aspectos nuevos de los mismos, así como también nos ha aportado documentación y enlaces para poder profundizar en ellos.

DOM es una interfaz de programación de aplicaciones para documentos HTML y XML. Define la estructura lógica de los documentos (estructura jerárquica) y el modelo en que se accede y manipula un documento. Con DOM, los programadores pueden construir documentos, navegar por su estructura, añadir, modificar o eliminar elementos y contenido. Es una especificación del W3C, uno de los objetivos más importantes de DOM es proporcionar una interfaz estándar de programación que pueda utilizarse en una amplia variedad de entornos y aplicaciones.

Una vez visto DOM, se ha repaso la historia y orígenes de JavaScript, que se remontan al año 1995 y la creación del navegador NetScape. En 1997 fue adoptado como estandar con el nombre de ECMAScript.
JavaScript es un lenguaje de programación orientado a objetos y basado en prototipos. Es un lenguaje interpretado, y que se utiliza normalmente del lado del cliente, lo que implica que los navegadores incluyen un interprete de JavaScritpt que es el encargado de ejeuctar el código fuente enbebido en los ficheros html o js.
En el taller se ha hecho un repaso a su sintaxis básica, así como la gestión que realiza de objetos. El siguiente apartado hemos visto como podemos acceder a DOM con JavaScritp, la gestión de eventos, y para acabar se nos ha propuesto una serie de ejercicios.

Taller CSS

noreply@blogger.com (Biel Maimó) — Thu, 08 Nov 2012 10:31:00 +0000

Como la mayoría de nombres de las tecnologías usadas en web 2.0, CSS es el acrónimo ingles de Cascading Style Sheets ( hojas de estilo en cascada).

CSS es utilizado para dar estilo a documentos HTML, y nos permite separar el contenido de su aspecto. Los estilos definen la forma de presentar los elementos contenidos en el HTML.

Se ha hecho un repaso histórico a la evolución de CSS, así como a su sintaxis básica Ha resultado interesante el ver algunas de las novedades que incluye CSS 3 (transformaciones geométricas, ...). Especialmente interesante el apartado de ejemplos, paginas generadores de CSS, así como el apartado de compatibilidad con diferentes versiones de navegadores.

Me ha sorprendido la gran cantidad de cosas que se pueden hacer con CSS, algunas pensaba que solo eran realizables con JavaScript, debo ponerme al dia con CSS3.

Me ha gustado mucho el ejemplo de sistema solar, que incorpora animaciones, trasnformaciones y los bordes redondeados de las cajas. Un cuadro con bordes redondeados puede llegar a convertirse en un circulo.

Taller de HTML5 y XAMPP

noreply@blogger.com (Biel Maimó) — Tue, 06 Nov 2012 18:39:00 +0000

Esta semana dan comienzo los talleres, y el primero de ellos ha tratado sobre HTML5 y XAMPP.

En la primera parte se ha hecho una revisión a la historia de html, y nos hemos centrado en los nuevos tag, y los cambios mas importantes para la maquetación de la páginas web. Se han comentado las novedades con respecto a versiones anteriores, en especial lo que hace referencia a canvas, video y a geolocalización.

Los puntos más importantes de htnl5, por una parte es la mejor estructuración de las áreas y contenidos de una página web, hasta ahora se venia utilizando div para casi todo, y ahora aunque puede seguir usándose su uso se vera disminuido, y la claridad y estructura de la web será mucho más sencilla, tanto para las maquinas (robos), como para los desarrolladores.

Otro de los cambios importantes es la introducción del tag vídeo, esta etiqueta se presenta como alternativa al uso de flash para incrustar contenidos multimedia en la página web. La etiqueta video nos permite incrustar de forma nativa un reproductor multimedia.

Esta etiqueta llega con algo de polémica, primero por intentar desplazar un producto comercial como flash, y segundo porque no se ponen deacuerdo los fabricantes de navagadores sobre el codec a estandarizar, en ambos casos priman los intereses comerciales, y de copywright.

Códec	Tipo	IE >=9	Firefox	Chrome	Safari	Opera
Ogg Theora	Libre	no	si	si	no	si
H.264	Propietario	si	no	no	si	no
VP8	Libre	no	si	si	no	si

<video src="video.mp4" controls width="360" height="240">
</video>

En la segunda parte del taller se ha hablado de XAMPP, es una manera sencilla de instalar la distribución Apache que contiene MySql, PHP y Perl. Es un paquete multiplataforma disponible para Linux, Windows Mac OS X y Solaris. Con este paquete podemos montar de una forma muy sencilla un servidor web en nuestra maquina local.

Personalmente no lo conocía, aunque había usado una distribución muy parecida denominada WAMP, en el fondo hacen lo mismo aunque varia un poco la forma de configurar los diferentes servidores.

El taller se centro en explicar lo que era, y algunas características de funcionamiento y lenguajes soportados como perl.

Para mi hubiera sido más interesante el haber instalado y configurado un servidor local, viendo el panel de control de xamp, y las configuraciones de Apache y PHP.

Para profundizar en su conocimiento, he desisntalado WAMP, y usaremos XAMPP para hacer las pruebas en local de la web para la práctica de la asignatura.

Dominio para la web de la práctica.

noreply@blogger.com (Biel Maimó) — Tue, 30 Oct 2012 12:08:00 +0000

Esta semana no hubo clase, y hemos aprovechado para ir perfilando algunos temas de la práctica. La temática de nuestra práctica son recetas de cocina.
Lo primero que hemos hecho ha sido ver un poco las webs que teóricamente compiten en el segmento de recetas, y hemos visto que realmente hay muchísimas, y ademas algunas de una gran calidad.
Probablemente nos especialicemos en algún segmento concreto de algún tipo de receta, y aunque no está decido por completo, la idea es focalizar nuestra web de recetas para el robot de cocina thermomix.

Nuestra web la hospedaremos en el servidor gratuito Nixiweb, y registraremos un dominio gratuito .tk (http://www.dot.tk/es/index.html?lang=es). Aunque según lo leído sobre SEO, el hecho de contar con keywords en el dominio, ha dejado de tener la importancia que tuvo antaño, intentaremos escoger un dominio que contenga algún keyword.
Una de las bazas que queriamos utilizar era el hecho de que thermomiox se escribe con th, pero la mayoria de gente de habla hispana lo pronuncia y lo escribe sin la h, termomix.
No tenemos mucho margen, puesto que solo buscamos dominios gratuitos, y por ahora todas las combinaciones buscadas ya existen.
De los libres, vamos a registrar tm31, que es el modelo actual de thermomix, recetas-termomix y recetas-thermomix.

Google Drive y Prezi

noreply@blogger.com (Biel Maimó) — Thu, 25 Oct 2012 08:56:00 +0000

Esta semana ha tocado hablar de almacenamiento en la nube y discos virtuales así como del programa para generar presentaciones Prezi.

A diferencia de otras ocasiones (marcadores sociales, ...), el tema de almacenamiento en la nube la mayoría si lo había usado, o lo usa habitualmente.

En mi caso, y para no ser diferente al resto de mis compañeros, es algo que vengo usando desde hace tiempo, también como la mayoría, estoy usando dropobox, supongo que debido a que apareció antes que google drive.

Además de los dos mencionados, existen mucho otros sistemas que hacen lo mismo o parecido(sugarsync, skydrive).

Por lo que puedo ver google drive representa una ventaja sobre dropbox, sobre todo, en el caso de que hagamos uso de la suite de oficina de google (google docs). Como que este no es mi caso, por ahora, de momento seguire usando dropbox, aunque le he dado una pequeña oportunidad a google drive, es más siendo sincero quisiera emplear los dos, pero mi triste ordenador de escritorio, no esta por la labor de mantener cargado en memoria dos gestores de almacenamiento virtual, quizá cuando modernice mi ordenador, y le sobre memoria, podrán coexistir las dos alternativas, y ver las bondades de google drive.

Hoy la cosa va de batallas, de herramientas alternativas, de cambiar la forma tradicional, tanto DropBox como Pwer Point, son sin duda dos clásicos hasta ahora creo que sin competencia, uno en el mundo de los discos duros virtuales, y otro en las presentaciones.

Prezi está entrando con fuerza en la escena de presentaciones, yo la verdad es que lo desconocía, pero sin duda parece una buena alternativa a Power Point.

En su dia las presentaciones de power point, nos sorprendieron a todos, con sus transiciones efectos, etc. Hoy ya estamos mas que acostumbrados a cualquier efecto de power point, y Prezi nos ofrece la oportunidad de sorprender a la audiencia, primero por el hecho de hacer algo distinto a lo habitual, el usar una herramienta todavía poco conocida, dará una primera impresión positiva hacia la presentación y el presentador puesto que se consigue una imagen de modernidad y de estar en la vanguardia tecnológica.

Lo dicho anteriormente, realmente no forma parte de las bondades de prezi, y ademas será pasajero en cuanto prezi no sea una herramienta ampliamente difundida. Pasando a las diferencias reales entre una presentación Prezi y una de Power point, para mi destacan dos puntos importantes:

Permite presentaciones más dinámicas, es más fácil saltar de un sitio a otro. Aunque se mantiene un orden, no es algo tan estricto como power point donde es una secuencia ordenada de diapositivas, con prezi tenemos mayor libertad a la hora de ir realizando la presentación.
Permite trabajo colaborativo entre varios miembros del equipo.
Permite una visión global de lo que queremos presentar, posibilidad de separar módulos, podemos focalizar en apartados, pero siempre podemos regresar a tener una vista global. Podemos explicar las partes de un todo.
Posibilidd de presentación en linea, ademas de proyectar nuestras presentaciones, podemos provver de un enlace, para que la presentación pueda ser seguida en linea.

Wiki

noreply@blogger.com (Biel Maimó) — Tue, 23 Oct 2012 16:02:00 +0000

Un wiki (del hawaiano wiki wiki, "rápido") es un sitio web colaborativo donde sus miembros pueden editar y crear contenidos.

Los usuarios de una wiki pueden crear, editar, borrar o modificar el contenido de una página web, de una forma interactiva, fácil y rápida; dichas facilidades hacen de una wiki una herramienta efectiva para la escritura colaborativa.

A diferencia de un blog donde la información esta ordenada de forma cronológica, la wiki está estructurada jerárquica en forma de árbol, inter relacionando los contenidos de sus nodos.

Otro aspecto reseñable es el control de versiones, que permite saber en todo momento quien creo un contenido, en que fecha, así como todo el historial de modificaciones de cada versión.

El ejemplo más conocido por todos es sin duda wikipedia.

Nosotros vamos a centrarnos en google sites, valorando su sencillez de uso y la fácil integración con el resto de herramientas y aplicaciones de google.

SlideSahare

noreply@blogger.com (Biel Maimó) — Wed, 10 Oct 2012 14:25:00 +0000

En esta ocasión se trata de subir una presentación al servidor de SlideShare, e incrustarla en nuestro blog. También debemos definir una licencia Creative Commons.

La presentación enlazada, se trata de un trabjo que realice para la asignatura Diseño de interfaces de usuario, y consiste en la utilización de los mandos de wii (wiimote), para ser utilizado como mecanismos de comunicación para gente con algún tipo de minusvalia.

Este es un pequeño video demostrativo del funcianimiento.

WiiCW from bmaimo

wiiCW por Biel Maimó se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported.
Basada en una obra en http://www.slideshare.net/slideshow/embed_code/8540612.

Prueba de google map

noreply@blogger.com (Biel Maimó) — Wed, 10 Oct 2012 14:20:00 +0000

Mostra Tren Palma Santany en un mapa més gran

En esta entrada se debía practicar con la creación y personalización de mapas de google, insertar marcadores, incluir textos e imágenes en los marcadores, etc.

No tenia muy claro que marcadores poner, pero recordé una excursión que realizamos por el antiguo trazado de la linea férrea Palma Santany, y me pareció interesante personalizar un mapa con el trazado de la linea, y sus estaciones, también he incluido algún puente del tramo que mas conozco.

Aunque no he realizado a pie todo el recorrido, por lo que algunas partes de la linea no sabía exactamente por donde pasaban, pero resulta curioso el ver como todavía hoy esta bien definido el trazado del tren y si nos acercamos con el zoom no resulta difícil el ir siguiendo el recorrido. La parte donde mas borrada esta la huella del antiguo trazado es entre campos y Ses Salines, supongo que debido a que era una zona de alta productividad agrícola y ganadera, y fueron incorporando los terrenos de la vía de tren a los terrenos de cultivo.

El tramo S'arenal a Llucmajor es una de los más impresionantes, y en el podemos disfrutar de varias obras férreas importantes, entre todas destaca el "pont de ses set boques", que constituye la obra férrea de mayor embergadura construida en Mallorca.

En casa de herrero cuchara de palo

noreply@blogger.com (Biel Maimó) — Tue, 09 Oct 2012 15:57:00 +0000

En casa de herrero cuchara de palo, como dice el refranero popular, esta es la impresión que me dio el otro día en clase, en la que estuvimos hablando de web 2.0, y de herramientas que tenemos a nuestra disposición para organizar nuestro escritorio(gestores de marcadores sociales, agendas y organizadores de tiempo, ...).

Parece que la gran mayoría de nosotros "ingenieros informáticos" no hacemos uso de herramientas para la gestión de nuestra información, favoritos, agenda, etc. Y a la pregunta hecha en clase, y como os organizáis?, pues pensé en como me organizo yo y ciertamente no es una forma muy óptima.

Dígase de antemano que soy algo reacio al uso de cloud computing, y eso de tener toda mi información en la nube, y hospedada en un servidor de un tercero, no es una idea que a priori me guste demasiado, como tampoco me gusta el tener que estar logeado para ir navegando, y de paso registrando mi actividad en la red.

Pero haciendo también honor a la verdad, de cada día utilizo más gmail, dropBox y otros servicios en linea que se basan en esta tecnología, con lo cual no usar un gestor de marcadores sociales o una agenda no tiene mucha justificación, total a día de hoy google sabe tanto de mi, que resulta difícil ocultarme ante el "Gran Hermano".

Si hay algo que tengo claro, es que en esta vida nada es gratis, y todos estos servicios "fabulosos" tienen que ser rentables de alguna manera, ya sea registrando tus hábitos de navegación, temas de interés, para poder focalizar un tipo de publicidad adecuada para mi perfil, ya sea aprovechando los contenidos que yo introduzca para hacer mas interesante su servicio (you tube, crece del material que introducen los usuario, ...), sea como sea pero hay que sacarle algún rendimiento.

Uno de los mayores problemas que tenia hasta la fecha con la gestión de mis marcadores, más que el hecho de disponer de ellos en cualquier escritorio donde estuviera trabajando (que también), era la desaparición o cambio de url de contenidos que me interesan.

Para evitarlo lo que hacia era imprimir una copia de la web en formato PDF e ir catalogando y guardando los contenidos en el disco duro (demasiado laborioso).

De todas las herramientas vistas, he probado con profundidad diigo, que permite gestionar marcadores, notas, resaltar partes de interés de una página, etc y ademas también puedo tomar una instantánea de su contenido, por si algún día desaparece o cambia su enlace, con lo cual tengo cubierta y centralizada toda mi gestión de marcadores y copias de webs de mi interés.

La gran ventaja de usar diigo, es la organización de los marcadores mediante el uso de tags, la disponibilidad de mi librería en cualquier ordenador con conexión a internet, incluido en el smartphone.

Enlace a video youtube

noreply@blogger.com (Biel Maimó) — Mon, 08 Oct 2012 14:57:00 +0000

Otras de las posibilidades que nos brinda blogger es insertar vídeos de youtube, realmente es muy sencillo y no creo que sea necesario explicar la forma de hacerlo, esta claro que la simbiosis entre herramientas de google es muy buena, y nos facilita bastante su integración en nuestro blog.

Hello World

noreply@blogger.com (Biel Maimó) — Fri, 05 Oct 2012 08:48:00 +0000

Como parte del trabajo de la asignatura Tecnologías de la información, debemos crear un blog personal.
Y en eso estoy, esta es la primera entrada del recién creado blog.