Modulo 1

Universidad Nacional Autónoma de México Facultad de Artes y Diseño Memoria Gráfica del Diplomado: Desarrollo de Sitios Web Dinámicos Modalidad Ampliación y Profundización de Conocimientos Presenta v Liliana Santos Rodríguez Responsable académico Ing. Julio Cesar Romero Salvador México, D.F. 2014

<La Revolución de las Comunicaciones Web> La revolución de las comunicaciones, como en cada paso que da la humanidad se debe a un enorme esfuerzo de miles de personas que han creído en sus sueños y han defendido con estudios sus ideas.

En el siglo XIX hemos intentado muchas maneras de extender nuestra comunicación, desde la distribución de periódicos en masa en 1833, 1844 el primer mensaje por telégrafo, 1866 la comunicación a través del océano Atlántico, la creación del teléfono en 1876, 1901 la radio, 1927 primera película hablada, 1939 la televisión, 1950 televisión a color, 1958 El módem. Pero para 1969 es creado la maravilla de ARPANET, el primer internet, un medio de comunicación audiovisual que engloba todos los medios ya existentes.

El Internet se crea en los años sesenta 1961-1967, en los centros de investigación Massachusetts Institute of Tecnology (MIT), The RAND Corporation y Nacional Physical Laboratory, se trabaja esta misma invención sin saber los unos de los otros.

El arque del Internet comienza justo en la Guerra Fría 1957. Cuando la URSS (Ubión de Repúblicas Socialistas Soviéticas) lanza al espacio el primer satélite “El Sputnik”, EEUU no quizó quedarse atrás y fundaron en 1958 ARPA (Adcanced Researsh Projects Agency) por el presidente Dwight D.Eisenhower para el desarrollo de proyectos de investigación avanzada donde comienza la investigación computacional. Pero a su vez la Fuerza Armada encarga a The RAND Corporation el estudio de sistemas de comunicación digital, para la comunicación militar, tolerante a ataques nucleares. NPL avanzo un poco más lento debido a la falta de credibilidad y por tanto la nula financiación por el gobierno.

<EL PADRE DEL INTERNET, Lawrens Roberts> 1972. Fue director y diseñador en el equipo de ingenieros creadores de ARPANET, el precursor del actual internet. Trabajo en conjunto con Robert Kahn para el desarrollo de un modelo de arquitectura de red abierta, para que cualquier ordenador pudiese comunicarse con cualquier otro. Desarrollaron junto con Vinton Cerf el protocolo Transmission Control Protol/ Internet Protocol (TCP/IP) es sin más el protocolo que permite conectar redes independientes entre sí.

Durante los años 80 y a principios de los noventa el internet no era muy popular, sin embargo para 1993 el internet comenzaba a utilizarse para la comunicación cultural entre una comunidad universitaria que poco a poco se fue haciendo masiva entre distintas universidades, era utilizado para todo tipo de información sobre actividades culturales entre estudiantes de informática o de cualquier otro ramo. Pero el internet poco tardo en llegar a su auge ya que en no más de un par de años, a pesar de sus deficiencias, logró ser un éxito rotundo y para finales de 1995 se traspasó el umbral alcanzando una masificación crítica.

“Más usuarios implicaban más contenido y más contenido implicaba más usuarios”(Bill Gates, 1996, p.4) Para esto se invirtió millones de dólares en la evolución del hardware, software y obviamente en la investigación sobre el desarrollo de redes interactivas de varios tipos, convirtiendo los equipos en aparatos accesibles económicamente y físicamente, eficaces y con gran contenido en la World Wide Web (WWW).

En la actualidad faltan muchas piezas por resolver destinando a evolucionar cada vez con mayor fuerza y calidad, ofreciendo una oportunidad en el mercado para las empresas que compiten en este ambiente. Es muy fácil notar la rapidez con la que avanza el internet donde su única limitante puede ser el gobierno.

Cada día que pasa se incorporan miles de páginas en internet a la WWW y todo el mundo habla de estas.

“Las redes interactivas están aquí para quedarse y esto es sólo el comienzo.”(Bill Gates, 1996, p.5) Por medio de un diversidad de dispositivos estemos conectados a millones

más, con esta extensión de nuestras posibilidades de comunicación como seres humanos, exploramos el mundo, el mercado se activa, dirigimos negocios, buscamos información con motivo de estudio, nos conectamos con más personas, es una fuente potencial tanto para grandes empresas como para la poder hablar con un ser querido desde cualquier punto en el que nos encontremos.

La máquina formará parte de la humanidad poco a poco” (Antoine de Sainl-Exupéry, 1939) La palabra impresa que nos brindó el aporte de Johan Gutenberg nos descubrió la vista a nuevos horizontes y es que este primer medio de comunicación en masa que ha dado un nuevo poder al ser humano el poder del conocimiento.

El conocimiento nos da poder, la comunicación inmediata y accesible nos deja contralar y abrir los ojos a una realidad que antes no podíamos disfrutar es por ello que es delicioso trabajar en este ámbito y ser parte de un desarrollo tan importante en esta nueva era, donde nosotros diseñamos, ilustramos el paisaje universal informático audiovisual, moldeando parte del futuro.

Stan Lee y Steve Ditko, en 1963 escribe en la historieta SpiderMan, en el n°15 de Amazing Fantasy “Un gran poder conlleva una gran responsabilidad” Como diseñadores nos concierne tanto este tema donde podemos explotar a un gran nivel la creatividad para expresar sueños y hacer llegar nuestros intereses a la audiencia que tenga agrado por nuestra función, nuestra pasión.

Somos los mediadores que le dan vida y color a este maravilloso mundo virtual audiovisual junto con los programadores y los realizadores de hardware donde abunda la necesidad de “ser escuchado” tanto para bienes humanos como para servicios o ideas.

Con el internet y la Web en menos de 10 años la humanidad se ha transformado, abriendo un abanico de posibilidades. La producción de aplicaciones web es una de las áreas fuertes, un enorme pilar para la Web ya que generan contenido personalizado, de gestión para las empresas y comercio electrónico.

Las aplicaciones pueden tener distintos propósitos ya sea meramente comerciales como culturales o sociales, cada uno de ellos necesitará una buena imagen de confiabilidad y placer audiovisual por ello los diseñadores tenemos un plus que ofrecer a las aplicaciones, una ventaja que debe ser aprovechada para una navegación sin ruido visual y agradable en uso. (Ejemplo de

aplicaciones con gran importancia son Facebook, Youtube o la mensajería electrónica.)

La labor como diseñadores en este aspecto es generar una interfaz gráfica funcional para las aplicaciones, intuitiva, pregnante, con la cualidad de persuadir y hacer sentir seguro al consumidor de dicha idea para transmitirle la información necesaria en cualquier dispositivo conectado a la red.

Para lograr este objetivo existe una multitud de herramientas tecnológicas para programar las aplicaciones web, las más estandarizadas son hasta ahora HTML, CSS y JavaScript.

“Un buen sitio web tiene que ser rápido de descargar, fácil de navegar.

Atractivo a la vista, centrado en la marca y en objetivo, ofrecer algo diferente del resto, tener un valor añadido y constituir una experiencia única para el usuario. Simple, en realidad.”

