23 noviembre 2010

Detrás de cámaras - Inbox

Para los que llegaron a ver el vídeo de presentación de mi Proyecto de Medio Curso y se preguntaron como hice muchas cosas, bueno aquí les mostraré con lo que empece en mi código, no fue fácil, en ese momento trabaje mucho a prueba y error, dado a mi poca experiencia, tenía que buscar muy buenos tutoriales para lograr mi objetivo.

Enseguida muestro partes de mi código para que vean parte de su funcionamiento.

El siguiente fragmento de mi código es del archivo index.html:
<h2>Inicio de sesi&oacute;n</h2>
<form name="acceso" action="cgi-bin/home.py" method="post">
 <p>
  Cuenta:<br/>
  <input class="box" type="text" name="usuario" maxlength="24" id="foco"/>
  <br/>
  Contrase&ntilde;a:<br/>
  <input class="box" type="password" name="contra" maxlength="10"/>
 </p>
 <p>
  <input class="boton" type="submit" value="Entrar"/>
 </p>
</form>

Como pueden observar es un formulario donde pido que se ingrese el Usuario y su respectiva Contraseña. Estos datos una vez ingresados y después de haber presionado el botón Entrar son enviados a la aplicación home.py, que es ejecutada mediante el CGI.


Fragmento del archivo home.py:
#!/usr/bin/python

import cgi

def main():

    entrada = cgi.FieldStorage()
    if entrada.has_key("usuario") and entrada.has_key("contra"):
 arch = open("usuarios.dat", "r")
 for line in arch:
     linea = line.split("~")
     user = linea[0]
     admin = linea[1]
     name = linea[2]
     lastn = linea[3]
     country = linea[4]
     if user == entrada["usuario"].value and admin == entrada["contra"].value:
  bandera = 1
  break
     else:
  bandera = 0
 arch.close()
    else:
 bandera = 0

    if bandera == 1:
        [se imprime una página html con el contenido del usuario]
    if bandera == 0:
        [se imprime la misma página de index, pero con un mensaje de error]

Aquí es donde se reciben los datos enviados desde la página de inicio. Primero se verifica que los dos campos han sido llenados, sino se cumple esa condición a la variable bandera le coloco el valor de 0, lo cual imprimiría el mismo index, pero con un mensaje de error.

En caso de que si fueron llenados los dos campos de datos, se abre el archivo de usuarios.dat:
admin~00110011~Administrador~Principal~UBUNTU~
hugo_donald~12345678~Hugo~Donald~MEXICO~
paco_donald~1445566~Paco~Donald~EUA~
luis_donald~123abcd~Luis~Donald~ARGENTINA~

El archivo lo abro solo con el fin de lectura, para leer linea por linea y verificar si existe el usuario y si es así también verifica si coincide su contraseña. Como en el archivo tengo por cada línea los datos del usuario separados con el carácter "~", antes de la condición que verifica el usuario y contraseña, almaceno cada dato del usuario en una variable, para así comparar esta variable con el dato recibido del formulario.

Si la condición se cumple, esto es que el usuario y contraseña ingresados en el formulario, coinciden con datos de alguno de los usuarios que se tienen registrados, la variable bandera toma el valor de 1, lo cual hará que se imprima la página de home para el usuario, que es aquí donde se muestran sus mensajes nuevos.

22 noviembre 2010

PageRank de Google

PageRank es una marca registrada y patentada por Google que contiene una familia de algoritmos utilizados para asignar de forma numérica la relevancia de las páginas web indexadas por un motor de búsqueda.

El sistema PageRank es utilizado por el popular motor de búsqueda Google para ayudarle a determinar la importancia o relevancia de una página y fue desarrollado por los fundadores de Google, Larry Page y Sergey Brin, en la Universidad de Stanford.

Google es la única empresa abocada a desarrollar el "motor de búsqueda perfecto", definido por su cofundador Larry Page como algo que "comprende exactamente lo que el usuario quiere decir y le entrega exactamente lo que está buscando".

Desde el principio, los programadores de Google reconocieron que, para proporcionar los resultados más rápidos y precisos, era necesaria una nueva configuración de servidores. A diferencia de la mayoría de los motores de búsqueda que emplean un grupo de servidores grandes que suelen ralentizarse cuando procesan picos de carga, Google utiliza equipos conectados para encontrar rápidamente la respuesta a cada consulta. Esa innovación permitió lograr tiempos de respuesta más veloces, mayor escalabilidad y menores costes. Es una idea que otros han copiado desde entonces, mientras que Google sigue puliendo su tecnología interna para hacerla cada vez más eficiente.

El software integrado en la tecnología de búsqueda de Google realiza una serie de cálculos simultáneos en tan sólo una fracción de segundo. Los motores de búsqueda tradicionales se basan, en gran parte, en la frecuencia con que una palabra aparece en una página web. Google, en cambio, emplea la tecnología PageRank para examinar toda la estructura de vínculos de la web y determinar qué páginas son las más importantes.

PageRank realiza un análisis de concordancia de hipertextos para establecer qué páginas son relevantes para la búsqueda específica que se esté procesando. Al combinar la importancia general con la relevancia específica respecto de una consulta en particular, Google puede colocar los resultados más relevantes y fiables en primer lugar.

