ITECH Blog se queda en el 2009, se quedan las cosas como referencia de quien pueda servirle como ayuda/guia, quien quita que necesite revivir algo a resolver, alguna tarea y que efectivamente pueda recordarlo y aplicarlo gracias a los apuntes presentes en este sitio.

Feliz 2010!

Fin.

Siempre me ha encantado estos films, pero en lo particular y hasta la fecha, mis peliculas preferidas son dos de Will Smith, “7 Almas” y “Soy Leyenda“. Esto me recuerda a “I Robot” donde se indicaba que estos estaban evolucionando por si solos, y que manifestaban comportamientos tales como suenos y secretos, instintos o comportamientos de grupo sobre el porque robots descontinuados y guardados en grandes depositos buscaban juntarse en vez de estar solos y cosas de ese tipo. La inteligencia artificial (I.A.) puede ser tan util y real como se le disene, el que pueda crearse a si misma nuevos patrones de codigo o juntar patrones existentes con otros, seria algo muy interesante.

A cinco y cuarenta grados (45 grados de latitud) el cielo ardera cuando el fuego se aproxime a la ciudad nueva entonces la gran llama saltara esparcida cuando los hombres del norte seran puestos a prueba.

En esta parte aparece la persona de los paises arabes que inicio una guerra (que algunos consideran es la 3era Guerra Mundial), lo cual nos trae un nombre a la mente, Osama.

Se indica en este documental que todo inicia entre 1994 y 1999, este ultimo anio donde comienza a verse los impactos de la organizacion que ya cerca en el 2001 tuvo exito (11.09.01).

Informacion de Wikipedia:

En 1994, después de que el gobierno saudí confiscara su pasaporte después de acusarlo de subversión, bin Laden huyó a Sudán, donde se le acusa de haber organizado campos de entrenamiento terroristas y de donde fue finalmente expulsado en 1996. Luego regresó a Afganistán, donde recibió protección de los talibán, la milicia gobernante.

Entre 1996 y 1998, bin Laden emitió una serie de fatwas (en árabe: “decretos religiosos”) declarando una guerra santa contra los Estados Unidos, al cual acusó, entre otras cosas, de saquear los recursos naturales del mundo musulmán y de ayudar e incitar a los enemigos del Islam. Al parecer la meta de bin Laden era involucrar a los Estados Unidos en una guerra a gran escala en el mundo musulmán, que terminaría con los gobiernos musulmanes moderados y restablecería el califato (i.e., un único Estado musulmán).

En esta parte se comenta como este arabe pudo tener sus bases para crear sus actos terroristas gracias a Rusia, mencionandose el nombre de Boris y se menciona una ciudad nueva (new city), alguns expertos consideraban que esto hacia referencia a New York, que se pensara ahora si era o no dicha ciudad.

Ahora hay unas partes interesantes de esta parte del documental, donde Nostradamus escribe sobre la respuesta de EEUU ante el ataque:

suena la trompeta con gran discordia, un acuerdo roto alzando el rostro al cielo, la boca sangrante nadara en sangre.

Podria pensarse que lo anterior se refiere a lo que en pocos minutos sucederia en ese dia.

vencida la gran nacion duda, poco antes del sol, se entra en batalla.

Por vencida podria entenderse a ya impactados los aviones en las torres, luego el avion que cayo, donde se consideran opiniones de que fue por que la tripulacion se amotino contra los terroristas e hicieron que cayera el avion, como la opinion de que fue derribado (pienso que fue la 2da).  Curiosamente el que personifica al presidente de los EEUU es un hombre que me recuerda al presidente de la administracion politica de ese entonces.  Claro, esta parte del documental expresa el suceso con misiles destruyendo toda la ciudad, algo exagerado para como fue realmente.  Ni en un millon de anios ni los que hicieron este documental ni ninguna organizacion de inteligencia, pensarian que sucederia como fue, como Osama y asociados lo planificaron fue realmente brillante e infernalmente aterrador y dolorosamente angustiante, pero brillante, puesto que no tuvieron que gastar en misiles, cientificos, material nuclear, lanzamientos que serian detenidos por anti-misiles estadounidenses. Solo otros locos mas suicidas de los muchos que existen en esos paises en nombre de dios, unicamente como obstaculo ingresar a los EEUU, pero ya el resto, aprender a pilotear aviones de ese tipo, y montarse en uno cada sujeto (o par de sujetos) en distintos aviones y usarlos como misiles.

Se que han habido actos terroristas en Francia, pero han sido con toxinas y bombas quimicas en el metro y bombas colocadas en el transporte publico (recuerdo las noticias) pero no se si sea eso, si tambien Al-Qaeda o si tal vez esto aun no ha pasado o si pasara, ni idea.

Esta ultima parte indica que EEUU y Rusia se uniran derrotando al arabe, (7 y 20 anios) 27 anios de guerra hasta este dia, tambien interesante donde este profeta frances dice que el mundo se acabara en el anio 3797, supongo que por la famosa e inmensa roca que impactara con la tierra, de la cual los cientificos se preguntan cuando sera, ya que no se preguntan si sucedera, sino cuando.

Debido a ser links provenientes de youtube, obviamente no puedo garantizar que dichos links siempre se mantengan o existan.

Debido a que para este tipo de temas es tentador dar opiniones que podrian expresarse de mala manera, se acepta opiniones favorables y desfavorables pero NO insultantes, estas opiniones (en caso de haber alguna(a)), seran eliminadas, conservandose unicamente las de alguna opinion expresada de manera correcta.

enjoy!

Tengo un iPhone (mi 2do iphone donde luego de un 2G paso a un 3G por razones de robo, por haberle hecho favores a una empresa, favores que no debi de haber hecho por no ser parte de mis deberes, lo cual aprendi por las malas), llevo varios meses con un iPhone el cual ha perdido sus funciones de red, ya en este mismo blog escribi hace ya un tiempo un post donde recomendaba no actualizarse al firmware 3.0 por presentar problemas. Este fallo se le ha presentado a algunas personas y a otras no, desafortunadamente soy de las personas que posee el fallo. Algo ilogico que siendo mi iphone original (no liberado ilegalmente) dispongan de un iphone mas estable en sus funciones personas que lo han liberado y en donde un firmware 2.2.1 vale mas y mejor que un 3.0 o 3.1.2 etc.