(Miguel Ripoll. http://www.miguelripoll.com/, citado en Sergio lujan, 2002)

<WWW>

WWW (World Wide Web) Es el sistema mundial de servidores conectados a internet, donde su protocolo de comunicación es HTTP, el lenguaje es HTML y su sistema de direccionamiento de los recursos URL. Para poder utilizar la web se necesita el uso de navegadores también llamados browsers.

Inicialmente era simplemente una inmensa biblioteca de páginas estáticas que podían consultarse o descargarse, pero ahora se ha convertido también en un acceso a programas, tiendas, servicio de prestaciones y funciones, entre otros.

Su evolución se debe a la inclusión del método CGI (common Gateway interface) para confeccionar páginas dinámicas, con el cual se hace posible transferir información entre el servidor HTTP y programas externos que nos proporcionan total libertad a la hora de escoger el lenguaje de programación para desarrollarlos, lamentablemente tienen un punto débil implicaban una gran carga para la máquina del servidor.

Pero como dijo Bill Gates las empresas buscarán soluciones y harán de las debilidades de este producto una fortaleza. Las soluciones fueron diseñar sistemas de ejecución de módulos integrados al servidor y la otra consiste en dotar al servidor de un intérprete de algún lenguaje de programación, reduciendo el tiempo de respuesta.

De esta manera surge Java, integrada por dos componentes; un lenguaje que permite incrustar código interpretable en las páginas HTML “JSP (Java server pages)” y un mecanismo de programación ligado al servidor con un mejor rendimiento que los CGI llamado Java Servlet.

<EL PADRE DE LA WEB, Tim Berners-Lee> El desarrollo de la Web se debe a muchas personas pero se le acuñe la invención a Tim Bernes-Lee por su gran aporte Creador de: HTML (Hiper Text Markup Languaje), lenguaje para generar contenidos en la Web. HTTP (Hyper Text Transfer Protocol) protocolo de comunicación entre ordenadores y la Web, para la transferencia de recursos.

URL (Universal Resource Locator) medio de localización de los distintos recursos que forman la Web en Internet.

1er servidor web 1er navegador web.

En 1989, Tim Berners-Lee trabaja en el CERN (Centro Europeo de Investigación Nuclear) donde empezó a diseñar un sistema para hacer accesible la información del CERN, empleando hipertexto para tener una red de enlaces entre los documentos, siendo aprobado el proyecto da origen al primer navegador web el “WorldWideWeb”.

1992, El número de servidores estables aumento a 26.

1993, la Web es publicada en el New York Times.

Lanzamiento del navegador Mosaic, para X-Window/Unís convirtiéndose despúes en Netscape.

1994, WWW Consortium es fundado para los estándares predominantes en la web (http//www.w3c.org) Ellos mismos se definen en su página web de la siguiente manera: “El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones Miembro, personal a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares Web Liderado por el inventor de la Web Tim Berners-Lee y el Director Ejecutivo (CEO) Jeffrey Jaffe, la misión del W3C es guiar la Web hacia su máximo potencial” Después de esto, el crecimiento se hace cada vez mayor hasta convertirse a finales de los noventa en el servicio insignia de Internet y dando lugar al crecimiento imparable de los servicios en línea que experimentemos en la actualidad.

El éxito de la web se basa en sí en el HTTP y el lenguaje HTML. Uno tiene la función de enviar cualquier tipo de ficheros fácilmente, simplificando el funcionamiento del servidor permitiendo que cualquier servidor sea potente o no pueda atender miles de peticiones de manera sencilla.

El otro es un mecanismo de composición de páginas enlazadas simple y altamente eficiente.

<HTTP>

El protocolo Hypertext transfer protocol está orientado a conexión sin estado ya que emplea para su funcionamiento un protocolo de comunicaciones (TCP, transport control protocol) de modo conectado el cual establece un canal de comunicaciones de extremo a extremo, entre el cliente y el servidor, por él pasa el flujo de bytes que contienen los datos a transferir. No mantiene estados, esto quiere decir que cada transferencia de datos es una conexión independiente de la anterior.

Existe una variante muy utilizada por los servidores de comercio electrónico e información confidencial, llamada HTTPS (“S” Secure) utiliza el protocolo de seguridad SSL (secure socket layer) de manera que cifra el tráfico entre cliente y servidor para una mayor seguridad en la información contenida.

El cliente establece una conexión TCP hacia el servidor, hacia el puerto HTTP o en inversa, envía comando de petición de recurso y por esta misma conexión el servidor responde con los datos solicitados.

<HTML>

El HyperText Mark-up Lenguaje o bien el Lenguaje de Marcado de Hipertexto es como su nombre lo indica lenguaje de marcas que sirven para codificar documentos, nos permite estructurar, representar el contenido, referenciar otros recursos (imĂĄgenes, video, etc.), enlazar otros documentos, mostrar formularios, etc.

En la actualidad se ha desarrollado bastante este lenguaje y nos permite hacer muchas cosas donde anteriormente habĂ­a limitaciones.

<HTML5>

HTML5 (Hypertext Markup Language 5) Marca una otra etapa en la cual la Web vive importantes cambios abriendo nuevas puertas con una renovación en el contexto. Es un nuevo concepto para la construcción de aplicaciones web en una era que combina dispositivos móviles, computación en la nube y trabajos en red.

Es una mejora de la combinación entre Javascript, HTML y CSS, en la cual HTML se dedica a los elementos estructurales, CSS le da utilidad y diseño visual a la interfaz y Javascript lo vuelve dinámico y funcionalidad.

Permite la reproducción interna de vídeos, audio y juegos. Sin que sean necesarios programas adicionales, como es el caso de Adobe Flash.

Navegadores web en su última versión como Internet Explorer, Mozilla Firefox o Google Chrome ya son compatibles con HTML 5. Además, este estándar también funciona correctamente con smartphones y tablets.

<Usuario/Cliente/ Servidor>

Las aplicaciones web contienen una arquitectura cliente/servidor.

La principal ventaja de esta arquitectura es que facilita la separación de las funciones según su servicio, permitiendo situar cada función en la plataforma más adecuada para su ejecución. El clientete/servidor nos permite la separación de funciones en 3 o 4 niveles: (Es posible programar cada capa con cualquier lenguaje, sin embargo existen lenguajes especificos para cada una de estas, al final de cada explicación de las diferentes capas se nombrara su lenguaje correcto.)

Lógica de presentación.

Es la interfaz a la cual el usuario final accede. (GUI) Lógica de aplicación. Es una especie de intermediario o mensajero entre la capa de cliente y la lógica de negocio. Formada casi siempre por componentes de J2EE que preparan los datos para enviarlos en formato HTML o XML, o que reciben solicitudes para procesarlas, Se puede establecer un servicio de acceso personalizado y seguro a la lógica de negocios. HTML, Javascript, TCL / TK, Motif Lógica de negocio/ aplicación: Realiza las funciones principales de la aplicación, según los requerimientos del usuario. Pueden ser procesamiento de datos, implementación de funciones de negocios, coordinación de varios usuarios y administración de recursos externos como, por ejemplo, bases de datos o sistemas heredados. Los servicios de negocios también se pueden crear como servidores independientes, tal es el caso del servicio de mensajeria o calendario. Java, C, Cobol, 4gl Lógica de datos.

Gestiona grandes cantidades de información SQL (lenguaje que accede y opera en bases de datos) que otorga la lógica de negocios según la persisitencia de los datos. Depende del DBMS usado.

DBMS Es donde tiene lugar el verdadero procesamiento y almacenamiento de la información. C El cliente es un programa con el que interacciona el usuario para solicitar a un servidor web el envío de los recursos que desea obtener mediante http.

La parte cliente de las aplicaciones web suele estar formada por el código HTML que forma la página web más algo de código ejecutable realizado en lenguaje de script del navegador (JavaScript) o mediante pequeños programas (applets) realizados en Java.

Por tanto, la misión del cliente web es interpretar las páginas HTML y los diferentes recursos que contienen (imágenes, sonidos, etc.). Las tecnologías que se suelen emplear para programar el cliente web son: HTML. CSS. DHTML. Lenguajes de script: JavaScript. ActiveX. Applets programados en Java.

Distintas tecnologías que necesitan la existencia de un plug-in en el navegador: Adobe Acrobat Reader, Autodesk,Flash, Macromedia Shockwave,etc.

El servidor El servidor, es un programa que está esperando permanentemente las solicitudes de conexión mediante el protocolo HTTP por parte de los clientes.

La parte servidor de las aplicaciones web está formada por: Entidades estáticas (documentos HTML) que siempre muestran el mismo contenido. Recursos adicionales (multimedia, documentos, etc.) que se pueden emplear dentro de las aplicaciones o estar disponibles para ser descargados y ejecutados (visualizados) en el cliente. Programas o scripts que son ejecutados por el servidor cuando el navegador del cliente solicita algún servicio.

<Transferencia>

1. El usuario especifica en el cliente la dirección de la aplicación que desea consultar.

2. El cliente establece una conexión con el servidor.

3. El cliente solicita la página o el objeto deseado.

4. El servidor envía dicha objeto (o, un código de error).

5. Si se trata de una página HTML, el cliente inicia sus labores de interpretación de los códigos. Si el cliente encuentra instrucciones que hacen referencia a otros objetos que se tienen que mostrar (imágenes, sonidos, animaciones multimedia, etc.), establece automáticamente comunicación con el servidor para solicitar dichos objetos.

6. Se cierra la conexión entre el cliente y el servidor.

7. Se muestra la aplicación al usuario.

Obsérvese que siempre se libera la conexión, por lo que ésta sólo tiene la duración correspondiente a la transmisión de la página solicitada. Esto se hace así para no desperdiciar innecesariamente el ancho de banda de la red mientras el usuario lee la aplicación recibida. Cuando el usuario activa un enlace de la aplicación, se establece una nueva conexión para recibir otro elemento multimedia. Por ello, el usuario tiene la sensación de que está disfrutando de una conexión permanente cuando realmente no es así.

<Ventajas y desventajas de un sitio web> Ventajas

Desventajas

Llega a un público más amplio

Confiabilidad de los usuarios puede no ser muy fiable si no es actualizada de forma regular.

El Internet está en línea las 24 horas del día, 7 días a la semana El ahorro de tiempo Son compatibles con diversos dispositivos No ocupan mucho espacio La actualización es inmediata El consumo de recursos bajo Son multiplataforma, se ven desde cualquier dispositivo) Son portables La disponibilidad es alta (No se cae el servidor) Son en su mayoría de trabajo colaborativo El aspecto es funcional La usabilidad y accesibilidad esta cuidada Los gráficos tienen alta calidad y apelan el buen uso de color.

Usuarios mal intencionados a los que les gusta ventilar “molestias” La disponibilidad depende de un tercero en cuanto a actualizaciones Algunos navegadores fallan (netskipe/ internet explorer) Funcionalidad limitada

<Bases esenciales para un sitio web> Un usuario destina 3,8” para ver una publicación y en 13,2” saben si es la apropiada, si permanecen más tiempo es casi seguro que la pagina está funcionando y siendo de su total interés, por eso una página web no debe ser pesada, pero si funcional y práctica.

Para obtener una buena página es necesario transmitir…

Mensaje claro. Sencillo, intuitivo, sin necesidad de introducciones y rápido.

El usuario está acostumbrado a encontrar de manera sencilla sus búsquedas y si tiene que esperar para ver el resultado de su búsqueda no optará por el sitio web.

Información. Sólo la esencial la más adecuada según el servicio, no ofrecer mil posibilidades no abusar de links inapropiados ni publicidad excesiva de otros servicios, tampoco es recomendable el uso de submenús o menús animados con sonido o con animaciones saturadas. Uso de texto moderado.

Idiomas. Dependiendo el target de la empresa debemos recordar que solamente alrededor del 10% de la población cibernética hablan o entienden el español, sin embargo al redor del 60% hablan inglés. Por lo que es recomendable el sitio web este al menos en las versiones de inglés y español.

Jerarquías. Conjugar elemenvante y poner por separado uso de color y fotografías Textos. Mantener un texto, ya que el uso textos inadecuados conlleva a que ta del sitio web.

tos, resaltar la información relelas secundarias. Dividir mediante o textos remarcados. balance entre imagen y excesivo de información y dar fatiga visual lo que nuestro público desis-

Tamaño de las páginas. Idealmente no deben exceder los límites de la ventana visible de su navegador, considerando el tamaño más bajo de resolución de un monitor que es de 600 x 800 px.

Formularios. A mayor cantidad de campos por completar,menor actividad por parte del usuario. El uso de formularios debe ser claro y conciso. No se debe de pedir datos privados como teléfono, números de cuenta bancaria o similar si no es necesario ya que podemos crear la desconfianza del público al sitio web. Es útil configurar una auto respuesta para que le quede al usuario un comprobante de lo consultado, ya que este mail puede causar un visita futura.

Confiabilidad. Hacer uso de marcas reconocidas o logos de confianza hacen que el cliente se sienta cómodo con el servicio. Ubicar dichos logotipos reconocidos mundialmente en un mayor protagonismo con la página hace más vistosa y confiable la misma. El uso de Patrocinadores da renombre y apoyo a una campaña publicitaria igual que en una página web.

Atención. Anuncio es igual a contenido y este es igual a página destino.

Contenido claro, conciso y directo. Esto da agilidad al servicio y prestigio a la página.

Mantenimiento y actualización. Un sitio web se crea una vez, actualizarlo mantendrá a la audiencia alerta y confiada, para se puede ofrecer el sistema de administración de contenido (CMS-Conent Managament System).

<Conversión Web>

Obtención de resultados con el usuario.

Captar la atención: debe estar de acuerdo con el objetivo para el cual ha sido creado.

Ejemplo: el usuario entra a su correo electrónico, el espera ver una página sencilla con un Sigin-up para poder entrar, sin embargo si entra a una página que anuncia comerciales, distracciones el desistirá del sitio web.

Despertar el interés: Apelando el uso gráfico, uso de eslogan, frases cortas y listados ofrece que el producto o servicio es mejor que la competencia o superior a está basada en sus características y no en el uso desmesurado de animaciones.

Generar deseo: Persuadir al usuario. Dándole un motivo para desear un objeto, producto, bien o servicio es demostrado en tanto dicho objeto deseado es algo prohibido, algo que perdió, algo que pertenece a otra persona, algo que solo sea para su uso personal, despertar el morbo, obteniendo el interés es la clave para que su sitio web recaude más visitantes.

Acción: El usuario deberá hacer la conversión: comprar, llenar un formulario, subscribirse a un servicio de información o difundir el mensaje.

Aplicaciones Web Inteligentes

“El éxito o aceptación de cualquier aplicación web está condicionada por la satisfacción del usuario final” “Una aplicación Web inteligente debe estar centrada en los usuarios, con los requisitos del negocio reflejando la satisfacción de los usuarios. Un enfoque de estas características suministrará servicios eficaces a diferentes tipos de usuarios en una variedad de dominios de aplicaciones, cambiando la experiencia de los usuarios y la accesibilidad de los mismos. Estos cambios permitirán que las aplicaciones Web sean utilizadas por cualquier usuario, incluyendo aquellos con dificultades físicas, comprendiendo al usuario y brindando servicios basados en las preferencias del usuario y también en sus limitaciones. Se puede diseñar una aplicación Web inteligente usando interfaz de usuario adaptable, lógica de procesamiento inteligente y base de conocimiento definida semánticamente.” (http://www.ibm.com/developerworks/ssa/library/wa-aj-smartweb/) Usabilidad “La usabilidad es un atributo relacionado con la facilidad de uso. Más específicamente, se refiere a la rapidez con que se puede aprender a utilizar algo, la eficiencia al utilizarlo, cuán memorable es, cuál es su grado de propensión al error y cuánto le gusta a los usuarios”. * Jakob Nielsen y Hoa Loranger, Usabilidad. Prioridad en el diseño Web”, 2007.

Se refiere a la facilidad con la que un usuario interactúa con la aplicación.

Algunas referencias para revisar la usabilidad son los estándares ISO, ISO 16982 e ISO 9241.

Está determinado por múltiples factores, como son la interfaz de usuario, los tipos de usuarios, las necesidades específicas de uso y el contexto de interacción.

La medida de usabilidad depende del propio dispositivo o sistema y se obtiene con base a pruebas de control.

La Organización Internacional para la Estandarización define a la usabilidad como: “La capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario en condiciones específicas de uso” (ISO/IEC 9126) “La medida en la que un producto se puede usar por determinados usuarios para conseguir objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso especificado” (ISO/IEC 9241) Accesibilidad Es el derecho que todos tenemos de acceso a la información y a los servicios que se proveen por medio de internet.

Es el grado con el cual la mayor cantidad de usuarios posibles puede acceder a una aplicación.

Implica la posibilidad de acceso a determinada información, servicio y/o recurso a través de internet, esto significa que el contenido debe poder ser visualizado, escuchado, leído y/o utilizado por cualquier persona, pepro en especial, por aquellas personas con capacidades diferentes o cualquier limitación individual, pudiendo estar relacionadas con el idioma, los conocimientos y/o la experiencia del usuario o la tecnología.

Existen pautas para usuarios con diferentes tipos de discapacidades y para ellos se han escrito las Pautas de accesibilidad en “Pautas de Accesibilidad para Herramientas de Autor (Autoring tool Accessibility Guidelines o ATAG), Pautas de Accesibilidad al Contenido en la Web (Conent Accesibility Guidelines WTAG) y Pautas de Accesibilidad para Agentes de Usuario (User Agent Accessibility Guidelines o UAAG), son de esencial revisión para un diseñador web para lograr una aplicación lo más accesible posible.

Adaptabilidad Es la habilidad de una aplicación web para personalizar sus contenidos y servicios con respecto a un usuario en particular. Los elementos que se pueden adaptar son varios entre ellos la interfaz de usuario, la presentación y la navegación, ayudando a realizar con facilidad las tareas del usuario y ontener su interés en la aplicación.

<Arquitectura básica>

La expresión “Arquitectura de la información” fue acuñada por R.S Wrman en 1970, publicada en su libro Information Architecs (Watson-Guptill, 1997).

“El arquitecto de la información es el encargado de diseñar y crear el edificio, sus componentes, sus pasillos, sus espacios abiertos y sus zonas de servicios. Sólo que ahora el edificio es digital, sus componentes son los contenidos informativos, y el espacio interno del mismo se crea con la organización de los contenidos y con los sistemas de navegación, acceso y etiquetado de la información.”

(Jesús Tramullas Saz, http://www.sedic.es/clip39.pdf) La usabilidad de la aplicación no solo depende del diseño de la interfaz, sino también de su arquitectura, refiriéndonos a arquitectura como la estructura y organización del componente no visible del diseño, es el acto de estructurar, clasificar y rotular los contenidos del sitio web, dándole calidad al sitio web, una interfaz de fácil uso, accesibilidad y además será aún más sencillo de localizar en el buscador.

“El arte de y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información” (Rosenfeld y Morville, 2002) Así nos enfrentamos a problemas a la hora de organizar la información como son la ambigüedad asociada al lenguaje, heterogeneidad de los contenidos, diferentes perspectivas en función de los usuarios o bien las políticas internas de las instituciones.

Una aplicación web puede crearse siguiendo dos modelos: a) Mediante el uso de tecnologías estandarizadas, como (X)HTML(5),CS o JavaScript. b) Mediante el uso de tecnologías incrustadas, haciendo uso de unas determinadas marcas (X)HTMLque permiten ejecutar una aplicación externa en el agente de usuario. (Adobe Flash y Microsoft Silverlight) Implementar una APW mediante estándares no representa cambios muy importantes en lo que se refiere al proceso de desarrollo y se pueden clasificar en 3 capas de proceso: 1.

La capa de estructura y contenido.(HTML) En esta capa se establecen los diferentes bloques que componen la página (cabecera, contenido, pie, navegación, etc.) y el contenido a presentar.

2.

La capa de presentación.(CSS) Diseño de la apariencia visual y la distribución de los bloques estructurales (layout) y de los contenidos. Normalmente.

3.

La capa de comportamiento.(Javascript) Se programa la reacción de la página frente a las acciones del usuario. Interactúa directamente con el DOM (Document Object Model) del agente de usuario, permitiendo conocer toda interacción (movimiento de ratón, clic, presión de tecla, etc.), acceder a todos los contenidos que se presentan en la página y modificarlos si es preciso.

Diagramación 1) Planeación 2) Desarrollo 3) Fases del proceso 4) Planificación 5) Diseño 6) Prototipado 7) Evaluación 8) Implementación 9) Lanzamiento 10) Mantenimiento 11) Seguimiento 12) Opinión/Usuario 13) Impacto 14) Métricas 15) Conclusiones