PageRank realiza una medición objetiva de la importancia que tienen las páginas web. Para ello, resuelve una ecuación que contiene más de 500 millones de variables y 2.000 millones de términos. En lugar de contar los vínculos directos, PageRank interpreta un vínculo de la Página A a la Página B como un voto que recibe la Página B de parte de la Página A. PageRank evalúa, de esa manera, la importancia que tiene una página determinada al contar la cantidad de votos que recibe.

PageRank también considera la importancia de cada página que emite un voto, dado que a los votos procedentes de determinadas páginas se les otorga un valor mayor, incrementando así el valor de la página vinculada. Las páginas importantes reciben una valoración de PageRank más alta y aparecen en la parte superior de los resultados de búsqueda. Los resultados se obtienen sin ningún tipo de participación humana; por este motivo, los usuarios han llegado a confiar en Google como fuente de información objetiva, libre de la manipulación que se genera cuando los sitios pagan por ocupar determinada posición en los resultados.

Por ejemplo en la imagen anterior podemos notar que la página F tiene un PageRank considerable a pesar de que no existe más que una página que tenga algún enlace hacia la misma, pero como E que es la página que contiene este enlace y esta considerado con un PageRank alto, el "voto" emitido hacia F tiene mayor valor.

El motor de búsqueda de Google también analiza el contenido de cada página. Sin embargo, en lugar de explorar simplemente el texto de la página, la tecnología de Google analiza todo el contenido de una página y toma en cuenta también las fuentes, las subdivisiones y la ubicación precisa de cada palabra. Asimismo, Google analiza el contenido de páginas web vecinas para garantizar que los resultados encontrados son los más relevantes para la consulta del usuario.


Entonces como conclusión, una forma para incrementar nuestro PageRank y posicionarnos en las primeras posiciones de resultados de búsqueda, es buscar páginas importantes con un PageRank alto y que pongan enlaces hacia nuestra página.

Posiblemente se te vienen a la mente ideas para hacer trampa, como entrar a foros y poner un enlace a nuestra página, o en los comentarios de páginas pegar nuestro enlace muchas veces, pero lamento decir que Google es listo y tiene tomado en cuenta esto, ya que integro un nuevo valor al atributo rel de la etiqueta <a> que es el nofollow, que los administradores de foros pueden agregar para que cuando un miembro del foro agregue un enlace, este contenga en forma predeterminada este atributo, el cual evita que PageRank lo tome en cuenta. Esto evita este tipo de spam.

Espero les haya sido interesante esta información, y ahora hay que buscar alguna página que desee poner un enlace a nuestro Blog.

Referencia: Googe Corporate

21 noviembre 2010

Usabilidad del sistema SIASE

El sistema SIASE lo usamos muy seguido todos los alumnos de la universidad para realizar muchas acciones diferentes, entre las que están la consulta de horario, ver calificaciones, ver nuestro kardex, pagos, solicitudes de beca, entre otros. Pero desafortunadamente el servicio no es muy bueno, y por eso hacemos una evaluación del servicio.

Para empezar debemos acceder a la página principal de la universidad para encontrar el acceso a este servicio, y nos damos cuenta que no existe ningún acceso directo desde la página principal, debemos ir a la caja desplegable donde se encuentran los demás servicios. Esto debería cambiarse y por ser un servicio que es usado comúnmente por los alumnos debería de estar visible en la página principal.

Visibilidad del estatus del sistema

No se es posible saber si el sistema esta en buen funcionamiento o no, porque no nos muestra ningún mensaje por ningún lado, solo cuando no esta funcionando por completo es cuando aparece un mensaje de mantenimiento, y lo malo es no poder accesar.

Relación del lenguaje usado entre el sistema y el mundo real

En el barra lateral izquierda encontramos en el menú de opciones que el nombre de cada botón esta mal escrito porque le faltan artículos gramaticales, y esto hace parecer que fue "Tarzan" quien los escribió, quiero suponer que si están escritos así fue solo para que los botones no fueran aun más largos.

El control y la libertad del usuario mientras usa el sistema

En las opciones donde es posible hacer cambios significativos a nuestra información si se cuenta con la opción de cancelar, como al modificar nuestros datos personales, si cambiamos alguno de ellos te muestra los botones de Aceptar o Cancelar, esto por si por error tal vez se entro en la sección equivocada.

Consistencia y estándares

Hay muchas de las opciones del menú que son repetitivas y aveces pueden causar confusión, el ejemplo esta en la Solicitud de beca y en Resultado de beca, estas dos opciones deberían de estar conjugadas en una sola.

Prevención de errores

Esto si es un problema grave, porque si estamos llenando alguna encuesta o editando nuestros datos personales y por error hacemos clic en alguna opción del menú, no existe ningún aviso de si realmente se quiere abandonar la acción en curso.

Reconocimiento más que recordar

Cuando seleccionamos una opción, deberíamos de saber exactamente donde nos encontramos, por ejemplo cuando consultamos nuestro horario de clases, seleccionamos la opción en el menú, luego elegimos el semestre y así se nos muestra el horario, pero en alguna parte debería de estar el camino que se siguió para llegar hasta ahí FIME/Horario/Semestre Ago-Dic 2010/.

Flexibilidad y eficiencia en el uso

No hay necesidad en el sistema de que recuerde nuestras opciones más usadas, por el simple motivo de que no hay muchas opciones de donde elegir.

Estética y diseño minimalista

