Modulo 1.

1. Tecnologa y conceptos web

1.1 Sitios web

De manera concreta, un sitio web es aquel que presenta la informacin de manera estructurada por medio de un cdigo de marcas y etiquetas conocido como lenguaje de marcado de hipertexto: HTML. Este cdigo a su vez es interpretado y ejecutado por un navegador (Firefox, Google, Chrome, Safari, Opera, Internet Explorer, etctera). Un documento HTML puede contener texto y elementos multimedia, por ejemplo: imgenes, videos y sonidos.

Los sitios tienen la posibilidad de ser estticos o dinmicos. Los primeros son aquellos que no permiten una interactividad con el usuario, su contenido permanecer siempre igual. En cambio, los dinmicos cuentan con un contenido que se puede modificar en tiempo real a medida que el usuario interacta.[footnoteRef:1] [1: RUBIALES, Mario, HTML5, CSS3 y Javascript, Madrid, Espaa, Editorial Anaya Multimedia, 2014, p. 362 ]

1. 1. 1 Bases esenciales para un sitio web

Si tenemos como primera consideracin que el usuario tiene 3,8 segundos para ver una publicacin, que es el tiempo que tenemos para llamar su atencin o ser descartados, el primer filtro. Solo para que despus, el usuario analice el sitio en 13,2 segundos y decida si es apropiado o no para su bsqueda. Comprenderemos la relevancia de un mensaje claro, esto es, que el usuario pueda ver lo que se le ofrece sin distraerse, recordando, que si le hacemos esperar abandonar el sitio. As mismo la informacin deber ser la adecuada al servicio, haciendo especial hincapi en no ofrecer miles de posibilidades, no abusar de links o publicidad excesiva, no hacer uso de submens animados con sonido y/o exceso de animaciones.

El buen manejo de la informacin, nos dar la capacidad de jerarquizarla. Resaltar lo de mayor importancia, dividir entre prioridades, mediante recursos grficos, siempre teniendo un balance entre imagen-texto, ya que el uso inadecuado podra desencadenar en fatiga visual y con llevar al abandono. No se deber pasar por alto el principio leer-mirar-aprender.

En lo referente a los formularios, a mayor cantidad de campos por completar menor cantidad de actividad del usuario. Deber ser concreto, no pedir datos privados; por ejemplo nmeros de cuentas bancarias, ya que esto solo significara la perdida de la confiabilidad. Esta ltima solo la ganaremos por medio de uso de marcas, logotipos y patrocinadores de confianza, que sean reconocidos y que transmitan confianza al cliente.

1. 1. 2 Definiciones

Algunas de las definiciones que se abordan a continuacin, son de gran relevancia para comprender el funcionamiento de los sitios web dinmicos, en este apartado. Estas aclaraciones y ms podrn ser encontradas al final de esta Memoria grfica en el apartado: Glosario.

1. 1. 2. 1 HTTP

Siglas Hypertext Transfer Protocol, es el protocolo empleado para la transferencia de datos en la World Wide Web.[footnoteRef:2] [2: Ibid, p. 361 ]

Es el protocolo que esta dirigido a transacciones. Se gua por el esquema peticin-respuesta entre un cliente y el servidor. HTTP define la sintaxis y semntica utilizadas por los elementos de software de una arquitectura web, conformada por clientes, servidores y proxies, para comunicarse.

1. 1. 2. 2 User agent

User agent que en espaol se traduce como agente de usuario. Es una aplicacin informtica que funciona como cliente en un protocolo de red. El trmino se utiliza para hacer referencia a las aplicaciones que acceden a WWW.

El user agent puede ser todo aquel que efecta una peticin, ya sea un navegador web o spider (web crawler) [footnoteRef:3]. [3: Unaaraa webes un programa que inspecciona las pginas delWWWde forma automatizada. Es empleada para crear copia de las pginas web, para luego indexarlas a un sistema de bsqueda rpido. ]

Cuando un usuario accede a un sitio web, se enva una cadena de texto que identifica al agente de usuario ante el servidor, el texto forma parte del pedido a travs de HTTP.

1. 1. 2. 3 URL

Es el acrnimo de Uniform Resource Locator, localizador uniforme de recursos. Se entiende como la cadena o secuencia de caracteres con formato modlico y estndar, que hace referencia de forma nica a un recurso, en otras palabras, que se usa para nombrar recursos en internet para identificarlos y/o localizarlos.

1. 1. 2. 4 WWW

Son las siglas de World Wibe Web, conocida comnmente como la red de redes. Es un mecanismo de transferencia de documentos HTML, eso significa que distribuye informacin basada en hipertexto o hipermedios enlazados.[footnoteRef:4] [4: RUBIALES, op. cit. p. 364]

El usuario a travs de un navegador web y haciendo uso de hiperenlaces, visualiza: sitios, portales, aplicaciones y ambientes virtuales, que estn compuestos por elementos web. Estos ltimos pueden llegar a contener textos y multimedia (videos, imgenes, sonidos, etctera).

1. 1. 2. 5 W3C

World Wibe Web Consortium, es el consorcio internacional que promueve y especifica el cumplimiento de los estndares de web, con el fin que haya un punto de unin entre las diferentes tecnologas y de esa forma se logre una compatibilidad entre las diversas mquinas y softwares.[footnoteRef:5] [5: Ibid, p. 42]

Sus objetivos son regidos por cuatro principios bsicos. El primero, es que la web este disponible para todos. El segundo, cualquier dispositivo (mvil, tabletas, etc.) debe poder acceder al contenido de la web. La web colaborativa es el tercero, se promueven las wikis, blogs y redes sociales, todo esto en pos de que el usuario pueda intercambiar informacin. Por ltimo el cuarto: web segura, considerar dentro de los aspectos comerciales y sociales la legalidad.

1. 1. 2. 6 HTML5

Como ya ha sido mencionado el HTML5 es el lenguaje de marcado de hipertexto, por sus siglas en ingls Hyper Text Markup Language. Predomina en la elaboracin de servicios web, describe y traduce la informacin, incluso puede llegar incluir un script (Javascript, Ajax, Java) que afecta el comportamiento de navegadores web y otros procesadores HTML.

HTML5 es la ltima versin de este lenguaje. Puede contener texto y elementos multimedia: imgenes, video y sonidos.

1. 1. 3 Diseo

Es necesario que el diseador sea consciente de la estructura y diagramacin, dicho de otra forma que conozca las conexiones y relaciones entre secciones, la topologa de la red, adems de la granularidad de los elementos de informacin contenidos entre s.

Adems, deber conocer la navegacin, entenderla como el desplazamiento hacia otras secciones o servicios de la aplicacin web, sabiendo que son entornos hipermedia formados por conjuntos de servicios interrelacionados por enlaces unidireccionales, que pueden contener subelementos con contenidos propios.

1.2 Aplicaciones web

Actualmente, desplegar informacin no es suficiente, es necesario que el sitio contenga elementos que permiten una comunicacin activa entre el usuario y la web, esto se conoce como interactividad, dicho de otra manera, la pgina deber responder a las acciones del usuario de manera fluida. Esto ltimo desemboca en lo que se conocen como aplicaciones web.