Han salido varias versiones del Firmware 3.0 y el problema sigue, varios meses sin las funciones de internet, cuando llega el dia en que iTunes me indica de nuevas versiones, tanto del iTunes como para el Firwmare, por lo que procedo con la descarga e instalacion. Pensando que posiblemente ya esta ultima actualizacion podria traer las correcciones que tantos usuarios hemos esperado, resulta que se produce un error en el proceso de actualizacion, lo cual me ha dejado el telefono bloqueado y el PC ya no lo detecta al conectarlo para intentar revertir o volver a actualizar.

Esto me ha obligado a ir a la sede de Movistar (ya que aun me encuentro dentro del anio de garantia) y solo se que dentro de 10 dias es que tendre mi telefono nuevamente (suponiendo que mejor que como lo lleve) y me han facilitado otro telefono temporal (sencillo y barato) para seguir comunicado telefonicamente.

Ahora vemos nuevos contratos que se despliegan con el iTunes donde obviametne Apple se escucha de cualquier danio o perjucio que la actualizacion del software produsca.

Solo veo que el Firmware 3.0 y sus siguientes evoluciones han traido consigo mas deficiencias que estabilidad hacia el producto, todo tanto hardware como software de la misma conpania, donde es Apple quien ha ocasionado danios al producto y no el usuario. Al parecer ahora cada vez que un usuario desee actualizar el Firmware de su ipod o iphone, debe rezar primero un Ave Maria para que todo salga bien, y esto hablando de productos originales, no de productos alterados que incumplan los contratos de Apple hacia el producto y su uso.

En la actualidad hay personas que tienen algunas dudas con esta transicion al HTML semantico donde se preguntan si deben o pueden seguir usando <b> o comenzar a usar <strong> igual si usar <i> o <em>. Programas de diseno web como Dreamweaver ya no te indican <b> o <i> sino <strong> y <em>, donde visualmente <sttrong> y <b> son iguales, remarcan en negrita lo seleccionado pero <b> solo hace un enfasis visual mientras que <strong> es un enfasis estructural y es aqui donde se considera que los motores de busqueda le prestan mas atencion a los tags que realmente enfatisan (estructuralmente) el contenido en el codigo.

Google:
The nice thing is an engineer actually took me to the code where actually I could see it for myself, and Google does treat bold and strong with exactly the same weight.

Traduccion::
Lo genial es que un ingeniero me mostró el código donde pude verlo por mí mismo, y realmente Google trata bold y strong exactamente con el mismo peso.

La W3C indica:
Rules:
* Use the strong and em elements, rather than b and i, to denote emphasis.

The proper HTML elements should be used to mark up emphasis: em and strong. The b and i elements should not be used; they are used to create a visual presentation effect. The em and strong elements were designed to indicate structural emphasis…

Traduccion:
Reglas:
* Usa los elementos <strong> y <em>, en lugar de <b> e < i>, para marcar énfasis.

Para marcar énfasis, utiliza los elementos apropiados del HTML: em y strong.
Los elementos <b> e <i> no deben ser usados; estos se usan para crear un efecto visual en la presentación. <em> y <strong> fueron diseñados para indicar un énfasis estructural…

Se comprenderia entonces que las nuevas normas ya presentes que dicta la W3C es sobre el cambio de algunos tags del HTML por bien sea nuevos o que reemplazan el uso de otros, ahora en el XHTML. Aunque los motores de busqueda podrian estarse adaptando a prestarle mas atencion al enfasis estructural, de consideraria que no omitiran el enfasis de presentacion (visual) ya que de lo contrario, se estaria omitiendo muchas paginas, muchos sitios donde obviamente los webmaster no estarian obligadamente cambiando el codigo (a no ser que las aplicaciones de ahora los cambien automaticamente) pero lo correcto seria para el desarrollo de nuevas web, comenzar a perfilarse a lo ya establecido.

Luego de comentar de algunas cosas nuevas del HTML hacia el XHTML, vemos que el HTML tal cual como lo conocemos no posee la capacidad de relacionar la informacion.  Ahora citando a wikipedia en su concepto de Web Semantica visualmente razonamos al ver datos juntos, donde vemos el IdProducto y a su lado el Nombre del producto y el precio de este en una web de ventas por catalogo, consideramos que dichos datos tienen en comun que pertenecen a lo mismo. Pero los motores de busqueda (que no son un ser vivo con la capacidad de razonar que nosotros tenemos) no pueden saber que algunos datos contenido en el codigo HTML realmente tienen relacion unos con otros, lo cual hace que los motores de busqueda realmente no tengan la precision que necesitamos que posean para dar con la informacion exacta de un tema. La informacion no esta relacionada ni catalogada, yo podria escribir la palabra Obstetricia y en algun momento, algun motor de busqueda podria llegar a esta pagina porque algun medico del area de Ginecologia buscaba informacion de obstetricia, pero veria al llegar aqui, que no hay informacion real del tema, el motor de busqueda lo trajo porque encontro la palabra que escribio, pero el motor de busqueda no supo determinar si la pagina y su contenido realmente tenian relacion con la palabra Obstetricia.

Podriamos escribir Cancer de Seno y si no fuese por los filtros default que omiten paginas de sexo, facilmente podriamos ver entre las listas de paginas de busqueda indexadas, paginas pornograficas o cualquier lugar que contenga dichas palabras, ademas de que el motor buscaria la cadena, tambien buscaria las palabras separadas, a no ser que todo lo escrito se haya encerrado entre comillas dobles ” “, alguna web que por ejemplo contenga el escrito “…en el seno familiar siempre… etc…, tambien puede ser tomada en cuenta por el motor de busqueda a pesar de no tratar el tema del Cancer de Seno.  Entonces, los buscadores tambien nos entregarian informacion de lugares de los cuales no estamos interesados. Volviendo al ejemplo de los datos de un producto de catalogo, si el webmaster mueve los datos (ya no sabriamos que dato pertenece a cual) para el caso del motor de busqueda, nunca sabria que dato tiene relacion con cual sin importar si los datos estan cerca uno del otro como si perteneciesen a un grupo de algo, ni clasificado como para saber si hablamos de un producto de bateria electrica o un instrumento musical.