En cuanto a estética me parece muy malas las imágenes que colocan de los escudos y logotipos, ya que estos cuentan con eslogan y no es muy visible por el tamaño y resolución de la imagen. Y en cuanto a diseño minimalista, como ya lo mencione hay opciones que podrían agruparse y así hacer más simple el diseño y no tan redundante.

Ayuda a los usuarios a reconocer, diagnosticar, y recuperarse de errores

Existe un error que cuando dejamos nuestra sesión abierta y nos quedamos en inactividad por más de 15 minutos, aparece un mensaje de error, pero que al dar aceptar se repite una y otra vez, y no nos deja la otra opción más que de cerrar por completo nuestro navegador.

Ayuda y documentación

El sistema no cuenta con ningún botón de ayuda, lo cuál le hace mucha falta.

Nosotros ya tenemos conocimiento de como crear páginas dinámicas y creo que tal vez cuando tengamos más experiencia en cuanto a la creación de este tipo de sistemas, nosotros seamos los que renovemos y mejoremos estos servicios para la universidad.

Teoría de Gestalt y los sitios web

La Teoría de Gestalt es una disciplina psicológica que estudia aspectos de la percepción visual. Aplicar sus descubrimientos es decisivo para obtener buenos resultados en la Web.

El centro de la pantalla ejerce la atracción más poderosa. Los ángulos y los bordes del marco también atraen a los elementos próximos, creando zonas de visión destacadas.
Los principios de la Gestalt se pueden aplicar a los diferentes elementos de interacción hombre-computadora, como sigue a continuación.

Proximidad

El agrupamiento parcial o secuencial de elementos por nuestra mente basado en la distancia. En un diseño de interfaz podríamos aplicar este principio a un grupo de botones que ejecuten comandos similares, o relacionados unos con otro.

En la imagen anterior podemos percibir que la página esta dividida en 3 columnas y cada una de ellas muestra contenido agrupado, pero no existe ninguna linea dibujada que limite el espacio entre columna y columna.

Semejanza

Nuestra mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, el tamaño, el color y otros aspectos visuales de los elementos.

Ahora notamos los objetos y opciones que pertenecen a la misma categoría, por el simple echo de que tienen una forma similar, basta con ver que tienen forma parecida para saber que son elementos de una misma categoría.

Continuidad

Los detalles que mantienen un patrón o dirección tienden a agruparse juntos, como parte de un modelo. Es decir, percibir elementos continuos aunque estén interrumpidos entre sí. Manejar una buena continuidad en un sitio web, permite que se visualicen mejor los menús y elementos principales del mismo.

Este es buen ejemplo de continuidad porque sus elementos están ordenados en columnas y sabemos que la información esta estructurada hacia abajo.

Cierre

Nuestra mente añade los elementos faltantes para completar una figura. Existe una tendencia innata a concluir las formas y los objetos que no percibimos completos.

Utilizar formas aplicando el principio del cierre en los sitios web, puede permitir resaltar la información más importante del mismo, para que los usuarios accedan con mayor facilidad a ella.

En el caso del logotipo de Ubuntu notamos como estas tres personas se acercan para un abrazo grupal que representa para nosotros el trabajo en equipo, y es ejemplo de cierre porque parece ser un circulo cerrado y es lo que vemos en el primer vistazo.

Relación entre fondo y figura

Afirma que cualquier campo perceptual puede dividirse en figura contra un fondo. La figura se distingue del fondo por características como: tamaño, forma, color, posición, etc. El sistema de ventanas en cascada utiliza la organización figura-fondo para que sea posible distinguir por el usuario que la ventana que resalta más, es la que se encuentra activa actualmente.

Aquí podemos ver que a pesar de que el fondo es llamativo en su color, los botones de redes sociales resaltan sobre este fondo y no se pierden entre el contenido de la página.

Simetría

Las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia.

Enlaces: Diseño web

Ejemplo de formulario

Para esta entrada he creado un pequeño formulario que es una encuesta sencilla que solo te pide el nombre, el sexo, y luego te hace dos preguntas, en una de ellas te da las opciones de respuesta en forma de radio botones y en la segunda están las respuestas posibles en una caja desplegable.

<html>
<head>
 <title>Formulario</title>
 <link href="estilo-form.css" rel="stylesheet" type="text/css"/>
</head>
<body onload = "document.forms[0][\'foco\'].focus()">
<div id="entrada">
 <h2>Encuesta</h2>
 <form name="acceso" action="mailto:cuenta@dominio.com" method="post">
 <p>
  Nombre:
  <input class="box" type="text" name="nombre" maxlength="20" id="foco"/><br/>
  <input type="radio" name="sexo" value="Hombre"/>Hombre
  <input type="radio" name="sexo" value="Mujer"/>Mujer
  <br /><br/>
  <b>&#191;Qu&eacute; fruta te gusta m&aacute;s?</b><br />
  <input type="radio" name="fruta" value="Mango"/>Mango<br/>
  <input type="radio" name="fruta" value="Naranja"/>Naranja<br/>
  <input type="radio" name="fruta" value="Manzana"/>Manzana<br/>
  <br />
  <b>&#191;Cu&aacute;l es tu color preferido?</b><br />
  <select name="color">
    <option>Selecciona</option>
    <option value="Azul">Azul</option>
    <option value="Verde">Verde</option>
    <option value="Amarillo">Amarillo</option>
    <option value="Rosa">Rosa</option>
  </select><br />
  <br />
  <input class="boton" type="submit" value="Enviar"/>
 </p>
 </form>