Durante aos, las aplicaciones web han sido usados por millones de empresas con fines de comunicacin y de intercambio de informacin para realizar transacciones con los clientes. Las empresas utilizan las aplicaciones web para recopilar , procesar y almacenar, transmitir datos tiles de los clientes, tales como datos personales, informacin de tarjetas de crdito, etc.[footnoteRef:6] [6: http://es.slideshare.net/Divyawebservice/importance-of-web-application-development-for-the-enterprises 11:59 am 19 marzo/15]

Pero no slo han sido una efectiva y eficiente ruta de llegada a los clientes potenciales, gracias a la velocidad para recibir y transmitir informacin, tambin sirven para un gran rango de propsitos; educacin y expansin del conocimiento, cultura, por solo mencionar algunos de los campos. Han venido a revolucionar la forma de concebir el mundo virtual y nos han dejado un nuevo mercado; el mercado virtual.

Pero qu es una aplicacin web? En palabras tcnicas, es el trmino que se le designa a las herramientas que son ejecutadas en el entorno del navegador, es decir, que se accede a ellas a travs del internet. Tambin se le define como el documento codificado en un lenguaje (HTML5, Javascript, CSS, etc.) soportado por el navegador, capaz de desplegar imgenes, sonidos, videos y links.[footnoteRef:7] [7: http://www.alegsa.com.ar/Dic/aplicacion%20web.php 10:25 am 19 marzo/15]

Destaca por ser dinmica, gracias a una de sus principales caractersticas, que es hacer uso de la interactividad entre la pgina y el usuario.

1. 2. 1 Ventajas y desventajas de una aplicacin web

La disponibilidad de una aplicacin web suele ser alta, esto gracias a ser multiplataforma, en otros trminos, puede utilizarse en diversos entorno o sistemas operativos[footnoteRef:8], esto facilita que sea compatible y portable ya que puede ser desplegada desde en una desktop hasta en un dispositivo mvil. [8: https://www.google.com.mx/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#q=significado+de+multiplataforma 14:40 pm 21 marzo/15]

Al ser dinmica permite una retroalimentacin y colaboracin, este dinamismo posibilita las actualizaciones inmediatas.

Sin embargo, depende de un tercero, por ejemplo del servidor, si ste no se encontrar disponible la aplicacin no podra ser desplegada, as como tambin podra suscitarse que el navegador llegase a fallar.

Adems, hay que considerar que al tener la facultad de tener accesos pblicos y privados puede llegar a impedir el acceso a todos.

Por todo lo anterior podemos darnos cuenta que las aplicaciones tienen muchas ventajas, y aunque sus funciones puedan ser limitadas, son una excelente herramienta.

1.3 Conversin web

Qu resultados buscamos obtener con el usuario?

El primero es captar su atencin. Deberemos saber que es lo que busca en nuestra pgina para drselo, por ejemplo si entro a una pgina en busca de informacin y encuentra todo menos esa informacin abandonar el sitio, peor an si la pgina no solo no le muestra lo que busca sino que adems lo satura con anuncios o popups.

Despertar el inters, sera el segundo punto. Es en este rubro, donde deberemos ofrecer nuestro producto como el mejor del mercado, haciendo uso de recursos grficos (logotipo, colores) y mercadotcnicos (slogan, promesa de compra).

Seducir al usuario: generar deseo, con la finalidad de recaudar la mayor cantidad de visitas al sitio web. Este deseo lo podemos dirigir, segn sea el caso, hacia un producto, un objeto o un bien, . Deberemos apelar lo prohibido, a la envidia (deseo por lo que es de alguien ms), a algo extraviado, a algo nico para el usuario y que no pueda ser de nadie ms (al menos en apariencia).

Y la ms importante, que realice una accin. Dependiendo del objetivo del sitio ser esta, puede ser llenar un formulario, compartir en redes sociales (difusin) o compra.

1.4 Usabilidad

Se define como la cualidad que tiene un servicio de ser usados fcilmente. En este caso se habla de que tan fciles de usar resultan los dispositivos, aplicaciones o sistemas. La Organizacin Internacional para la Estandarizacin la especifica como la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario en condiciones especficas de uso.[footnoteRef:9] [9: De acuerdo al ISO/IEC 9126.]

Esta cualidad depende de diversos factores: usuario, interfaz de usuario, necesidades especficas de uso y el contexto.

La manera en la que se mide por tanto es subjetiva y relativa, cada medida corresponde a una meta, la cual puede ser que sea sencillo, rpido o satisfactorio.

La importancia que tiene dentro de los sitios web, intranets, servicios en lnea y aplicaciones para dispositivos mviles es mayor, ya que permea en la memoria de los usuarios la rapidez con que se aprende a usar algo, que tan eficaz es y que tan agradable les parece.

1.5 Accesibilidad

Si retomamos lo que dice la 3WC acerca de que los sitios web deben ser aptos para todos, en cualquier parte del mundo, podremos entender la relevancia de la accesibilidad.

Qu es la accesibilidad? Es el acceso a la informacin, ya sea que se encuentre en forma de texto, imgenes, sonidos o videos. Esta posibilidad de acceso considera que a personas con diversas lenguas y con capacidades diferentes, por ejemplo alguien con debilidad visual, o cualquier otra situacin que sea considerada una discapacidad.

1. 5. 1 Pautas: mobile best practice working group o pautas para accesibilidad mvil

Mensajes directos que usen lenguaje simple y claro, donde la forma de texto para cada elemento no textual facilite el entendimiento. Adems, proporcionar ttulos cortos y descriptivos.

En lo relacionado a navegacin, deber ser consistente, los destinos de cada enlace deben ser claros y bien definidos, reduciendo al mximo la cantidad de enlaces externo. El scroll deber de ser mnimo, comprendiendo que la navegacin bsica se encuentre en la parte superior, procurando que sea el scroll en una sola direccin.

El color es importante, por ello busca que la combinacin de los colores de fondo y el primer plano tengan suficiente contraste, as como que se permita temas con un alto contraste. Asegurndote que la informacin transmitida a travs de color este disponible sin este, as mismo, el color no debe ser el nico modo de transmitir informacin, incluye otras indicaciones visuales.

El diseo debe adaptarse al dispositivo. El tamao global debe adecuarse a las limitaciones de la memoria del mismo. Usar demasiados scripts consumir mucha energa del aparato.

Recordando que la confiabilidad es una base en los sitios, informa acerca del acceso y uso de su informacin personal, sus datos debern estar protegidos del spam. Y sirve solo los contenidos que haya solicitado.

1.6 Motores de bsqueda

Un sistema informtico encargado de buscar archivos almacenados en los servidores web, la bsqueda la hacen por medio de las spiders o web crawler y a travs de las palabras clave. El resultado son las pginas de resultados del buscador, que contiene un listado de direcciones web en dnde se mencionan temas relacionados con las palabras clave buscadas por el usuarios.

Hay dos tipos de motores de bsqueda. Las que estn elaboradas manualmente y que nosotros podemos incluir (ver ms en Posicionamiento). Y las que son buscadas por las spiders, palabras clave o keywords (ver en Metadatos)

1. 6. 1 Posicionamiento

El posicionamiento en los buscadores en la actualidad es una de las herramientas ms tiles y cotizadas. La razn es que aparecer en las primeras posiciones en Google es indispensable si quieres que visiten tu sitio web, esto se debe a que Google es uno de los buscadores ms cotizados y ocupado en bsquedas de internet.

Las claves para lograr el tan anhelado posicionamiento, son las siguientes, hay que recordar que muchas de estas estn determinada por el gusto de las spiders a la hora de seleccionar pginas e indexarlas. Slo recuerda jugar limpio, Google sanciona a aquellos que por medio de prcticas poco ticas consiguen posicin.

Contenidos de buena calidad, este punto es importante, porque con l no solo conseguirs aparecer en las primeras posiciones sino ser visitado.

Tecnologa web y sencillez, son dos cualidades por las cuales puede ser elegida tu pgina. As que es necesario tener contenido legible y estar al tanto de las novedades en cuanto servidores y lenguajes. Tambin mantente actualizado en las palabras y trminos necesarios para entender documentacin.

Debes darte de alta en el buscador http://www.google.com/intl/es/addurl.html.

Conseguir enlaces es igual de importante, te ayudar a conseguir una buena posicin.

1.7 Tipos de navegadores web

Un navegador web tambin conocido como browser o explorador, es el software que permite el acceso a las WWW por medio de enlaces, interpretando informacin de distintos tipos: texto y elementos multimedia. Cuando accede a sitios web dinmicos, llega a interactuar con la informacin.

fig.1

Como lo menciona 3WC, un sitio (en este caso un navegador) deber ser multiplataforma y deber adecuarse a todos los sistemas. As que de inicio, Internet explorer no cumple con dicho requisito, lo cual lo debilita dentro del mercado.

Si el usuario no puede acceder y hacer uso de l, buscar otro. Puede ser una situacin frustrante para el usuario, no encuentra lo que estaba buscando y adems en lugar de eso es invadido por un anuncio.

1. 7. 2 Mozilla Firefox

Es un navegador opensource, que fue diseado para varios sistemas operativos: Windows, OS X y GNU/Linux. Se caracteriza por implementar estndares web, as como por los pluggin (complementos y extensions) que se desarrollan para l y que mejoran la experiencia del usuario.

Es compatible con varios lenguajes web: HTML, HTML5, XML, XTML, CSS1, CCS2, CSS3, SVG y JavaScript.

fig.2

El navegador pudo ser instalado, an con sistema operativo OS X, eso le da mayor apertura, facilita la llegada de usuarios.

La rapidez de descarga fue normal, las imgenes se desplegaron por completo.

fig.3

El nico inconveniente es que no se visualizo un video, para poder verlo se requera de un pluggin con el que no e contaba. En mi experiencia personal, esto puede ser bastante frustrante, es un motivo para dejar de usar un navegador y optar por otro.

1. 7. 3 Opera

Es un navegador opensource, que fue diseado para varios sistemas operativos: Windows, OS X y GNU/Linux. Se caracteriza por sus versiones multiplataforma para desktop, dispositivos mviles y tabletas, opera en los siguientes sistemas operativos mviles: iOS, Android, Windows Phone, BlackBerry, Windows Mobile, Maemo y Symbian.

fig.4

La rapidez de descarga fue menor que con Firefox, desplego todas las imgenes.

fig.5

Al igual que con Firefox, me fue imposible visualizar el video, haba la necesidad de actualizar flash.

1. 7. 4 Chrome

Actualmente es el navegador opensource ms popular. Tambin es considerado uno de los ms seguro y con interfaz ms amable.

Diseado para varios sistemas operativos: Windows, OS X, GNU/Linux, Debian y Fedora. Adems de haber sido diseado para sistemas operativos mviles Android e iOS.

Hace uso de las pestaas. Tiene varias prestaciones como: navegar de incognito, traductor y corrector ortogrfico.

fig.6

La velocidad de descarga fue rpida, las imgenes se descargaron por completo.

fig.7

A diferencia de con su competencia, el video pudo visualizarse sin el requerimiento de un pluggin o de actualizar flash.

1. 7. 4 SafariComo Windows tiene Internet Explorer, Apple tiene Safari, a pesar de que en un determinado momento hubo una versin de Safari para Windows en la actualidad ha sido dejada de lado. Esto sin duda, al igual que con Windows es un problema para los usuarios, ya que aquellos que no cuenten con una computadora de sistema OS X o un dispositivos mvil con sistema operativos iOS no podrn acceder a este navegador.

Es un navegador actualizado, que permite desplegar gran parte del lenguaje web. Pero sin duda, la falta de accesibilidad para todos se convierte en una traba para su crecimiento.

fig.8

La descarga fue rpida, ms aun que con Chrome, se desplegaron correctamente las imgenes.

fig.9

De la misma manera que con Firefox y Opera, fue imposible visualizar el video.

1. 7. 4 NetscapeEs considerado un navegador descontinuado, de hecho, la compaa que lo cre, AOL, considero que llego a su fin desde el 2003. A pesar de los intentos por hacer una nueva versin reloaded, no se ha visto nada nuevo an.

De cualquier manera, es importante considerarlo, ya que hay algunos usuarios que an hacen uso del l.

Tiene los inconvenientes de un producto que no ha sido actualizado y que depende en gran medida de otros navegadores.

fig.10

La descarga del navegador fue imposible, se hizo la bsqueda a travs de su pgina de inicio. Esto es un problema, ya que el usuario al no encontrar la informacin que requiere abandonar el sitio. As mismo el buscador esta enlazado a Google Chrome como se puede uno percatar.

fig.11

Debido a este enlace con Chrome, fue posible visualizar la pgina y desplegar el video.

Conclusiones de la prueba.

Como usuario es importante siempre contar con todos los complementos y extensiones necesarios.Como diseador es necesario considerar a los diversos navegadores, as como los sistemas y las plataformas

2. Interface: what you see is what you get

2.1 WYSIWYG

Siglas de What You See Is What You Get, tipo de software que permite ver el resultado final de la pgina Web a medida que vamos insertando elementos en la vista diseo y se va generando el cdigo de forma automtica.[footnoteRef:10] [10: RUBIALES, Op. Cit, p 364]

Lo que ves es lo que t obtienes, es la promesa tras esta frase. La manera de trabajar de estos editores es muy similar a la que se utiliza cuando se trabaja en un procesador de textos.

2. 1. 1 Dreamworks CS6

Es una aplicacin que esta destinada a la construccin, diseo y edicin de sitios, vdeos y aplicaciones web. Es uno de los programas ms utilizados en el sector del diseo y de la programacin web por sus funcionalidades, tambin porque recientemente sus soporte entra en los estndares de la 3WC.

Ofrece una gran flexibilidad, as como facilidad de uso, a pesar de que en sus inicios era considerada una simple WYSIWYG, ahora soporta tecnologas web como CSS, Javascript, entre otras. Entre sus prestaciones esta la de previsualizar lo que se esta trabajando, adems de permitirte trabajar con puro cdigo, cdigo y diseo, o solo diseo.

2. 1. 2 Brackets editor

Es un editor de cdigo orientado a los desarrolladores web, es multiplataforma as que lo podemos usar en cualquier sistema operativo. Comparte muchas caractersticas con el resto de los editores ms avanzados, por ejemplo: complementos, extensiones o plugins, autocompletado de texto y resaltado de llaves y parntesis.

Cuenta con una vista previa en vivo, as que se podr ver lo que se esta programando mientras se esta programando.

El motor de edicin de texto se basa enCodemirror(editor de cdigo fuente para integrar en pginas web). As pues, cuenta con las mismas caractersticas como editor que Codemirror y al utilizar tecnologajavascriptpara su funcionamiento resulta fcil personalizar y extender funciones mediante complementos, esto es un punto a su favor. Por contra, de momento se ejecuta ligeramente ms lento que otros editores.[footnoteRef:11] [11: http://geekdrops.com/es/content/programando-la-web-editor-adobe-brackets Consultda el 22 de marzo 19:42]

2. 1. 3 NetBeans

sta plataforma, opensource o software libre, que permite que las aplicaciones se desarrollen a partir de mdulos, lo cul facilita que las aplicaciones puedan ser extendidas fcilmente por otros desarrolladores de software. As mismo es un programa multiplataforma que es aceptado en los estndares de la 3WC.

Ofrece servicios, que permiten que los desarrolladores se centren en la lgica de sus aplicaciones, los servicios son los siguientes.

Gestin de interfaz de usuario, gestin de configuracin de usuario, gestin de almacenamiento y de ventanas. Tambin tiene herramientas de desarrollo integrado.

2. 1. 4 Sublime text

Es un editor de cdigo fuente, que se distribuye de manera gratuita aunque no es un opensource. Soporta varios lenguajes web como HTML, CSS (1,2 y 3), XTML, entre otros

Permite las previsualizaciones de la estructura del cdigo, cuenta con diferentes plantillas que podemos editar. Cuenta con autocompletado y marcado de llaves.

2. 1. 5 Eclipse

Es un programa WYSIWYG que facilita enormemente el trabajo de escribir cdigo. Al ser obtienes lo que ves, permite la generacin de ventanas complejas sin la necesidad de escribir uno mismo el cdigo. De acuerdo a lo que garantizan lo creadores del programa, el cdigo generado por Eclipse no requiere bibliotecas personalizadas adicionales para compilar y ejecutar.

Es compatible con la edicin de cdigos de forma libre, cambios en cualquier lugar y no solo en zonas elegidas.

2. 1. 6 Adobe muse

Es un WYSIWYG, que se enfoca en trasladar un interfaz grfica a cdigo HTML y CSS, toma las decisiones de cmo ajustar la propuesta a cdigo. Entre los pros de este programa estn que permite agregar diseo sin la necesidad de poner cdigo, de hecho fue pensado para diseadores que no deseaban tener contacto alguno con cdigo. Los contras es que al no vigilarse el cdigo, este puede estar sucio, lleno de divs vacos o id que no tienen una funcin clara.

De todos los anteriores es el ms apegado al what you see is what you get sin la necesidad de saber nada de cdigo.

2. 1. 7 Notepad ++

Programa editor de texto, opensource que soporta varios lenguajes web. Parecido al bloc de notas y al igual que este es nativo de Windows, con la diferencia que tiene opciones ms avanzadas para desarrolladores y programadores.

Resalta parntesis, as como corchetes y llaves, y genera indentacin.

2.2 Arquitectura de la informacin

Una interfaz no solo depende de los elementos visibles, por ejemplo del diseo, sino de los elementos invisibles al ojo, como, la estructura y la organizacin.

Se define a la arquitectura de la informacin como la ciencia de organizar espacios informticos con el fin optimizar y satisfacer las necesidades del usuario.

Una aplicacin web puede crearse siguiendo dos modelos. El primero, mediante el uso de tecnologas incrustadas, que son unas marcas determinadas que permiten ejecutar la aplicacin externa en el agente usuario, hacen uso de este recurso tecnologas como Flash y Microsoft Silverlight. El segundo modelo es mediante tecnologas estandarizadas como XTML, HTML5, HTML, CSS1, CSS2, CSS3 o JavaScript.

Es importante saber que el primer modelo va de salida del mercado, no es compatible con todos los sistemas operativos en especial con los sistemas operativos mviles. Por tanto, es lo ptimo implementar una aplicacin web mediante estndares, para ello se pueden distinguir 3 fases dentro del proceso.

Estructura y contenido, HTML5 es generalmente la tecnologa utilizada en esta fase, es el primer rubro, es donde se definirn los diferentes bloques que componen al sitio; cabecera, contenido, pie, navegacin, etctera, as como, el contenido que se presenta.

La segunda fase es la presentacin, como tecnologa a ocupar se encuentra el CSS. Donde se disea la apariencia visual y la distribucin de layouts y contenidos.

Por ltimo, la fase de comportamiento, aqu se programa a travs de JavaScript cmo debe reaccionar la pgina ante las acciones del usuario. Se interacta con el DOM, que significa document objetc model, es decir, documento modelo del user agent, este DOM le da al agente usuario los detalles de la interaccin, adems, de un acceso directo a todos los contenidos que se presentan en la pgina.

Una manera de ordenar las fases del proceso para el desarrollo de una aplicacin, es la siguiente.

Se planifica el proyecto, se considera el target o usuario meta, el servicio que se ofrece, la informacin con la que se cuenta y el objetivo al que se espera llegar, la accin que debe ejecutar el usuario.

El diseo, las tres fase que se mencionaron: estructura-contenido, presentacin y comportamiento.

Crear un prototipo de la aplicacin web y evaluarlo. De ser correcto, implementarlo y lanzarlo al mercado.

Durante el tiempo hacer un seguimiento de la aplicacin, as como darle mantenimiento. Hacer encuestas que arrojen la opinin del usuario, el impacto y las mtricas para llegar a una conclusin acerca del funcionamiento de la aplicacin.

2. 2. 1 Estructura lgica

Define la navegacin del usuario, esto es, como se va a mover de una zona a otra dentro de la aplicacin web. Esta se debe planear cuidadosamente y antes de empezar a desarrollar el sitio web, con el fin de asegurar la accesibilidad y la buena navegacin

Una navegacin puede dar la impresin de libertad (navegacin controlada) o de mucha libertada (navegacin libre).

Para definir que navegacin deberemos tener, habr que respondernos las siguientes preguntas.

Cul es el propsito del sitio web?Qu contendr?Cul es su audiencia?Qu esperamos obtener?Qu esperamos los visitantes obtengan?

Las estructuras lgicas se dividen en: secuencial, en rejilla, de rbol, de red y mixta.

fig.16En la estructura secuencial el movimiento de los usuarios siempre es igual.

fig.17En la estructura en rejilla se confunden los usuarios, esto puede ser razn suficiente para abandonar la aplicacin.

fig.18En la estructura de rbol es la ideal, se maneja por la regla de los tres clicks, esta regla dice que todo usuario deber poder acceder a todo el contenido del sitio con tan solo tres clicks de la pgina de inicio.

fig.19En la estructura de red, permite que haya varios index dependiendo del usuario, por ejemplo cuando hay varios idiomas, o hay contenido para los usuarios registrados diferente de aquellos que no estn registrados

fig.20En la estructura mixta, se combinan las cualidades, son usadas para sistemas complejos. Su funcionalidad es ms clara.

2. 2. 2 Estructura fsica

Es la forma en la que se almacena los distintos recursos, o ficheros, que forman una aplicacin web en el sistema de archivos del servidor web. una estructura fsica eficiente reduce los costos de mantenimiento, el tiempo para localizar un recurso se minimizar. De la misma forma que con la estructura lgica, la estructura fsica debe ser planeada antes de la construccin de la aplicacin web. Deber ser organizada de manera legible, para que si en determinado momento una persona, ajena a la construccin, debe actualizarla, el proceso sea rpido.

Todos los ficheros se almacenan en un nico directorio, o carpeta, tambin pueden estar almacenados segn el tipo de fichero en distintos directorios. Sin abusar de los directorios, ya que cada vez que se aumenta uno la URL crece.

Existen diversas alternativas de organizacin, algunos a continuacin se enlistan.

Por el tipo de fichero, por ejemplo: ficheros de grficos, ficheros de videos, ficheros HTML, ficheros CSS, etc.

Por el contenido, esto funciona para una empresa que maneja varias lneas de productos, cada lnea puede tener un directorio.

Por nivel de acceso que tengan los usuarios, por ejemplo: los que estn registrados de los que no, las partes pblicas y las privadas de la aplicacin.

Por fecha, como es el caso de las estructuras peridicas (revistas, peridicos, fanzines).

Por propietario, en caso de empresas donde se divide por departamento o rea.

Por la estructura lgica, se copia la estructura lgica y se aplica a la fsica.

2.3 Nombres de directorios y ficheros

Este sin duda es un punto a cuidar debido a su relevancia no solo para el desarrollador sino para los usuarios que llegasen a visitar el sitio. Se debern elegir nombres intuitivos que expresen el contenido o su funcin. Esto facilitar la labor.

Adems se debe tener cuidado con no colocar caracteres especiales. El uso del punto es exclusivo para la extensin del fichero.

2.4 Guas de estilo web

El objetivo es obtener una estructura lgica correcta, para ello haremos caso de los siguientes puntos que a continuacin se enlistan.

Primero que nada se debe hacer caso de la regla de los tres clicks, que como ya se ha mencionado con anterioridad es aquella que rige la cantidad de pulsaciones que un usuario debe hacer para poder acceder a todo el contenido de una pgina.

Y hablando de enlaces, es importante cuidar que no sean callejones sin salida, que no nos permitan ni regresar ni avanzar. Por eso se sugiere el uso de una barra de navegacin o men del sitio con las categoras principales, entre ellas ha de estar el enlace a la pgina principal y la pgina anterior. Recordemos entonces, que la funcin de la seccin principal es guiar a travs del contenido al usuario.

No olvidando que la estructura no puede ser demasiado profunda ya que puede perder al usuario. Y contemplando una identidad de colores que haga saber al usuario cuando ha abandonado la pgina.

2.5 Usuario, cliente y servidor

La arquitectura cliente servidor facilita la separacin de las funciones de acuerdo a su servicio, permitiendo situar cada funcin en la plataforma ms adecuada para su ejecucin.

El usuario interacta con un programa conocido como el cliente (programado en HTML), para solicitar a un servidor web el envo de los recursos que desea obtener.

La misin del cliente web es interpretar las pginas HTML as como los diferentes recursos que contenga (textos y elementos multimedia. La parte cliente de las aplicaciones web suele estar integrada por lenguaje de etiquetado HTML, as como por otros lenguajes web como CSS y DHTML, por cdigos ejecutables realizados en lenguaje script como Javascript y ActiveX, adems, de estar conformado por pequeo programas o applets realizados en Java.

El servidores espera las solicitudes de conexin mediante protocolo HTTP, por parte de los clientes web.

Un servidor esta conformado por entidades estticas (HTML), se les llama estticas porque siempre muestran el mismo contenido, y recursos adicionales como (multimedia, documentos, etctera).

Durante la transferencia el usuario especifica en el cliente la direccin de la aplicacin, el cliente establece una conexin con el servidor. Despus, el cliente solicita la pgina o el objeto deseado, por tanto, el servidor enva dicho objeto o sino lo contiene un cdigo de error. El cliente interpreta los cdigos. Se cierra la conexin entre el cliente y el servidor. Finalmente se muestra la aplicacin al usuario. Y se libera la conexin, esta solo dura mientras se transmite la informacin y se vuelve a activar cuando el usuario le pide al cliente ms.

3. Manejo de textos, links y propiedades

3. 1 HTML5: estructura de lenguaje de etiquetado

Nota para comenzar:HTML5 es un sistema para incluir informacin acerca del contenido de un documento, no define como el contenido aparecer en el browser, ese es el rol del CSS, de sus siglas cascading style sheets sea hoja de estilo en cascada. En pocas palabras se enfoca a la semntica y deja el estilo visual al CSS.

La importancia de esta semntica recae en que permite ser accedida por diversos sistemas operativos, incluidos los mviles, mejora la bsqueda de los web crawlers mediante SEO, como se menciono anteriormente en el posicionamiento, y facilita el mantenimiento.

La estructura de un documento HTML5 esta compuesta por dos partes: cabecera y cuerpo.

Un documento HTML5 esta constituido en base a etiquetas o elementos. Es importante agregar que no deben contener espacios en blanco, ni caracteres especiales.

Fig.12 Esquema bsico de un elemento HTML5 y las partes que lo componen.

Por otra parte, hay diferentes etiquetas, las que necesitan otra etiqueta de cierra y las que se cierran en si mismas. Las que se cierran en si mismas llevan un slash antes de este smbolo >.

Las etiquetas ms comunes son las siguientes.

: Esta etiqueta engloba el inicio y el fin de un documento HTML. Salvo algunas excepciones, cualquier etiqueta del documento debe estar definida dentro de esta etiqueta.

: Etiqueta que engloba el cuerpo del documento, los contenidos e informacin que vayamos a mostrar deben de estar codificados dentro de esta etiqueta.

Es la etiqueta que define el inicio y el fin de la cabecera del comuento HTML. Esta etiqueta define el nombre o titulo de nuestra pgina.

3. 2 Integracin de metadatosLos metadatos en el contexto de laWeb, son datos que se pueden guardar, intercambiar y procesar [] estn estructurados de tal forma que permiten ayudar a la identificacin,descripcinclasificacinylocalizacindel contenido de un documento [] web [] es un trmino que se utiliza para describir datos que ofrecen el tipo y la clase de la informacin [] emplean, fundamentalmente,reglas de catalogaciny formatos para transmitir la informacin[footnoteRef:12] [12: LAMARCA, Mara Jess, Hipertexto: El nuevo concepto de documento en la cultura de la imagen, Tesis doctoral. Universidad Complutense de Madrid, Espaa, 2013, 184 pp.]

Los metadatos se encuentran inmersos en el cuerpo del de un documento de HTML5, justo dentro de la cabeza del archivo , ofrecen informacin adicional que no ser visible en el diseo pero que lo ser para otro programado y paras las spiders o web crawlers. Esta informacin puede tratarse del copyright, del autor, la fecha, el idioma, con que se gener el archivo y de las keywords.Qu es una keyword? Textualmente es una palabra clave. Las palabras clave son halladas por los motores de busqueda de los navegadores para indexar a las pginas en las listas. Son la manera por la cual los usuarios potenciales pueden acceder a nuestra pgina. Proporcionan trfico a nuestra pgina y eso nos permite estar en las listas, de esa forma tendremos ms visitas.As conseguir posicionamiento SEO o SEM, para generar un ROI.SEO, de sus siglas en ingls search engine optimization, es un servicio que permite posicionarnos gracias a las palabras clave reservadas y relacionadas con el tema y servicios del sitio.SEM, de sus siglas en ingls search engine marketing, es una forma de marketing, busca promover los servicios web mediante un pago, en otras palabras, pagas por aparecer en el top de la lista.ROI, significa return on investment, el retorno sobre la inversin. Es comparar la utilidad obtenida en relacin con la inversin realizada.

Margen Rojo

Digamos que este es mi documento, mis palabras clave seran: museografa, museografa en Mxico, exposiciones en Mxico, animacin, diseo industrial, paperghost, investigacin, arte, ciencias. Ahora, si alguien en su buscador Chrome escribiera las siguientes palabras: museografa en Mxico, aparecera en las listas del buscador el nombre de mi pgina.Justo esa es la funcin de las keywords con los buscadores y el posicionamiento. Mi pgina esta posicionada en el tercer lugar.3. 3 Cdigo ASCII

La codificacin de caracteres es el mtodo que posibilita la conversin de un carcter o letra de nuestro alfabeto en un cdigo entendible por un sistema informtico. Por ejemplo el sistema ASCII y el sistema UNICODE, siendo este ltimo en su formato UTF-8 el sistema de codificacin ms extendido y recomendado.

ASCII, es el acrnimo ingles de American Standard Code for Information Interchange, sea, Cdigo Estndar Estadounidense para el Intercambio de Informacin. Se utiliza para representar caracteres que no se encuentran en la lengua inglesa.

3. 4 Ttulos h1-h6 (hgroup)

Etiquetas utilizadas para generar ttulos o bien encabezados de ciertas partes de nuestra pgina web que necesitan ser resaltados de alguna forma. Hay seis niveles de encabezado, siendo el ms importante y el de menor importancia. Este elemento nicamente soporta el atributo align que determina la alineacin del encabezado, sus posibles valores son left, cente, right y justify, que representan izquierda, centro, derecha y justificado, respectivamente.

Las etiquetas hasta las tambin son buscadas por spiders y utilizadas para indexar pginas a sus motores de bsqueda.

3. 5 Textos y propiedades de texto

Actualmente, los bloques de texto constituyen la mayor parte de la informacin de una aplicacin web.

La etiqueta para presentar textos o prrafos en un documento HTML es la etiqueta . Todo prrafo que se encuentre definido dentro de esta etiqueta ser tratado como un bloque de texto que ocupar el ancho de la pgina. Esta etiqueta dispone del atributo align para alinear texto as como los sytles, aunque veremos ms adelante los atributos se le pueden otorgar desde un CSS.

El texto encerrado en siempre se mostrar tal y como es sin espacios, sin interlineado especial, la forma adecuada un cambio de lnea es con la etiqueta
en lugar deseado dentro del cdigo.

La etiqueta
es la que inserta un salto de lnea dentro de un prrafo. Es una etiqueta vaca que se cierra en s misma.

Para enfatizar ciertas palabras o frases, podemos usar etiquetas de marcado tales como Save For Web & Devices.Aparecer la ventana de dialogo.

2. Elige ver en 2 tablas para ver una optimizada, o en 4 tablas para ver 3 optimizadas.

3. Elige las versin optimizada.

4. Elige el formato a desear.

Debemos recodar que las imgenes deben estar en modo RGB y no en CMYK, que es el cdigo de color para impresos. A menos que la imagen optimizada la guardes con el mismo nombre de la original no se perder tu primer imagen.

Solo las capas visibles sern salvadas en la versin optimizada.

Para salvar en Ilustrator, SVG para web.

1. Realizamos nuestra imagen en Ilustrator, puede ser un logo o algn grfico.

2. Save as > SVG.Aparecer la ventana de dialogo.

3. Podemos previsualizarla, dando un click en el cono de mundo, para cerciorarnos que la imagen este bien.

4. Le damos OK y tenemos nuestro SVG.

Al igual que en el caso de Photoshop, las imgenes deben estar en modo RGB o hechas con una paleta segura, para no tener ningn problema a la hora de desplegarlas en pantallas.

5. 3 Integracin de las imgenes al archivo

Puedes integrar cualquiera de las anteriores en tu archivo HTML. Para ello sigue los siguientes pasos.

1. Coloca tu cursor en el archivo HTML, en la parte donde deseas que aparezca.

2. Escribe donde imag.url indica el nombre y la localizacin de la imagen.

3. Puedes agregar atributos a la imagen a partir de styles, como por ejemplo quitar o poner bordes, entre otros.

En caso de que por alguna razn tu imagen no pueda ser desplegada, puedes ofrecer un texto alternativo que la describir. Eso se realiza de la siguiente manera.

En la etiqueta que describimos anteriormente img, despus de el src escribe alt= y teclea el texto que deber aparecer en caso de que la imagen no lo haga.

Este atributo es necesario que aparezca en todos los elementos de HTML5. As los usuarios se pueden dar una idea de lo que trata la imagen. Si la imagen no es relevante para los usuarios que no ven la W3C sugiere que el contenido de alt= se encuentre el blanco.

El tamao de la imagen lo podemos obtener de tres formas, la primera y menos ptima es acomodndolo desde el archivo de origen en photoshop. La segunda es indicarle a HTML5 de que tamao lo deseas. La tercera y ltima, es combinar ambas.Para especificar el tamao de la imagen a HTML, deberemos determinar que tamao queremos. Despus en la etiqueta img y despus del atributo src, escribimos width=x height=x usamos los valores que ya tenamos definidos y agregamos que sean en pixeles. Estos atributos no necesariamente presentan o reflejan el tamao actual de la imagen.

6. Navegacin

6. 1 Seccin urea

La seccin urea es una proporcin entre medidas, establece la relacin de tamaos con la misma proporcionalidad entre todo lo dividido (divisin armnica) en segmento mayor y segmento menor.[footnoteRef:16] [16: http://www.fotonostra.com/grafico/reglaaurea.htm Consultada 28 marzo 6:30 am]

Si aplicamos la seccin urea para la distribucin de los elementos de nuestra pgina, podemos conseguir mayor armona y hacerla ms atractiva. Podemos obtener una cuadrcula con las divisiones que se quieren siguiendo la seccin urea

Los usuarios perciben las aplicaciones web de acuerdo al rectngulo ureo, que es leerlas de arriba a la izquierda en diagonal, hacia abajo a la derecha.

6. 2 CMS: plantillas digitales

Content Managment System, es el sistema de gestin de contenidos. Son aplicaciones que permiten publicar, editar, modificar, organizar o borrar el contenido de un sitio web (como un blog, sitio web de noticias, sitio web de compras, etc.), as como ser el manager del sitio de manera automatizada. Todo esto sin la necesidad de codificacin manual.

A continuacin algunos sistemas de gestin de contenidos que tambin ofrecen plantillas digitales.

Joomla

Es un sistema de gestin que permite desarrollar sitios web dinmicos e interactivos. Es un software de cdigo abierto. Desarrollado en PHP.

Como todo CMS, permite modificar el contenido sin la necesidad de manejar cdigo de etiquetas, todo se maneja a travs de un panel de administracin. La administracin de contenido es por medio de un localhost, intranet o internet, adems requiere de una base de datos. Ofrecer una gran cantidad de plantillas. Sin embargo, es poco flexible y muy lento.

Wordpress

Es un CMS que se ha enfocado sobretodo a la creacin de blogs, ya que permite una actualizacin continua, sencilla y sin necesidad de un con. Al igual que Joomla, fue desarrollado en PHP.

Es un software libre, esto quiere decir que respeta la voluntad del usuario de ejecutar, modificar, copiar y distribuir el cdigo de la aplicacin de forma libre y sin nimo de lucro. Su panel de control es bastante intuitivo y funciona a base de pestaas. Esto ha sido un determinante para ser considerado uno de los sistemas de gestin de contenidos ms popular. Tiene en su contra las dificultades de ser subido al servidor.

Drupal

Es un CMS modular flexible y configurable, se caracteriza por su dinamismo, este ltimo consiste en que en lugar de que sus contenidos permanezcan estticos en ficheros de forma fija son almacenados en una base de datos y se editan en un entorno web, entorno web es una forma de interfaz de usuario grfico[footnoteRef:17]. [17: http://www.alegsa.com.ar/Dic/entorno%20web.php Consultado 21 marzo/2015 17:47]

Es un software libre, sta escrito en PHP. Destaca por la calidad de pginas generadas que se apegan al 3WC. Es por ello que llega ser considerado de difcil manejo, ya que a diferencia de los anteriores si requiere un conocimiento previo.

Magneto

Magneto es un sistema de gestin opensource o software libre, es flexible y ofrece muchas prestaciones en cuanto a la funcionalidad gracias a su panel de control. Debido a que fue adquirida por Ebay, tiene como fuerte las tiendas en lnea.

OpenCMS

Sistema de gestin de contenido opensource que a diferencia de su competencia fue basado en Java y XML. Se le considera WYSIWYG (what you see is what you get o lo que ves es lo que obtienes) ya que mientras se disea se va generando un cdigo, hablaremos de los WYSIWYG ms adelante.

Lo atractivo de este sistema es que permite sitios web tanto estticos como dinmicos, tambin tiene la posibilidad de multi-idiomas.

Moodle

Este sistema funciona como un ambiente educativo virtual ya que permite a educadores crear comunidades de aprendizaje, adems de la gestin de cursos virtuales para los alumnos. Se le conoce a este sistema como LCMS, de sus siglas en ingls learning content management system que significan sistema de gestin de contenido de aprendizaje.

Wix

Es un CMS que funciona de manera distinta al resto, tiene los componentes y aplicaciones de un CMS comn pero al estar enfocado hacia el diseo cuida ms del WYSIWYG.

Tiene la posibilidad de agregar archivos flash, pero no hay que olvidar que estos archivos no son desplegados por dispositivos mviles.

Jimdo

Un sistema de gestin de contenido gratuito, opensource, que no requiere conocimientos previos en HTML y que se caracteriza por su velocidad y facilidad de uso. Hace uso de modlos, permite aadirlos, moverlos y eliminarlos. Se enfoca en WYSIWYG, tambin cuenta con plantillas propias.

6. 3 Uso y propiedades de tablas

Las tablas con la mejor manera de representar datos tabulados, entendiendo por datos tabulados aquellos que deben de llevar una estructura clara y rgida. Hace aos las tablas se usaban para construir o maquetar la estructura delas pginas web. Toda la pgina era una gran tabla, compuesta a su vez por multitud de filas y columnas, donde se iban representando los diferentes elementos que construan el sitio.

Las etiquetas HTML que intervienen en la construccin de una tabla son las siguientes.

: Es la etiqueta que define la estructura principal de una tabla, engloba a cada una de las filas y columnas. Sus principales atributos son; border, cellpadding, cellspacing y width.

Border: Se trata de un nmero entero que define el grosor del borde de la pgina, mientras ms grande sea el nmero mayor ser el grosor.

Cellpadding: Define en pixeles la separacin interna entre cada celda.

Cellspacing: Define en pixeles el espacio entre celdas.

Widt: Especifica en porcentaje o en pxeles el ancho de la tabla.

: Etiqueta definida dentro de y que representa una fila de la tabla.

: Es una etiqueta que se declara dentro de y representa las columnas de la fila que lo contiene. Los tributos ms importantes de esta etiqueta son: colspan y rowspan.

Colspan: Nmero entero que determina el nmero de columnas que ocupan nuestra celda.

Rowspan: Nmero entero que representa el nmero de filas que ocupan nuestra celda.

Cada fila viene representada por que a su vez, engloba a las tres columnas . Todo el conjunto queda encerrado por la etiqueta principal .

Existen un par de etiquetas que facilitan el trabajo a la hora de representar la informacin son: y .

Sustituye la etiqueta en el momento de representar las cabeceras de una fila o de una columna. Las celdas creadas con esta etiqueta mostrarn el texto centrado y en negrita.

El contenido de esta etiqueta representa el titulo o encabezado de la tabla, debe insertarse despus de la etiqueta de apertura .

En muchas ocasiones necesitaremos combinar celdas, ya sean filas o bien, columnas. Para conseguir esta combinacin de celdas habr que crearse una nica columna y hacer que sta ocupe tres celdas. Esta accin la podemos completar directamente desde el Dreamweaber Cs6 desde su pestaa Diseo o Design, donde haciendo uso del WYSIWYG, podemos unir columnas y filas mientras el programa nos genera el cdigo necesario.

6. 4 Anlisis de sitios web

Una forma de analizar una pgina web desde el usuario es por medio del eye tracking. Este anlisis permite conocer hacia dnde dirigen su mirada los usuarios mientras realizan la actividad objeto de estudio. Se utiliza para investigar en distintos mbitos, como, psicologa, percepcin visual, lingstica, diseo de productos o servicios web.

Para llevar a acabo este anlisis se hace uso de trackers (seguidores de ojos) para deducir la posicin del ojo

En su aplicacin para sitios web, se utiliza, sobretodo, para investigar patrones de lectura, as como averiguar en qu zonas u objetos se fijan de una web, durante cunto tiempo y qu se retiene en su memoria. El objetivo mercadolgico de estas pruebas es aumentar la capacidad de influir en los usuarios e incrementar los beneficios econmicos.

7. Bases de CSS3

7. 1 Documento CSS3

De su acrnimo en ingls Cascading Style Sheets, es un mecanismo que describe cmo se va a mostrar un documento en la pantalla, sirve para dar estilo a documentos HTML y XML.

Las hojas de estilo son un conjunto de instrucciones, que se asocian a los servicios de textos y se ocupan para definir el formato de las diferentes etiquetas que forman una pgina web. Sirven para definir la forma en que se presentarn las pginas en la pantalla.

Las hojas de estilo facilitan muchsimo el trabajo y otorgan un rango mayor de posibilidades para mejorar la apariencia de las aplicaciones web. En pocas palabras, los atributos ya no se definen uno por uno en las etiquetas del documento HTML sino que se anexa un documento CSS3 que contiene las hojas de estilo.

7. 2 Propiedades CSS3

Los datos de estilo se componen de dos cosas: selector y declaracin. Los selectores son etiquetas que se usan en HTML que se encierran entre < >. Las declaraciones de los selectores estn conformadas por propiedad y valor.

Las propiedades son, por ejemplo: font-size, text-align, Font-family. Los valores son, por ejemplo: 11px, center, arial.

A diferencia de las etiquetas que se usan en HTML, en CSS3 se usan {} en lugar de . Cada selector puede contener varias declaraciones, cada declaracin se separa ; (punto y coma).

7. 2 CSS internos

Las hojas de estilos internas se deben definir entre las etiquetas , las cuales van antes de la etiqueta de cierre y antes de la etiqueta de .

Dentro de la etiqueta es necesario introducir el atributo type=text/css.

El problema de las hojas de estilo internas es que si se quiere que varias pginas tengan el mismo formato, se tendrn que definir los datos de estilo pgina por pgina.

7. 3 CSS externos

Las hojas de estilo externas (.css) son documentos de estilos, que se le pueden aplicar a varias pginas. Para poder vincular la hoja de estilo externa con el documento HTML, se utiliza la etiqueta la cual se utiliza para definir la relacin entre un documento y un recurso externo. Esta debe ir ubicada dentro de la etiqueta .

Este mtodo nos permite cambiar los estilos por completo, tambin nos permite modificar o adaptar nuestro documento.

Una hoja de estilo importada dentro de un CSS externo es muy sencilla de elaborar, actualmente se ocupan con interfaz de desarrollo ms avanzada, pero el funcionamiento sirve en algunos casos para enmascarar CSS y dar un poco ms de seguridad al cdigo.@import url (ubicacin_archivo.css);

7. 4 Herramientas para CSS: web developers toolbox

Es un browser, a amanera de toolbar o barra de herramientas que provee ayuda para la tarea de continuar probando un producto, sitio, pgina o aplicacin web. Ayuda en la retroalimentacin, feedback, acerca de lo que se construy. Tambin permite analizar otras pginas para ver la manera en la que fueron construidas, esto tambin como parte del feedback.

Tiene herramientas que permiten conocer la estructura de la pgina, desde las medidas, dnde fueron colocados los links, las imgenes, archivos CSS y diversa informacin de la pgina.

7. 5 Divisiones

Las maquetacin por medio te tablas ya no se aplica, ahora en su lugar se hace la maquetacin por medio de divisiones. Las principales divisiones son: cabecera, barra de navegacin, informacin principal, barra lateral y footer o pie.

7. 5. 1 divLa etiqueta , ms usada dentro de la maquetacin web. Su funcionalidad principal es la de agrupar o dividir en secciones los principales elementos que forman parte del documento HTML y as aplicar estilos del CSS.

Desde imgenes, texto, enlaces, cdigo o cualquier elemento puede estar entre las etiquetas de apertura y cierre de un elemento. Por ejemplo, si en un archivo CSS tuvisemos primero como selector a div, significara que todas las declaraciones o estilos definidos en esta regla se aplicaran a todas las etiquetas .

7. 5. 2 header

La etiqueta representa el comienzo del cuerpo y de la parte visible del documento. Provee de informacin introductoria, pueden ser de ttulos, subttulos, es usado para el cuerpo o secciones dentro del cuerpo.

Maneja la seccin de la cabecera. 7. 5. 3 nav

La etiqueta forma parte de otra seccin aparte de la cabecera, se encuentra dentro del pero aparte de . Es un elemento creado para la navegacin y debe ser utilizado de dicha forma. En otras palabras, genera en archivos HTML5 la barra de navegacin.

7. 5. 4 article

La etiqueta se le considera la estructura principal de los sitios web. Se encuentran ubicadas dentro del elemento . Fue creado con la intencin de contener unidades independientes de contenido, por tanto cada una tendr su propia estructura.

7. 5. 5 aside

La etiqueta se utiliza para la barra lateral, la que se encuentra a lado de la informacin principal. La barra lateral puede contener: enlaces, entradas de blog, informacin adicional del autor, etc. Esta etiqueta no tiene una posicin definida, solo describe la informacin que contiene, puede estar en cualquier parte del diseo.

7. 5. 6 section

La etiqueta se utiliza para la informacin principal, esta etiqueta va debajo de la etiqueta de cierre de .

7. 5. 7 footer

La etiqueta representa el pie o barra final de la pgina web, generalmente es usada con informacin del autor u otra informacin que deba ir al pie. Se le conoce como institucional. Puede ser repetida varias veces dentro del cuerpo para representar el final de diferentes secciones. Su lugar establecido es al final, ya sea del cuerpo o como en el caso de las secciones, al final de la seccin.

7. 6 Selector de clases

Las clases sirven para poder identificar a un grupo de elementos. El atributo es class el cual asigna uno o ms nombres de clases a un elemento, en este caso a diferencia de id, varios elementos pueden compartir el mismo nombre de clase. Sirve como selector de hojas de estilo para un conjunto de elementos. Al igual que id, se deben definir dentro de la etiqueta y va en el encabezado .

Para definir una clase la sintaxis es:nombreEtiqueta.nombre{propiedad;valor;}

Para usar dentro de la etiqueta la sintaxis es:

7. 7 Selector de id

Este tipo de selector nos permite aplicar una regla del CSS al elemento HTML que tenga definido el mismo atributo id que el declarado en el selector de la regla.

En un documento HTML no pueden existir dos elementos con el mismo atributo.

Este selector se establece mediante el carcter # (almohadilla) seguido del valor del atributo id, por ejemplo:#titulo{color:green; }Esta regla define un color para el elemento del documento HTML, que tiene como atributo id=titulo

7. 8 Elementos flotantes

La mayora de estructuras de las pginas web complejas estn diseadas con el posicionamiento flotante. Cuando una caja se posiciona con el modelo de posicionamiento flotante, automticamente se convierte en unacaja flotante, lo que significa que se desplaza hasta la zona ms a la izquierda o ms a la derecha de la posicin en la que originalmente se encontraba. La caja deja de pertenecer al flujo normal de la pgina, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante.[footnoteRef:18] [18: http://librosweb.es/libro/css/capitulo_5/posicionamiento_flotante.html Consultado 31 de marzo 2015 11:00 am]

Las cajas flotantes influyen en la disposicin de todas las dems cajas. Los elementos en lneahacen sitioa las cajas flotantes adaptando su anchura al espacio libre dejado por la caja desplazada.

7. 9 Teora de fluidos para dispositivos mviles

Cuando se disean aplicaciones web dinmicas, debemos considerar los dispositivos en los cuales se podrn desplegar dichas aplicaciones. Es en esta consideracin donde entra la teora de fluidos para dispositivos mviles.

La teora de fluidos para dispositivos mviles, contempla la informacin como un lquido, este lquido lo tenemos almacenado dentro de la aplicacin web para el desktop y lo debemos vaciar en las tabletas y los dispositivos mviles (como Iphones, Celulares android, etctera).

La capacidad de una tableta es menor a la de la desktop, y la del dispositivo mvil es menor a la de la tableta y la desktop. Entonces, cuando vaciamos la informacin de la desktop a la tableta entra menos lquido, lo mismo sucede cuando se la vaciamos a los dispositivos mviles, entra una menor cantidad de informacin que en la desktop y la tableta.

Ahora, la informacin que le metamos a las tabletas y los dispositivos mviles debe ser sabiamente elegida, de acuerdo a las necesidades del usuario y el objetivo de la pgina.

7. 10 Nociones bsicas de Layout fluido con HTML5 y CSS3

Con el layout fluido el diseador es capaz de ver con mayor precisin comos e ver como en diferentes resoluciones su aplicacin web. Sin importar la plataforma el diseo se ver en las resoluciones ms pequeas y ms grandes a la perfeccin. Se crear un esquema de fluido con contenido de adaptacin.

El primer paso es la creacin de una maqueta de ancho fijo, ah se pueden visualizar an las proporciones y se le puede aplicar la proporcin urea. El tamao de esta primer maqueta debe estar al 100% en lugar de estar dada la medida en pixelaje. Regularmente se empieza con la desktop y se procede con las dems resoluciones de tabletas y dispositivos mviles, manejando por porcentaje las resoluciones, donde nuestro 100% es la resolucin de la desktop. De este modo los mrgenes tambin se manejan por porcentajes.

El siguiente paso ser crear un conjunto de archivos CCS, y nombrarlos de acuerdo al dispositivo en el que funcionarn (resoluciones pequeas, medianas y grandes), para ello necesitamos de las hojas de estilo, separadas por cada gama de resoluciones de pantalla, y determinar la resolucin de pantalla del usuario.

De esta forma tendremos una aplicacin web responsiva.

En el programa Dreamweaber CS6, podemos encontrar herramientas que nos ahorrarn un par de pasos, pero que igual, nos ayudarn a completar el objetivo.

8. Integracin de elementos

8. 1 Favicon

Qu es un favicon? Es un pequeo icono asociado a una aplicacin web, que se puede ver las barras y pestaas como distintivo.

Para agregar un favicon a tu sitio web. Primero que nada, habra que crear uno de 16 px por 16 px. Salvalo en formato ICO, aunque tambin lo puedes salvar en formato GIF o PNG. En la cabecera de tu HTML5 escribe donde favicon.ico es el nombre y localizacin de tu icono.

Modulo 2.

1. Javascript

1.1 Conceptos bsicos de programacin

1. 1. 1 Qu es programacin?

La Real Academia Espaola dicta que la programacin es elaborar programas para la resolucin de problemas mediante ordenadores.[footnoteRef:19] [19: Consultado el 8 de mayo 09:25 am http://lema.rae.es/drae/?val=programaci%C3%B3n]

Tambin podemos entenderla como el proceso de escribir el cdigo fuente de un software en un lenguaje de programacin, a travs de un sistema de smbolos y reglas (con los que la computadora opera) que permiten la construccin de programas. En un trmino ms amplio se puede incluir no slo escribir, sino analizar, probar, depurar y mantener un cdigo.

Es un proceso mediante el cual se codifican una serie de instrucciones en un lenguaje determinado para ser decodificados (interpretados) y ejecutados por un sistema computacional, todo ello con el fin de resolver un problema o llevar a cabo una funcin especifica.

Estos programas (que han sido, valga la redundancia, programados) sern ejecutados por otro programa o directamente por el hardware de la computadora.

1. 1. 2 Qu es un programa?

Un programa de computadora es un conjunto de instrucciones en forma secuencial, llamado cdigo, que a travs de su interpretacin por el sistema operativo o hardware, permiten realizar una tarea especfica en una computadora.[footnoteRef:20] El programa tiene un formato ejecutable que la computadora puede utilizar directamente para ejecutar las instrucciones. [20: Stair, Ralph M., et al. (2003).Principles of Information Systems, Sixth Edition(en ingls). Thomson Learning, Inc. p.132.]

En pocas palabras, un programa es el conjunto de instrucciones (siempre escritas en un lenguaje de programacin), que deber cumplir un objetivo al ser interpretado por un algn hardware. A todo el conjunto de comandos que conforman al programa, representados por declaraciones, se les denomina cdigo fuente del programa.

1. 1. 3 Qu es un algoritmo?

De manera simplificada, se comprende al algoritmo como una secuencia de pasos que se siguen para llegar a un fin, podemos asociarlo con algo de la vida cotidiana, por ejemplo, una receta de cocina. Al final de cuentas, un algoritmo es una sucesin finita de pasos no ambiguos que se pueden ejecutar en un tiempo finito[footnoteRef:21]. [21: Apuntes realizados por Ricardo Ferrs Departamento de Informtica. Universidad de Valencia p.1]

Deberemos tomar en cuenta el concepto anterior: el programa, y tras haberlo entendido, podremos llegar a comprender el papel de los algoritmos.

Ahora bien, el objetivo de un programa es que se lleve a acabo una accin o tarea cualquiera, para esto se tiene que contar con un algoritmo que es el que indica, con la mayor precisin posible, que deber hacer.

1. 1. 4 Programacin de algoritmos

Esta fase la podemos dividir en tres sub-fases: codificacin del algoritmo en un programa, ejecucin del programa y comprobacin del programa.

En la fase de conversin de un algoritmo en instrucciones de un lenguaje de programacin, denominado codificacin. Se deber usar sintaxis de lenguaje de programacin (ms adelante me enfocar a la sintaxis), ya que solo las instrucciones sintcticamente correctas pueden ser interpretadas por el hardware.

Despus de esta fase, se deber ejecutar lo programado, con la intencin de comprobar el correcto funcionamientos del programa.

1. 1. 5 Desarrollo de algoritmos con pseudocdigo y diagrama de flujo de datos

1. 1. 5. 1 Pseudocdigo

De acuerdo a Anala Lanzillotta, el pseudocdigo es "considerado como un lenguaje falsoes un lenguaje intermedio entre nuestro lenguaje y el de programacin, debido a que quien lo utiliza se gua por una serie de normas pero sin llegar a usar una estructura tan rgida como la del lenguaje de programacin.

Es un lenguaje de especificacin de algoritmo, no lo confundamos con uno de programacin, basado en un sistema notacional, con estructuras sintcticas similares a lenguajes de programacin pero sin poder ser ejecutado directamente en un hardware.

Se utiliza para representar las sucesivas acciones, palabras reservadas similares a sus homnimas en los lenguajes de programacin, por ejemplo: start, end, stop, if-then-else, while-do, repeat-until, etc.

Las ventajas de este tipo de lenguaje residen en que: facilitan el diseo de la lgica y estructuras de control sin una preocupacin acerca de reglas sintcticas y semnticas, adems, de que los algoritmos expresados en pseudocdigo puede ser traducido ms fcilmente.

1. 1. 5. 3 Diagramas de flujo

Conocidos como diagramas de flujo u organigramas son herramientas grficas utilizadas para representar algoritmos, como en la ayuda en el diseo de programas.

Generalmente estn compuestas por una serie de smbolos, unidos con flechas, donde cada smbolo representa una accin distinta y las flechas el orden de realizacin de las acciones, cada smbolo tendr una flecha que lo apunta y otra que apunte, esto con la excepcin del principio y del fin del algoritmo.

1. 1. 6 Fases del proceso unificado de desarrollo de software (RUP)

En este rubro podemos llegar a entender el modelo que trata de explicar el proceso de desarrollo de programacin. Se constituye como un marco metodolgico requerido en cada fase de desarrollo.El Proceso Unificado fue propuesto por IBM, incluye prcticas claves y aspectos relacionados a la planeacin estratgica y administracin de riesgos; es una gua en el proceso, a parte de ser considerado un estndar en el desarrollo de software.

El proceso unificado conocido como RUP, es un modelo de software que permite el desarrollo de software a gran escala, mediante un proceso continuo de pruebas y retroalimentacin, que logra garantizar el cumplimiento de determinados estndares de calidad.[footnoteRef:22] [22: Desarrollando aplicaciones informticas con el Proceso de Desarrollo Unificado (RUP) Artculo por Mtra. Mara de Lourdes Santiago Zaragoza, Profesora del Programa Educativo de Tecnologas de la Informacin y comunicacin, pg 1 ]

Proceso de desarrollo unificado:

Fase de concepcin. En est fase se define y acuerda el alcance del proyecto, se identifican los riesgos potenciales, se propone una visin general de la arquitectura de software. As mismo, se planean las siguientes fases.

Fase de elaboracin. Se seleccionan los casos de uso que permiten definir a arquitectura base, adems, se realiza el primer anlisis del dominio del problema.

Fase de construccin. El propsito de la fase es completar la funcionalidad del sistema, se administran los cambios de acuerdo a las evaluaciones realizados por los usuarios.

Fase de transicin. Su objetivo es asegurarse que el software este disponible para los usuarios finales, ajustar errores y defectos.

1.2 Introduccin a Javascript

1. 2. 1 Qu es Javascript?

Javascript es lo que se conoce como lenguaje script, en otras palabras, es un cdigo de programacin que se inserta dentro de un documento.

Se creo con la intencin de realizar pginas web dinmicas, mejor dicho, potenciar su creacin. As como, ampliar las posibilidades de HTML.

A diferencia de lo que podramos creer, es totalmente distinto a Java. Este ltimo es un lenguaje completo de programacin (como C y C++). Java crea programas totalmente independientes y operativos, mientras que Javascript inserta cdigo especial dentro de HTML y no crea programas independientes, depende totalmente del cdigo HTML

La ventaja fundamental de Javascript es que su aprendizaje y uso son muy sencillos y que permite realizar labores complejas en una pgina sin necesidad de aprender CGI, el CGI por sus siglas en ingls Common Gateway Interface de las primeras formas de programacin dinmica.[footnoteRef:23] [23: http://www.maestrosdelweb.com/cgiintro/]

1. 2. 2 Historia del Javascript

A mediados de los 90s se empezaban a desarrollarse las primeras aplicaciones web, entre los elementos con los que empezaban a contar estaban los formularios complejos, es por eso que surgi la necesidad de un lenguaje de programacin que se ejecutara en el navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le haca esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los errores existentes.

Brendan Eich, un programador que trabajaba en Netscape, pens que podra solucionar este problema adaptando otras tecnologas existentes (como ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denomin a su lenguaje LiveScript.

Posteriormente, Netscape firm una alianza con Sun Microsystems para el desarrollo del nuevo lenguaje de programacin. Adems, justo antes del lanzamiento Netscape decidi cambiar el nombre por el de JavaScript. La razn del cambio de nombre fue exclusivamente por marketing, ya que Java era la palabra de moda en el mundo informtico y de Internet de la poca.

La primera versin de JavaScript fue un completo xito y Netscape Navigator 3.0 ya incorporaba la siguiente versin del lenguaje, la versin 1.1. Al mismo tiempo, Microsoft lanz JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.

Para evitar una guerra de tecnologas, Netscape decidi que lo mejor sera estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envi la especificacin JavaScript 1.1 al organismo ECMA European Computer Manufacturers Association).

ECMA cre el comit TC39 con el objetivo de "estandarizar de un lenguaje de script multiplataforma e independiente de cualquier empresa". El primer estndar que cre el comit TC39 se denomin ECMA-262, en el que se defini por primera vez el lenguaje ECMAScript.

Por este motivo, algunos programadores prefieren la denominacin ECMAScript para referirse al lenguaje JavaScript. De hecho, JavaScript no es ms que la implementacin que realiz la empresa Netscape del estndar ECMAScript.

La organizacin internacional para la estandarizacin (ISO) adopt el estndar ECMA-262 a travs de su comisin IEC, dando lugar al estndar ISO/IEC-16262.[footnoteRef:24] [24: http://librosweb.es/libro/javascript/capitulo_1/breve_historia.html]

1. 2. 3 Sintaxis

Cuando hablamos de sintaxis dentro de la programacin se hace referencia a la sintaxis de un lenguaje de programacin, valga la redundancia. Y se le entienede como el conjunto de reglas que debern seguir al escribir el cdigo. Esto es de vital importancia, porque al no presentarse de la manera correcta no podr ser identificado y, menos an, llevada a acabo la instruccin.

Entre las cuestiones que debemos tener en cuenta son las siguientes:

Javascripy distingue entre maysculas y mnusculas, por ejemplo, si la orden es if al escribirla en maysculas como IF ser incorrecta.

Javascript ignora espacios en blanco, tabuladores y saltos de lnea entre token (palabra reservada). Habr que se hacer uso de sangrado para que le script sea ms legible.

El uso de ; al final de cada instruccin es opcional pero altamente recomendable.

Dentro de Javascript se pueden hacer dos tipos de comentarios, los que abarquen varias lneas, por ejemplo /*comentario en varias lneas*/.Adems de los que se hacen al final de la lnea con //al final de la lnea.

Similar a Java los identificadores debern comenzar por una letra o un guin bajo _. As mismo pueden contener letras, dgitos y guin bajo _. Estos no pueden coincidir con palabras reservadas.

Las palabras reservadas en JavaScript son las siguientes: break, case, catch, continue, default, delate, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

Las operaciones con nmeros, de manera interna, se realizan en punto flotante. Los enteros: 0,127. Los decimales: 0.23, 3.14163.23. Los hexadecimales empiezan por ox: oxFF, 0x1A.

Los strings, su secuencia de caracteres entre comillas dobles o simples dobles y simples. Por ejemplo: return false;}La comprobacin se realiza nuevamente mediante las expresiones regulares, ya que las direcciones de correo electrnico vlidas pueden ser muy diferentes. Por otra parte, como el estndar que define el formato de las direcciones de correo electrnico es muy complejo, la expresin regular anterior es una simplificacin. Aunque esta regla valida la mayora de direcciones de correo electrnico utilizadas por los usuarios, no soporta todos los diferentes formatos vlidos de email.

1. 3. 8. 5 Validar fecha

Las fechas suelen ser los campos de formulario ms complicados de validar por la multitud de formas diferentes en las que se pueden introducir. El siguiente cdigo asume que de alguna forma se ha obtenido el ao, el mes y el da introducidos por el usuario:

var ano = document.getElementById("ano").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value; valor = new Date(ano, mes, dia); if( !isNaN(valor) ) { return false;}La funcin Date(ano, mes, dia) es una funcin interna de JavaScript que permite construir fechas a partir del ao, el mes y el da de la fecha. Es muy importante tener en cuenta que el nmero de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el mes de Diciembre. Los das del mes siguen una numeracin diferente, ya que el mnimo permitido es 1 y el mximo 31.

La validacin consiste en intentar construir una fecha con los datos proporcionados por el usuario. Si los datos del usuario no son correctos, la fecha no se puede construir correctamente y por tanto la validacin del formulario no ser correcta.

1. 3. 8. 6 Validar DNI

Se trata de comprobar que el nmero proporcionado por el usuario se corresponde con un nmero vlido de Documento Nacional de Identidad o DNI. Aunque para cada pas o regin los requisitos del documento de identidad de las personas pueden variar, a continuacin se muestra un ejemplo genrico fcilmente adaptable. La validacin no slo debe comprobar que el nmero est formado por ocho cifras y una letra, sino que tambin es necesario comprobar que la letra indicada es correcta para el nmero introducido:

valor = document.getElementById("campo").value;var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T']; if( !(/^\d{8}[A-Z]$/.test(valor)) ) { return false;} if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) { return false;}La primera comprobacin asegura que el formato del nmero introducido es el correcto, es decir, que est formado por 8 nmeros seguidos y una letra. Si la letra est al principio de los nmeros, la comprobacin sera /^[A-Z]\d{8}$/. Si en vez de ocho nmeros y una letra, se requieren diez nmeros y dos letras, la comprobacin sera /^\d{10}[A-Z]{2}$/ y as sucesivamente.

La segunda comprobacin aplica el algoritmo de clculo de la letra del DNI y la compara con la letra proporcionada por el usuario. El algoritmo de cada documento de identificacin es diferente, por lo que esta parte de la validacin se debe adaptar convenientemente.

1. 3. 8. 7 Validar campo de texto con valores numricos

Los nmeros de telfono pueden ser indicados de formas muy diferentes: con prefijo nacional, con prefijo internacional, agrupado por pares, separando los nmeros con guiones, etc.

El siguiente script considera que un nmero de telfono est formado por nueve dgitos consecutivos y sin espacios ni guiones entre las cifras:

valor = document.getElementById("campo").value;if( !(/^\d{9}$/.test(valor)) ) { return false;}

1. 3. 8. 8 Validar checkbox

Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript permite comprobarlo de forma muy sencilla:

elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados, es ms fcil utilizar un bucle:

formulario = document.getElementById("formulario");for(var i=0; i/ig;

1. 4. 9 Mtodos jQuery

1. 4. 9. 1 Mtodo .attr()

El mtodo .attr() nos permite recuperar el valor de un atributo o bien de modificarlo.

Podramos tener una etiqueta como sta:

Yo amo a Javascript Y recuperar su valor de esta forma:

var titulo = $("#parrafo").attr('title');alert(titulo);

O bien modificarlo y mostrar su nuevo valor:

$(document).ready(function(){ var titulo = $("#parrafo").attr('title'); alert(titulo); $("#parrafo").attr('title', 'Soy un nuevo titulo del parrafo'); titulo = $("#parrafo").attr('title'); alert(titulo); }); Yo amo a Javascript

Para recuperar el valor de un atributo debe usarse:

$(elemento).attr(atributo);

Y para modificar el valor de un atributo:

$(elemento).attr(atributo, valor);

Otra posibilidad que nos da jquery a travs de sus mtodos es la de eliminar un atributo mediante el mtodo removeAttr():

Por ejemplo si tuviramos esto:

Hola mundo Y quisiramos quitarle el atributo title, deberamos hacerlo de esta manera:

$("#parrafo").removeAttr('title');Este mtodo al igual que .attr() se aplica para todo tipo de atributos.

1. 4. 9. 2 Mtodo .css()

El mtodo llamado .css() que nos permite recuperar y modificar los estilos, como por ejemplo el color de la letra.

Supongamos que nosotros tenemos un elemento como ste:

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Podemos recuperar, por ejemplo, el valor de la propiedad de css text-decoration, de esta forma:

var text_decoration = $("#parrafo").css('text-decoration');alert(text_decoration);Como la etiqueta no tiene definido ningn valor para la propiedad text-decoration entonces debera devolvernos none.

Adems as como podemos recuperar el valor de sus propiedades tambin podramos modificarlas:

$("#parrafo").css('text-decoration', 'underline');Como vemos, si el mtodo .css() recibe un parmetro nos devolver el valor del mismo, pero si recibe dos modifcar el valor del primer parmetro (propiedad) con el segundo parmetro (valor)

Adems al igual que el mtodo .attr() si queremos modificar de a varias propiedades podemos usar un json como parmetro.

Con Json:

$("#parrafo").css({ 'text-decoration': 'underline', 'color': '#f00', 'font-weight': 'bold'});

Sin Json:

$("#parrafo").css('text-decoration', 'underline');$("#parrafo").css('color', '#f00');$("#parrafo").css('font-weight', 'bold');

De ambas maneras es vlida.

1. 4. 9. 3 Mtodo .val() y mtodo .html()

El mtodo .val() que nos devolver el value del campo de entrada. Mientras que para el div utilizamos .html() lo que nos permitir insertar una cadena dentro del mismo.

Tanto .html() como .val() cumplen una funcin de mtodos getters y setters.

Si usamos el mtodo .html() sin un parmetro nos devolver el valor de la cadena que se encuentra dentro, pero en caso de usarlo con un parmetro cambiar el valor actual por el de ese parmetro. Para ello veremos un ejemplo, copiaremos el contenido de un prrafo dentro de otro con el mismo mtodo:

$(document).ready(function(){ $("#copiar").click(function(){ var parrafo = $("#parrafo1").html(); $("#parrafo2").html(parrafo); }); }); Soy un parrafo Copiar ...

Como ven usamos el mtodo .html() tanto para recuperar la cadena que est dentro de un elemento como tambin para setear el valor de otro, eso obviamente dependiendo de si tiene o no un parmetro.

Sin embargo, por si no notaron el prrafo 1 dentro suyo tiene una etiqueta strong que tambin fue copiada, esto tiene sentido teniendo en cuenta el nombre del mtodo: html, esto significa que este mtodo copiar toda la cadena, incluso el cdigo. Si nosotros quisiramos recuperar solamente la cadena, deberamos usar el mtodo .text() de la siguiente forma:

var parrafo = $("#parrafo1").text(); $("#parrafo2").html(parrafo);Vale aclarar que el mtodo .html() como .text() se aplican a etiquetas de apertura y cierre como h1, p, ul, li, strong, div, span, etc.

En el caso del mtodo .val() funciona muy parecido si no recibe parmetros nos devolver el value de la etiqueta y si recibe un parmetro lo cambiar. Adems este mtodo slo se aplica para elementos de formulario, input, textarea, select.

1. 4. 10 Envo de parmetros por POST y GET

Dos mtodos comnmente utilizados para una peticin-respuesta entre un cliente y el servidor son: GET y POST.

GET - Pide a los datos de un recurso especificado, se utiliza bsicamente para conseguir justo (recuperar) algunos datos del servidor. El mtodo GET puede devolver datos en cach.

POST - datos somete a procesar a un recurso especificado, tambin se puede utilizar para obtener algunos datos del servidor. Sin embargo, el mtodo POST nunca almacena en cach de datos, ya menudo se utiliza para enviar datos, junto con la solicitud.

1. 4. 10. 1 GET

El siguiente ejemplo utiliza el mtodo $ .get () para recuperar datos de un archivo en el servidor:

$("button").click(function(){ $.get("demo_test.asp", function(data, status){ alert("Data: " + data + "\nStatus: " + status); });});

1. 4. 10. 2 POST

El siguiente ejemplo utiliza el mtodo $.post() para enviar datos:

$("button").click(function(){ $.post("demo_test_post.asp", { name: "Donald Duck", city: "Duckburg" }, function(data, status){ alert("Data: " + data + "\nStatus: " + status); });});

1. 4. 11 Componentes o Plugins ms utilizados en una pagina WEB

Un plugin jQuery es simplemente un nuevo mtodo que utilizamos para extender objeto prototipo de jQuery. Al ampliar el objeto prototipo de habilitar todos los objetos jQuery para heredar cualquiera de los mtodos que se agregan. Segn lo establecido, cada vez que se llama a jQuery () va a crear un nuevo objeto jQuery, con todos los mtodos de jQuery heredadas.

La idea de un plugin es hacer algo con una coleccin de elementos. Usted podra considerar cada mtodo que viene con el ncleo de un plugin de jQuery, como .fadeOut () o .addClass ().[footnoteRef:28] [28: Consultado 11 de mayo 2015 http://learn.jquery.com/plugins/]

Podemos encontrar infinidad de plugins ya realizados, adems de poder hacer uno nosotros mismos. A continuacin se presentan algunos de los que existen: paginador, slider de imgenes, para audio y video, validacin de formularios, carrito de compras, grid, progressBar, datepicker, autocomplete, accordion, tabs, dialog, tooltip y men.

Profundizaremos en el algunos, solo para ejemplificar su funcionamiento.

1. 4. 11. 1 Paginador

jPaginate es un plugin de jQuery para paginacin que viene con una peculiaridad: nmeros de pgina animados. El usuario puede deslizarse a travs de los nmeros de las pginas disponibles haciendo clic o simplemente flotando sobre las flechas de avanzar. Los links a la pgina inicial y final tambin estn disponibles.

Puedes configurar las siguientes propiedades del plugin:

count: el nmero total de pginasstart: En qu nmero de las pginas visibles deben comenzar la navegacin?display: Cuntos nmeros de pgina van a verse en la navegacin?border: Si debe haber un borde (true / false)border_color: El color del bordetext_color: Color del texto y los nmerosbackground_color: Color de fondoborder_hover_color: Color del contorno, cuando pasa por encima el mouse.text_hover_color: El color del texto cuando pasa por encima el mousebackground_hover_color: Color de fondo cuando pasa por encima el mouseimages: Si las flechas deben ser imgenes o no (true / false)mouse: esta propiedad puede tener dos valores.press con este valor cuando el usuario mantiene pulsado el ratn, los nmeros de pgina seguir deslizndose."slide" los nmeros de pgina se deslice una vez con cada clic.onChange: Es el evento que se dispara cuando se hace clic en una pgina. Si llamamos una funcin podemos pasar como argumento el nmero de la pgina se hace clic.

Ejemplo:

view plaincopy to clipboardprint? Demo Paginacin Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10

1. 4. 11. 2 Sliders de Imagenes

Para desplegar las imgenes de maneras dinmicas. Un slider jQuery que se adapta al tamao del contenedor que lo integra, con lo que junto con un layout responsive conseguiremos una gran flexibilidad.

Antes de cargar el cdigo del plugin, el html es necesario para que el slider funcione:

El css necesario para que el slider se vea con el estilo por defecto se carga con la siguiente lnea:

Como para cualquier plugin jQuery que queramos usar en nuestra web, primero tenemos que asegurarnos de que tenemos cargado jQuery antes:

Debajo de este cdigo que obtiene el cdigo de los servidores de Google, ya podemos incluir el script del plugin y el cdigo javascript que har que para el objeto html con clase .flexslider se cargue el plugin correspondiente:

$(window).load(function() { $('.flexslider').flexslider({ controlsContainer: '.flex-container' }); });

1. 4. 11. 3 Validacin de formularios

Tenemos la opcin si utilizamos jQuery de validar campos de formulario, por ejemplo, utilizando expresiones regulares jQuery. Se realiza llamando a la funcin match() de jQuery, que funciona de forma similar a la funcin preg_match de javascript.

Con la siguiente instruccin accederemos al valor de un campo de texto, por ejemplo:

var campo = $('#name').val();

Para comprobar y aplicar una expresin regular a un campo de texto, con esta instruccin:

var campo = $('#name').val().match('Aqui la expresin regular');

A continuacin las expresiones regulares mas utilizadas a la hora, por ejemplo, de validar campos:

//para nmeros, til para filtrar los famosos ids.

numeros = /^[0-9]+$/;

//slo letras, pero esto no incluye los acentos, as que si introduces no es correcto.

letras = /^[a-zA-Z]+$/;

//para emails, vlidos pueden ser: miemail@example.com, my.email@example.es,

email = /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/;

//passwords o contraseas que tienen que contener tanto nmeros como letras

password = /^([a-z]+[0-9]+)|([0-9]+[a-z]+)/i;

//Para cdigos postales

codigo_postal = /^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$/;

//Para el Documento NIF

NIF = /^\d{8}[a-zA-Z]{1}$/;//Para el CIF

CIF = /^[a-zA-Z]{1}\d{7}[a-zA-Z0-9]{1}$/;

//Fecha formato tipo 24/12/2014

fecha = /^([0-9]{2}\/[0-9]{2}\/[0-9]{4})$/;

//1 nmero entre el 1 el 50

number1to50 = /(^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$)/gm;

//Buscar imagenes slo con formato .png

imgPNG = //ig;

Aqu un ejemplo completo, de como validar si lo que nos introducen en el campo son slo nmeros:

$(document).ready(function() {$("#boton").click(function() {if ($("#texto").attr("value").match(/^[0-9]+$/)) {alert("Correcto");}else {alert("Incorrecto");}});});