Lo anteriormente expuesto (sobre los tags HTML que dan un mayor enfasis) seria tema sobre el posicionamiento de nuestras webs en los buscadores referente a SEO (Search Engine Optimization – Optimizacion de Motores de Busqueda) y ser nuestra(s) pagina(s) una de las que se encabece en los primeros topes de la lista que arroje el buscador.

Se podria decir que la tecnologia de Web Semantica se basa en darle un significado al contenido web que ayude a clasificar/catalogar y relacionar los datos unos con otros, parecido como las relaciones que se hacen en una base de datos, para este caso mediante tecnologias como XML, (xml schema), RDF, (rdf schema) y OWL principalmente.  Los ejemplos previos de HTML sobre uso de ciertos tags mas que otros seria un una idea de darle semantica de diseno a la informacion, una semantica de interpretacion unicamente, ya que el codigo HTML de por si solo no puede estructurar y darle significado a los contenidos, pero ya al hablar del contenido, en este punto ya estamos hablando sobre la propia web semantica, dandole un significado a los datos para que programas inteligentes (como los motores de busqueda / gestores de contenido) tengan un mayor nivel del procesamiento de los datos, facilitando y ofreciendo una mayor precision hacia la busqueda de informacion, enlazando datos heterogeneos para obtenerse informacion de mayor calidad.

Login y password de correos, de cuentas de cualquier tipo, datos bancarios, conversaciones, etc. Este riesgo estaria principalmente en lugares publicos como cibercafes y todo PC que se preste para mas de una persona. De este dispositivo solo escaparian las laptops siempre y cuando se use su propio teclado y equipos con tecnologia touch (tacto en pantalla).

Obviamente sabemos que lo peor que una persona puede hacer es acceder a webs de bancos en lugares publicos, e igual para ver el correo.

Con un dispositivo como este, siempre y cuando existan otras personas que tengan alcance de uso de un equipo que usemos bien sea nuestro o porque tambien tenemos acceso a el, chequear antes en la conexion de teclado que no exista ningun dispositivo de puente entre la conexion de teclado con el equipo.

Y esto sin dejar por fuera los peligros de siempre, software que recuperen el cache del navegador, paginas falsas (como la de Banesco, casi identica proveniente de un servidor en Miami por lo que he oido) el cual fue rastreado y tumbado. Cualquier persona podria dejar troyanos en pendrive de bajo costo y dejarlos a la vista para que alguien tarde o temprano los conecte a algun equipo en alguna empresa o pc domestico.

Este dispositivo del teclado es ingenioso, no importa que tanta seguridad de software haya en el equipo, esto es informacion obtenida antes de ingresar los datos al sistema, con llegar a un lugar y sin que nadie lo note, lo colocarian y luego de varios dias lo retirarian, ya muchos hackers y embaucadores (y porque no, la policia claro para investigacion de sospechosos) deben estar buscando o ya disponer quien sabe desde cuando y cuantas veces ya se haya usado, varios de estos y quien no conoce de PCs pero si los usa aun viendolo, no sabria que es y consideraria que simplemente es una parte o conexion mas del equipo, total y completamente normal y al ver que han obtenido sus datos, las averiguaciones apuntarian a reinstalar software, formatear el equipo, tratar de eliminar virus, troyanos, backdoor, sin saber que la verdadera puerta trasera fue otra que nunca considerarian.

Considero que este dispositivo no es nuevo, ya que se habrian tardado mucho en inventarlo, tal vez, solo es ahora que sale mas a la luz para quienes lo vamos conociendo en estos momentos y estar mas alertas y pendientes del equipo que usemos para cosas delicadas de solo y unicamente, nuestro interes.

Porque este dispositivo pasaria desapercibido tan facilmente? no solo por quienes no conocen mucho de los PCs y sus perifericos, sino porque hoy en dia sabemos que ya existen puentes de los perifericos. Conectores de PS/2 a USB e inversamente y los hemos usado. Quien dice que no sea posible disenar uno que si haga el puente que necesitamos y que ademas venga con una utilidad agregada que no desea nadie excepto personas ajenas, quien dice que nadie sea capaz de hasta incluirlo en la propia conexion (unida de cable) del mismo periferico, dichos fabricantes de teclado serian arrestados a no ser que alguien logre fabricar el cable y adaptarselo reemplazando el original. Suena exageradamente paranoico y loco, pero verdaderamente imposible, claro que no lo es, que tenga exito es posible asi que quien no lo intentaria?.

Este dispositivo seria raro que tenga alguna funcion al ver su conector de PS/2 a PS/2 pero uno de PS/2 a USB y viceversa, quien consideraria que recupera informacion propia del teclado?, nadie o muy poca gente.  El “unico” inconveniente seria tener acceso y alcance al equipo de poner/quitar el dispositivo, no tomaria mas de 1 segundo hacerlo, con algo asi no hay que preocuparse por software que detecte otros softwares, script que se salten sistemas firewall, abran puertos, rastreo remoto de a donde va la informacion, etc. Esto es hardware espia de buen desempeno y de buenos resultados.

Sabemos que todo usuario Linux tarde o temprano debe abrir la terminal, siendo esta una parte MUY poderosa del sistema operativo y lo que escribamos en ella podria ser igual como escribir en piedra. Puede haber comandos que hagan un reverso pero realmente no todo es asi.

Linux es un sistema poderoso el cual si no lo sabemos tratar, puede reducirse a nada por culpa del mismo usuario mas que todo. Debe tenerse MUCHO cuidado cuando se recurre a la terminal, pero esta precaucion es cuando se recurre a comandos ALTAMENTE PELIGROSOS del sistema, existen otros comandos que no son ningun peligro para el sistema operativo, la cuestion es saber cuales si y cuales no.