</div>
</body>
</html>

Los datos de la encuesta en este caso como lo observamos dentro de la etiqueta form van dirigidos a una dirección de correo, pero también podríamos mandarlos a un script que los guarde en alguna base de datos.

Y también le he añadido un CSS para darnos cuenta que también es posible aplicar un estilo diferente al predeterminado, a las cajas de texto y los botones.

#entrada {
 margin: 0px auto;
 width: 300px;
 border: 1px solid #336699;
 font-size: 12px;
}
#entrada h2 {
 height: 30px;
 margin: 0px;
 background: #116855;
 color: #FFFFFF;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-size: 1.8em;
}
#entrada p {
 margin: 0px;
 padding: 10px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 15px;
 color: #787878;
}
.box {
 border: 1px solid #E9851D;
 font-family: Arial;
 font-size: 15px;
}
.boton {
 font-weight: bold;
 font-size: 14px;
 color: #FFFFFF;
 background: #DF7401;
 width: 100;
 height: 25px;
 border: 1px #003399 solid;
}

La siguiente imagen muestra como se ve el formulario desde un navegador web, en mi caso use Google Chrome para mostrarles el ejemplo.


Espero sea de ayuda a aquellos que empiezan a crear este tipo de páginas web con formularios.

Formularios en HTML

Los formularios permiten a los desarrolladores de páginas web poner elementos interactivos en sus páginas, por ejemplo, para recibir comentarios de sus lectores.

El usuario escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una dirección de correo electrónico o a un script dinámico web como PHP, ASP o CGI.

Etiqueta form

Los formularios están delimitados con la etiqueta <form> ... </form>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe tener los siguientes atributos:
method indica cómo se enviarán las respuestas.
action indica la dirección a que se enviará la información, ya sea un script CGI o correo electrónico.

Ejemplos de etiquetas form:
<form method="post" action="mailto:webmaster@dominio.com">
<form methos="get" action="http://www.tudominio.com/cgi-bin/script.py">


Dentro de la etiqueta form

La etiqueta form actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo action de la etiqueta form, por el método indicado en el atributo method.

Se puede insertar cualquier elemento HTML en una etiqueta form, pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
La etiqueta input para los botones y casillas de texto.
La etiqueta textarea una casilla de texto.
La etiqueta select una lista de opciones múltiples.

Dentro de la etiqueta input

El atributo name es esencial, ya que permite al script CGI reconocer qué campo está asociado con un par nombre-valor, lo que significa que el nombre del campo estará seguido de un signo igual "=" seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningún valor, por el valor predeterminado de la etiqueta value.

El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta input. Estos son los valores posibles:

text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.
<input type="text" name="nombre" maxlenght="15" size="22" />


password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.
<input type="password" name="secret" maxlenght="10" size="22" />


checkbox: Las casillas de elección pueden adoptar uno de dos estados: seleccionado "checked" o no seleccionado "unchecked".
<input type="checkbox" name="fruta" value="manzana" checked />Manzana
<input type="checkbox" name="fruta" value="naranja" />Naranja
<input type="checkbox" name="fruta" value="pera" />Pera
Manzana
Naranja
Pera

radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name.
<input type="radio" name="sexo" value="hombre" />Hombre
<input type="radio" name="sexo" value="mujer" />Mujer
Hombre
Mujer

reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.
<input type="reset" value="Limpiar" />


submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value.
<input type="submit" value="Aceptar" />


file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviará con el formulario.
<input type="file" />


image: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo src.

hidden: Es un campo que el navegador no muestra, es para definir una configuración única que se enviará al CGI como par nombre-valor.

Etiqueta textarea

La etiqueta textarea se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta input. Esta etiqueta tiene los siguientes atributos:
cols representa el número de caracteres que puede contener un línea.
rows representa el número de líneas.
name representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre-valor.
readonly impide que el usuario modifique el texto predeterminado en el campo
value. Representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto.
<textarea rows="4" name="comments">Escribe tus comentarios</textarea>


La etiqueta select

La etiqueta select sirve para crear una lista desplegable de elementos, especificados por las etiquetas option dentro de ella. Los atributos de esta etiqueta son:
name representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre-valor.
size representa el número de líneas de la lista.
<select name="ocupacion">
  <option>Selecciona</option>
  <option value="alumno">Alumno</option>
  <option value="exalumno">Exalumno</option>
  <option value="profesor">Profesor</option>
</select>


Estos son los objetos que podemos colocar en nuestro formulario para pedir datos al usuario, y que la acción llamada en la etiqueta form nos regrese algún resultado.

CGI - Common Gateway Interface

Las páginas web que hemos aprendido a crear hasta ahora son páginas web estáticas, que son creadas con el objetivo de mostrar información permanente, donde los usuarios que visitarán nuestro sitio se limitarán solo a obtener información sin poder interactuar de ninguna forma con la página.

Estás página web estáticas que hemos creado están conformadas principalmente por vínculos entre las páginas que conforman el sitio completo, y cada una de ellas muestra una cierta información. Pero esto es más que suficiente para los sitios web que solo ofrecen alguna descripción de la empresa o negocio, quiénes son, donde están ubicados, los servicios que ofrecen, etcétera.

Pero que tal si se desea crear una página web dinámica, donde el contenido mostrado no sea siempre el mismo. Afortunadamente contamos ahora con tecnologías capaces de ayudarnos con esto, veamos una de las primeras formas para el desarrollo de páginas web dinámicas, esto mediante un CGI.