<Guía de estilo web>

A continuación se incluyen algunos consejos que pueden ayudar a obtener una estructura lógica correcta: Regla de las tres pulsaciones (_tres clicks_): la media de pulsaciones para acceder a cualquier información útil de la aplicación debería de ser tres pulsaciones. Los usuarios buscan rapidez y efectividad.

Hay que evitar los _callejones sin salida_: páginas que no poseen enlaces para continuar la navegación. Para evitar el problema anterior, es conveniente que todas las páginas posean un enlace a la página principal y a la página anterior.

Otra solución es crear una barra de navegación o menú del sitio web con las categorías principales en que se ha organizado la información.

Los visitantes deberían saber en todo momento dónde se encuentran y cómo volver a la página principal.

La opción de búsqueda, los índices y el mapa del sitio facilitan a los visitantes la localización de la información que buscan.

Debería de estar claramente indicada en todo momento la información de contacto, tanto de la empresa como de la persona encargada del mantenimiento de la aplicación.

La memoria a corto plazo (short term memory) del ser humano tiene un límite (tanto de tiempo como de espacio).Por ello, hay que evitar las estructuras muy profundas, para que el usuario no pierda la orientación (no sepa de dónde viene y por dónde ha pasado).

Todas las aplicaciones deben de poseer un elemento (un logotipo, el color de fondo, etc.) que las identifique como pertenecientes a una aplicación original. De este modo, el usuario podrá saber fácilmente cuando ha abandonado la aplicación.

Por tanto, la sección principal de una aplicación web tiene la función de guiar y dirigir al usuario a otras secciones de la aplicación web. La sección principal o HOME tiene que ser clara y no crear confusión con infinidad de opciones (si las opciones son abundantes significa que la clasificación de la información no ha sido la correcta).

Posiblemente, el aspecto más importante (y al mismo tiempo uno de los más descuidados) de una aplicación sea su contenido (y por extensión, sus servicios): una aplicación web con un buen diseño pero con un pobre contenido es poco probable que triunfe, sin embargo, una aplicación con un diseño modesto pero con un buen contenido sí que puede triunfar (por ejemplo, los buscadores Yahoo! o Google o la tienda Amazon no destacan por su diseño, pero han triunfado en Internet gracias a su contenido o a los servicios que ofrecen).

En palabras de Miguel Ripoll: “Una buena Aplicación web tiene que ser rápida de descargar, fácil de navegar, atractiva a la vista, centrada en la marca y en el objetivo, ofrecer algo diferente del resto, tener un valor añadido y constituir una experiencia única para el usuario. Simple, en realidad.”

Estructura lógica La estructura lógica o de navegación define como un visitante se va a mover (navegar) de una zona a otra de una aplicación. La estructura lógica y la física son totalmente independientes. Según el tipo de navegación que se permita en una aplicación móvil, los usuarios tendrán una sensación de libertad (navegación controlada) o mucha libertad (navegación libre). La estructura lógica también se tiene que planear con cuidado y antes de comenzar a desarrollar la aplicación web, con el fin de asegurarse de que todo el mundo podrá navegar por la aplicación fácilmente. Para lógralo, es conveniente dar respuesta a una serie de preguntas: ¿Cuál es el propósito de esta aplicación? ¿Qué contendrá? ¿Cuál es la audiencia a la que está destinado? ¿Qué esperamos obtener? ¿Qué esperamos que los visitantes obtengan?