Por ejemplo, supongamos que vas a borrar una subcarpeta que esta fuera de tu home de usuario, ya sabes que debes recurrir a privilegios adinistrativos, incluso hasta podria ser una subcarpeta de tu home de usuario la que deseas borrar, si ejcutas algo como por ejemplo rm -R /carpeta1/carpeta2/carpeta3 pero que ocurre sin antes de terminar de escribir /carpeta3 descuidadamente pulsas la tecla Enter, ya que tal vez querias pulsar la tecla Shif que esta debajo de la tecla Enter o la tecla que esta arriba de Enter. Para este ejemplo, terminas borrando a carpeta2 el cual contenia a carpeta3 pero a muchas otras carpetas y archivos, y lo que borres en la terminal no lo conseguiras luego en ninguna papelera de reciclaje. La terminal no te preguntara si realmente estas seguro si deseas ejecutar o no, mucho de lo que escribas en la terminal y mandes a ejecutar, se ejecutara sin preguntarte nada. Existen programas que una vez instalados pueden ayudarte como el mc u algun otro donde si por descuido no terminaste de escribir toda la larga instruccion y sin quere pulsaste Enter borrando lo que no era, dicha informacion (carpetas o archivos) pasan a un .trash o si pueden ser recuperados de alguna forma. Asi que si aun no tienes nada que pueda revertir lo que hagas en la terminal, te aconsejo que vayas buscando para estar mas tranquilo con lo que escribes en la terminal, sobre todo para muchos que escribimos rapido y ni vemos el teclado al hacerlo.

Por internet se repite mucho unos comandos que se aconseja por nada del mundo aplicar a menos que desees destruir tu sistema linux, dichos comandos son los citados a continuacion:

rm -rf /
Este comando borrará de manera recursiva y convincente todos los archivos en el directorio raíz.

mkfs.ext3 /dev/sda
Este comando formatea la partición que se menciona después de mkfs.

any_command > /dev/sda
Este comando provoca perdida total de datos, en la particion que se menciona en el comando.

