Diplomado; Desarrollo de Sitios Web Dinámicos by tzayhri liliana

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 Tzayhri Liliana Santos Rodríguez Responsable académico Ing. Julio Cesar Romero Salvador México, D.F. 2014

# Módulo I Introducción.............................9 <La Revolución de las Comunicaciones Web> <EL PADRE DEL INTERNET, Lawrens Roberts> <WWW> <EL PADRE DE LA WEB, Tim Berners-Lee> <HTTP> <HTML> <HTML5> <Usuario/Cliente/ Servidor> <Transferencia> <Ventajas y desventajas de un sitio web> <Bases esenciales para un sitio web> <Conversión Web> <Aplicaciones Web Inteligentes> <Arquitectura básica> <Guía de estilo web> <Boceto Web Digital> Principios#de servidor.remoto {XAMPP, WAMPP, MAMP} <Navegadores> <Marketing Digital> <Lo que ves es lo que tienes>

HTML5 { Estructura y Componentes }..............................46 <Metadatos> <Cabeceras y atributos de texto> HOLA MUNDO <Textos y propiedades de texto> #Links {Uso y propiedades} <Texto con Lorem Ipsum> <Código ASCCI>

Aplicación web {Estructura y componentes}...............84 <Optimización de imagenes y objetos media> <Sección Aurea> <Maquetación>

CSS { Bases, propiedades y CSS externos }.....................101 <Teoría de fluidos para dispositivos móviles> <Responsivo> <Integración de elementos > <Formularios> <Análisis de sitios web en internet>

M贸dulo (II) JavaScript () { Estructura y Componentes }..............................168 <Etiquetas m谩s utilizadas en JavaScript> <Formas de Incluir c贸digo JavaScript> <Sintaxis> <Variables> <Tipos de variables> <Operadores> <Funciones> <Estructuras Condicionales> <Bucles/ciclos FOR> <Bucles/ciclos WHILE> <Eventos> <Validaci贸n de formularios>

JQUERY () { Biblioteca de JavaScript}.....................................219

<?php Módulo III;

<?PHP Introducción ?>...............................................222 <?php ?> <?PHP Instalación del ambiente de desarrollo para PHP ?> <?PHP Uso de variables ?> <?PHP CICLOS ?> <?PHP Interacción de PHP con MySQL ?> <?PHP phpMyAdmin ?> <?PHP Diseño web responsivo para dispositivos móviles ?>

Conclusión................................307 Glosario.....................................310 Bibliografía...............................319 Referencias bibliográficas......322

â&#x20AC;&#x153;La mejor forma de predecir el futuro es implementarloâ&#x20AC;? David Heinemeier Hansson

“La imaginación es más importante que el conocimiento. El conocimiento es limitado, mientras que la imaginación no” Albert Einstein

A mi mamá, familia, maestros y amigos Han sido el mayor impulso, mi inspiración para lograr cualquier desafío que la vida me ponga enfrente, la admiración y cariño que les siento me da la fuerza para seguir, aún cuando todo parece no tener mas remedio Gracias, por todo el apoyo que me han dado sin titubear por todo su amor y comprensión. Este camino a penas comienza , todo ha valido la pena y esa semilla que sembraron en mi germinará y dará deliciosos frutos. Mamá Especialmente te dedico a ti con mucho amor este y cada triunfo que venga aquí va en resumen uno de nuestros logros gracias por hacerme soñar y hacerme entender que puedo llevar esos sueños a la realidad. porque todo lo que conozco lo conozco por ti mi ángel.

Introducción

En la actualidad la web se ha convertido como medio de comunicación en el intrumento y pasatiempo más utilizado por el hombre del que es muy dificil escapar puesto que convirtiendose en un estilo de vida en el que la mayoría esta inmerso es necesario conocer y adaptarse a esta nueva era, donde la mayor parte de las personas pasan un tiempo conectadas, ya sea por necesidad o motivos personales, comuniandose entre sí como un pasatiempo o con motivos de trabajo, buscando cualquier tipo de información, se ha vuelto también un mercado donde, con facilidad es posible encontrar cualquier cosa en venta con diversas competencias, ya que, tanto pequeñas como grandes empresas la han usado para anunciarse. La web ha sobrepasado por mucho el objetivo principal para el que fue creada; la difusión entre la comunidad científica de documentos. Un sitio web tiene muchas ventajas ya que tanto para el usuario, como para el anunciante ahorran tiempo y dinero. Por ejemplo, en un caso de compra-venta, las empresas no necesitan de tanto tiempo para dar a conocer un producto, las publicaciones son imnediatas y para los usuarios pueden encontrar y elegir lo más adecuado para ellos, al precio que mas les ajuste. Una pagina web debe conformarse por un contenido concreto, limpio, claro, con un funcionamiento eficaz que logre transmitir un mesaje adecuado a las necesidades de comunicación de una empresa. Es importante nivelar entre la estética y la funcionalidad, la practicidad , rapidéz y el mantenimiento del sitio web, ya que claramente podemos observar que una pagina actualizada y cuidada al mas mínimo detalle se hace presente en el usuario por la calidad en cuanto información y el facil acceso a esta y sus componentes, sientendose comodos y seguros de tener en sus manos la mejor opción. En la presente memoria gráfica tenemos en esencia los temas del diplomado Desarrollo de Sitios Web Dinámicos, divididos en tres módulos. El primer capítulo lo constituye el módulo I el cual nos da una introducción a lo que es el diseño de desarrollo web viendo entre otras cosas HTML5 y css, para la construcción de páginas web. El módulo II explica la implementación de JavaScript, librerías de Jquery. Y por último el módulo III, nos proporciona el conocimiento básico para base de datos , donde se encontrara el uso de PHP y su interacción con MySQL. En cada módulo se abordarán los puntos vistos a lo largo del curso, cada uno de ellos cuenta con una explicación teórica y práctica, las etiquetas, y sintaxis de HTML, CSS, JavaScript y PHP, así como una exposición sobre la base de datos (MySQL). Cada punto desarrollado será ilustrado graficamente para reforzar mejor cada conocimiento.

<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.

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.

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.

“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.

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)

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.

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%

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.

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:

Establece el comportamiento de los buscadores:

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” />

<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”/>

<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.

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.

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”>  <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>

</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.

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”> <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.

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”> <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.

<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>  </ul> <fieldset id=”acceso”> </fieldset> </form> </div> <div id=”pie”> <p><a href=”contacto.html”>Contactar busco Amigos</a> © Copyright 2014 Busco Amigos</p> </div> </div> <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.