Por ejemplo, una aplicación destinada a proporcionar noticias (la aplicación de un periódico) tendrá una apariencia y una navegación distintas de las de una aplicación destinada a vender productos o promocionar un servicio de biográfico.

Existen distintos tipos de estructuras lógicas de navegación. Las más comunes son la secuencial, en rejilla, en árbol y en red, aunque lo normal es que en una aplicación web se de una combinación de alguna de ellas (estructura de rejilla).

Estructura física La estructura física de una aplicación es la forma en que se almacenan los distintos recursos (ficheros) que forman una aplicación en el sistema de archivos del servidor. Se almacenan todos los ficheros en un único directorio (carpeta) o están almacenados según el tipo de fichero en distintos directorios.

Al definir la estructura física de un aplicación hay que tener en cuenta las preguntas anteriores. Una estructura física eficiente reduce los costes de mantenimiento: cada vez que se tenga que actualizar la aplicación web, el tiempo necesario para localizar el recurso que se desea actualizar se reducirá.

La estructura física se debe de planificar antes de iniciar el desarrollo de la aplicación.

Modificar la estructura física una vez que se han creado muchas secciones es costoso y propenso a cometer errores, ya que para ello hay que actualizar los enlaces entre los archivos HTML, las referencias a las imágenes, etc., para que reflejen la nueva estructura de la aplicación.

Si el aplicación contiene un número pequeño de ficheros (5 o 10 ficheros), quizás no suponga ningún problema tenerlos todos juntos en el mismo directorio. Pero conforme aumente el número de ficheros, si se ordenan en subcategorías se simplificará su localización y su cambio.

No existe una forma perfecta de organizar físicamente una aplicación. Todo depende de la persona que tenga que mantener la aplicación: una estructura física puede tener sentido para una persona, pero no para otra. Lo importante es que en el futuro, cuando haya que realizar cambios en una aplicación, la persona que tenga que hacerlo pueda encontrar lo que quiere modificar rápidamente.

Existen diferentes alternativas de organización de una aplicación en directorios. Algunas de las más usuales son: • Por el tipo de fichero. Por ejemplo, ficheros HTML, ficheros gráficos, ficheros de vídeos, etc.

• Por el nivel de acceso (visibilidad). Por ejemplo, parte pública, parte privada de los clientes, parte privada de los administradores, etc.

• Por el contenido. Por ejemplo, una empresa que vende productos puede organizar los ficheros según la información que contienen: los ficheros de la familia de productos A en un directorio, los ficheros de la familia de productos B en otro directorio, etc.

• Por la fecha. Por ejemplo, la aplicación de una revista puede organizar los ficheros según la fecha de publicación.

• Por su propietario. Por ejemplo, una empresa puede organizar los ficheros según el departamento al que pertenecen: departamento A, departamento B, etc.

• Por su estructura lógica o de navegación. La estructura física puede ser una copia de la estructura lógica.

Sin embargo, no hay que abusar de los directorios y crear estructuras de directorios muy profundas, ya que cada directorio que se crea añade unas letras más a la URL: tanto el creador de la aplicación como el usuario final tendrán problemas a la hora de recordar una URL.(si se utiliza a través de un navegador)

<Boceto Web Digital>

Una muy buena idea para tener en mente el sitio web a trabajar y sin improvisaci贸n es el generar un boceto del index en imagen, para tener mas o menos en mente a lo que se quiere llegar y poder presentarle al cliente para ver si comparten la misma idea.

Principios#de servidor.remoto {XAMPP, WAMPP, MAMP} Servidor remoto/ Servidores de comunicaciones o Remote Access Server/ Service, abreviado RAS. Un servidor de acceso remoto es una combinación de software y hardware que permite el acceso desde una computadora a un recurso ubicado físicamente en otro ordenador, a través de una red local o externa, logrando así acceder a herramientas o información que residen en una red de dispositivos.

En este se ven implicados protocolos y aplicaciones para lograr la comunicación entre las máquinas para la recepción y transferencia de datos.

Por tanto un servidor remoto es un equipo que permite a otros conectarse a éste. puede ser a través de una línea telefónica por módem, por ejemplo).

Para obtener páginas Web Dinámicas necesitamos un servidor dónde nuestras páginas PHP puedan ser interpretadas y devueltas después de dicha interpretación.

Existen 2 posibilidades para lograr que nuestro sitio web funcione: Una opción sería de forma local haciendo uso de un paquete personal WAMP que nos ahorrará tiempo ya que instala un servicio Apache, un servidor de base de datos MySQL con el gestor phpMyAdmin y PHP, con los cuales podemos simular un servidor dentro del ordenador donde trabajaremos.

La otra sería remotamente utilizando un servidor remoto registrándonos en un servicio hosting que más convenga según sea el caso.

Los siguientes son los tipos de paquetes de servidor para instalación en el ordenador.

XAMMP (X) para cualquiera de los diferentes sistemas operativos, Apache, MySQL, PHP, Perl. ) Es una herramienta de desarrollo que te permite probar el trabajo (páginas web o programación por ejemplo) en tu propio ordenador sin necesidad de tener que accesar a internet.

Es un servidor de plataforma libre que actúa como si fuese un servidor web.

Está disponible para Microsoft Windows, GNU/ Linux, Solaris y Mac OS. Los desarrolladores de XAMPP fueron Baiker y Anthony Coorporation.

MAMP Es un acrónimo que se desentraña como Mac OS (Sistema Operativo); Apache (Servidor Web); MySQL (Sistema Gestor de Bases de Datos); PHP, Perl o Python (lenguajes de programación usados para la creación de sitios web).

Es el conjunto de programas usados para desarrollar sitios web dinámicos

sobre sistemas operativos de Apple Macintosh, MAC OS X. MAMP es el sistema an谩logo que corre bajo ambiente Macintosh.

WAMP Acr贸nimo que describe un sistema de infraestructura. WAMP (Windows, como sistema operativo; Apache, como servidor; MySQL, como gestor de bases de datos; PHP, Perl o Python, como lenguajes de programacion) Proporciona lenguajes de programaci贸n para desarrollar aplicaciones web.

<Navegadores>

Navegador/ explorador web/ web browser es un software por lo general gratuito que permite visualizar la información que contiene una aplicación web mediante internet. El navegador se comunica con el servidor a través del protocolo HTTP para acceder a las direcciones de internet URLS a través de motores de búsqueda, pide el archivo solicitado en código HTML, lo interpreta y el usuario lo mira en pantalla.

La mayoría de los exploradores web admiten otros protocolos de red como HTTPS, Gopher y FTP así como de lenguajes de marcado HTML y XHTML. También interactúan con complementos o aplicaciones Plug-ins para admitir Flash y programas en Java.

Gracias a los navegadores podemos almacenar información o acceder a diferentes tipos de documentos en el disco duro, redes privadas y crear marcadores.

Se le denomina “navegación” a acceder a sitios web mediante enlaces/ hiperenlaces. Pocos le llaman por su traducción literal de browser “hojeador”.

Algunos navegadores están integrados por defecto a un sistema operativo como es el caso de Internet Explorer en Windows Microsoft, Safari en Mac OS X, Opera o Flock en Linux.

Las características más comunes de un navegador son: navegación por pestañas, bloqueadora de ventanas emergentes, soporte para motores de búsqueda, gestora de descargas, marcadores, corrector ortográfico y atajos en el teclado, además para mantener la privacidad ofrecen maneras sencillas de borrar cookies, caches web y el historial.

Motores de renderizado Es el corazón del navegador, de ellos depende la representación final de una página Web dependiendo de su compatibilidad. Es el elemento interno del navegador que toma el contenido HTML y CSS y lo representa en el dispositivo de salida lo que es la pantalla.

Tipos de navegadores: Internet Explorer, Mozilla Firefox, Safari, Opera, Google Chrome y Flock.

Otros no tan conocidos: Maxthon, Avant, DeepNet, PhaseOut, SpaceTime, Amaya...

Uso actual de los navegadores web Internet Explorer 58.21% Firefox 18.08% Safari 5.8% Opera 1.28%

Internet Explorer Integrado al Sistema operativo Windows de Microsoft. Desde 1999 es el navegador más usado en el mundo, sin embargo a partir del 2002 ha ido perdiendo mercado a ritmo lento pero constante, donde va tomando ventaja Mozilla Firefox.

Es un navegador muy criticado debido a los fallos de seguridad y la incompatibilidad con estándares web como el CSS, XHTML y PNG, además de ser menos funcional que otros exploradores web.

Su más actual versión es Internet Explorer 8.0 Su motor de navegación Trident soporta HTML 4.01, CSS Level 1, XML 1.0 y DOM Level 1, con pequeñas lagunas de implementación, soporta también XSLT 1.0 y WD-xsl, y admite parcialmente CSS Level 2 y DOM Level 2 con importantes deficiencias de implementación, mientras que para MAC el motor de renderizado es Tasman.

Mozilla Firefox Navegador de software libre y código abierto, creado por la Corporación Mozilla, la Fundación Mozilla y numerosos voluntarios externos. Desde abril de 2009, tiene segunda posición de navegadores más usados con el 22, 48% de demanda en el mercado, De bue prestigio y aceptación por parte de los usuarios considerándolo más seguro, rápido y con mayor rendimiento que Internet Explorer, además de ser simple e intuitivo. Ofrece plugins, extensiones add-ons y personalización de apariencia,y como plus contiene herramientas gratuitas útiles para los programadores web; la consola de errores, el inspector DOM y extensiones como Firebug.

Su motor de navegación Gecko para visualizar páginas web soporta varios estándares web incluyendo HTML, XML, XHTML, CSS 1, 2 y 3, SVG 1.1 (parcial), ECMAScript (JavaScript), DOM, DTD, MathML, XSLT, XPath, además de imágenes PNG con transparencia alfa.

Es multiplataforma para varias versiones de Microsoft Windows, GNU/Linux, Mac OS X, y algunos sistemas basados en Explorer, e incluye el software de correo Thunderbird.

Safari Apple Inc. Es el creador de este navegador y lo integra en el sistema operativo Mac OS X, en 2007 se crea una versión de Safari para Microsoft Windows dando soporte tanto a Windows XP como a Windows Vista, se incluye también en iPhone. Su última versión es Safari 4 Algunas de sus características son su velocidad, diseño, seguridad y las prestaciones que ofrece, así como recursos para diseñadores y programadores, su máximo uso en el mercado ha sido de 8.43%.

Su motor de renderizado WebKit está basado en el motor KHTML, desarrollado por el proyecto KDE para su navegador Konqueror y debido a esto, el motor interno de Safari es software libre, además Webkit incluye los componentes WebCore y JavaScriptCore.