¿Qué es CGI?

El CGI es la Interfaz de Entrada Común, por sus abreviación del inglés Common Gateway Interface, que es una tecnología de la WWW que permite al navegador web solicitar datos a un programa que se ejecutará en el servidor web. El CGI es un mecanismo de comunicación entre tu navegador y el servidor cuyo resultado será una página con contenido dependiendo de la información solicitada.

Las aplicaciones CGI fueron las primeras prácticas de crear contenido dinámico para las páginas web. En el CGI el cliente solicita información a un programa externo, este programa puede estar escrito en cualquier lenguaje soportado por el servidor, pero por razones de portabilidad se recomienda el uso de lenguajes script.

El CGI se utiliza comúnmente para contadores, bases de datos, motores de búsqueda, formularios, foros de discusión, juegos en línea, entre otros.

Una de las ventajas de esta tecnología es que es ejecutado el programa en el servidor y no depende de la computadora del usuario.

Los programas manejados por el CGI pueden ser compilados en diferentes lenguajes, pero el más popular es Perl de distribución gratuita, aunque también podemos mencionar C, Java y Python.

¿Cómo funciona el CGI?

  • Primero, el servidor recibe una petición del cliente y comprueba si es una llamada al cgi.
  • Entonces el servidor prepara la ejecución del programa, con información recibida del cliente.
  • Luego el servidor ejecuta la aplicación.
  • La aplicación realiza su función y como consecuencia de su actividad se genera una nueva página web.
  • Cuando la aplicación finaliza, el servidor envía la información generada al cliente que le solicito alguna acción.

Un ejemplo de llamado a un script CGI podría ser:
http://www.midominio.com/cgi-bin/ejemplo.py

Hay que tomar muy en cuenta que existen dos formas de enviar información, siendo estas por medio de GET y POST.

Diferencia entre GET y POST

El método GET envía la información dentro del URL separando los campos con signos de interrogación "?" antes de la información. Ejemplo:
http://www.tudominio.com/cgi-bin/ejemplo.py?nombre=esteban&edad=18

La desventaja de usar este método radica en que no permite manejar grandes cantidades de información y por ser una dirección, el cache del navegador puede guardar los resultados y dificultaría acceder nuevamente a la aplicación.

El otro método es el POST, el cual envía la información directamente al servidor, haciéndolo invisible en el url y permitiendo cualquier cantidad de información, como el envío de archivos.

Enlaces: ¿Qué es CGI? | Web estática

20 noviembre 2010

HTML & CSS

Para esta entrada cree una página web sencilla. Esta creada en HTML y he agregado una CSS para darle una mejor presentación.

La siguiente imagen nos muestra como se ve la página sin el archivo CSS:


Ahora como se ve cuando incrustamos el CSS:


Archivo HTML

<html>
<head>
  <title>Ejemplo de p&aacute;gina web</title>
  <link rel="stylesheet" href="estilo.css" type="text/css">
</head>
<body>
  <h1>Monterrey</h1>
  <ul class="menu">
    <li><a href="index.html">Inicio</a>
    <li><a href="mapa.html">Mapa</a>
    <li><a href="enlaces.html">Enlaces</a>
  </ul>
  <p>Tambi&eacute;n conocida como La Ciudad de las Monta&ntilde;as,
   Monterrey es una fortaleza que est&aacute; enmarcada por el
   Cerro de la Silla, la Loma Larga, el Topo Chico, el
   Cerro de las Mitras y la Sierra Madre Oriental.</p>
  <center>
  <img src="../Blogger/monterrey-de-noche.jpg" width="300" height="220"/>
  </center>
  <p>Considerada como una importante generadora de recursos
   por su variedad de industrias y comercios, la ciudad
   tambi&eacute;n cuenta con diversos museos y galer&iacute;as de arte,
   parques de diversiones y es el hogar de miles de estudiantes
   locales y for&aacute;neos.</p>
  <p>Monterrey tiene un gran pasado hist&oacute;rico pues sus
   habitantes pelearon en las guerras de intervenci&oacute;n americana
   y francesa. Adem&aacute;s por su gran n&uacute;mero de universidades
   est&aacute;n por llamarla la Ciudad del Conocimiento.</p>
  <a href="http://www.nl.gob.mx/">M&aacute;s informaci&oacute;n</a>
</body>
</html>

Archivo CSS

body {
  width: 600px;
  margin: 0 auto;
  padding: 0;
  background: #FFFFFF;
  font-family: Georgia, "Times New Roman", serif;
}
h1 {
  color: #38610B;
  text-align: center;
}
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
.menu {
  height: 30px;
  background: #610B0B;
}
.menu li {
  float: left;
  list-style: none;
  margin: 6px 10px 0px 0px;
}
.menu a {
  text-decoration: none;
  padding: 2px 12px 2px 12px;
  font-weight: bold;
  color: #FFFFFF;
}
.menu a:hover {
  text-decoration: none;
  background: #B45F04;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-align: justify;
}

Descargar: estilo.css | html-ejemplo.html

Enlaces: 20 tips para trabajar con css

CSS - Cascading Style Sheets

Las hojas de estilo en cascada, CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML.

La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".

Formas de aplicar las reglas de estilo a una página Web:


Hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
<head>
<link rel="stylesheet" type="text/css" href="miestilo.css" />
</head>

Hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho.
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada.
<p style="color:sienna;margin-left:20px">Agregar un texto.</p>

Sintaxis


Propiedades CSS

Enseguida algunas de las propiedades que podemos cambiar con el CSS.

Backgrounds

Sirve para mostrar un color de fondo y/o una imagen de fondo.
body {
background-color:#b0c4de;
background-image:url('imagen.png');
background-repeat:no-repeat;
background-position:right top;
}
/*Forma abreviada*/
body {
background:#b0c4de url('imagen.png') no-repeat right top;
}

Text

Nos permite alinear el texto y transformar el contenido en mayúsculas, minúsculas o con letra capital.
body {color:blue;}
a {text-decoration:none;}
p.main {
text-align:left|right|center|justify;
text-transform:uppercase|lowercase|capitalize;
}

Fonts

Para elegir el tipo de letra, el estilo de la letra y su tamaño.
p {
font-family:"Times New Roman", Times, serif;
font-style:normal|italic|oblique;
font-size:14px;
}

Links

Los colores de los vínculos según sea uno visitado, cuando se pasa el ratón por encima o cuando esta activo.
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Margin

Nos permite alinear contenido.
#nuevo {
margin-top:20px;
margin-bottom:60px;
margin-right:50px;
margin-left:30px;
}
/*Forma abreviada*/
#nuevo {
margin:20px 50px 60px 30px;
}

Padding

Alinear contenido con respecto a otro elemento.
#otro {
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
/*Forma abreviada*/
#otro {
padding:25px 50px;
}

Enlaces: Tutorial CSS

Empezando con HTML

Ya sabemos que en HTML para mostrar algún contenido en una página web se usan etiquetas, y la mayoría de los elementos tienen una etiqueta de inicio y otra de cierre.

Para comenzar un archivo html el cual será nuestra página web, debemos comenzar con la etiqueta <html> y finaliza con </html>, pero para entender mejor esto veamos un ejemplo sencillo de como comenzar una página web.

<html>
<head>
  <title>Ejemplo</title>
</head>
<body>
  <h1>Encabezado</h1>
  <p>Un texto</p>
</body>
</html>

Las etiquetas utilizadas son:
<html> para colocar todos los elementos que estarán en nuestra página web.
<title> se usa para darle un titulo a esa página en especifico y este aparecerá en la barra de titulo del navegador o en su defecto en la pestaña del navegador.
<body> encierra el contenido de la página, como imágenes, vínculos, texto, entre otros.
<h1> es un estilo de encabezado.
<p> nos sirve para colocar texto en forma de párrafo.

Este ejemplo se vería así en Firefox:

Los navegadores tienen estilos predefinidos para la mayoría de las etiquetas, como las de párrafos, encabezados, imágenes, enlaces, listas, tablas, etcétera.

Veamos diferentes encabezados y como se mostrarían en el navegador:
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>


Formato a texto:

<b></b> - Texto en negritas
<i></i> - Texto en cursiva
<u></u> - Texto subrayado
<strike></strike> - Texto tachado

Tablas:

<table> - Inicio de una tabla
<td> - Columna de la tabla
<tr> - Fila de la tabla
<th> - Celda en forma de título
<caption> - Se usa para poner título a la tabla
<td colspan="3"> - Combinar columnas
<td rowspan="3"> - Combinar filas

Insertar imágenes:

<img scr="url_de_la_imagen" />

Veamos un ejemplo y su visualización en esta publicación:
<img src="http://usuarios.multimania.es/
ramon/img_logore.png" alt="Ejemplo"/>
Ejemplo

Insertar vínculos:

<a href="url_de_la_pagina">Texto mostrado</a>
Los ejemplos de visualización que mejor que los mostrados enseguida.

Enlaces: Signos en HTML | Convertir caracteres especiales a entidades HTML

¿Qué es HTML?

HTML, siglas de HyperText Markup Language, es sin duda el lenguaje más usado para la elaboración de páginas web.

Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<, >).

El entorno para trabajar HTML es simplemente un procesador de texto, como puede ser el bloc de notas en Windows, gedit en Ubuntu o emacs disponible en varios sistemas operativos. El conjunto de etiquetas que se creen, se deben guardar como archivo con la extensión (.htm) o (.html).

Estos documentos pueden ser mostrados por los visores o navegadores de paginas Web en Internet, como Netscape, Opera, Internet Explorer, Firefox, Chrome, entre otros.

Para comenzar con esto de HTML hay que tener en cuenta cosas básicas como lo que son los elementos y los atributos.

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML.

Un elemento generalmente tiene una etiqueta de inicio y una etiqueta de cierre. Ejemplo: <h1>Soy un encabezado</h1>

Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas. Algunos elementos, tales como <br />, no tienen contenido ni llevan una etiqueta de cierre.

Elementos de marcado usados en HTML

El marcado estructural describe el propósito del texto. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos. Un formato específico puede ser aplicado al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su función.

El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace.

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML, sin embargo, dejar los valores sin comillas es considerado poco seguro.

Enlaces: HTML | Tutorial HTML

Navegador o Buscador

Tal vez para nosotros los que habitualmente exploramos la Internet nos sea fácil diferenciar entre lo que es un Navegador y un Buscador o Motor de búsqueda, pero habrá aun quienes no lo saben o pensaban que eran la misma cosa. Así que en esta entrada mostrare la diferencia entre uno y el otro para que la próxima vez que nos pregunten ¿Qué navegador usas en tu computadora?, no respondamos Google, lo cuál nos dejaría como totales ignorantes.