mv /home/tu-carpeta-home/* /dev/null
Este comando va a mover todo el contenido de tu carpeta Home a un directorio que no existe, esto significa que ya nunca volverás a ver tus archivos.

){:|:&};:Una bomba fork que satura la tabla de procesos del sistema, fácilmente evitable.

Otros comandos como el dd para particiones o redimenciones del disco que es usado tambien para respaldos, imagenes de disco, es muy peligro usarlo si no se indica correctamente lo que se desea, obviamente un usuario linux al recurrir a comandos tan peligrosos como los mencinados, deberia respaldar toda su informacion antes de intentar algo.

En mi caso ya me toco vivir una experiencia bien desagradable en un canal IRC donde por querer ayudar a un usuario a confirmarle un supuesto bug de Ubuntu 9.10 donde al parecer al matar un proceso de pulse-audio se le cambiaba el theme del sistema, colabore en una serie de pasos para recrear o presenciar dicho bug. Una cosa a hacer era agregar mi usuario a un grupo, pero el usuario que indico la instruccion le falto un agregado -a en la instruccion de todo el comando. Debo decir que la culpa fue tanto suya como mia obviamente.

Este usuario me indico aplicar un sudo usermod -G grupo miusuario pero resulta que si consultamos el manual de este comando tenemos esta informacion:

If the user is currently a member of a group which is not listed, the user will be removed from the group. This behaviour can be changed via the -a option, which appends the user to the current.

Esto informa que si el usuario es actualmente miembro de un grupo que no esta en la instruccion, el usuario sera eliminado de dicho grupo, para que esto no pase debe agregarse -a en las opciones del usermod asi nuestro usuario se anexara al nuevo grupo y tambien seguira en sus demas grupos, sino de lo contrario nuestro usuario se borrara de todos los demas grupos de usuarios en los que este presente. Al no poner -a en las opciones de usermod se borra todos nuestros grupos y deja solo el que le hemos pasado por -G y obviamente ya con esto muchas cosas dejan de funcionar. Que cosas dejan de funcionar? el sudo ya no nos sirve de nada obteniendo una informacion por la terminal de: is not in the sudoers file. This incident will be reported. Esto nos llevara a tener que iniciar el sistema por un recovery o en el peor de los casos reinstalar el sistema nuevamente, no es que sea la primera opcion pero existen personas que pueden quedarse intranquilas con dudas si estan en todos los grupos que estaban antes, si agregar o no nuestro usuario al grupo root es correcto, etc, prefiriendo posiblemente reinstalar el sistema para saber que las cosas vuelvan a estar como el mismo sistema nos las puso.

Consejos:

1. No escribas tan alegremente y tan confiadamente todo lo que te indiquen que hagas en los canales IRC, sabemos que mucha gente desea ayudar, pero existe otra poca gente que tal vez no, ya sea por descuido o por intencion. Al menos una vez en un canal irc llegue a leer como le indicaban a alguien usar el comando rm (comando de borrado) para algo que no era. Mi caso fue un descuido de quien indico el comando y otro descuido de mi parte no coroborar la instruccion.

2. Todo comando que te indiquen aplicar bien sea en un foro o canal de chat irc, confirmalo revisando su manual: !man comando.

3. De ser posible y mejor, instala Virtual Box y levanta un sistema virtual igual a tu host anfitrion y que sea ahi donde hagas todas esas pruebas, en caso de reventar el sistema, no seria originalmente el tuyo sino uno virtual para pruebas.

4. Recuerda cuales podrian ser los comandos peligrosos, incluso los que no podrian serlo pero que con opciones indevidas o faltantes (como en mi caso) terminan danando las cosas, y esos son platos rotos que siempre recogeremos nosotros, sea culpa de otros, nuestras o en parte de ambos.

Bien sea por las buenas o mas por las malas, Linux nos recuerda que es un sistema delicado al cual si no lo sabemos tratar como se le debe, terminaremos lamentandolo por el tiempo que nos tome volver a acomodar las cosas, la Terminal de Linux es algo que se debe de respetar igual como el Synaptic donde no se puede desintalar toda aplicacion que consideremos porque el nombre de un programa que deseamos quitar este en muchas partes.

La practica a comentar se trata de hacer una pagina html donde mostraremos una imagen en tamano original o ajustado en ancho y alto, imagen la cual tendra un encabezado o titulo y una descripcion al pie. Debajo de esta imagen tendremos otras imagenes en miniatura, que al irla seleccionando se nos cambiara la imagen en tamano mayor por la seleccionada, cargandose la imagen con su titulo y descripcion, esto en todo momento sin en ningun momento refrescar la pagina, lo cual es la idea.

No soy partidario de un frecuente uso de Dreamweaver, herramienta que agilice la labor de desarrollo web, pero no te permite ser tan programador como lo harias trabajando con un editor o framework de codigo web (html, php, etc..) ya que en Dreamweaver inicialmente partes en modo de disenar todo visualmente y quien realmente programa es la aplicacion, pero que de igual forma quienes trabajan en Dreamweaver estan obligados en ocasiones a manipular e inyectar codigo entre lineas para terminar de retocar lo que se necesita que haga la web. Pero Dreamweaver mete mucha basura o codigo demas el cual necesita para gestionarse a si mismo, donde en ocasiones en caso de presentarse problemas de conexion, algunos simplemente borran y vuelven a hacer sus pasos a punta de click! por medio de las herramientas de dreamweaver y algunos otros revisando y corrigiendo el codigo (en caso de entenderlo y saber que estan buscando y donde mirar).

Vamos a hacernos una pagina XML la cual contendra el titulo, el nombre del archivo de imagen y la descripcion de la imagen, ese archivo XML sera del que un dataset de Spry se vinculara o relacionara, y estos objetos de Spry en nuestra pagina html sera lo que nos mostrara esta galeria de imagenes.

Usa o baja de internet algunas imagenes y creamos el archivo xml (por ejemplo):

<imagenes>
  <item id="1">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img1.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>
  <item id="2">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img2.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="3">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img3.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="4">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img4.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="5">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img5.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="6">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img6.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

<imagenes>

Como ya ves, tu mismo creas o te inventas la sintaxis en un XML, ya que podria poner <pepe> y mientras haya un </pepe> despues, se entendria que es la apertura y cierre de llaves de un objeto contenedor de algo, lo de <item> puede haberse puesto cualquier cosa, tambien en vez de <imagenes></imagenes> pudimos haber puesto <fotografias></fotografias> si quisiesemos y <parrafo></parrafo> por alguna otra cosa <descripcion></descripcion>, ojala fuese asi en todos los lenguajes, pero habria un libre albedrio donde no se respetaria nada standar o default y tal vez no seria bueno, donde sin importar si yo hablo espanol, y otras personas ingles o chino mandarin, la sintaxis seria igual y no tanto al gusto de cada quien, solo la estructura organizacional del algoritmo pero no su sintaxis.

Ok, ya tenemos algunas imagenes en una carpeta dentro de nuestra carpeta del proyecto web, algunas personas meten todo lo que sea imagenes en una sola y misma carpeta imagenes o image o img (como la desees llamar) pero lo correcto o deber ser es separar o agrupar las imagenes, si tienes imagenes de un evento, guardalas en imagenes/eventoX/asi tendras organizadas las imagenes y no revueltas en la carpeta raiz de imagenes con muchas otras, es mejor trabajar organizadamente.

Creamos ahora un archivo html (migaleria.html o galeria.html) o como gustes llamarla y nos pasamos a la barra de herramientas de Spry (spry son las herramientas de AJAX que ya Dreamweaver CS nos brinda), CS3 y CS4 lo tienen, pero desconozco si CS2, y CS ya lo hayan tenido incluido, versiones previas a CS no disponen de estas herramientas spry.

Selecionamos conjunto de datos spry para llamar al xml:

Seleccionamos el tipo de datos el cual sera XML, el dataset lo podemos llamar dsImagenes o como desees y buscamos el archivo XML con el boton Examinar:

Pulsamos el boton Listo o Done (dreamweaver en ingles o espanol).

Fijemosno en algo un momento, me ha pasado que al hacer esto del xml al cerrar la ventana indicada previamente termino viendo en el menu derecho (seccion Vinculaciones) de Dreamweaver lo del xml pero incompleto:

En este menu nos faltan titulo, imagen y parrafo los cuales vamos a usar, desconozco porque pasa esto, asi que de no estar completa la lista, en esta ventanita donde vemos el boton + y el – selecionamos nuestro dataset dsImagenes y pulsamos el boton del signo – para eliminarlo y lo volvemos a hacer por el boton de la barra o por el signo +.  En esta ocasion en la que volvemos a hacer lo del dataset spry con nuestro XML, seleccionamos item y cerramos la ventana (boton Listo).

Ahora si ya vemos los objetos spry relacionados a nuestro archivo xml que nos faltaban anteriormente:

No se porque pasa esto pero si no tenemos todos los <objeto> del xml presentes, no podremos seguir con la practica.

Ahora vamos a colocar una region de spry en nuestra pagina html:

Esta region spry podria ser a entender, como algo parecido a cuando colocamos una region de formulario <form> y demas cosas de formulario dentro, un contenedor donde solo ahi dentro puede coexistir los demas objetos Spry para su correcto o rganizado funcionamiento.

Vamos a arrastrar a la region spry el objeto imagen de la lista donde tenemos los objetos del xml hacia esta region.

Ahora tendremos que manipular un poco el codigo, ya que este objeto spry {imagen} lo necesitamos como un objeto de imagen, sino, los que nos mostrara la pagina al cargarla sera el nombre del archivo.jpg y no la imagen.

Tenemos esto:

<body>
<div spry:region="dsImagenes">{imagen}</div>
</body>

Y lo cambiamos a esto: (agregamos el <img src=…{imagen}> para que el objeto sea de tipo imagen)

<body>
<div spry:region="dsImagenes"><img src="../proyectoweb/img/img1/{imagen}" /></div>
</body>

Si cargamos nuestra pagina html ya deberia verse al menos la primera imagen de la galeria, ahora vamos a colocarle su titulo y su descripcion provenientes de nuestro archivo xml.

Al codigo le agregamos dos lineas, una antes de nuestro <div…></div> y otra luego de esa linea, quedando asi:

<body>

<h1 spry:detailregion="dsImagenes"> aqui falta algo </h1>
<div spry:region="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>
<p spry:detailregion="dsImagenes"> aqui falta algo </p>
</body>
 

Con un <h1></h1> vamos a colocarle su encabezado o titulo a la imagen y con un simple <p></p> de parrafo su descripcion debajo de la imagen, con spry:detailregion=”nuestro_dataset” como se observa en el codigo arriba, solo nos falta bien sea escribirlo o arrastrar del menu de los objetos spry del xml lo que va en aqui falta algo.

El codigo quedaria entonces asi:

<body>

<h1 spry:detailregion="dsImagenes"> {dsImagenes::titulo} </h1>
<div spry:region="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>
<p spry:detailregion="dsImagenes"> {dsImagenes::parrafo} </p>
</body> 

Si volvemos a cargar la pagina html en nuestro navegador veremos que ahora con la imagen tenemos su titulo y su descripcion (de esa imagen) proveniente de nuestro archivo xml.

Ahora antes del </body> vamos a agregar otra linea algo mas larga, la cual es esta:

<img src="img/img1/{imagen}" class="thumb" title="{titulo}"  onclick="dsImagenes.setCurrentRow('{dsImagenes::ds_RowID}')"
onmouseover="MM_effectAppearFade(this, 500, 50, 100, true)" onmouseout="MM_effectAppearFade(this, 500, 100, 50, false)" /> 

En esta linea o agregado vemos en negrita los objetos spry de nuestro xml, si cargamos nuevamente la pagina veremos que ahora debajo aparecen las demas imagenes, las cuales procederemos a ponerlas en miniatura.

Para que las imagenes debajo se vean en miniatura debemos colocar este codigo antes del </head> de la pagina, ya que el codigo que este antes del <body> o bien sea entre <head></head> se cargara antes que la pagina, por eso el codigo javascript siempre se coloca antes del <body> o entre <head></head> para que al ver la pagina en el navegador ya a cargado este codigo, asi que puede ser luego o antes del codigo javascript ponemos esto:

<style type="text/css">
body{ font-family:Georgia, "Times New Roman", Times, serif}
h1{ margin:0 ; font-size:22px; color:black}
p{ font-size:12px}
.thumb{
width:5%;
margin:2px;
cursor: pointer;
-moz-opacity:.50;
opacity:.50;
}
.imagen{ width:450px}
</style> 

Si cargamos la pagina ahora vemos que las imagenes debajo estan en miniatura, pero vemos que al seleccionar otra imagen, si cambia el titulo y el parrafo pero no la imagen. Esto es porque se nos paso modificar otra cosa en el codigo que esta entre <body></body> en los <div>.

Cambiamos solo lo que indico en rojo:

<body>
<h1 spry:detailregion="dsImagenes"> {dsImagenes::titulo} </h1>
<div spry:region="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>
<p spry:detailregion="dsImagenes"> {dsImagenes::parrafo} </p>
<div spry:repeat="dsImagenes" spry:region="dsImagenes">
<img src="img/img1/{imagen}" title="{titulo}"  onclick="dsImagenes.setCurrentRow('{dsImagenes::ds_RowID}')" onmouseover="MM_effectAppearFade(this, 500, 50, 100, true)" onmouseout="MM_effectAppearFade(this, 500, 100, 50, false)" />
</body>

Por solo lo que indico en azul:

<div spry:detailregion="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>

Igual como todos los demas <div spry:detailregion….> recordemos que esa linea nos la coloco Dreamweaver al arrastrar el objeto {imagen} al cual lo editamos en el codigo agregandolo en un <img> y nos falto editar esta parte que se menciona ahora.

En diseno nuestra pagina se ve asi:

Se recuerda que las imagenes deben ser del mismo tamano, podria ajustarse su ancho y alto en algun editor de imagenes pero tambien (y en caso de ser muchas) colocar un width=”numero” en el codigo del <img>

<div spry:detailregion=”dsImagenes”><img src=”../pgaleria/img/img1/{imagen}” width=”300″ /></div>

Ya en este punto al cargar la pagina ya deberia verse la idea de esta practica, una galeria de imagenes donde seleccionamos alguna de las miniaturas y se nos muestra dicha imagen en un tamano mayor con un titulo y una descripcion.

Advertencia:

Algo importante a comentar es que esta practica ha funciona perfectamente en un PC con WinXP con Dreamweaver CS4 y se ha usado como plataforma web EasyPHP5.3 para las pruebas en localhost. Pero al ver esta practica en un sistema Linux donde ya he trabajado otras cosas en el ambito web e igual al subir esto a un hosting free, la imagen en tamano original o mayor, no aparece, solo las imagenes en miniatura y solo el titulo y descripcion de la imagen en tamano mayor pero no aparece la imagen. Algo de los 3 archivos javascript (no creo que el css) que crea Dreamweaver en una carpeta llamada SpryAssets no interactua bien fuera del entorno aislado y controlado local. Esto es otra razon mas por lo que prefiero escribir yo mismo el codigo o copy+paste codigos de terceros, incluir los archvos .js y editar un poco el codigo uno mismo que por la asistencia de Dreamweaver.

La necesidad de los Selects/Combos/Listas o como los desees llamar que colocamos en formularios web los cuales en alguna ocasion dependera su informacion de una lista previa es algo que tarde o temprano nos toca tener presente. Por ejemplo, el caso de un formulario web donde tenemos 3 listas (Pais, Estado y Ciudad) donde seleccionas el Pais y en base al pais seleccionado, el combo de Estado desplegara solo los estados de ese pais, e igual con sus Ciudades, solo las del Estado de ese Pais que ya se ha seleccionado. Y eso nos sirve para otros casos, una lista de Productos, el cual al seleccionarlo se nos despliegue en otra lista las categorias de ese Producto y hasta en otra lista unas subcategorias de esas categorias, todo proveniente de la base de datos.

Una muestra de lo que trata este articulo sobre listas dependientes. Pais: Venezuela – Estado: Zulia, es el unico que en este ejemplo tiene 3 ciudades.

Creamos una pagina PHP con un formulario el cual contendra 3 combos o listas las cuales eran (Pais, Estado y Ciudad). En la BD debemos tener 3 tablas Paises, Estados y Ciudades.

Pais (id_pais, pais), Estados (id_estado, estado, id_pais), Ciudades (id_ciudad, ciudad, id_estado, id_pais).

De la tabla Pais id_pais puede ser un Integer Auto_Incrementable (AI), en Estados igual el id_estado, y en Ciudades igual el id_ciudad, recordando no perder la relacion entre los Ids de cada tabla para saber que Ciudad pertenece a que Estado de que Pais, como bien ya se sabe. En internet puede conseguirse un archivo .sql con las tablas de Paises y sus Estados, archivo .sql que importariamos a nuestra BD.

En mi caso busque y consegui mucha informacion sobre AJAX para hacer esto de los combos dependientes, codificaciones completas y largas que realmente poseian inestabilidad en el sentido de que algunos ejemplos descargados ni siquiera funcionaban como lo indicaba su autor sin haberles modificado nada, otros eran funcional pero casi intocables, al tratar de adaptarlo a nuestra pagina o proyecto web, era mas el que fallara que el que funcionara como en su puro e inmodificable ejemplo descargado.

Excluyendo post propios de mi persona en este web blog, material educativo de terceros es comentado su link para hacer referencia al material de otros autores (sin en ningun momento acreditarse articulos o explicaciones ajenas) respetando los derechos de autor. En estos casos hago copia de apuntes de terceros en mi bloq porque ya me ha tocado situaciones en las que he perdido el link o incluso, URLs rotas tratando de volver a obtener dicha informacion al menos por los cache de google. Para evitarme estos mal percances pasados, coloco en mi blog las ensenanzas de otras partes para mantener una copia bien sea original o modificada de dicho articulo, lo cual sera para este caso.

Combos dependientes con jQuery

Encontre un material corto, entendible y muy factible en su practica que hace uso de la libreria de javascript jQuery, este material pertenece al blog de Miguel Manchego articulo titulado Combos dependientes AJAX Bases de Datos.

Primero debemos descargar de jquery.com la libreria javascript que nos ayudara a realizar estos combos dinamicos, de su seccion de descarga nos bajamos el jquery (descarga jquery), este archivo .js lo colocamos en la carpeta de nuestro proyecto web, bien sea dentro de una subcarpeta o en la carpeta raiz de nuestro proyecto web.

Debemos crear una pagina .php por cada combo dependiente, en este caso tenemos 3 combos (Pais, Estado y Ciudad), pero el combo Pais no es dependiente de ninguno previo, por lo que el llenado del 1er combo es como ya normalmente llenas un combo.

Yo por mi parte indico la conexion de la Bd en un archivo php el cual incluyo en las de paginas php.

conexion.php

<?php
function conectar(){
   $servidor = mysql_connect("localhost","usuario","clave") or die('Error de conexion al Servidor: ' . mysql_error());
   $basedatos = mysql_select_db("mi_basedatos") or die('Error de conexion con la BD: ' . mysql_error());
}
function desconectar(){
   mysql_close();
}
?>

Creamos nuestro formulario bien sea con algunos pocos campos de texto y 3 combos (Pais, Estado y Ciudad). Llenamos la lista de paises en el combo o lista Pais:

<?php
include 'conexion.php';
conectar();
$resultado = mysql_query("select * from paises");
if($fila = mysql_fetch_array($resultado)){
   do{
      echo '<option value="'.$fila['id_pais'].'">'.$fila['pais'].'</option>';
   }while($fila = mysql_fetch_array($resultado));
}
mysql_free_result($resultado);
desconectar();
?>

El bucle que usamos para cargar las listas debe ser un do{ }While() y no un While() porque la linea $registros = mysql_fetch_row($resultado) hace correr el cursor de la BD, por lo que con un bucle While() debe volverse a cargar la consulta SQL una vez dentro del IF() y antes del While(), al ejecutar dos veces la SQL esto vuelve lenta la traida de la data de la BD y para el caso de muchos usuarios conectados al sitio, la carga se vuelve muy lenta.

Si usasemos un  bucle While() el codigo seria este:

$consulta = "select * from tabla";
$resultado = mysql_query($consulta);
$registros = mysql_fetch_row($resultado);
if($registros){
   $resultado = mysql_query($consulta);
   while($fila = mysql_fetch_array($resultado)){
      echo '<option value="'.$fila['id'].'">'.$fila['campo'].'</option>';
   }
}

Con respecto a la linea azul,  el mysql_fetch_row() mueve el cursor de la BD al siguiente registro, si la SQL es filtrada donde buscamos un solo y unico registro, al llegar al While(), no traera datos porque mysql_fetch_row() movio el cursor de la BD y ahora la consulta para el While es nula. Si la SQL filtrada nos traera varios registros, faltara el primero para el While(). Si colocamos nuevamente luego del IF() la consulta SQL como se indica en las lineas rojas, estariamos ejecutando la consulta 2 veces que en un servidor localhost no se notaria la lentitud pero si en un servidor online de produccion y con muchos usuarios conectados a la pagina que carga los datos, dicha carga seria sumamente lenta por la recarga doble de la consulta.

La solucion para evitar que no se nos mueva el cursor de la BD al terminar la consulta es obviamente no usar el mysql_fetch_row() el cual mete en una matriz la data y nos ocasiona este desplazamiento del cursor a la siguiente fila. Tambien el que se debe usar es un do-while() y no un while() lo cual seria un haz-mientras mejor que un mientras() tal cosa. Asi se ejecuta el ciclo al menos una 1era vez y se evalua luego y asi sucesivamente y no evaluar primero antes de hacer el 1er ciclo y subsiguientes.

$consulta = "select * from tabla";
$resultado = mysql_query($consulta);
if($fila=mysql_fetch_array($resultado)){
  do{
     echo '<option value="'.$fila['id'].'">'.$fila['campo'].'</option>';
  }while($fila = mysql_fetch_array($resultado));
}

El codigo para cargar la lista de paises de la BD seria este:

$consulta = "select * from paises";
$resultado = mysql_query($consulta);
if($fila=mysql_fetch_array($resultado)){
  do{
     echo '<option value="'.$fila['id_pais'].'">'.$fila['pais'].'</option>';
  }while($fila = mysql_fetch_array($resultado));
}

Este codigo php iria inyectado entre <select id=”pais’><?php codigo ?></select> con lo cual ya en el formulario estariamos mostrando la lista de Paises, podemos culminar la SQL con un Order By pais o ASC o DESC para order la lista a nuestro gusto.

Para los otros 2 combos ya debemos recurrir a jquery y otras paginas php que debemos hacer. Recordando el que comentamos que por cada combo dependiente haremos una pagina php. En esta practica tenemos 2 combos dependientes que son Estado y Ciudad, por lo que crearemos una pagina para cada uno y ya veras a que se desea llegar con esto.

El mismo codigo php que usamos para cargar la lista de Paises podemos usarlo para cargar la lista de Estados en otro archivo, solo cambiaremos un poco la SQL y los campos, pero en esencia es la misma codificacion.

estados.php

<?php
   include 'conexion.php';
   conectar();
   $resultado = mysql_query("select * from estados where id_pais = '$_POST[elegido]'");
   if($fila = mysql_fetch_array($resultado)){
      do{
         echo "<option value=".$fila['id_estado'].">".$fila['estado']."</option>";
      }while($fila = mysql_fetch_array($resultado))
   }
   mysql_free_result($resultado);
   desconectar();
?>

Copiamos este codigo de que carga la lista de Estados y hacemos otro archivo php y lo modificamos nuevamente en la SQL y en los campos:

ciudades.php

<?php
   include 'conexion.php';
   conectar();
   $resultado = mysql_query("select * from ciudades where id_estado = '$_POST[elegido]'");
   if($fila = mysql_fetch_array($resultado)){
     do{
        echo "<option value=".$fila['id_ciudad'].">".$fila['ciudad']."</option>";
     }while($fila = mysql_fetch_array($resultado))
   }
   mysql_free_result($resultado);
   desconectar();
?>

Ahora solo nos queda indicar un pequeno codigo javascript en la pagina de nuestro formulario web php, este codigo javascript ira antes del <body> para que al cargarse la pagina, ya se haya cargado el codigo javascript.

<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
  $(document).ready(function(){
     $("#cmbpais").change(function () {
        $("#cmbpais option:selected").each(function () {
           elegido=$(this).val();
           $.post("estados.php", { elegido: elegido }, function(data){
              $("#cmbestados").html(data);
              $("#cmbciudades").html("");
           });
        });
     })

     // Este puede ponerse en comentario si no se dispone de un 3er combo:
     $("#cmbestados").change(function () {
        $("#cmbestados option:selected").each(function () {
           elegido=$(this).val();
           $.post("ciudades.php", { elegido: elegido }, function(data){
               $("#cmbciudades").html(data);
           });
        });
     })

  });
</script>

Hemos marcado en verde donde llamos al archivo .js jquery e indicamos en negrita la funcion padre la cual contiene 2 subfunciones, y colocamos en azul una de las 2 subfunciones porque si solo tenemos 1 solo combo dependiente, la linea indicada en rojo y el codigo en azul no estarian, en cambio si tenemos 2, 3, 4, etc combos dependientes uno dependiente del previo, copiamos y pegamos mas abajo el codigo de una de las subfunciones y editamos a que combo previo pertenece, a que archivo .php llamara la carga de los datos y a que combo se cargaran los datos.

/ Con JavaScript
var elemento = document.getElementById(‘primero’);
// Con Prototype
var elemento = $(‘primero’);
// Con JavaScript
var elemento1 = document.getElementById(‘primero’);
var elemento2 = document.getElementById(‘segundo’);
// Con Prototype
var elementos = $(‘primero’, ‘segundo’);

Existen muchas otras funciones como $F() que permite obtener directamente el valor de los campos de formulario, $$() que permite seleccionar elementos de la pagina utilizando selectores CSS, la funcion $A() para convertir en array (cualquier cosa que se parezca a un array), $R() para crear rangos de valores. El rango de valores se crea desde el valor del primer argumento hasta el valor del segundo argumento. El tercer argumento de la función indica si se excluye o no el último valor (por defecto, el tercer argumento vale false, que indica que sí se incluye el último valor).

Debemos aprender AJAX puesto que es el faltante en el desarrollo web para que las aplicaciones web obtengan una interaccion presente en las aplicaciones de Escritorio (no presentes en las de ambiente web),  Ajax es ese complemento que hacia falta.

Nos fijamos que los <select> de Estado y Ciudad no poseen <option> en el formulario ya que estos se encuentran en estados.php y en ciudades.php dentro del bucle o ciclo while php, igual como en que llena la lista de Paises, codigo que no se llama de otro archivo sino que esta ya incluido entre lineas del codigo html de la pagina de formulario. Al cargarse la pagina de formulario ya se ha cargado el codigo javascript el cual por un evento change envia via post el dato seleccionado del combo a estados.php el cual busca los datos por una SQL filtrada por una variable elegido presente en el codigo javascript y la cual se observa en la SQL $_POST[elegido] (post de javascript, no post del formulario). Entonces el codigo javascript envia el dato a estados.php o ciudades.php bien sea el caso del combo previo seleccionado y devuelve a la pagina de formulario los datos en el combo.

Yo llame a las paginas estados.php y ciudades.php por el contenido que tendrian, pero asi como en las indicaciones y codigo de Miguel comentado al comienzo del post, puedes ponerles combo2.php y combo3.php ajustando esto en el Id de los <select> y en el codigo javascript, queda al gusto de cada quien el nombre de los objetos y los archivos.

enjoy!