Su última versión es Safari 4 ejecuta JavaScript casi ocho veces más rápido que IE 8 y más de cuatro veces más rápido que Firefox 3 gracias a su nuevo motor JavaScript Nitro. Otras características añadidas son la herramienta Top Sites, una copia del Speed Dial de Opera que muestra los sitios más visitados en un mundo 3D o Cover Flow, que permite consultar el historial y los favoritos ofreciendo una vista previa a toda pantalla, entre otras. Soporta además los innovadores estándares HTML 5 y CSS con unas avanzadas aplicaciones web multimedia, fuentes tipográficas y gráficos, y es el primer navegador que superó la prueba Acid3 que examina si los navegadores cumplen los estándares web CSS, JavaScript, XML,DOM, ECMAScript y SVG. Opera Opera Software Company desarrollo este navegador el cual es una suite de Internet gratuita desde su versión 8.50. En abril 2009 alcanza el ,68% en el mercado. Fue el primer navegador que implementó el sistema de pestañas Tiene una gran velocidad, seguridad y constante innovación. Su soporte de estándares - a través de su motor de navegación Presto - en especial CSS 2.1, además de HTML 4.01, XHTML 1.1, XHTML Basic, XHTML Mobile Profile, WML 2.0, XSLT, XPath, XSL-FO, ECMAScript 3 (JavaScript), DOM 2, Unicode, SVG 1.1 Basic, GIF89a, JPEG, HTTP 1.1, y completo soporte para PNG, incluyendo transparencia alfa, entre otros. También incluye Speed Dial, personalización por sitio, vista en miniatura por pestaña y los movimientos del ratón en la navegación, y tiene incorporado el cliente de correo Opera Mail y un chat IRC. Es multiplataforma para las versiones para Windows, GNU/Linux, Mac OS X, Solaris, QnX, OS/2, Symbian OS, FreeBSD y BeOS, también existe Opera Mini para móviles sencillos y Opera Mobile para teléfonos inteligentes y ordenadores de bolsillo, así como dispositivos de Java ME-enabled.

Es el único navegador disponible para la nueva generación de videoconsolas Nintendo DS y Wii, también algunas decodificadores digitales de televisión

usan Opera, y Adobe Systems integró la tecnología de Opera para usarla en Adobe Creative Suite.

Google Chrome Creado por el más famoso motor de búsqueda Google en 2008, se basa en el proyecto de software libre y código abierto Chromium, el motor de navegación de WebKit y su estructura de aplicaciones. Es el 4to navegador más usado desde el 2009 con un 1.80% de internautas.

Combina tecnología sofisticada y un diseño minimalista, con interfaz gráfica de usuario simple y eficaz. Es veloz, seguro y estable.

Google Chrome está disponible para Microsoft Windows, Windows Vista y Windows XP SP2, en 2009 salió la versión de Google Chrome para Mac OS X(Leopard) y Linux destinada principalmente para los desarrolladores web, la razón que google comenta es que son aún poco estables e incluso recomiendan no descargar estas versiones pues cuenta con limitaciones importantes con un software incompleto e impredecible. Con un motor de renderizado Webkit Google Chrome soporta los estándares HTML, Javascript y CSS, cuyo proceso de instalación no requiere reiniciar el navegador para empezar a funcionar, tiene un modo independiente de las pestañas, de manera que si una falla no afecta al resto ni al navegador.

La nueva versión soporta varios elementos adicionales (add-ons), entre ellos están Dual View Plugin, dividiendo el panel de visualización en dos mitades permitiéndote navegar por dos sitios simultáneamente; ChromePass, recupera contraseñas y nombres de usuario almacenadas en el navegador Google Chrome; o XChrome, un completo gestor de temas que además instala diferentes skins con el click de un botón.

Google Chrome implementó HTML 5, reproduce vídeos a través de la etiqueta “vídeo” sin necesidad de utilizar Flash,ha aplicado Google Wave que va a revolucionar la forma de compartir información pues además de permitir a los usuarios charlar y compartir documentos, mapas y enlaces en tiempo real, también permite múltiples formas de interacción basados en la nube (Cloud computing).

Metadatos Para lograr que una aplicación web se posicione en una jerarquía preferente en los motores de búsqueda, mientras más palabras clave contengan los metadatos más fácil será de localizar. Es recomendable trabajarlas en altas y bajas, en siglas, completas, con errores ortográficos, etc…

Son la principal fuente para que nos localicen en internet ya que es por ellas que los usuarios potenciales acceden a nuestro servicio o aplicación. Estas palabras clave se encuentran en los metadatos de la aplicación web.

Para poder llegar a los primeros lugares del ranking tenemos que hacer una larga lista descriptiva de metadatos para posteriormente agregarlos y así tener un posicionamiento SEO o SEM según sea el caso y generar un ROI. Los metadatos son las etiquetas que describen la cabecera del documento.

El uso de estas etiquetas es invisibles al usuario; sirven para poner el título de la página y la meta información la descripción, Keywords, autor, hoja de estilos, etc.

ImaGen Hacer una captura de pantalla de una practica con metadatos y anexarla, así mismo convertir en imagen la siguiente lista de metadatos como en el libro verde.

<Marketing Digital> SEO (Search Engine Optimization) o bien, Optimización para Motores de Búsqueda / Posicionamiento Web. Su objetivo es posicionar paginas en los primeros resultados de búsqueda para determinadas palabras clave. Optimisa contenido y codigo de las paginas.

SEM (Search Engine Marketing) marketing de buscadores, Crea campañas de anuncios por clic en internet a traves de buscadores como Yahoo o Google para publicitarnos en sus medios de búsqueda o redes de contenidos, es un metodomuy eficaz para lanzamiento de productos. Puede aumentar el tráfico de la página a través de lo que se denomina tráfico pagado.

ROI (Return on Investment) Mide el porcentaje de la rentabilidad de un negocio o inversión, gestiona campañas de marketing online y Google Adwords ROI = [Ingresos generados por la publicidad - costo de publicidad (inversión)] / costo de la publicidad * 100%

<Lo que ves es lo que tienes>

WYSIWYG/ What You See Is What You Get Se le denomina así a las aplicaciones que nos permiten ver el código y lo que ocurre de una manera visual, previsualizando el resultado.

Dreamweaver El más famoso de los editores WYSIWYNG es Dreamweaver, lanzado en 1997 para Mac y posteriormente para PC en 1998, en la actualidad forma parte de la Creative Suite de Adobe.

Brinda soporte para HTML, CSS, JavaScript y PPHP entre otros. Es posible combinar las vistas de diseño y código o manejarnos sobre una de ellas en particular. Lo que nos ayuda a tener un mayor control sobre el desarrollo que estemos realizando. La versión CS 5.5 asimila perfectamente las características de HTL5 y CSS.

Brackets Es un editor de código abierto para el diseño y desarrollo web con soporte para HTML, CSS y JavaScript. Permite trabajar directamente en el navegador editando el código al instante de forma fluida entre el código y el mismo navegador.

Notepad Es una aplicación gratita desarrollada para Windows, que permite escribir código fuente de una gran variedad de lenguajes como HTML5, XML, CSS, JavaScript, PHP, Ruby, Perl y SQL, entre otros.

Ofrece marcado de color de la sintaxis, envoltura de sintaxis, niveles de zoom, soporte para macros y la posibilidad de usar extensiones, además de estar disponible en diferentes idiomas.

HTML5 { Estructura y Componentes } HTML5 se caracteriza por ingresar nuevos elementos como es la semántica, por sus nuevas posibilidades multimedia, las nuevas funciones de formulario, mostrando una nueva faceta para el internet.

En la lengua cuando se habla de semántica se refiere al significado que tienen las estructuras y elementos lingüísticos que la componen. En un lenguaje de programación la semántica es el significado que tienen los elementos.

La Web semántica se divide en tres componentes: Semántica que considera lo que realmente significan los conceptos.

La que considera cómo los conceptos se relacionan entre sí y cómo están organizados.

La sintaxis de cómo se comunican estos conceptos y relaciones.

<Metadatos>

Los metadatos contienen la meta información de la página en los cuales es posible incluir información relevante sobre la propia página. Es posible incluir cuantos sean necesarios. La etiqueta empleada es <meta>.

Metadatos de contenido Son los que se refieren al título, palabras clave o etiquetas.

Metadatos de contexto: Son las que nos indican las circunstancias como autor, fecha de publicación, ubicación, ©…

Los metadatos deben ubicarse como lo muestra el ejemplo (según su etiqueta correspondietne):

<html> <head> <title>título de la página</title>

METADATOS </head> <body> Contenido de la página </body> </html>

Para definir el nombre y el valor del metadato:

<meta name=”autor” content=”Ismael Lopéz “ /> Para indicar al servidor que el contenido de la página es código HTML y su codificación de caracteres es UTF-8 (es una propiedad de meta de gran importancia):

<meta http-equiv=”Content-Type” content=”text/ html; charset=UTF-8”/> Este es al igual es de gran importancia y es muy utilizado ya que establece las palabras clave que definen el contenido del documento, para los motores de busqueda:

<meta name=”keywords” content=”diseño, css, hojas de estilos, web, html” /> Para indicar al navegador que el valor del metadato hace referencia al código ISBN:

<meta scheme=”ISBN” name=”identificador” content=”789-1392349610”> Para el autor del documento:

<meta name=”author” content=”Juan Pérez” /> Establece el programa con el que se ha creado el documento:

<meta name=”generator” content=”WordPress 2.8.4” /> Para la codificación de caracteres del documento:

<meta http-equiv=”Content-Type” content=”text/ html; charset=UTF-8” /> <meta http-equiv=”Content-Type” content=”text/ html; charset=ISO-8859-1” /> Para definir el copyright del documento:

<meta name=”copyright” content=”librosweb.es” />

Establece el comportamiento de los buscadores:

<meta name=”robots” content=”index, follow” /> Descripción del sitio:

<meta name=”description” content=”Artículos sobre diseño web, usabilidad y accesibilidad” />