Navegador

Un navegador es un programa que permite ver la información que contiene una página web, sin importar si se encuentra en la World Wide Web o en un servidor local. El navegador interpreta el código, que por lo general es HTML, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.

La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos.


Navegadores más usados y populares

Google Chrome - Cuenta con mucho mayor velocidad, así como optimización de cada una de las pestañas creadas de modo que una que tenga mucha carga no afecta a las demás, debido a que cada pestaña es un proceso independiente.

Internet Explorer 8 - Dispone de InPrivate, una función con la cual podrás navegar sin dejar huellas. El botón de Sitios sugeridos puede recomendarte páginas similares a la que estás visitando, y SmartScreen te defenderá de páginas maliciosas.

Mozilla Firefox - Navegador con interfaz gráfica de usuario desarrollado por la Corporación Mozilla y un gran número de voluntarios externos. Es un navegador Web multiplataforma, que está disponible en versiones para Microsoft Windows y Linux.

Opera - Navegador de internet gratuito, bien conocido por su velocidad, soporte
y seguridad. Cuenta con el sistema de pestañas y como dato, ellos fueron unos de los primeros
en utilizarlas y fue uno de los motivos por lo que este explorador se hizo conocido.

Safari - Diseñado para realzar la navegación, no el navegador. Su marco apenas mide un píxel de ancho y ves la barra de desplazamiento sólo cuando la necesitas. Por omisión, no hay barra de estado, sino un indicador de progreso que gira mientras la página se carga. Encontrarás las pestañas en la parte superior del navegador, en una ventana más amplia todavía para ver los sitios web.

Buscadores

Son un sistema informático que busca archivos almacenados en servidores web. Las búsquedas se hacen con palabras clave o con árboles jerárquicos por temas y el resultado de la búsqueda es un listado de direcciones Web en los que se mencionan temas relacionados con las palabras clave buscadas.


Buscadores más usados en México

Google - Es probablemente el motor de búsqueda más reconocido y mas grande del mundo.

Bing- Buscador web de Microsoft, el cual sustituyó a su anterior y reconocido buscador de Live Search.

Yahoo - Tiene un completo índice y también dispone de un potente motor de búsqueda que localiza página a partir de palabras clave y criterios.

Enlaces: Navegadores más usados

World Wide Web

Conocida como Web, la web, la red o WWW por su abreviación de World Wide Web, es en pocas palabras un medio de comunicación de texto, gráficos y otros objetos multimedia a través de Internet. Esto quiere decir que la web es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro punto de vista, una forma gráfica de explorar Internet.

En informática, la World Wide Web, es un sistema de información distribuido basado en hipertexto o hipermedios enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, videos u otros contenidos multimedia, y navega a través de ellas usando hiperenlaces.

La Web fue creada alrededor de 1989 por Tim Berners-Lee y Robert Cailliau mientras trabajaban en la Organización Europea para la Investigación Nuclear (CERN) en Ginebra, Suiza, y publicado en 1992. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares Web y en los últimos años ha abogado por su visión de una Web Semántica.

Es importante saber que web o www no son sinónimo de Internet, la web es un subconjunto de Internet que consiste en páginas a las que se puede acceder usando un navegador. Internet es la red de redes donde reside toda la información. Tanto el correo electrónico, juegos, son parte de Internet, pero no de la Web.

¿Cómo funciona la WWW?

Para ver cómo funciona la web, vamos a suponer que te conectaste para ver la página de la UANL, abriste tu navegador y tecleaste en la barra de direcciones el siguiente URL: http://www.uanl.mx/index.html y mágicamente, sin importar en dónde está la información, llega hasta tu pantalla la página.

A nivel general, tu navegador se conectó al servidor de web de la UANL, solicitó la página y esta fue presentada en tu pantalla, ahora, si queremos entrar más a detalle, en realidad lo que ocurrió es que inicialmente, tu navegador rompió esa dirección en tres partes:
El protocolo: http
El nombre del servidor: www.uanl.mx
El nombre del archivo: index.html

Así, tu navegador se comunicó con un servidor de dominios (DNS) para traducir www.uanl.mx en una dirección IP una vez que la obtuvo, estableció comunicación con la máquina que responde a esa dirección IP. Posteriormente, estableció una conexión con el servicio de web utilizando el puerto 80 que determina el protocolo http y finalmente solicitó el nombre del archivo que estabas buscando.

Pero esto apenas comienza...
El traspaso de esa información se realiza a través de pequeñas unidades de información, mejor conocidas como "paquetes", estos paquetes son pedazos de la información que llega a tu máquina. Estos paquetes se llenan en dos etapas, la primera de ellas se encarga de tomar la información directamente de la aplicación, segmentarla para se integre en los paquetes y asignarle un identificador de la aplicación, ésta primera etapa es conocida como TCP.

Una vez que están construidos estos paquetes, pasan a la siguiente etapa de empaquetamiento, que es conocida como IP, donde el protocolo se encarga de asignar las direcciones IP fuente y destino de dicho paquete y enviarlo a la red. La capa de IP se encarga de asignar las direcciones únicamente, pero imaginemos cómo hace la computadora para saber a qué aplicación va dirigida la información, si es que ambos tienen probablemente la misma dirección fuente y destino; ese es justamente el trabajo de TCP, que asigna a cada dirección un puerto que permite reconocer de que aplicación proviene. Una vez construidos estos paquetes son enviados por alguna linea telefónica, satélite o fibra óptica.