JavaScript () { Estructura y Componentes } “Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que luego son insertados en una página web y en programas más grandes, orientados a objetos mucho más complejos. Con Javascript podemos crear diferentes efectos e interactuar con nuestros usuarios. Este lenguaje posee varias características, entre ellas podemos mencionar que es un lenguaje basado en acciones que posee menos restricciones. Además, es un lenguaje que utiliza Windows y sistemas X-Windows, gran parte de la programación en este lenguaje está centrada en describir objetos, escribir funciones que respondan a movimientos del mouse, aperturas, utilización de teclas, cargas de páginas entre otros.” (Damián Pérez Valdés, julio 3 2007, http://www.maestrosdelweb.com/que-es-javascript/)

“JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.” (http://librosweb.es/javascript/capitulo_1.html)

La programación es un proceso mediante el cual se codifican una serie de instrucciones en un lenguaje determinado para ser decodificados y ejecutados por un sistema computacional, todo ello con el fin de resolver un problema o llevar a cabo una función específica. Un lenguaje de programación es un sistema de símbolos y reglas que permite la construcción de programas con los que la computadora puede operar así como resolver problemas de manera eficaz. Programar es cuestión de algoritmos, los algoritmos son la solución a cualquier problema de cómputo, donde se involucra la ejecución de una serie de acciones en orden específico. Los algoritmos son los pasos a seguir de estas acciones en un orden establecido.

Ejemplo de algoritmo: Lavarse los dientes 1.- enjuagarse la boca 2.-abrir la pasta de dientes 3.-tomar el cepillo y untarle la pasta 4.- remojar un poco el cepillo con pasta dental

En el mismo documento HTML

De manera externa

Dentro de un elemento HTML

Es el conjunto de reglas que deben seguirse al escribir el c贸digo para considerarse como correcto en el lenguaje de programaci贸n. En la sintaxis JavaScript se distinguen las may煤sculas y min煤sculas, no se define el tipo de las variables y se pueden incluir comentarios.

Es un elemento que se emplea para almacenar y hacer referencia a otro valor. Las variables en JavaScript se crean mediante la palabra reservada var. Ejemplo del uso de variables:

var numero1 = 3; var numero2 = 1; var resultado = numero1 + numero2; Declarar una variable La palabra reservada var solamente se debe indicar al definir por primera vez la variable, lo que se denomina declarar una variable. Si tambi茅n se le asigna un valor se dice que la variable ha sido inicializada. Ejemplo:

Definici贸n:

var numero_1; var numero_2;

Inicializaci贸n: numero_1 = 3; numero_2 = 1;

var resultado = numero_1 + numero_2;

Las variables de javaScript se crean mediante la palabra reservada var pero la forma en que se les asigna un valor depende de este mismo por eso se calsifican de la siguiente manera: Numéricas El valor se indica aplicando directamente el número ya sea decimal o entero.

var num=12.3; var numero=32; Cadenas de texto En estas variables se involucran caracteres, palabras y frases de texto, para asignar el valor a la variable es necesario encerrarlo entre comillas dobles o simples.

var mensaje = “Cadenas de texto”; Arrays Un array es una colección de variables, pueden ser todas del mismo tipo o cada una de un tipo diferente.

Booleanos Solo permite almacenar dos tipos de valores “false” o “true”

Los operadores en JavaScript nos permiten manipular el valor de las variables, realizar operaciones matemáticas con sus valores y comparar diferentes variables. Gracias a estos es posible realizar cálculos complejos y la toma de decisiones lógicas. Operadores de Asignación. Se usa para almacenar el valor específico de una variable.

var iva = 16;

var pi = 3.141516 var isr = 16;

var porcentaje = 10; var edad = 18;

Operadores de Incremento y Decremento Válidos para variables numéricas y se utilizan para incrementar o decrementar su valor en una unidad.

var pagina = 30;

++pagina; //incrementa a 31 var pagina = 40;

--pagina; //disminuye a 39

Operadores AritmĂŠticos Realiza operaciones matemĂĄticas entre variables.

Operadores Relacionales Eval煤a la relaci贸n entre dos operadores y devuelve un valor l贸gico, verdadero, o falso.

Operadores L贸gicos Normalmente se emplean para comparar dos expresiones con operadores relacionales y devuelve un valor verdadero o falso.

Se asigna un nombre a un conjunto de instrucciones que realizan cierta funcionalidad. Se usan cuando se necesita utilizar las mismas instrucciones en varios lugares, ya que sรณlo tendremos que escribirlas una vez y referirnos al nombre de la funciรณn existente. Su sintaxis es la siguiente:

function nombreDeLaFunciรณn (param1, param2,..., paramn){ instruciรณn JavaScript; instruciรณn JavaScript; ...; }

Son sentencias dadas en el programa nos permiten que si se cumple una determinada condición el programa devuelva un resultado u otro, según la evaluación de una determinada circunstancia. Estructura IF Realiza un “sí” lógico. Es la estructura más usada para comprobar una condición. Su sintaxis es la siguiente:

if (condición) { ... codigo ... }

Si se busca realizar otra acción cuando el resultado es falso entonces se escribirá así:

else { ... instrucciones javascript ... }. El siguiente ejemplo muestra un código completo de una estructura condicional con if:

if ( condición ) { instrucciones javascript } else { instrucciones javascript }

Anidar Estructuras if Se admite en una instrucción if colocar otra instrucción if. Es un punto muy útil puesto que en ocasiones queremos elegir entre más de 2 opciones y por tanto evaluar más condiciones.

if (condicion) { sentencias javascript; } else if (condicion) { sentencias javascript; } else if (condicion) { sentencias javascript; } ..... else { sentencias javascript; }

Un bucle es una estructura de programación la cual permite repetir varias veces una acción hasta que se cumpla una determinada condición. Su sintaxis es la siguiente:

for (inicialización; condición; actualización) { ...Sentencias javascript ... } Ejemplo

for (var i = 1; i <=8 ; i++ ) { ...sentencias javascript... }

Este ciclo muy parecido a for pero menos complejo, en este caso se utiliza si se requiere que el ciclo se ejecute mientras una condición sea cierta. Su sintaxis es:

While(condición){…sentencias javascript, que se ejecutan si la condición es cierta…} Ejemplo:

var x=1; while(x<11) {document.write(x,” ”)}; X++;}

Es un suceso que ocurre cuando el usuario realiza alguna acción de esta manera podemos controlar las acciones de los visitantes y definir un comportamiento de la página. Por ejemplo, cuando el usuario pasa el ratón encima de un evento de la página, el cambio de valor de un formulario, la pulsación de un enlace, dar click en un botón, etc. Algunos eventos no los produce el usuario sino el navegador como pasa en la carga de una página. Los eventos se definen en las etiquetas HTML, aunque no todas tienen la capacidad de capturar eventos. Los eventos se capturan mediante los manejadores de eventos y se realizan mediante funciones JavaScript llamadas por los manejadores de eventos.

<Validación de formularios>

Formularios

Una de las principales razones por las que se creó este lenguaje de programación fue la necesidad de validar los datos de los formularios de una manera más directa, evitando así la recarga de la página para que el usuario se diera cuenta de los errores cometidos al rellenar los formularios. Sin embargo con la aparición de AJAX, los formularios, como la actividad principal de JavaScript ya no es, actualmente JavaScript se usa más para las comunicaciones asíncronas con los servidores y para la manipulación dinámica de las aplicaciones. Su sintaxis, en una estructura básica es la siguiente:

<form name=”formulario”> <input type=”text” name=”elemento” /> </form> Elementos del formulario Textarea: Es el elemento del formulario donde el usuario podrá escribir libremente El código HTML más básico para un textarea es el siguiente:

<textarea class=estilotextarea></textarea> Button: Los botones HTML con la etiqueta button se utiliza con una apertura de etiqueta <BUTTON> y una de cierre </BUTTON>. Entre las dos etiquetas, de apertura y cierre, se coloca el contenido que irá dentro del botón. Tiene la particularidad que se pueden colocar dentro del botón los contenidos que se desee, es decir, entre la etiqueta de apertura y cierre se puede colocar texto a voluntad, pero también otras etiquetas HTML, como imágenes, saltos de línea, negritas o lo que podamos necesitar.

Atributos del formuario Una de las principales razones por las que se creó este lenguaje de programación fue la necesidad de validar los datos de los formularios de una manera más directa, evitando así la recarga de la página para que el usuario se diera cuenta de los errores cometidos al rellenar los formularios. Sin embargo con la aparición de AJAX, los formularios, como la actividad principal de JavaScript ya no es, actualmente JavaScript se usa más para las comunicaciones asíncronas con los servidores y para la manipulación dinámica de las aplicaciones. name: Asigna un nombre al botón. Al enviarse el formulario se enviarán los datos del botón bajo este nombre. type: Indica el tipo de botón: button para un botón normal, reset para un botón de borrado de datos del formulario y submit para un botón de envío de formulario. value: para especificar el valor de un botón. El valor es lo que se enviará por formulario, en el momento del submit. Puede haber diferencias entre navegadores. disabled: Sirve para deshabilitar el botón

Objetos select y option

SELECT: MĂŠtodos del objeto

SELECT: Eventos del objeto

OPTION: Propiedades principales

Los objetos radio y checkbox

Principales eventos

Validación Dividiremos los formularios en cuatro tipos los primeros serían los de “cuadro de texto y textarea”, luego los “radio botones”, “select” o bien “listas desplegables y por último los “checkbox” los cuales se asemejan mucho a los radio botones pero tienen la diferencia de que se pueden seleccionar de forma independiente respecto de los demás. Algo indispensable en el uso de los formularios es el uso de la propiedad “value” la cual sirve para establecer el valor del texto mostrado. Cuadros de texto y textarea

Radio botones

Select

Expresiones regulares Como ya se había dicho es recomendable validar los datos mediante JavaScript insertados por el usuario así de forma instantánea se le notificara sin causar tantas molestias, mejora la experiencia del usuario y reduce la carga de procesamiento de un servidor. Una expresión regular, a menudo llamada también patrón, es una expresión que describe un conjunto de cadenas sin enumerar sus elementos, realizan manipulaciones de cadenas de texto. JavaScript encuentra subcadenas que concuerdan con un patrón definido y posteriormente lo evalúa según las instrucciones dadas. Son estas las que nos ayudan a validar algunos aspectos del formulario. A continuación un fragmento visual tomado del “tutorial sobre expresiones regulares en javascript para validación de campos en formularios html” que se puede encontrar en la página: http://www.lsi.us.es/docencia/get.php?id=1795 donde encontraremos mayor información.

Ejemplos de validaciĂłn con expresiones regulares: Validar un nĂşmero de CP

Validar texto

Validar un telĂŠfono

Validar una direcci贸n de email

JQUERY () { Biblioteca de JavaScript} Es una biblioteca de JavaScript, es decir un conjunto de funciones que ya fueron desarrolladas y probadas creadas para usarlas de una manera simplificada. Algo fascinante de JQuery es el hecho de ser software libre y código abierto. Fue creada inicialmente por John Resig y presentada el 14 de enero de 2006 en el BarCamp NYC. Posee doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privados. jQuery nos permite agregar efectos y funcionalidades complejas a nuestra aplicación web, como galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, realizar programación asíncrona. Implementando JQuery en un documento HTML Para agregar las librerías de JQuery en un documento HTML debe ser dentro de las etiquetas Script. La librería debe agregarse según la ruta en la cual se encuentre almacenada dentro de nuestro sitio, para que sea reconocida. “Para simplificar, podríamos decir que jQuery es un framework Javascript, pero quizás muchos de los lectores se preguntarán qué es un framework. Pues es un producto que sirve como base para la programación avanzada de aplicaciones, que aporta una serie de funciones o códigos para realizar tareas habituales. Por decirlo de otra manera, framework son unas librerías de código que contienen procesos o rutinas ya listos para usar. Los programadores utilizan los frameworks para no tener que desarrollar ellos mismos las tareas más básicas, puesto que en el propio framework ya hay implementaciones que están probadas, funcionan y no se necesitan volver a programar.”

(Miguel Angel Alvarez Director de DesarrolloWeb.com)

Sintaxis para llamar la librería dentro de HTML:

<?PHP

Introducción

“PHP (acrónimo de “PHP: Hypertext Preprocessor”) es un lenguaje de ‘código abierto’ interpretado, de alto nivel, embebido en páginas HTML y ejecutado en el servidor. Este lenguaje se caracteriza porque solo es interpretado pero no compilado, y es embebido en el código HTML, lo que le da una alto rendimiento y potencia” (Oscar Capuñay Uceda, p.99)

“En PHP, por lo general existen varias maneras de realizar una tarea específica. Algunas son mejores que otras, pero otras (en particular cualquier instrucción que requiera el comando globals) están completamente equivocadas. Eso siempre confunde a los programadores novatos de PHP, porque si existen diversas maneras correctas de realizar una misma tarea, ¿cómo saber cuál es la mejor? Las “mejores prácticas” han sido un tema recurrente en la comunidad de PHP durante varios años y se ha intentado responder a esa pregunta.” (Vikram Vaswani, 2010, p.XIX)

“¿Qué es PHP? Lo que distingue a PHP de algo del lado del cliente como Javascript es que el código es ejecutado en el servidor, generando HTML y enviándolo al cliente. El cliente recibirá el resultado de ejecutar el script, aunque no se sabrá el código subyacente que era. El servidor web puede ser configurado incluso para que procese todos los ficheros HTML con PHP, por lo que no hay manera de que los usuarios puedan saber qué se tiene debajo de la manga… … ¿Qué puede hacer PHP? Cualquier cosa. PHP está enfocado principalmente a la programación de scripts del lado del servidor, por lo que se puede hacer cualquier cosa que pueda hacer otro programa CGI, como recopilar datos de formularios, generar páginas con contenidos dinámicos, o enviar y recibir cookies. Aunque PHP puede hacer mucho más.” (https://php.net/manual/es/intro-whatis.php)

Es un lenguaje de programación creado para el desarrollo de páginas web, el cual es ejecutado del lado del servidor, interpretado por un servidor web (con un procesador de PHP que ejecuta el código y envía el resultado HTML al navegador) generando así la página web resultante. Se usa en la mayor parte de servidores, sistemas operativos y plataformas además tiene una gran compatibilidad con casi todos los motores de base de datos de la actualidad, sin costo alguno.

Sintaxis:

<!DOCTYPE html> <html lang=”es”> <head> <meta charset=”UTF-8” /> <title>Ejemplo básico PHP</title> </head> <body> <?php echo ‘Hola mundo’; ?> </body> </html> Echo no es realmente una función, es más bien un constructor de lenguaje que muestra los valores como parámetros.

<?php echo “Hola mundo”; ?> Sintaxis abreviada:

<h1><?=” Hola mundo “;?></h1> <?=”<h1> Hola mundo </h1>”;?>

Reglas generales para la redacción de php: En PHP para definir una cadena se puede usar comillas simples o dobles.

<?php echo “ Hola mundo “; ?> <?php echo ‘ Hola mundo ‘; ?> Es posible insertar código HTML dentro de las cadenas.

<?php echo “<h1> Hola mundo </h1>”; ?> Los saltos de línea no afectan la impresión de la cadena.

<?php echo “<h1> Hola mundo </h1>”; ?> Caracteres de escape. Si se requiere usar algún signo sin que se mal interprete como código se colocara una diagonal invertida \ antes del signo que se requiera.

<?php echo “<h1>Hola \”mundo\”</h1>”; ?>

Comentarios para una línea.

<?php // comentario de una sola línea ?> Comentarios para un bloque de líneas.

<?php /* comentario

de varias

líneas */ ?>

<?PHP Instalación del ambiente de desarrollo para PHP ?> Para poder manejar y conocer el código PHP es necesario tener las condiciones adecuadas en el ordenador, para poder ser utilizado como servidor de pruebas. Los proyectos de desarrollo generalmente nacen en un servidor local, donde se realizan indefinido número de pruebas y una vez concluida la fase de pruebas, se transfieren a un servidor remoto para su publicación. Para el desarrollo en PHP es necesario contar con Apache, MySQL y PHP. Este entorno de desarrollo es conocido como (Linux, Apache, MySQL y PHP) o WAMP (Windows, Apache, MySQL y PHP). Servidor web: Apache Apache es un servidor web / software de código abierto y libre, para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft Windows, Macintosh. Como dato curioso, fue nombrado Apache debido a que “Behelendorf quería que tuviese la connotación de algo que es firme y enérgico pero no agresivo, y la tribu Apache fue la última en rendirse al que pronto se convertiría en gobierno de EEUU, y en esos momentos la preocupación de su grupo era que llegasen las empresas y “civilizasen” el paisaje que habían creado los primeros ingenieros de internet.” ( http://es.wikipedia.org/wiki/ Servidor_HTTP_Apache) Puede ser descargado gratuitamente en http://httpd.apache.org/ como código fuente y en formato binario, para diferentes plataformas. Manejador de Base de Datos: MySQL MySQL (Su sigla en inglés se traslada a My Structured Query Language o Lenguaje de Consulta Estructurado) es un sistema de gestión de base de datos relacional que interactúa con PHP, es un software libre que se distribuye bajo licencia GNU GPL, patrocinado por una empresa privada, que posee el copyright de la mayor parte del código. Otros Sistemas Manejadores de Base de Datos (DBMS) son PostgreSQL, Oracle, SQLServer(Microsoft), IBM DB2. phpMyAdmin es una herramienta escrita en PHP de administrador de clases, destinado a dar a los usuarios la posibilidad de interactuar con sus bases de datos MySQL. El acceso a la interfaz de phpMyAdmin se realiza desde nuestro navegador (http://localhost/phpmyadmin)

PHP Conjunto de programas que nos permitirรกn solicitar otros programas escritos en este lenguaje de programaciรณn desde un servidor web, que posteriormente se mostrarรกn en el navegador en HTML, XHTML. XAMPP Es posible instalar cada programa que se necesita, por separado sin embargo XAMPP es un paquete configurado con todas esas funcionalidades. Existen diferentes versiones para Linux, Solaris, Mac y Windows, distribuidas bajo licencia GPL. Instalar XAMPP es muy sencillo solo es necesario seguir los pasos del asistente. Una vez instalado debes buscarlo en tus aplicaciones y ejecutarlo.

Para poner en marcha nuestro servidor web es necesario hacer clic en el botón “Start” situado al lado de la opción “Apache” pero para poder trabajar con páginas web dinámicas o sistemas de gestión de contenidos como Joomla!, WordPress, Omeka, etc. Necesitamos activar la opción de MysQL.

Cliente FTP Un cliente FTP es un programa con un protocolo FTP que se conecta a un servidor FTP y transfiere archivos, ya sea para descargarlos o para subirlos. Para utilizar un cliente FTP, se necesita conocer el nombre del archivo, el ordenador en que reside (servidor, en el caso de descarga de archivos), el ordenador al que se quiere transferir el archivo (en caso de querer subirlo nosotros al servidor), y la carpeta en la que se encuentra. Algunos clientes de FTP básicos en modo consola vienen integrados en los sistemas operativos, incluyendo Microsoft Windows, DOS, GNU/Linux y Unix.

<?PHP Uso de variables ?>

Una variable es donde se almacena un valor que corresponde a un tipo de dato soportado por el lenguaje de programación. Las variables se representan y se usan a través de una etiqueta ya sea asignada por un programador $NombreDeLaVariable El nombre de una variable es importante, ya que esto nos ayuda identificar a lo largo del programa que tipo de valor se almacenará. En PHP las variables se representan con un signo de dólar seguido por el nombre de la variable. El nombre de la variable se puede escribir con minúsculas y mayúsculas. Un nombre de variable válido tiene que solo usar caracteres alfanuméricos, de la letra A la Z y del 1 al 9, seguido de cualquier número de letras o números y caracteres de subrayado, no usar espacios en blanco, y no comenzar una variable con un número. Para asignarle un valor a una variable se utiliza el signo = Asignar un valor constante. Consiste en asignar un valor fijo a dicha variable.

<? $huesos= 206; ?>

Clases de variables Dependiendo de la información que contenga, una variable puede ser considerada de uno u otro tipo: Variables numéricas Almacenan cifras

Enteros Real

$entero = 14; $real = 3.1416;

Solamente números enteros Números decimales

Variables alfanuméricas Almacenan textos compuestos de números y/o cifras Variables que almacenan cadenas alfanuméricas

$cadena = “Hola Mudo”; PHP posee gran flexibilidad a la hora de operar con variables. Cuando definimos una variable asignándole un valor, el ordenador le atribuye un tipo. Si por ejemplo definimos una variable entre comillas, la variable será considerada de tipo cadena:

$variable=”6”; //esto es una cadena

Sin embargo si pedimos en nuestro script realizar una operación matemática con esta variable, no obtendremos un mensaje de error al no ponerle comillas, sino que la variable cadena será asimilada a numérica:

<? $cadena=”3”;

//esto es una cadena

$entero=2;

//esto es un entero

echo $cadena+$entero ?>

Si ejecutamos el script nos imprimira el resultado de la operación el cual en este caso sería “5“. A pesar de que su tipo sigue siendo cadena la variable cadena ha sido asimilada en entero para poder realizar la operación matemática. En PHP es posible operar entre variables tipo entero y real. En el proceso PHP interpreta el tipo de variable necesario para el buen funcionamiento del programa. Sin embargo, al cambiar mayúsculas por minúsculas si tendríamos problemas ya que PHP como ya lo habiamos indicado es sensible a estas. Conviene por lo tanto trabajar ya sea siempre en mayúsculas o siempre en minúsculas para evitar este tipo de malentendidos a veces muy difíciles de localizar, convirtiendose en un tormento para el programador cuando no funciona como se requiere. Variables asignadas por referencia En el caso de las variables por referencia, no se les asigna un valor, sino otra variable, de tal modo que las dos variables comparten espacio en memoria para el mismo dato. La notación para asignar por referencia es colocar un “&” antes del nombre de la variable.

<?php $name= ‘Tzayhri’; // Asigna el valor ‘Tzayhri’ a $name $bar = &$name; // Referencia $name vía $bar. $bar = “Mi nombre es $bar”; // Modifica $bar... echo $name; // $name también se modifica. echo $bar; ?> Esto dará como resultado la visualización dos veces del string “Mi nombre es Tzayhri”. Algo como:

Mi nombre es TzayhriMi nombre es Tzayhri

Arreglos Almacenan series de informaciones numéricas y/o alfanuméricas, estos a su vez pueden guardar tablas:

$dias[1]=”Lunes”; $dias[2]=”Martes”; $dias[3]=”Miercoles”; $dias[4]=”Jueves”; $dias[5]=”Viernes”; $dias[6]=”Sabado”; $dias[7]=”Domingo”; Un array es un conjunto de variables de una misma clase. Se accede a cada elemento individual del array mediante un número entero denominado índice. 0 es el índice o localizador del primer elemento y n-1 es el índice del último elemento, siendo n la dimensión, tamaño o longitud del array. Así $empleado[23] representaría al empleado con localizador 23. Los arrays son muy utilizados en la programación. Dependiendo de la cantidad de dimensiones que tengan pueden ser: De una dimensión (vectores). Por ejemplo $empleado[23] De dos dimensiones (matrices). Por ejemplo $butaca[3,

14]

De tres o más dimensiones (multidimensionales). Por ejemplo

$fecha[2012, 9, 22]

Para acceder a los elementos del array se utilizan los corchetes [ ], dentro de los cuales existirá un localizador o índice que es un número entero. Además, podemos guardar valores de cualquier tipo de variable (string, entero, punto flotante, booleano) dentro de un array. Por ejemplo $empleado[23]

podría tomar como valor $empleado[23] = “Juan Pérez Suárez”. En este caso se trataría de un array de cadenas de texto, es decir, un array de string. En otro caso $empleado[23] podría tomar como valor $empleado[23] = 2312. En este caso se trataría de un array de valores numéricos. En PHP no es necesario como en otros lenguajes declarar los arrays antes de poder usarlos ya que cuando se definen elementos de un array, PHP reconoce automáticamente que se trata de un array sin necesidad de declaración previa. Para saber el numero de elementos de un arreglo podemos utilizar en PHP la función count().

Matrices Las matrices son una especie de arrays (arreglos) de dos

dimensiones, o tablas. Cada elemento tiene una fila y una columna, se dice que la matriz tiene m filas y n columnas. AsĂ, cada elemento queda identificado por su fila i y su columna j. Ejemplo: $valor [0] [0] = 1; $valor [0] [1] = 14; $valor [0] [2] = 8; $valor [0] [3] = 3; $valor [1] [0] = 6; $valor [1] [1] = 19; $valor [1] [2] = 7; $valor [1] [3] = 2; $valor [2] [0] = 3; $valor [2] [1] = 13; $valor [2] [2] = 4; $valor [2] [3] = 1; Se identifica asĂ: 1 14 8 3 6 19 7 2 3 13 4 1

Arrays Multidimensionales Son los que tienen más de dos dimensiones. Se definen igual que las matrices pero añadiendo más índices.

<?php $semana [0] [0] [0] = “Lunes”; $semana [0] [0] [1] = “Martes”; $semana [0] [0] [2] = “Miercoles”; $semana [1] [0] [1] = “Jueves”; $semana [1] [0] [0] = “Viernes”; $semana [1] [0] [2] = “Sabado”; echo . $semana [1][0][0]; echo . $semana [0][0][3]; ?> En el ejemplo anterior estamos invocando un localizador [0][0][3] que no existe, o al que aún no le hemos asignado valor. Dependiendo del lenguaje y de la versión el resultado puede ser uno u otro. Debe tratar de evitarse invocar a una variable tipo array a la que no se haya asignado valor, ya que esto supone una inconsistencia o incoherencia. Si esto ocurre, PHP devolverá un valor “vacío”, que en este caso supondría que en la pantalla no se muestra nada asociado a esta variable. Por eso en la pantalla veriamos únicamente “Viernes” y nada más.

Una cookie es información que un navegador web almacena en el disco duro del visitante a una página web. Esto ocurre solo a petición del servidor web, ya sea directamente desde la propia página web con JavaScript o desde el servidor web mediante las cabeceras HTTP, que pueden ser generadas desde un lenguaje de web scripting como PHP. La información almacenada en una cookie puede ser recuperada por el servidor web en posteriores visitas a la misma página web. Las cookies son un protocolo de comunicación “sin estado” (stateless), no es capaz de mantener información persistente entre diferentes peticiones. Gracias a las cookies se puede compartir información entre distintas páginas de un sitio web o incluso en la misma página web pero en diferentes instantes de tiempo En PHP se emplea la función setcookie() para asignar valor a una cookie. La sintaxis es la siguiente:

Bool setcookie(string $name [, string $value [, int $expire [, string $path [, string $domain [, bool $secure [, bool $httponly]]]]]]) Para borrar una cookie, se tiene que asignar a la cookie una fecha de caducidad (expire) en el pasado, es decir, una fecha anterior a la actual. Para recuperar el valor de una cookie se emplea el array predefinido $_ COOKIE con el nombre de la cookie como índice. También se puede emplear $_REQUEST, que contiene la unión de $_COOKIE, $_POST y $_GET. En el siguiente ejemplo se cuenta el número de visitas que realiza un usua-

rio al visitar la página; este contador conserva su valor durante un año aún a pesar de que un usuario cierre el navegador y tarde días en volver a visitar la página:

<?php if(isset($_COOKIE[‘contador’])) { // Caduca en un año setcookie(‘contador’, $_COOKIE[‘contador’] + 1, time() + 365 * 24 * 60 * 60); $mensaje = ‘Número de visitas: ‘ . $_COOKIE[‘contador’]; } else { // Caduca en un año setcookie(‘contador’, 1, time() + 365 * 24 * 60 * 60); $mensaje = ‘Bienvenido a nuestra página web’; } ?> <?xml version=”1.0” encoding=”iso-8859-1”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> <title>Prueba de cookie</title> </head> <body> <p> <?php echo $mensaje; ?> </p> </body> </html>

En el código anterior, fíjate cómo se emplea la función isset() para comprobar si una variable ha sido inicializada. Importante: las cookies se envían al cliente mediante encabezados HTTP. Como cualquier otro encabezado, las cookies se deben enviar antes que cualquier salida que genere la página (antes que <html>, <head> o un simple espacio en blanco). Sin embargo, se puede emplear un buffer de salida para almacenar (retener) la salida generada, en cuyo caso se puede enviar un encabezado en cualquier momento, pero con la sobrecarga que supone por un lado almacenar en el servidor toda la salida antes de ser enviada y por otro lado no recibir la página en el cliente hasta que el código PHP no haya terminado completamente. Esto se puede lograr con las funciones ob_start() y ob_end_ flush() en la propia página, o configurando el parámetro output_buffering en el fichero php.ini.

Sesiones Para generar una sesión se requiere de un mecanismo

de programación de web scripting permitiendo así conservar información sobre un usuario al pasar de una página a otra. A diferencia de una cookie, los datos asociados a una sesión se almacenan en el servidor y nunca en el cliente. En la mayoría de las tecnologías de web scripting, las sesiones se implementan mediante una cookie que almacena un valor que identifica al usuario en el servidor web cada vez que pasa de una página web a otra. En el servidor web están almacenados todos los datos de la sesión y se accede a ellos cada vez que se pasa de página gracias al identificador almacenado en la cookie.

El siguiente ejemplo cuenta el número de visitas que realiza un usuario a una página web. A diferencia del contador realizado con una cookie en el ejemplo anterior, este contador sólo funciona durante el tiempo de existencia de la sesión, si el usuario cierra el navegador y vuelve a acceder a la página, el contador se reiniciará desde uno:

<?php session_start(); if(isset($_SESSION[‘contador’])) { $_SESSION[‘contador’] = $_SESSION[‘contador’] + 1; $mensaje = ‘Número de visitas: ‘ . $_SESSION[‘contador’]; } else { $_SESSION[‘contador’] = 1; $mensaje = ‘Bienvenido a nuestra página web’; } ?> <?xml version=”1.0” encoding=”iso-8859-1”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> <title>Prueba de cookie</title> </head> <body> <p> <?php echo $mensaje; ?> </p> </body> </html>

Para eliminar una sesión y junto con toda la información que contiene lo mejor es borrar explícitamente toda la información contenida en el array $_SESSION, borrar la cookie que contiene el identificador de la sesión y por último destruir la sesión:

<?php // Borra todas las variables de sesión $_SESSION = array(); // Borra la cookie que almacena la sesión if(isset($_COOKIE[session_name()])) { setcookie(session_name(), ‘’, time() - 42000, ‘/’); } // Finalmente, destruye la sesión session_destroy(); ?> Para controlar el acceso a una página web de una zona privada se suele emplear una variable de sesión que se inicializa con cierto valor en la página de control de acceso; en las páginas donde se quiere controlar si el usuario tiene permiso para acceder se consulta el valor de la variable de sesión para ver si tiene el valor esperado. Si no contiene el valor esperado, lo normal es mostrar una página con un mensaje de error o redirigir al usuario a la página principal del sitio web.

<?PHP CICLOS ?>

Las estructuras repetitivas / bucles/ ciclos son aquellas que reiteran una o un grupo de instrucciones “n” veces y dependen de una variable de control del ciclo. Ejecutan una o varias instrucciones un número de veces definido. Las instrucciones básicas que permiten construir este tipo de estructuras son while, do ... while y for.

While La instrucción while (que en castellano se traduciría como

“mientras…”) ejecuta una porción de programa mientras se cumpla una cierta condición. Mientras la condición sea verdadera, se ejecutan las instrucciones contenidas en el while. Cuando deja de cumplirse la condición, se sale del ciclo y se continúa ejecutando el resto del programa. Si la condición no se cumple ni la primera vez que se comprueba, las líneas en el interior del while no se ejecutarán ni una vez. La sintaxis es la siguiente:

<?php while(condición) { …sentencias; } ?> Mientras se cumpla la condición se realizan las sentencias, y en este caso si no se cumpliese la condición se seguiría ejecutando el programa o mostrando los contenidos de la página web justo después del cierre de la instrucción while.

En el siguiente ejemplo, las instrucciones dentro del while se ejecutarían tan solo 10 veces, mostrando los números de 0 a 9 separados por coma. Es importante cuidar el aspecto de no crear estructuras repetitivas que se ejecuten infinitamente (bucles infinitos) quedando el programa ‘atascado’ en dicho while en su descuido.

<?php $paletas = 0; while ($paletas < 10){ echo “paletas”; $paletas++; } ?>

Do while ( hacer… mientras) Es muy similar a la estructura while,

pero la expresión verdadera es verificada al final de cada iteración en lugar de al principio. La diferencia principal con los bucles while es que está garantizado que se ejecuten las instrucciones que contienen, al menos una vez y si se tiene que repetir el proceso se realiza al final de la repetición de la estructura. La sintaxis del bucle do while es la siguiente:

<?php do { …sentencias } while(condición); ?>

<?php $paletas = 0; do { echo â&#x20AC;&#x153;paletasâ&#x20AC;?; $paletas++; } while ($paletas < 10); ?>

FOR

(“desde…”) se utiliza generalmente cuando tenemos bien determinada la cantidad de repeticiones a realizar. Se debe incluir en la propia instrucción una variable de control, la cual se incrementa o decrementa de forma automática. La estructura de estas instrucciones viene a ser muy similar a la anterior. La sintaxis del bucle for es la siguiente:

<?php For($variable=valor_inicial; condición; incremento) { …sentencias; } ?> En este fragmento de código estaríamos indicando que mientras se cumpla la condición se realizan las sentencias, y en este caso si no se cumpliera la condición se seguiría ejecutando el programa. Todo esto es igual a la instrucción while anteriormente citada, salvo que en la propia declaración de la estructura se encuentra la variable de control, que en cada repetición se incrementa automáticamente. Esta instrucción consta de tres parámetros: 1.- Inicialización de la variable que se utilizará en la condición. 2.- Condición que se debe cumplir para permanecer en el ciclo. 3.- Modificación de la variable utilizada en la condición. Para modificar el decremento o incremento de la variable contador la denominamos i. Es habitual usar nombres como i, j, k para las variables contadoras en bucles.

<?php For ( $i = 0; $i < 50; $i+=5){ echo “ $i <br/>”;} ?>

Usando la instrucción += conseguimos que la variable contadora no vaya de uno en uno, sino que el paso (step) de la variable sea el número que nosotros deseemos. En este caso, hemos utilizado un incremento de 5 unidades en cada repetición del bucle. También podemos lograr el mismo efecto pero con decrementos usando – =.

<?PHP Interacción de PHP con MySQL ?> Ya antes hablamos de MySQL, pero acontinuacón veremos la manera en que podemos usarlo. ¿Qué es una Base de Datos? Las bases de datos son un conjunto de datos almacenados sistemáticamente para su uso posterior. Gracias al avance de la informática, la mayoría de las bases de datos se encuentran en formato digital, por lo que una de las formas para acceder a la información guardada en ellas es a través de una computadora.Php ofrece interfaces para almacenar y acceder a la mayoría de las bases de datos. Es siempre el mismo archivo el encargado de interactuar con la base de datos y es por eso que se llaman páginas dinamicas, ya que es siempre la misma y sólo cambia el contenido que se muestra en ella. MySql es la base de datos más común para utlizar con PHP, ya que es muy potente, gratuito y se encuentra en la mayoría de los servicios de hosting de páginas webs. Otras bases de datos que tenemos a nuestra disposición son PostgreSQL, ODBC, Oracle, IBM DB2, etc. La interacción entre php y las base de datos se realiza a través de herramientas propias del lenguaje Php, por un lado, y escribiendo los pedidos a la base de datos en un idioma universal, SQL (Structured Query Language) por otro, que podremos encontrar en todas las bases de datos. Características de MySQL Es una base de datos muy rápida en la lectura en aplicaciones web, convirtiéndola en la herramienta ideal para este tipo de aplicaciones. Por otro lado está disponible en gran cantidad de plataformas y sistemas, brindando a su vez, una conectividad muy segura. Nos da también una potencia sin igual, ya que utiliza SQL como lenguaje para consultar la base de datos. SQL es fácilmente portable a otras plataformas y nos brinda una gran escalabilidad, pudiendo manipular base de datos enormes con más de 50 millones de registros.

Procesamiento de formularios en base de datos Para tener una base de datos es común la creación de formularios, en HTML y PHP permitiendo la interacción entre el usuario y el sistema de base de datos en los puntos y aspectos que se definan. Registros La función insertar registros queda patente en todos los sistemas de información y bases de datos. Siempre será necesario alimentar las tablas de la BD de forma manual o automática. En tales casos, se emplean los siguientes elementos: Formulario HTML que contenga los campos de la base de datos. Los campos deben contener la denominación correspondiente con el atributo “name=” con la finalidad de que la información enviada a través del formulario pueda ser recuperada con la variable $_POST

o $_GET.

Contendrá además un botón SUBMIT para el envío de datos.

Estructura condicional en PHP que permita detectar si el usuario envió el formulario.

if($_POST[insert]){ instrucciones a ejecutar + SQL } “INSERT INTO tabla SET campo1=’valor1’, campo2=’valor2’” que permite la introducción o adición Instrucción SQL

de un nuevo registro en la tabla de la base de datos que se especifique. Método de redirección Javascript para que una vez insertado el registro la página del formulario sea actualizada.

GET Los datos del formulario son enviados al servidor a travĂŠs de los en-

cabezados HTTP, datos visibles en la URL y en los logs del servidor, es poco recomendado para datos de usuario.

POST Los datos del formulario son enviados al servidor como datos de la petici贸n, no se recomienda para pasar par谩metros de modularizaci贸n, paginaci贸n...

Modificar y eliminar registros Es esencial para la actualización de registros su edición y tratamiento. Para tener formulario de edición de registros se necesitan los siguientes elementos: Consulta SQL para mostrar todos los registros de la tabla especificada. La instrucción empleada es “SELECT * FROM tabla WHERE condición” que permite la selección de todos los registros de la tabla que cumplan la condición que se establezca. Estructura condicional en PHP “while” que permita recorrer todos los resultados obtenidos con la consulta, uno a uno, imprimiendo formularios para cada uno de los registros. Campo oculto El cual, almacenará el número de identificación del registro. El identificador permitirá indicar despúes sobre qué registro se realizarán los cambios efectuados. Además cada valor de cada campo tendrá que ser recogido en un campo de texto o área de texto del formulario a fin de que pueda ser modificable. Dos botones; el primero para el envío de datos que identifique que el registro será modificado con los nuevos valores que el usuario hubiese especificado; el segundo para indicar que el registro será eliminado de la base de datos. Cuando el usuario modifica uno de los formularios y hace clic en el botón de actualizar o modificar el registro, se necesita una estructura condicional en PHP que permita detectar si el usuario envió el formulario:

if($_POST[edit]){ instrucciones a ejecutar + SQL } if($_POST[delete]){ instrucciones a ejecutar + SQL }

Instrucción SQL para la acción de edición:

“UPDATE tabla SET campo1=’valor1’, campo2=’valor2’ WHERE id=’$_POST[id]’” Esta instrucción permite la modificación de los valores de los campos del registro especificado en la cláusula condicional WHERE. Es decir, la actualización o cambio de los valores se produce cuando el campo “id” de la tabla sea igual al valor enviado desde el formulario con el campo oculto que almacena el identificador del registro. Instrucción SQL para la acción de eliminación:

“DELETE FROM tabla WHERE id=’$_POST[id]’” Elimina el registro de la tabla cuyo campo “id” sea igual al valor enviado desde el formulario con el campo oculto que almacena el identificador del registro.

Buscar registros La función para buscar registros debe ser incluida en todas las tablas y no únicamente la capacidad de filtrado por campos. En ocaciones las tablas principales requieren métodos de consulta avanzados que permitan procesar consultas a texto completo. En este aspecto MySQL proporciona prestaciones a tener en cuenta: Formulario de consulta HTML con un campo de texto para que el usuario exprese la consulta y un botón para lanzar o ejecutar dicha consulta. Estructura condicional en PHP “if” que permita detectar que la consulta fue efectuada por el usuario al presionar el botón buscar.

if($_POST[search]){ instrucciones a ejecutar + SQL } Instrucción SQL para la acción de buscar:

“SELECT * FROM tabla WHERE indexer LIKE ‘$_ POST[query]’” Esta instrucción permite la comparación de la cadena de consulta del usuario con respecto al campo de indexación “indexer”. Estructura condicional en PHP “while” permite recorrer los resultados obtenidos con la consulta, uno a uno, imprimiendo formularios para cada registro.

GET Los datos del formulario son enviados al servidor a través de los en-

cabezados HTTP, datos visibles en la URL y en los logs del servidor, es poco recomendado para datos de usuario.

POST

Los datos del formulario son enviados al servidor como datos de la petición, no se recomienda para pasar parámetros de modularización, paginación...

<?PHP phpMyAdmin ?>

phpMyAdmin es una herramienta de software libre escrito en PHP , maneja la administración de MySQL a través de Internet. phpMyAdmin es compatible con una amplia gama de operaciones en MySQL, MariaDB y llovizna. Se utiliza en la gestión de bases de datos, columnas, tablas, índices, usuarios, permisos, relaciones, etc... Todo esto se puede realizar a través de la interfaz de usuario o yendo directo a cualquier sentencia SQL. phpMyAdmin ha ganado varios premios, fue elegida como la mejor aplicación PHP, ha ganado todos los años los Premios de SourceForge.net Comunidad como “Mejor herramienta o utilidad para los administradores de sistemas”. La siguiente lista son las características de phpMyAdmin según http://www.phpmyadmin.net/home_page/index.php “ 1. Interfaz web intuitiva 2. Apoyo a la mayoría de las características de MySQL: a. buscar y borrar bases de datos, tablas, vistas, campos e índices b. crear, copiar, bajar, cambiar el nombre y modificar bases de datos, tablas, campos e índices c. servidor de mantenimiento, bases de datos y tablas, con propues tas sobre la configuración del servidor d. ejecutar, editar y marcar cualquier SQL -statement, incluso por lotes-consultas e. administrar usuarios y privilegios de MySQL f. gestionar los procedimientos almacenados y disparadores 3. Importar datos de CSV y SQL 4. Exportar datos a varios formatos: CSV , SQL , XML , PDF , ISO / IEC 26300 - Texto OpenDocument y Hojas de cálculo, Palabra , L A T E X y otros 5. La administración de varios servidores 6. Creación de PDF gráficos de su diseño de base de datos 7. Creación de consultas complejas utilizando Consulta-por-ejemplo (QBE) 8. Buscando a nivel mundial en una base de datos o un subconjunto de la misma 9. La transformación de los datos almacenados en cualquier formato utilizando un conjunto de funciones predefinidas, como mostrar-datos BLOB como imagen o el link de descarga Y mucho más ...”

Modo de uso Para usar phpMyAdmin es necesario: 1. Activar XAMPP y contar con un navegador para las pruebas de PHP y HTML.

2. Ingresar a phpMyAdmin, para esto despĂşes de abrir el navegador se escribira en el browser http://localhost/phpmyadmin/

3. Crear una base de datos Al generar una base de datos es importante que el nombre coincida con el c贸digo php que se esta utilizando en el sitio web.

4. Localizar una base de datos ya creada.

4. Crear una tabla phpMyAdmin nos dejea elegir el nĂşmero de columnas que se requieran

4.1 llave primaria, llave foranea

Una llave primaria: Campo (o varios) que identifica 1 solo registro (fila) en una tabla. Ejemplo: Se tiene una tabla con datos de alumnos, el id del alumno o número de matricula puede establecerse como llave primaria, ya es un valor que no se repite; puede haber personas con igual apellido y nombre, incluso el mismo domicilio (padre e hijo por ejemplo), pero su id o matricula es único. Llave foránea: Campo o combinación de campos que permiten establecer y exigir el vínculo entre los registros de 2 tablas. 4.2 Crear columnas dentro de una tabla (Nombre, tipo, índice, A_I) El nombre de cada tabla servira para relacionar la información que se le suminstrara desde el sitio web a este campo. El ID es el campo único e irrepetible de tu tabla. Ejemplo. Muchas personas pueden llamarse igual que tú, pero la diferencia radica en la cédula ese campo no puede repetirse, entonces tu campo cédula es el ID. Tipo En tipo elegimos VARCHAR para todos las columnas de tipo cadena de caracteres. El significado de VARCHAR podemos verlo como “texto de longitud variable”. Como longitud/valores para los tipos de datos VARCHAR el número que pondremos será la longitud máxima en caracteres que podrán ocupar las columnas. El tipo número entero (INT), que se puede usar para el campo id (la longitud de INT no puede ser muy grande). Pero también existen los tipos de datos como números enteros, números autoincrementados de uno en uno para los campos tipo identificador, fechas, etc. Índice Los indices se utilizan para mejorar y agilizar la búsqueda de datos dentro de la tabla. Primaria: Es representativo. Debe ser uno que sea diferente cada vez que introducimos los datos de otro usuario y que sea bastante representativo. No debe haberdos iguales. Es el más usado los demás muchas veces no se seleccionan. Unico: Esta clave significa que no pueden haber dos o más datos con el mismo valor. --- : Esta casilla aparecerá activada si no se ha escogido ninguna de las tres

A_I En las últimas versiones de phpMyAdmin se añadio esta casilla. No hay más que marcar esta opción al crear o editar la columna de la tabla que contendrá la clave primaria, y el campo numérico incrementará automáticamente su valor cada vez que se inserte una nueva fila. 4.3 Agregar mas columnas En realidad es bastante facil, en la parte de arriba de la siguiente imagen podemos ver la opción de agregar mas columnas, uno puede indicar cuantas columnas mas agregar.

5. Agregar mas tablas

6. Exportar una base de datos Es de suma importancia seleccionar la base de deatos antes de pinchar en la parte â&#x20AC;&#x153;Exportarâ&#x20AC;&#x153;.

7. Exportar una tabla Se selecciona la tabla y luego se repite el proceso anterior.

8. Importar una base de datos

9. Eliminar una tabla

10. Eliminar una columna

11. Estructura / Examinar En la estructura podemos ver la composici贸n BD y en examinar la informaci贸n guardada en los campos.

12. Eliminar BD Lo primero que se debe hacer es seleccionar la opción BD y luego ahí seleccionar la BD que se quiere eliminar.

Parta información más especifica phpMyAdmin nos ofrece documentación en esta pagina http://www.phpmyadmin.net/home_

page/docs.php

<?PHP Diseño web responsivo para dispositivos móviles ?> Bootstrap Bootstrap, es el framework creado por Twitter, que permite crear interfaces web con CSS y JavaScript, que tiene la cualidad de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice, es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. A este concepto de adaptavilidad se le denomina como “responsive design” o diseño adaptativo.

Con el beneficio de usar responsive design en un sitio web el usuario no tendrá incomodidad a la hora de ingresar al sitio desde algún otro artefacto que no sea la PC. Los diseños que nos ofrece Bootstrap son simples, limpios e intuitivos, lo que les da agilidad a la hora de cargar además de que podemos modificarlos o crear nuevas cosas con algunos elementos de Boostrap. El Framework trae varios elementos con estilos predefinidos fáciles de configurar: Botones, Menús desplegables, Formularios incluyendo todos sus elementos e integración jQuery para ofrecer ventanas y tooltips dinámicos. Boostrap se construye en una tabla de 12 columnas adaptable. También hemos incluido diseños con un ancho fijo o fluido basados en ese sistema.

Ventajas 1.- Utiliza componentes y servicios HTML5 shim, Normalize.css, OOCSS, jQuery UI, LESS y GitHub. 2.- Es un conjunto de buenas prácticas que perduran en el tiempo. Características más destacadas: 3.– El famoso Grid system, (sistema de rejillas ) que por defecto incluye 12 columnas fijas o fluidas, dependiendo de si tu diseño será responsivo o no. 4.– El uso de LESS, que es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás, funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritméticas, entre otras, para acelerar y enriquecer los estilos en un sitio web. 5.– OOCSS, css orientado a objetos, que está organizado por módulos independientes y reutilizables en todo el proyecto. 6.– Cuenta con implementaciones externas como WordPress, Drupal, SASS o jQuery UI. 7.– Herramienta sencilla y ágil para construir sitios web e interfaces. Una vez que entiendido y dominado su funcionamiento, verás lo fácil que es hacer efectos y diseñar interfaces que ahorran realmente mucho tiempo de trabajo. 8.– Consta de un theme por defecto bastante optimizado y que puedes modificar o crear tu propio theme. Desventajas 1.– Es necesario aprender su forma de trabajo, comprender y familiarizarcecon su estructura y nomenclatura. 2.– Debes adaptar tu diseño a un grid de 12 columnas, que se modifican según el dispositivo. 3.– Bootstrap por defecto trae anchos, márgenes y altos de línea, y realizar cambios específicos es un poco tedioso. 4.– Es complicado cambiar de versión si has realizado modificaciones profundas sobre el core. 5.– Si necesitas añadir componentes que no existen, debes hacerlos tú mismo en CSS y cuidar de que mantenga coherencia con tu diseño y cuidando el responsive. 6.–El responsive funciona bien, pero a nivel de diseño en ocasiones se le escapan ciertos detalles que le quitan estética al sitio, además de que a pesar de tener bastantes elementos para tu página, la verdad son muy pocos y muy simples.

Preparando la página Antes de diseñar la estructura de las paginas es necesario realizar algunos preparativos importantes. Bootstrap utiliza algunos elementos HTML y propiedades CSS que requieren el uso del doctype de HTML5.5 el doctype se debe en todas las páginas con el siguiente código:

<!DOCTYPE html> <html lang=”es”> ... </html> Y descargar el código CSS y JavaScript compilado, en getbootstrap.com y pulsa el botónDownload Bootstrap.Ejemplo:

Es importante añadir la siguiente etiqueta dentro de la cabecera <head> de las páginas, para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos móviles:

Paneles Centrando los contenidos de la página Para centrar una página en la ventana del navegador, se necesita encerrar el contenido en un elemento con la clase .container:

<div class=”container”> ... </div> La anchura del contenedor varía en cada punto de ruptura del diseño para adaptarse a la rejilla. Los contenedores no se pueden anidar debido a la propiedad padding y a su anchura fija. Tipos de rejillas Como ya antes se menciono, Bootstrap incluye una rejila o retícula fluída pensada para móviles que cumple con el diseño webresponsive. Retícula de 12 columnas a medida que crece el tamaño de la pantalla del dispositivo. Bootstrap incluye clases CSS para utilizar la rejilla directamente en tus diseños. El diseño básico se puede crear con dos columnas, cada una suman y abarcan un número de 12 grids fundamentales.

<div class=”row”> <div class=”span4”>...</div> <div class=”span8”>...</div> </div> La estructura de las páginas basado en rejilla se realiza mediante filas (row) y columnas (grids) donde se colocan los contenidos: •Las filas siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de tipo.container-fluid (anchura variable). De esta forma las filas se alinean bien y muestran el padding correcto. •Las filas se utilizan para agrupar horizontalmente a varias columnas. •El contenido siempre se coloca dentro de las columnas.

•Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4) para crear rejillas rápidamente. También existen mixins de Less para crear diseños más semánticos. •La separación entre columnas se realiza aplicando padding. Para contrarrestar sus efectos en la primera y última columnas, las filas (elementos .row) aplican márgenes negativos. •Las columnas de la rejilla definen su anchura especificando cuántas de las 12 columnas de la fila ocupan. Si por ejemplo quieres dividir una fila en tres columnas iguales, utilizarías la clase .col-xs-4 (el 4 indica que cada columna ocupa 4 de las 12 columnas en las que se divide cada fila).

<div class=”row”> <div class=”span12”> Level 1 of column <div class=”row”> <div class=”span6”>Level 2</div> <div class=”span6”>Level 2</div> </div> </div> </div> <div class=”row-fluid”> <div class=”span4”>...</div> <div class=”span8”>...</div> </div>

CaracterĂsticas de cada rejilla

Rejilla creada con Bootstrap La rejilla con clase .col-md-*. En los dispositivos móviles extra pequeños o pequeños, esta rejilla se muestra verticalmente, pero en un ordenador medio o grande se ve horizontalmente.

Rejilla para móviles y ordenadores Para que no se muestren verticalmente en los dispositivos pequeños, están las clases .col-xs-* y .col-md-*:

Rejilla para móviles, tablets y ordenadores A continuación las clases .col-sm-* pensadas para tablets:

Anidando columnas Bootsrap también permite anidar columnas dentro de otras columnas. Para ello, dentro de una columna con la clase col-md-* crea un nuevo elemento con la clase .row y añade una o más columnas con la clase .col-md-*. Las columnas anidadas siempre tienen que sumar 12 columnas de anchura, tal y como muestra el siguiente ejemplo.

Elementos de Formularios Los formularios son uno de los elementos más importantes de los sitios y aplicaciones web. Bootstrap no se queda atras y permite diseñar formularios con aspectos muy variado, definiendo decenas de estilos para todos los campos de formulario.

Formulario básico Formulario en línea Formularios horizontales

Formulario bรกsico

Formulario en lĂnea

Formularios horizontales

Inputs Boostrap tiene una variedad para los campos de tipo <input> en cuanto a text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, y color.

Textarea Textos largos. Modificando el valor del atributo rows para ajustar el número de líneas necesarias.

Checkboxes y radio buttons Con estos es posible elegir distintas opciones dentro de una lista, mientras que los radio buttons permiten elegir una sola opci贸n entre varias.

Checkboxes y radio buttons en línea Los checkboxes y los radio buttons en línea ocupan menos espacio, para estos es necesario utilizar las clases CSS .checkbox-inline o .radio-inline.

Listas desplegables Para mostrar una lista desplegada, se debe añadir el atributo multiple.

Barras de navegación Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web. En los dispositivos móviles se muestran minimizadas pero si se pulsa sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente.

Ejemplo visto en dispositivo movil

Ejemplo visto en desktop

Bootstrap no ofrece ademas del estilo claro un estilo alternativo muy oscuro que se activa aplicando la clase.navbar-inverse a la barra de navegaci贸n.

Paginador Bootstrap incluye dos componentes para paginar los contenidos de tu sitio o aplicación web. El primero es un completo paginador que muestra enlaces para todas las páginas de resultados y el segundo es un paginador simple con los enlaces Anterior y Siguiente. Paginador por defecto El paginador por defecto de Bootstrap queda bien tanto para las aplicaciones como para los sitios web. Su diseño escala bien a un gran número de páginas y sus enlaces son fáciles de pinchar.

Enlaces activos y enlaces deshabilitados El aspecto del paginador se puede modificar para adaptanadolo a las necesidades especĂficas de cada uno. Aplica la clase .disabled a los enlaces que no se puedan pinchar y aplica la clase .active al enlace que corresponde a la pĂĄgina en la que se encuentra el usuario.

Cambiando el tamaño del paginador Gracias a las clases CSS especiales .pagination-lg y .pagination-sm puedes hacer el paginador más grande o más pequeño respectivamente.

Paginador simple Es ideal para sitios web sencillos como blogs o revistas. Este paginador solamente muestra dos enlaces para ir a la página Anterior o Siguiente de los resultados.

Alineando los enlaces del paginador simple Para esto se requiere de las clases CSS especiales .previous y .next.

Thumnails / Imágenes en miniatura El componente de imágenes en miniatura muestra lo más fácilmente posible varias imágenes que enlazan con su versión en alta resolución.

Con un poco de código HTML es posible añadir títulos, párrafos, botones o cualquier otro elemento a cada imagen en miniatura.

Mensajes emergentes Para mostrar un mensaje de alerta, se encierra dentro de un elemento con la clase .alert tanto el texto del mensaje como el botón opcional para ocultar la alerta. También se debe aplicar cualquiera de las otras cuatro clases .alert-* para indicar explícitamente el tipo de mensaje (advertencia, error, éxito, información).

Gráficos, Imágenes responsive Bootstrap no adapta el tamaño de las imágenes automáticamente. Para ello debes añadir la clase .img-responsive a cada imagen que quieras que se comporte de manera responsive. Esta clase incluye las propiedades max-width: 100%; y height: auto; para que la imagen escale en función del tamaño del elemento en el que se encuentra.

Componentes de interfaz Bootstrap incluye numerosos componentes CSS con las necesidades esenciales para los dise単os actuales en la web. Iconos (glyphicons) 180 iconos creados con una fuente Glyphicon Halflings. Es una fuente privada sin embargo, su creador permite utilizar estos iconos gratuitamente dentro de Bootstrap.

Cómo utilizar los iconos Por motivos de rendimiento, todos los iconos requieren de una clase CSS común para todos y de una clase CSS específica para cada uno. Para añadir un icono en cualquier elemento de la página, se recomiendo poner un espacio entre el icono y el texto para que se vea mejor:

<span class=”glyphicon glyphicon-search”></ span> Tooltip Un tooltip es un texto breve que se asocia a determinados elementos de la página, como lo son enlaces, campos de un formulario, imágenes, etc... y que típicamente contiene una descripción del elemento, información adicional o consejos útiles sobre el mismo. Un tooltip sólo se activa cuando se pasa el cursor sobre el elemento al que está asociado, ofreciendo al usuario información complementaria sobre el contenido de un elemento del sitio web. La librería Bootstrap de Twitter ofrece una elegante solución para implementar tooltips que permite incorporar diseño a los mismos, y aumenta su funcionalidad. Implementar un tooltip con bootstrap. 1.- Se sustituye el tag ‘title’ por los tags ‘rel=”tooltip”‘ y ‘data-original-title’.

2.- Añadir un código javascript para asignar la función “tooltip()” a los elementos marcados con ‘rel=”tooltip”‘:

3.- Para determinar en dónde va a presentarse el tooltip, se requiere del tag ‘data-placement=”POSICION”‘, en donde POSICION puede ser left, right, top o bottom. Ventanas de dialogo Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuery personalizado. Se puede usar para crear ventanas modales para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.

1.- link que abrirá la ventana:

2.- Debajo el código que representa la ventana en display:none.

Conclusión Para lograr un buen sitio web como diseñadores nos tenemos que enfrentas a la complejidad y la dedicación que conlleva. En este diplomado uno puede descubrir que es capaz de cosas que van mas allá de lo que un diseñador comúnmente crea, pero que complementa y nos hace crecer con una diferencia. Es necesario una metodología adecuada, dependiendo del sitio web a construir, un algoritmo en el que se reune información con el proposito de darle la mejor dirección al proyecto; bocetar, diagramar nos ayudará a tener el esqueleto de la página para despúes crearlo en HTMl, después vestir dicho esqueleto con el uso del CSS que aportará la parte visual y estética al sitio web, luego se le dará dinamismo con JavaScript y PHP y por último se creará la interconexión con una base de datos que será de utilidad para almacenar todo aquella información que el cliente necesite de sus respectivos clientes o usuarios, para esto es posible generar la base de datos son el apoyo de MySQL, realizar un sitio web requiere conocer bien este mundo de códigos y programas manejando los lenguajes, de cada uno de estos para para obtener como resultado un sitio web eficaz y competitivo. Los diseñadores tenemos el reto de captar y mantener la atención del usuario con un diseño que cree gran impacto, la mejor descripción del tipo de sitios web que tenemos que hacer esta en la palabra pregnante, pero además los sitios web deben comunicar lo que nuestros cliente necesita, sin interfierir con la funcionalidad de la página, en otras palabras debe lograr conciliar lo estético con la funcionalidad de esta tecnología y la practicidad. Más vale un contenido de calidad y facil de usar que deslumbrar con impresionantes efectos, una página cargada de interactivos, pero sin un diseño propositivo, puesto que un sitio web donde el usuario no encuentra la información que esta buscando de manera concreta, saldrá corriendo de ese sitio para buscar uno con un contenido mas específico y de mayor calidad, por tanto demasiada tecnología con un diseño descuidado no retendrá a nuestros usuarios por mucho tiempo. Por otra parte, es necesario crear sitios ligeros, el tiempo de carga puede hacer que un usuario lo considere como buena o mala opción, un diseño atractivo pero no optimizado para la características particulares que exige la web, puede entorpecer la navegación del usuario en nuestro sitio, haciéndolo migrar a otras páginas, sin siquiera darle un vistazo. La actualización es un tema que confiere totalmente a un diseñador, tiene que estar conciente de que al desempeñarse en el desarrollo web su preparación debe ser constante, que sepa moverse de la mejor forma en el área, puesto que día a día se generan novedades en torno a este tema. Cualquiera puede notar con facilidad, una constante y rápida transformación en la tecnología año tras año, a la cual como diseñadores web debemos adaptarnos e involucrarnos, evolucionar al mismo paso y si es posible un paso adelante de las circuntancias tecnológicas. Actualmente la demanda del mercado es muy variada y exigente, demandando la creación de páginas que implementen nuevas tendencias, como lo es el diseño responsivo, el cual se encuentra actualmente en su apogeo gracias a los dispositivos moviles que se han vuelto un boom. Esta circunstancia nos exige una constante actualización de conocimientos y adaptabilidad como diseñadores. Conocer sobre la creación de sitios web nos abre una amplia gama de posibilidades a nivel profesional, ya que esta tecnología se ha vuelto indispensable tanto en el ámbito cultural, académico y empresarial como en el personal y doméstico, aclamando el diseño. La web está en constante evolución y requiere de profesionistas que dominen las últimas innovaciones en el diseño de desarrollo web.

Glosario A Arquitectura cliente-servidor: Las capas lógicas son componentes de software de una aplicación implementada, distribuidas que interactuán, algunos ejemplos de plataformas que utilizan esta arquitectura son J2EE y CORBA. Existen diferentes tipos de capas lógicas, se nombran entre 3 y 4 capas, varía un poco el nombre de algunas de estas clasificaciones pero en esencia son casi lo mismo: (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.)

Buscador: Herramienta que permite encontrar contenidos en la Red, buscando a través de palabras clave. Se organizan en buscadores por palabra(como Lycos, Google o Altavista) y directorios o índices(como Yahoo!).

Caché: Almacenamiento de archivos en el disco duro para reducir el tiempo de descarga al volver a acceder a los archivos. Un navegador almacena las últimas páginas y archivos visitados por el usuario y, si alguna se solicita nuevamente, el navegador utiliza el que tiene almacenado en lugar de volver a buscarla en Internet Chat: Sistema de conversación en línea que permite que varias personas de todo el mundo conversen en tiempo real a través de sus teclados. Cliente: Aplicación que permite a un usuario obtener un servicio de un servidor localizado en la red. Cookies: Pequeños archivos con datos que algunos sitios Web depositan en forma automática en las computadoras de los visitantes con el objetivo almacenar información. CORBA: (Object Request Broker Architecture) primer producto propuesto por OMG (object management group) facilita el desarrollo de aplicaciones distribuidas en entornos heterogéneos).

DBMS: Es donde tiene lugar el verdadero procesamiento y almacenamiento de la información. DNS: (Domain Name Systemz) Sistema para traducir los nombres de los ordenadores en direcciones IP numéricas. Si pones en un navegador un URL, un servidor DNS lo traducirá en su equivalente numérico de IP. Dirección Electrónica: Serie de caracteres que identifican unívocamente un servidor o un recurso. Pueden ser una dirección IP, un URL, o una dirección de correo electrónico. Dirección IP: La dirección IP de una máquina conectada a Internet es un número que identifica a esa máquina Las direcciones IP constan de cuatro números separados por puntos, como 123.456.1.1 Como estos números son difíciles de recordar, a cada máquina se le asigna también un nombre, su nombre de dominio. Dominio: El dominio, o nombre de dominio, sirve para identificar cada servidor conectado a Internet con un nombre que sea más fácil de recordar (para un humano) que una dirección IP. Un nombre de dominio está compuesto de varias partes que suelen dar una idea de la localización física de la máquina. Un ejemplo de dominio puede ser yahoo.com.mx

Enlace: Link

FTP: (File Transfer Protocol): Servicio de Internet que permite transferir archivos (upload y download) entre computadoras conectadas a Internet.

GUI: Graphic User Interface o Interfaz Gráfica de Usuario GIF: (Graphics Interchange Format) Formato de archivos gráficos. Generalmente se usa para gráficos “planos”, no fotográficos, y puede tener zonas transparentes o ser animado.

Hipertexto: Forma de organizar información donde ciertos términos están unidos a otros mediante links. El hipertexto permite saltar de un punto a otro en un texto o en otros textos al hacer clic en un link. Aparte de la WWW, se utiliza en aplicaciones como la Ayuda de Windows o las enciclopedias en CD-ROM. Hiperlink: Enlace entre dos nodos de un hipertexto. Ver link Home Page: La primera página que aparece cuando un usuario entra a un sitio Web, que generalmente tiene links a las demás páginas Host o Hosting: Servidor que alberga a uno o varios sitios. Un host de Internet tiene una dirección de Internet única (direción IP) y un nombre de dominio único o nombre de host. HTML: (Hypertext Markup Language) Conjunto de símbolos o códigos que se insertan a un archivo para que sean desplegados en un browser . El código le dice al browser cómo desplegar las imágenes y los textos en la computadora del usuario. HTML5: (Hypertext Markup Language) Permite la reproducción interna de vídeos, audio y juegos. Todo ello sin que sean necesarios programas adicionales, como es el caso de Adobe Flash. Navegadores web 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. HTTP (Protocolo de Transmisión de Hipertexto) Sistema que permite enviar y recibir archivos de textos, imágenes, audios y vídeo. (Hypertext Transfer Protocol )

Interfaz: Es una conexión entre dos máquinas de cualquier tipo, funciona como soporte para su comunicación. Es así el lugar donde se desarrolla la interacción y el intercambio. Ejemplos: funciona como instrumento a modo de extensión del cuerpo humano, como el mouse que permite interactuar con una computadora, pero también existe como superficie siendo el objeto que aporta información a través de su textura, forma o color, como la imagen que vemos en pantalla de una computadora. Se conoce como interfaz de usuario al medio que permite a una persona comunicarse con una maquina. Está compuesta por los puntos de contacto entre un usuario y el equipo. Un ejemplo de interfaz es la pantalla del monitor o el teclado Internet: La red más grande de computadoras en el mundo, literalmente una “red de redes”, que utilizan un mismo protocolo de comunicación para intercambiar información, ya sea en forma de e-mail, páginas web, ftp, etc. Intranet: Utilización de la tecnología de Internet dentro de la red local (LAN) de una organización. Permite crear un sitio público donde se centraliza el acceso a la información de la compañía. Una Intranet permite optimizar el acceso a los recursos de una organización, organizar los datos existentes en las PCs de cada individuo y facilitar la colaboración entre los miembros de equipos de trabajo. IP (Internet Protocol, Protocolo de Internet): Estándar de comunicaciones de Internet. El IP provee un método para fragmentar (deshacer en pequeños paquetes) y rutear (llevar desde el origen al destino) la información.

J2EE : (Java 2 Enterprise Edition) Lenguaje de programación que permite a los desarrolladores escribir la programación de la aplicación una vez y lo ejecuten en cualquier dispositivo. Se ha convertido desde el 2012 unlenguaje de programación popular para aplicaciones de cliente servidor de web, con 10 millones de usuarios reportados Javascript: Lenguaje de derivado de Java, pero con instrucciones mucho más simples para utilizar en páginas Web, que permite aumentar la interactividad y la personalización de un sitio. JPEG: Formato para archivos gráficos. Los jpegs generalmente se utilizan para imágenes fotográficas y no pueden tener transparencia ni ser animados.

Link: Conexión entre dos documentos web, que puede ser a través de un texto, gráfico, o botón, y permiten al usuario saltar a otro documento (en el mismo sitio o en otro) al hacer clic sobre él.} Lógica de cliente: Es la interfaz a la cual el usuario final accede. (GUI) Lógica de presentació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.

MySQL: My Structured Query Language o Lenguaje de Consulta Estructurado Es un motor de base de datos SQL. Se usa como servidor a través del cual pueden conectarse múltiples usuarios y utilizarlo al mismo tiempo.

Navegación: Conjunto de estructuras, menús, links y elementos visuales que determinan la forma en que el usuario pasa de una sección a otra de un sitio.

OMG: Object Management Group (OMG) es un consorcio, originalmente destinada a establecer normas para los sistemas orientados a objetos distribuidos, y ahora se centra en la modelización (programas, sistemas y procesos de negocio) y las normas basadas en modelos.

Página Web: Archivo hecho con el lenguaje de programación HTML. Generalmente, contiene textos y especificaciones que le indican en donde se deben desplegar las imágenes o los archivos multimedia. Cada página Web es un archivo creado en HTML con su propia dirección en Internet (URL). Plug-In: Pequeño programa que se adiciona al browser y permite ver contenido distinto al HTML e imágenes, como sonido, video, o animaciones. PHP: (Hypertext Preprocessor) Es un lenguaje de código abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML.

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% Rollover: Efecto de cambiar una imagen por otra al pasar el cursor sobre ella. Generalmente se utiliza en botones y otros elementos gráficos para mostrar que son links. Resolución: Cantidad de pixeles, o puntos de color, que se encuentran en una determinada área (la medida estándar son pixeles por pulgada o ppp). Un archivo de 300 ppp tiene mejor calidad que uno de 150 ppp, pero también tendrá un peso mayor. El estándar para internet son 72 ppp.

Servidor: Computadora que ejecuta un programa para “servir” (es decir, mandar a quien los pide) los archivos que le son pedidos por un cliente. Estos archivos pueden ser páginas Web, archivos de multimedia, etc. Los archivos deben estar guardados dentro de la computadora para que ésta los pueda “servir” cuando le sean pedidos. Sitio Web (Web Site): Colección de archivos creados para Internet (páginas, gráficos, multimedia) sobre un mismo tema. Se puede acceder a un Sitio Web a través de su dirección o URL, que llevará a su Home Page, desde donde se puede llegar a las demás páginas o archivos en su sitio. 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. Optmisa 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. SQL: Es el lenguaje estándar ANSI/ISO de definición, manipulación y controlde bases de datos relacionales. Es un lenguaje declarativo: sólo hay que indicarqué se quiere hacer. En cambio, en los lenguajes procedimentales es necesarioespecificar cómo hay que hacer cualquier acción sobre la base de datos. El SQL es un lenguaje muy parecido al lenguaje natural; concretamente, se parece al inglés, y es muy expresivo. Por estas razones, y como lenguaje estándar, el SQL es un lenguaje con el que se puede acceder a todos los sistemas relacionales comerciales

URL (Uniform Resource Locator Localizador Uniforme de Recursos ): La dirección de un archivo (recurso) accesible por Internet El recurso puede ser una página Web, una imagen, un programa como una aplicación CGI o JAVA, o cualquier otro archivo soportado por el HTTP.

Webmaster: Administrador de sistema de un sitio o servidor, el cual es el encargado y responsable del mismo, además de ser en muchos casos el que da mantenimiento a las páginas contenidas en él. WWW: Abreviatura de World Wide Web, es la red global mundial de intercambio de documentos a través de hipertexto comúnmente conocida como Internet.

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

404 error

En la Web clientes y servidores se comunican entre sí por medio de HTTP cuando hay un problema en esta conversación aparece entonces el 404 error. El primer cuatro indica dos problemas: o la dirección de la web no está disponible o ya no existe. El cero indica un error de ortografía. El último cuatro nos lleva hacia una anomalía específica llamada “Acceso no autorizado”, es decir, sólo puede entrar a la página si tuvieras una contraseña. En las oficinas del CERN (Laboratorio Europeo de Partículas Físicas), Ginebra, Suiza. En los inicios de internet, alrededor de 1980, en el cuarto piso del CERN, en la sala 404, fue montada una base de datos, controlada por tres personas. Manualmente, ellos controlaban pedidos de archivos y los transferían hacia los solicitantes. Cuando sucedían errores, ellos alertaban: “Room 404 - File Not Found”. Más tarde, la expresión fue incorporada al mundo online por el físico inglés Tim Berners-Lee, el creador de la web.

Bibliografía

El gran libro de html5, css3 y javascript (en papel) Juan diego gauchat , s.a. marcombo, 2011 36 pasos básicos para desarrollar un sitio web, Carlos Javier Pes Rivas, S/Editorial, Primera edición, abril 2011 Alternativas para el desarrollo de Aplicaciones Web, Gonzales Rodríguez Leover Armando, Cuba, 2011. Principios de diseño básico para la creación de sitios web, Patrick Lynch, Editorial Gustavo Gilli, Barcelona 2000 Ser digital, Negroponte Nicholas,editorial caminho, Lisboa, 1996. SCHAFER Steven, (2010) M. HTML, XHTML y CSS. Anaya Multimedia 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 Estructura de sitios web [En línea], DLSI Universidad de Alicante. Fecha de publicación 2006. Disponible en: http://prezi.com/pwxdvg6q0cem/estructura-fisica-y-logica-de-las-aplicaciones-web/ Dreamweaver + Fireworks: Diseñe, construya y publique Demian Doyle Christina, PC USERS, Argentina, 2010. 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 Fundamntos de JQuery, http://librojquery.com/ Rebecca Murphey, con contribuciones de James Padolsey, Paul Irish y otros. Para un completo historial de contribuciones visite el repositorio en GitHub., Última actualización del libro: Agosto 2013 JavaScript: Manual de referencia, Jorge Sánchez (www.jorgesanchez.net) año 2003, Versión normalizada de la ECMA, llamado ECMAScript en: http://www.ecma-international.org/publications/standards/Ecma-262.htm Manual de JavaScript, Jose Antonio Rodríguez, Publicado en la página web www.internetmania.net, Adaptación del curso “Javascript desde cero”, publicado en: www.ciudadfutura.com/javascriptdesdecero Validación con Expresiones Regulares en JavaScript, Departamento de Lenguajes y Sistemas Informaticos, Grupo de Ingenieria del Software, Versión previa: David Benavides Cuevas (enero 2005) Nueva versión: Amador Durán Toro (enero 2006) Última revisión: Amador Durán Toro (septiembre 2006). http://www.lsi.us.es/docencia/get.php?id=1795 Introducción a JavaScript librosweb.es, Javier Eguíluz Pérez, junio de 2008 http://www.librosweb.es/javascript Manual de JQuery, Alvarez Miguel Angel. [En línea] [Fecha de consulta: 17 Noviembre 2014] Disponible en: http://www.desarrolloweb.com JQuery in action, Bear Bibeault, Manning Publications Co. United States of America, 2010. Fundamentos de Bases de Datos, Silberschatz, A.; Korth, H.; Sudarshan, S., Editorial: McGraw Hill. 4a edición, Madrid 2002 Tutorial de PHP y MySQL [En línea][Fecha de consulta: 25 diciembre 2014]. Disponible en: http://es.tldp.org/ManualesLuCAS/manual_PHP/manual_PHP/ index.htm/ Fundamentos de Sistemas de Bases de Datos , Elmarsi R. 5ª edición, Pearson Education, 2008. Fundamentos de Base de Datos, González, C., Editorial Prentice-Hall Hispa-

noamericana. México, 1990. PHP 5 a través de ejemplos, Abraham Gutiérrez, Editorial:Alfaomega, México 2005. Desarrollo Web con PHP, Oscar Capuñay Uceda (S/Bibliografia) Fundamentos de PHP, Vikram Vaswani, Editorial Mc Graw Hill,1ra Edición, México, DF,2010 Manual Impresindible de PHP5, Luis Miguel Cabezas Granado, Editorial Anaya Multimedia, Madrid, 2004 PHP Avanzado; Domine el lenguaje mas confiable y estable, Franciso José Minera, Editorial RedUsers, 1Edición Buenos Aires, 2011 PHP 5. Guía práctica para usuarios, Charte Ojeda Francisco. (2005) Anaya Multimedia. PHP 5.5 Desarrollar un sitio Web Dinámico e Interactivo, Oliver Heurtel, Ediciones Eni, Publicación: febrero 2014. Guia Escencial de PHP, Consentino Christopher, 2001, Prentice hall.

Referencias bibliogrĂĄficas

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 http://www.w3schools.com/jquery/jquery_intro.asp http://www.rubenalcaraz.es/pinakes/informatica/como-instalar-nuestro-propio-entorno-de-desarrollo-apache-mysql-y-php/ http://www.definicionabc.com/tecnologia/mysql.php#ixzz3OFjeAyuH http://php.net/ https://php.net/manual/es/intro-whatis.php http://www.phpmyadmin.net/home_page/index.php