Ejemplo de metadatos <meta name=”rating” content=”General” /> <meta name=”robots” content=”all,index,follow” /> <meta name=”revisit-after” content=”3 days” /> <meta property=”dc.Language” content=”es-MX” /> <meta property=”dc.source” content=”http://http://www.diplomado.com” /> <meta property=”dc.title” content=”© 2013 diplomado.com” /> <meta property=”dc.subject” content=”Tiene por objeto social el promover y fomentar el...” /> <meta property=”dc.creator” content=”ENAP-(empresa) Universidad Nacional Autonoma de México “ /> <meta name=”author” content=”Vitalis Martínez Álvarez” /> <meta property=”dc.description” content=”Este sitio web-tiene es parte del diploamado...” /> <meta name=”geo.region” content=”es” /> <meta name=”geo.placename” content=”México” /> <meta name=”Designer” content=”nombre de los diseñadores y programadores” /> <meta name=”Publisher” content=”nombre del publicista (Universidad Nacional Autonoma de México)” /> <meta name=”google-site-verification” content=”Numero de Google” /> <!-- ... !GENERATED CODE STARTS HERE! ... -->

<!-- This site is optimized with the SEO --> <meta name=”description” content=”ESte sitio web -tiene por objeto....” /> <link rel=”canonical” href=”www.diplomado.com” /> <meta property=”og:locale” content=”en_MX”/> <meta property=”og:type” content=”article”/> <meta property=”og:title” content=”DIPLOMADO SITIOS WEB DINAMICOS”/> <meta property=”og:description” content=”Descripcion del diplomado”/> <meta property=”og:url” content=”www.diploamado.com”/> <meta property=”og:site_name” content=”Diplomado Sitios web disnmicos 2014”/> <meta property=”article:author” content=”Propiedad del autor del sitio V.M.A”/> <!-- / END SEO. -->

<Cabeceras y atributos de texto> HOLA MUNDO

Headings Los títulos son el inicio de cualquier redacción por tanto es importante que sea el primer aprendizaje.

En un documento dentro del <body> podemos estructurarlo mediante títulos o cabeceras dentro de HTML5 los niveles que nos ofrece van de <H1>… hasta <H6>, por medio de una etiqueta <h1></h1> donde según sea el nivel es el número.

<Textos y propiedades de texto>

Los textos cuentan con distintans propiedades para poder tener mas orden, jerarquía y en ciertos casos hasta diseño para esto, veremos a continuación las distintas propiedades que podemos hacer a nuestro texto y el código HTML que se requiere para lograrlo.

Formatos Físicos y lógicos

Tipos de letra espĂŠcificos y genĂŠricos

Distintos tama単o de letra:

SangrĂ­a y Tabuladores

Acento ASCII

Lista

Lista normal

Lista no ordenada

LĂ­nea Horizontal

Intercalando formatos

#Links {Uso y propiedades}

Un link o tambiĂŠn conocido como enlace es un elemento ya sea de texto o de imagen el cual tiene la propiedad de poder llevarnos a otro documento con un pinchado.

Con este es posible saltar a otra pagina o poder acceder otro lugar en la misma donde se encuentra el enlace

Metadatos

Refrescar una pagina en otra

Ejemplo de uso de metadatos

Enlace en texto

Enlace en texto con ASCII

Propiedadesd el Link

Refrescar una pĂĄgina en sĂ­ misma

Correos CC y BCC

Imagen y localizador de carpetas, con texto alternativo <img src=”imagenes/jpg/foto2.jpg”width=”134” height=”191” align=”texttop” alt=”foto de un señor”/>

Enlace “Map” el uso de map nos deja enlazar una parte de una imagen con otro link según las instrucciones que le demos.

<Texto con Lorem Ipsum>

Lorem Ipsum es un generaor de texto de relleno para archivo de texto, ha sido el texto de relleno en la industria desde 1500 por un impresor lamentablemente desconocido quien uso una galeria de textos y los mezclo hasta hacer formar un libro de textos. Cuando llego la era electronica tomo los textos de lorem Ipsum quedando igual al original.

Gracias a estos textos podemos hacer una distribuci贸n m谩s o menos normal de las letras, los editores de paginas web lo utilzan mucho para su desarrollo. http://es.lipsum.com/feed/html

Es posible elegir el numero de parrafos, palabras, bytes etc... a continuaci贸n se muestra en la imagen las opciones.