El desplazamiento de paquetes se realiza por computadoras especializadas conocidas como ruteadores, su trabajo es esencial para el funcionamiento del Internet, ya que estos dispositivos tienen la capacidad, de enrutar los paquetes provenientes de cada computadora a su destino. El proceso suena un poco complicado, pero en realidad es bastante simple, si pensamos por un momento en cómo funciona una oficina postal: imaginemos que las cartas que recibe son los paquetes de información que salen de tu computadora, cada carta al igual que los paquetes llevan la dirección a la que se dirigen y la dirección del remitente. Una vez que llegan a la oficina postal, son examinadas para conocer el destinatario y decidir cuál es la mejor manera de que esa carta llegue hasta él.

El trabajo de los ruteadores es prácticamente idéntico, una vez que llega a ellos un paquete de información, el ruteador inspecciona sus direcciones fuente y destino para determinar cuál es la mejor ruta para transmitir este paquete, dicha decisión se toma en base a una tabla de ruteo, que no es otra cosa que una relación de los destinos que ese ruteador puede alcanzar con respecto a los puertos de entrada y salida. Lo que hace es comparar la dirección destino con todas las entradas que tiene en su tabla de ruteo y una vez que encuentra la dirección, envía el paquete por el puerto de salida correspondiente.

Una vez que estos paquetes de información llegan hasta la aplicación que estamos usando y que fue la que en primera instancia mando solicitar la página, son abiertos cada uno de ellos y se extrae la información que contienen, en el ejemplo de la página de la UANL se ha de haber recibido un archivo html el cual nuestro navegador web es el encargado de transformar esta información en una página web.

Enlaces: Más a delante | Internet de cerquita

Internet

Actualmente, según estadísticas de la agencia de Naciones Unidas para las Telecomunicaciones en Ginebra, se estima que para finales de este año 2010, existan alrededor de 2000 millones de personas con acceso a Internet.

Como lo muestra la gráfica podemos observar que hasta estos momentos 30 de cada 100 habitantes del mundo cuenta con acceso a Internet, una cifra que sigue aumentando, sobre todo en países subdesarrollados se ha observado un incremento considerable de usuarios que cuentan ya con este servicio.

Pero, ¿Qué es Internet?

Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial.

El servicio que más éxito ha tenido en Internet es sin duda alguna la World Wide Web, abreviada como la WWW y usualmente llamada Web. Este servicio de Internet por ser el más utilizado ha llegado al punto de confusión entre estos dos términos, inclusive considerarse como lo mismo. Pero la WWW en realidad es un conjunto de protocolos que nos permite la consulta remota de archivos de hipertexto, desarrollada en 1990 y que utiliza el Internet como medio de transmisión.

Además de la WWW existen muchos otros servicios y protocolos usados en Internet, entre los que podemos encontrar el envío de correo electrónico, la transmisión de archivos, conversaciones en línea, mensajería instantánea, contenido y comunicación multimedia como la telefonía y la televisión, boletines electrónicos, acceso remoto a otros dispositivos, juegos en línea, entre otros.

Evolución del Internet

En sus inicios Internet tenía un objetivo concreto, la búsqueda de información. En nuestros tiempos la búsqueda de información sigue siendo el uso común entre sus usuarios, pero conforme crece la red mundial es más fácil "perderse" en la red por la inmensa cantidad de información y de páginas que ofrecen la misma.

"La incorporación de tantas personas a la red hace que las calles de lo que en principio era una pequeña ciudad llamada Internet se conviertan en todo un planeta extremadamente conectado entre sí entre todos sus miembros".

Enlaces: ITU | Vanguardia.com

18 noviembre 2010

Proyecto Final

Para mi proyecto de fin de curso, decidí hacer una aplicación para Facebook. Se trata de una aplicación con la que puedes enviar pequeños regalos, que en realidad son pequeñas imágenes que son publicadas en el muro de alguno de nuestros amigos. En la página principal el usuario selecciona un "Gift" y luego selecciona uno de sus amigos del cuadro de búsqueda, y por último da clic en el botón enviar, y después de esto la página se refresca y aparece una ventana donde se puede escribir algún mensaje para nuestro amigo y la opción de Cancelar el envío o Publicar.

Así se ve la página principal de la aplicación. Por el momento solo cuenta con 10 Gifts a elegir pero agregare más. También cuenta con otras tres pestañas en la parte superior donde encontraran una opción para publicar en tu propio muro desde mi aplicación, una sección de comentarios y la opción de invitar a tus amigos a que usen la aplicación

La siguiente imagen muestra como se vería en nuestro navegador la página al momento de seleccionar un gift, en este caso fue el árbol navideño y será enviado a una amiga.

Por el momento es todo, entraré en detalle sobre mi código en la próxima publicación, y les dejó el link de la aplicación por si desean echarle un vistazo.

Aplicación Facebook: Send a Gift

Al entrar por primera vez a la aplicación se requiere que permitas el acceso a tu información básica, esto para poder acceder a tu lista de amigos desde la aplicación.

Nota: La aplicación en ningún momento guardará datos tuyos, así que sin miedo dale Permitir.