Propiedes de parrafo (centrado, alineado, justificado y alineado a la derecha.

<Código ASCCI>

Anteriormente se nombraron ya algúnos ejemplos de código ASCCI pero ¿qué es en sí el código ASCCI? American Standard Code for informatio interchange/ Código americano Estándar para el intercambio de Información. Creado en 1963 por el Comité Estadounidense de Estándares (ASA), este organismo cambio su nombre en 1969 por “InstitutoEstadounidense de Estándares Nacionales” o “ANSI” como se lo conoce desde entonces.

Este código nació a partir de reordenar y expandir el conjunto de símbolos y caracteres ya utilizados en aquel momento en telegrafía por la compañía Bell. En un primer momento solo incluía letras mayúsculas y números, pero en 1967 se agregaron las letras minúsculas y algunos caracteres de control, formando así lo que se conoce como US-ASCII, es decir los caracteres del 0 al 127.

Así con este conjunto de solo 128 caracteres fue publicado en 1967 como estándar, conteniendo todos lo necesario para escribir en idioma ingles.

En 1981, la empresa IBM desarrolló una extensión de 8 bits del código ASCII, llamada “pagina de código 437”, en esta versión se reemplazaron algunos caracteres de control obsoletos, por caracteres gráficos. Además se incorporaron 128 caracteres nuevos, con símbolos, signos, gráficos adicionales y letras latinas, necesarias para la escrituras de textos en otros idiomas, como por ejemplo el español. Así fue como se sumaron los caracteres que van del ASCII 128 al 255.

IBM incluyó soporte a esta página de código en el hardware de su modelo 5150, conocido como “IBM-PC”, considerada la primera computadora personal. El sistema operativo de este modelo, el “MS-DOS” también utilizaba el código ASCII extendido.

Casi todos los sistemas informáticos de la actualidad utilizan el código ASCII para representar caracteres, símbolos, signos y textos (278) . http://www.elcodigoascii.com.ar/ En la siguiente liga podemos encontrar todos los códigos ASCII http://ascii. cl/es/codigos-html.htm

<Uso y propiedades de las tablas> Uso y propiedades Para generar tablas es indispensable el uso de <table> </table> a la cual le podemos poner las propiedades de whidth=” ” (ancho) y border” “(borde) que definiran a la tabla en conjunto, para las filas usaremos <tr></tr> las cuales se dividiran en columnas <td></td>. En eta sección incluiremos CSS. En la siguiente imagen se muestra un ejemplo de llo dicho anteriormente:

HTML

Se muestra a la derecha de la hoja

CSS

Se muestra a la Izquierda de la hoja

A continuación, manejo de <td class=”fo“>Color del fondo</td> y texto:

HTML

CSS

Este es un ejemplo de una imagen dentro de una tabla, el c贸digo es el de la franja azul.

Y es de esta manera como se pueden ingresar links en las tablas

Aplicación web {Estructura y componentes} MAnejo y uso del color Para una mejor aplicación del color es una gran idea ir por un buen camino de una forma sencilla y práctica de manera que no necesitemos estar peleando y desperdiciando tanto tiempo en los colores apropiados para nuestro sitio web.

•Para esto contamos con la ayuda de Paleton.com http://colorschemedesigner.com/ Donde tenemos un sin fín de opciones para lograr la combinación adecuada para la gama cromática del sitio solo es cuestión de abrirlo y comenzar a probar cada herramienta.

Además de que da la opción de vista previa y extraer la nomenclatura del color que necesitas.

En realidad es muy facil de usar solo se necesita abrirlo y comenzar a entender todas las opciones que te da.

•Este es otro Link donde podemos encontrar una solución a nuestra paleta de color. Una diferencia que tiene respecto a Paleton.com es que nos da la opción de usar para ofsset o para pantalla. http://websitetips.com/colortools/sitepro/

•Por ultimo tenemos esta herramienta de adobe en línea. EL plus de esta es que puedes subir una imagen y extraer los pantones de color. https://kuler.adobe.com/create/color-wheel/

Paleta segura Paleta de colores seguros, paletapara Web, el cubo del color, la paleta 6x6x6, paleta del colores para Netscape, paleta decolores para Explorer, entre otros son los nombres para esta paleta de color la cual esta compuesta por combinaciones de valores de RGB (Rojo, Verde, Azul,que son los únicos colores que despliegan en los monitores de las computadoras y laspantallas de televisión, estos se muestran en diminutos puntos que pueden ser capaces dedesplegar casi cualquier color) van de 0, 51, 102, 153, 204, o 255; todo esto se debe a queesta regida por una fórmula matemática. www.hipermarketing.com Los programadores de netscape crearon algo llamado “cubo de color” (6x6x6) que consiste en 216 colores de los 256 posibles y se debe a que los cuarenta restantes varian de PC a MAC, por lo que fueron eliminados para poder así optimizar lapaleta en ambas plataformas.

A continuación, una tabla que contiene los 216 colores:

* Para explorer en Windows

*Para Mac y Windows

*Para Netscape en Windos

<Optimización de imagenes y objetos media>

En el Mundo virtual un mundo de imagen de las cosas más importantes que puede haber para la persuasión son las imágenes que ilustraran el contenido. Pero para que no generen tanto peso en nuestros archivos y tengamos una web ligera es importante saber optimizarlas claro, esto despúes de haberlas eligido con cuidado, manipulado a nuestra conveniencia y con un buen retoque.

La manipulación de la imagen nos ayuda a corregir brillos, contrastes, saturación, exposición, efecto de ojos rojos o cualquier error en nuestra imagen Para esto contamos con nuestros programas amigos Ilustrator y Photoshop.

En ilustrator podemos convertir un logo en .svg para establecer una imagen por medio de coordenadas, y photoshop nos da la opción de optimizar de una manera muy sencilla y para distintos formatos.

Para la optimizaci贸n de las im谩genes con Photoshop: 1-Se abre la imagen en photoshop 2-Guardamos la imagen para web 3-elegir el formato para la optimizaci贸n (Tratar de que los colores no bajen de 256) 4-Guardar 隆Listoooo!

En ilustrator podemos si no es tal cual optimizar, existe algo que a un diseñador web le puede servir bastante y es usar el formato .svg que esta regido por un sistema de coordenadas que indican los nodos de cada color, es un formato muy empleado para logos que tiee la ventaja de que la imagen no se puede copiar.

1-Se abre o hace la imagen en ilustrator (sin degradados ni muchos puntos críticos) 2-Guardamos la imagen en formato .svg, antes de que se guarde se abira una ventana que aparecee en la siguiente imagen.

3-le damos en obtener coordendas 4-se abrira una ventana emergente con el código de las coordenadas, se copia solo el código de svg en dreamweaber en la parte de body como lo muestra la imagen de abajo y... ¡Listoooo!

Imágenes .jpg, .png y .gif Lo más importante es conocer la diferencia entre los formatos con pérdidas y sin pérdidas, entre estos los tres más destacados son jpg png y gif.

JPG: Para fotografías, contiene muchas texturas y detalles complejos por lo tanto no es tan importante perder calidad de la imagen original.

PNG: Formato para capturas de pantalla, dibujos, bocetos Imágenes en las que hay amplias zonas con el mismo color.

GIF: Similar a PNG, pero actualmente utilizado sólo para imágenes animadas.

PNG y JPG son formatos comprimidos internamente para conseguir ocupar menos espacio en disco: Imágenes JPG: Con un valor entre 1 y 100 (más alto, menor compresión y mayor tamaño) Imágenes PNG: Con un valor entre 0 y 9 (más alto, mayor compresión y menor tamaño)

http://www.emezeta.com/articulos/la-guia-definitiva-para-optimizar-imagenes

<Sección Aurea>

Sección aurea es la división armónica de una recta en media y extrema razón.

El segmento menor es al segmento mayo, como este es a la totalidad de la recta.

Para mejor entendimiento es como cortar una línea en dos partes iguales de manera que el segmento mayor sea a toda la línea, como el menor es al mayor.

Se trata de una relación de tamaños con la misma proporcionalidad entre el individuo mayor y el menor.

Se simboliza con (Æ) y la representación en números de esta relación de tamaños se llama número de oro= 1,618.

Euclides, en su libro Los Elementos, define una proporción basada en la división de un segmento en su “razón extrema y media”.

Platón decía: Es imposible combinar bien dos cosas sin una tercera, hace falta una relación entre ellas que los ensamble, la mejor ligazón para esta relación es el todo.

La suma de las partes como todo es la más perfecta relación de proporción.

Vitruvio, gran arquitecto romano inventa una fórmula matemática para la división del espacio basada en una proporción entre los lados más largos y los más cortos de un rectángulo, para esto se biseca un cuadrado y se usa la diagonal de una de sus mitades como radio para ampliar las dimensiones del cuadrado hasta convertirlo en rectángulo áurea, obteniendo así la proporción a:b= c:a. Si colocamos los elementos principales del diseño en una de las líneas que dividen la sección áurea, se consigue el equilibrio entre estos elementos y el resto del diseño.

Si cortamos adecuadamente un rectángulo áureo en un cuadrado de lado el ancho del rectángulo y en un rectángulo entonces el rectángulo pequeño también es un rectángulo áureo. Y podemos seguir este proceso indefinidamente.

Para lograr tener una armonía visual y resaltar ciertos puntos que nos interese que el espectador ponga atención es importante no dejar en el abandono la idea de que la proporción aurea es una teoría que dice que la forma más perfecta de la belleza es la proporción.

La proporción áurea busca crear un lenguaje natural y claro que pueda asimilar con mayor facilidad nuestro cerebro.

Para leer una web, es recomendable de arriba a izquierda abajo a la derecha,

por lo que usando la sección áurea, los elementos deberían ir colocados en ella según su importancia.

<Maquetación>

La maquetación es una forma de distribuir los elementos de un sitio web.

En la actualidad con la llegada del HTML5, la maquetación consta de 2 etapas: 1- Se crea una estructura de etiquetas para albergar todo el contenido y las distintas secciones.

2- Se crea con CSS, consiste en darle a la página el aspecto visual que queramos y determinar la colocación en pantalla de todos los elementos.

1- Las etiquetas para la estructura en HTML5 son: <header> Delimita el cabecero de la página, puede haber varios en un mismo documento. <h1>, <h2>, <h3>, <h4>, <h4>, <h6> Sirve para el título de la página o de los artículos. <nav> Delimita los menús de navegación. <main> La parte de la web donde se encuentra el contenido. <article> Delimita una unidad independiente de contenido (noticias, artículos…). tiene sentido por si misma tanto en tu página como fuera de ella. <section> Son los apartados, subapartados, secciones o capítulos de un contenido independiente como el <article>, pueden haber varios <section> en un <article>. <aside> Es el área de la información relacionada con el contenido principal o anuncio. <footer> Es el pie de página, o el pie del contenido dependiendo donde se encuentre y lleva una información adicional mínima. <div> Cada contenido tiene una función distina a la cual le podemos dar significado el <div> es un contenedor genérico sirve para aplicar un código CSS a cierta parte, para englobar varios elemento en una misma etiqueta o simplemente englobarlos con algún motivo.

2- CSS Reset

Styles

Importado

CSS { Bases, propiedades y CSS externos } Son las tan nombradas hojas de estilo son las que le dan forma a un documento, ya que el lenguaje HTML esta limitado puesto que fue concebido para fines cientificos muy distintos a los actuales. Han utilizado técnicas como la utilización de tablas, imagenes transparentes para ajustarlas, utilización de etiquetas que no son estádares del HTML y otras, pero comunmente esto a ocacionado problemas y frustraciones.

Por estas razones es que se ha desarrollado este software.

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededordel año 1970.

En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS incluyendolo a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como “CSS nivel 1”.

El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como “CSS nivel 2”.

Al mismo tiempo, la siguiente recomendación de CSS, conocida como “CSS nivel 3”, continúa en desarrollo desde 1998 El primer navegador con soporte completo de CSS 1 fue la versión para Mac.

Propiedades

Selectores En CSS, los selectores son los patrones utilizados para seleccionar el elemento (s) que desea estilo. Cualquier elemento HTML es un posible selector CSS HTML5: <h1>¿Por què estamos aqui?</h1> CSS: h1 { font-size:36px; line-height:44px;

ont-family:Georgia, “Times New Roman”, Times, serif; font-style:italic;

text-shadow: #d3d4d5 3px 3px 2px; color:#bbce62; }

Selector de clase. Mediante un selector de clase podemos aplicar estilos a varios elemento HTML simultaneamete. Sa aplica utilizaremos un punto (.) seguido del nombre que asignaremos a la clase: html: <body> <p class=”.interesante”>Parrafo resaltado color gris...</p> <p>Parrafo normal... </p> <p>Parrafo normal... </p> <p class=”interesante”>Parrafo resaltado color gris...</p> </body> css: .interesante{color:#ccc;}

Selectores ID. Asigna un valor único en todo el documento. De manera que no puede ser utilizado dos veces en un documento. Definimos este selector, utilizando el signo(#) seguido del nombre que asignaremos al identificador ID. html: <div id=”contenedor”> css: div#contenedor { width:945px; text-align:left;

margin:0 auto;

/*border:1px #F00 solid;*/ /*background:#F00;Color de fondo rojo*/ } Selectores de contexto. Un selector contextual selecciona y aplica las propiedades css al elemnto(s) que esten contenidos dentro de otros elementos HTML. Los espacios son la clave para esto. html: <div id=”cabecera”> <!--Inicia Cabecera--> <p><a href=”index.html”>buscoAmigos,animales en adopción.</a></p> css: div#cabecera p a { position:relative; top:45px; width:285px; height:40px; display:block;

/*border:1px #009966 solid;*/ text-indent:-9999px;

Elementos Flotantes Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba.

La caja deja de pertenecer al flujo normal de la página, por tanto el resto de cajas ocupan el lugar dejado por la caja flotante.

La caja flotante se posiciona lo más que se pueda a la izquierda o lo más más que se pueda la derecha de la posición en la que se encontraba originalmente.

Declaraciones Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.

Valores El valor de declaración es la asignación que recibe la propiedad. Por ejemplo, la propiedad color podría recibir el valor red (rojo).

Agrupamiento A fin de disminuir declaraciones repetitivas dentro de hojas de estilo, se permite el agrupamiento de selectores y declaraciones.

Herencia Prácticamente todos los selectores que estén anidados dentro de selectores, heredarán los valores de propiedades asignados al selector exterior, salvo que se modifiquen de otra manera.

Comentarios Los comentarios se indican dentro de hojas de estilo con las mismas convenciones usadas en la programación Orden de Cascada Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. En estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalecerá.

Reglas de selector Las hojas de estilo también pueden primar sobre hojas de estilo en conflicto basándose en su nivel de especificidad

Incluir CSS3 externo en un HTML5

<!DOCTYPE html> <html lang=”es”> <head> <meta charset=”utf-8” /> <title>Incluyendo CSS3 en HTML5</title>

<link rel=”stylesheet” href=”./style.css” type=”text/css” media=”all” />

</head> <body> <section> <ul> <li>Un elemento</li> </ul> </section> </body> </html>

<Teoría de fluidos para dispositivos móviles> La navegación web a través de dispositivos móviles es de lo más común en la actualidad ya que hay una gran comercialización de estos en el mercado.

Los aparatos son generados para navegar en internet y se puede hacer sin inconvenientes puesto que la mayor parte de las páginas están a disposición hoy en día.

Para un diseñador web es importante recordar que las tecnologías cuentan con algo llamado touch y multitouch ya que estos marcan un cambio en el diseño de interfaces, puesto que ahora en vez de usar el mouse se usan los dedos, por tanto necesitamos desarrollar un diseño ergonómico para el usuario en la interfaz.

Algunas de las características de HTML5 útiles para el desarrollo de móviles son las posibilidades multimedia para audio y video, acceso a la API de geolocalización y características de formulario. Así como la creación aplicaciones web que puedan funcionar offl ine.

Existen diversos sistemas operativos para móviles.

Algunas compañías, como el caso de Apple, han desarrollado sus propios sistemas para dispositivos de este tipo.

Otras empresas han optado por soluciones que puedan adaptarse a diferentes clases de dispositivos, como el claro ejemplo de Android.

Diseño web fluido con HTML5 y CSS3 principalmente nos permite crear paginas web ocupan la totalidad del tamaño de navegador. HTML5, CSS3, JS permiten con mas rapidez convertir su pagina web en un modelo fluido.

Para crear paginas web fluidas tenemos que saber como trabajar con: fluid layout, fluid widths, fluidos: texto y imagenes, videos y iframes, fluid margins y paddings, fluidos: tables y forms, menu adaptable.

Para crear fluid layout se usa esta formula: target ÷ context = result target - font-size(o width) que tenemos en pixeles.(width se calcula en % y size en em)

context - font-size que tiene cada navegador y por predeterminado segun Mozilla es de 16px. result - resultado que obtenemos en em o en %.

Aunque el layout fluido es un avance interesante en contraposición con el layout fijo (bloque central con un ancho fijo, regularmente de 960px) no es ni mucho menos algo novedoso, hace muchos años que los diseñadores web lo usan. El layout responsive va mucho más allá.

Los layouts están basados en anchos por porcentaje y sus elementos se redimensionan si cambiamos la resolución o si visualizamos la página desde diferentes dispositivos.

<Responsivo>

El diseño sensible (o responsive) nos ofrece todo el control que tendríamos con un diseño de ancho fijo y nos ofrece muchísima más flexibilidad que el diseño fluido.

Diseño responsive. Se basa en la retícula (normalmente de 960 px de ancho) que se divide en un número igual de columnas ya sean pares o impares. Estas columnas pueden ser también elásticas (un porcentaje del ancho total) que hacen un ajuste aún más fino al dispositivo. La hoja de estilos CSS3 define por medio de media queries en qué pantalla se visualizará la página en función de una serie de parámetros como:

Se establecen: html: <div id=”container”><!--inicia container--> <div id=”header”>Este es el contenido de la etiqueta Div de diseño “header”</div> <div id=”navi”>Este es el contenido de la etiqueta Div de diseño “navi”</ div> <div id=”main”>Este es el contenido de la etiqueta Div de diseño “main”</ div> <div id=”section1”>Este es el contenido de la etiqueta Div de diseño “section1”</div> <div id=”section2”>Este es el contenido de la etiqueta Div de diseño “section2”</div> <div id=”section3”>Este es el contenido de la etiqueta Div de diseño “section3”</div> <div id=”section4”>Este es el contenido de la etiqueta Div de diseño “section4”</div> <div id=”section5”>Este es el contenido de la etiqueta Div de diseño “section5”</div> <div id=”section6”>Este es el contenido de la etiqueta Div de diseño “section6”</div> <div id=”aside”>Este es el contenido de la etiqueta Div de diseño “aside”</div> <div id=”aside_hide”>Este es el contenido de la etiqueta Div de diseño “aside_hide”</div> <div id=”footer”>Este es el contenido de la etiqueta Div de diseño “footer”</div>

Esto se hace desde:

Es recomendable poner apartado de un color distinto.

Luego de hacer los “div” en la parte de diseño se recorren los apartados como más nos acomode.

En la erramienta de dreamweaber pantalla se da el acomodo que se requiere para esta, luego en la de tableta y por último en la de telefono, a cada uno se le dará un diseño distinto donde pueden aparecer o desaparecer ciertos elementos según nosotros lo decidamos.

AsĂ­ la vista para escritorio:

Vista para tableta:

Vista Celular:

<Integración de elementos >

Favicon es un pequeño icono que puedes asociar a una página web para mostrarlo junto a la barra de direcciones de cualquier navegador. Los tamaños más comunes para faviconos, según la calidad del icono, son 16x16, 32x32, 48x48, 64x64 y 128x128. Existen uchas paginas para crearlos entre ellas esta http://www.favicon.cc/

Se integran en HTML5: </head> <link rel=”shortcut icon” type=”image/ico” href=”img/favicon/favicon2. ico”/> <body>

Códigos QR Son un tipo de códigos de barras bidimensionales. A diferencia de un código de barras convencional, la información está codificada dentro de un cuadrado, permitiendo almacenar gran cantidad de información alfanumérica.

Igual que en el favicon existen muchos generadodres de código QR a continuación dejo una lista de ellos. http://www.codigos-qr.com/ En estas páginas te dan el código html que debes insertar par tu código QR: <img src=”http://www.codigos-qr.com/qr/php/qr_img.php?d=http%3A%2F%2Fwww.headandshoulders.com.ve%2F&s=6&e=m” alt=”Generador de Códigos QR Codes”/>

Geolocalizaci贸n Google Maps (http://maps.google.com) es uno de los servicios de mapas m谩s populares en Internet y uno de los servicios gratuitos. Google genera el c贸digo para incrustarlo en tu HTML solo debes pedirselo como lo muestra la primera imagen.

Integración de videos Es recomendable subir el video a la web en youtube.

Se pulsa la opción compartir en automatico nos da la opción del link

En la opción de insertar vínculo te da la opción de IFRAME o enviar por correo.

<Formularios>

Los formularios permiten a los usuarios introducir datos los cuales son enviados a un servidor para ser procesados. Es un formato donde llenas casillas selección, botones de opción, o campos de text.

Sirven para registros, para consultar información, el envío de un e-mail o la actualización de una base de datos.

La etiqueta denominada <form> esel contenedor de los elementos del formulario (botones, cuadros de texto y listas deplegables). Además de recibir una serie de atributos para definir la forma de trabajo del formulario.

<input> deja definir un control de entrada en un formulario, definir tipos diferentes de elementos (botones y cuadros de texto)

Para los botones se pone: <input type=”button” value=”Botón normal” />

<div id=”contenido”><!--Inicia Contenido-->

<h1>Nuevo Usuario</h1>

<p>Aún no eres usuario de busco<span class=”amigo”>Amigos</span>. Es facíl conseguirlo, rellena el siguente formulario</p>

<form id=”nuevo-usuario” action=”#” method=”post”> Se definira el usuario y el título del formulario o la leyenda.

<fieldset id=”usuario”>

<legend>Información del usuario</legend> Lista no ordenada en html, para insertar los campos. Uno decide cuantos campos añadir. Label indica el nombre e imput la casilla. <ul>

<li>

<label for=”nombre”>Nombre:</label>

<input id=”nombre” name=”nombre” type=”text” value=”Nombre” /> </li> <li>

<label for=”apellidos”>Apellidos:</label> <input id=”apellidos” name=”apellidos” type=”text” value=”Apellidos”/> </li> <li>

<label for=”ciudad”>Ciudad:</label> <input id=”ciudad” name=”ciudad” type=”text” value=”Ciudad”/> </li> <li>

<label for=”email”>Email:</label> <input id=”email” name=”email” type=”text” value=”Email”/> </li> <li class=”textarea”>

<label for=”email”>Comentario:</label> <textarea cols=”15” rows=”2”>Comentario</textarea> Textarea es una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo

</li> </ul> </fieldset> <legend>Acceso</legend> <ul>

<li> <label for=”usuario”>Usuario:</label> <input id=”usuario” name=”usuario” type=”text” value=”Usuario”/> cuando se envian los datos con el botón activado se mandará la variable con el valor indicado y en caso contrario no se mandará ningún valor </li> <li> <label for=”contrasena”>Contrasena</label> <input id=”contrasena” type=”password” value=”Contraseña”/> </li> <!-- Contraseña no va con Ñ por que los id no llevan caracteres especiales--> </ul> <fieldset id=”acceso”> </fieldset> </form> </div><!--Termina Contenido--> <div id=”pie”><!--Inicia Pie de pagina--> <p><a href=”contacto.html”>Contactar busco Amigos</a> © Copyright 2014 Busco Amigos</p> </div><!--Termina Pie de pagina--> </div><!--Termina Contenedor--> <li><input type=”submit” value=”enviar”> </li>Botón de registro </body>

<Análisis de sitios web en internet>

Analizar un sitio web puede funcionar bastante para el diseñador web ya que comprender los códigos que otras páginas están utilizando nos pueda dar ideas que sirven bastante a la hora de expandir la creatividad y entender sus estrategias de tal forma nos podemos ir metiendo cada vez un poco más en el mercado y conociendo desde otro ángulo el mundo virtual en el que estamos trabajando, es de suma importancia familiarizarnos con la selva que ahora será nuestro hogar para poder gener un buen diseño en las aplicaciones web que realicemos.

Existen dos programas gratuitos que no podemos ignorar para el analisis de las paginas web de nuestro interes H5O v0.5.0.62 y Web Developer’s Toolbox.

H5O v0.5.0.62 Desarrollada para navegadores de Google Crhome. Sirve para analizar la página que uno desee con el obtendremos los headings de la página en cuestión de la manera en que estan organizados. https://code.google.com/p/h5o/. Este es el link para la insalación

El link que aparece en azul se arrastra a marcadores y esta listo para usarlo en el momento que se requiera con la pagina que se busque analizar.

Web Developerâ&#x20AC;&#x2122;s Toolbox.

Bibliogr

El gran libro de html5, css3 y javascript (en papel) Juan diego gauchat , s.a. marcombo, 2011 Negroponte, nicholas (1996) ser digital editorial caminho, Lisboa Camino al futuro (2ª ed.) (en papel) Bill gates , s.a. Mcgraw-hill / interamericana de españa, 1997 El gran Libro de HTML5, CSS3 y Javascript https://mega.co.nz/#!284g1K5Y!EALyrzX1MxaqRV4ALjKGuEeX0DI78Qrj7URxOBa_lbc Usabilidad Web HTML5 y CSS3 Revolucione el diseño de sus sitios web Autor; Christophe Aubry Diseño de págis web accesibles, Edición eletrónica: www.carm.es/ctra/cendoc/publicaciones/ Desarrollo de aplicaciones web Primera edición: marzo 2004 © Fundació per a la Universitat Oberta de Catalunya Av. Tibidabo, 39-43, 08035 Barcelona Material realizado por Eureca Media, SL © Imagen de portada: Ruth

REFERENCIAS: http://www.micentroweb.com/es/info/websited.php http://www.ibm.com/developerworks/ssa/library/wa-aj-smartweb/ http://www.micentroweb.com/es/info/websited.php http://www.sedic.es/clip39.pdf http://es.slideshare.net/rpedraza/arquitectura-de-la-informacion-v1?related=3 http://blog.uchceu.es/informatica/ranking-de-navegadores-de-internet-para-2014/ http://www.masadelante.com/faqs/que-es-un-navegador http://buscadores.about.com/od/conceptosbasicos/tp/Los-Buscadores-M-As-Populares-De-Internet. htm http://librosweb.es/xhtml/capitulo_10/metadatos.html http://www.fceia.unr.edu.ar/ingsoft/unidad14-4.pdf http://rua.ua.es/dspace/bitstream/10045/4412/4 BibliografĂ­a http://www.micentroweb.com/es/info/websited.php http://www.ibm.com/developerworks/ssa/library/wa-aj-smartweb/ http://www.micentroweb.com/es/info/websited.php http://www.sedic.es/clip39.pdf http://es.slideshare.net/rpedraza/arquitectura-de-la-informacion-v1?related=3 http://blog.uchceu.es/informatica/ranking-de-navegadores-de-internet-para-2014/ http://www.masadelante.com/faqs/que-es-un-navegador http://buscadores.about.com/od/conceptosbasicos/tp/Los-Buscadores-M-As-Populares-De-Internet. htm