Modulogaw2019.pdf

CARRERA PROFESIONAL COMPUTACIÓN E INFORMÁTICA

Gestión y Administración Web

Mg. Ing. David Gil Meza

Unidad Didáctica: Gestión y Administración Web

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO” Dirección Pasaje Olaya N° 180 Teléfono 044-233351 GESTIÓN Y ADMINISTRACIÓN WEB Guía de Aprendizaje Copyright © 2019 por David Gil Meza Todos los derechos reservados. Elaboración y diseño: Mg. Ing. David GiL Meza

Trujillo, marzo del 2019

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

1

Unidad Didáctica: Gestión y Administración Web

Información Curricular Unidad Didáctica

Gestión y Administración Web

Módulo Técnico Profesional N° 03

Gestión de Aplicaciones para Internet y Producción Multimedia

Competencia del Módulo Técnico Profesional

Diseñar, desarrollar, administrar, gestionar e implementar productos multimedia y aplicaciones para Internet, teniendo en cuenta los requerimientos del cliente.

Créditos

4

Semestre Académico

V

Turno

Diurno/Nocturno

Horas semanales

06

Horas semestrales

108

Capacidad Terminal

Planificar, implementar y administrar aplicaciones web de base de datos, de acuerdo a los requerimientos del cliente, aplicando conceptos, técnicas y herramientas especializadas para que la información organizacional llegue a los usuarios adecuados de forma adecuada y en el tiempo adecuado.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

2

Unidad Didáctica: Gestión y Administración Web

Introducción La internet y especialmente uno de sus servicios la Word Wide Web (WWW) son, posiblemente, los desarrollos más importantes en la historia de la computación. Estas tecnologías han llevado a cientos de millones de personas en el mundo a la era de la informática; además, se han convertido actualmente en parte integral de la vida diaria. En los primeros días de la WWW los “sitios web” consistían básicamente en un poco más de un conjunto de archivos de hipertexto enlazados que presentaban información mediante texto y gráficos limitados. Además, todos querían tener presencia en la web produciéndose un desarrollo caótico de la misma y una proliferación de sitios web desarrollados por entusiastas y aficionados. Con el paso de los años y el desarrollo y mejora de las tecnologías de internet, los sitios web han sufrido una natural evolución y con ayuda de tecnologías complementarias nacen las aplicaciones web que proporcionan capacidad de cálculo y procesamiento de información. Si bien es cierto las características de las aplicaciones web difieren a las de las aplicaciones tradicionales, es necesario que al igual que las aplicaciones tradicionales se dé un enfoque disciplinado que garantice un desarrollo, implementación y mantenimiento exitoso. Una vez que una empresa u organización cuenta con su sitio web, es una tarea frecuente la actualización de la información en el mismo, agregar recursos o ideas para mejorar su funcionamiento, así como también gestionar el espacio de alojamiento del sitio, cuentas de email, transferencia de archivos, actualizaciones de seguridad, respaldos, redireccionamiento, entre otras actividades con el fin de brindar un mejor servicio a sus clientes y usuarios. La tarea conlleva una gran responsabilidad para quien esté a cargo de la misma, ya sea por la información que se maneja, la interpretación correcta de lo que necesita el cliente para su implementación técnica y la difusión asociada a los fines de la organización/empresa/individuo. Esta experiencia didáctica es eminentemente práctica sin descuidar el necesario soporte teórico que permita al estudiante planificar, desarrollar, implementar y mantener el sitio web organizacional; gestionar contenidos, de acuerdo a los requerimientos del cliente, aplicando conceptos, técnicas y herramientas especializadas para que la información organizacional llegue a los usuarios adecuados de forma adecuada y en el tiempo adecuado. En tal sentido, al inicio se sitúa al estudiante en el contexto de las tecnologías web y el desarrollo de aplicaciones web con PHP y MySQL; luego, elaboran un proyecto de desarrollo web de acuerdo al proceso de la ingeniería web; a continuación, se entrena al estudiante para el uso adecuado de uno de los sistemas de gestión de contenidos más utilizados actualmente en el mercado como es WordPress. Finalmente, se presentan conceptos, técnicas y herramientas para optimizar y posicionar sitios web.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

3

Unidad Didáctica: Gestión y Administración Web

Tabla de contenido Información Curricular ....................................................................................................... 2 Introducción ....................................................................................................................... 3 Indicador de logro 1 ......................................................................................................... 10 Actividad 1: Formulación y planeación para aplicaciones web .................................. 11 Ingeniería web........................................................................................................................ 11 Atributos de los Sistemas y Aplicaciones basados en Web ........................................................................ 11 Estratos de la ingeniería web .................................................................................................................... 12 El proceso de Ingeniería Web ................................................................................................................... 13

Formulación y Planeación para Ingeniería Web ....................................................................... 14 Formulación de Sistemas Basados en Web ............................................................................................... 14 Planeación de Proyectos de Ingeniería Web ............................................................................................. 15

Actividad 2: Modelado de análisis para aplicaciones web ......................................... 17 Requisitos para el análisis de las aplicaciones web ................................................................... 17 La jerarquía de usuario ............................................................................................................................. 17 Desarrollo de casos de uso ....................................................................................................................... 17 Afinación del modelo de caso de uso ........................................................................................................ 17

El modelo de análisis para aplicaciones web ............................................................................ 17 El modelo de contenido .......................................................................................................... 18 El modelo de interacción......................................................................................................... 18 El modelo funcional ................................................................................................................ 18 El modelo de configuración ..................................................................................................... 18 Análisis relación – navegación ................................................................................................. 18

Actividad 3: Modelado de diseño para aplicaciones web .......................................... 20 Pirámide del diseño IWeb ....................................................................................................... 20 Diseño de la Interfaz de la WebApp......................................................................................... 20 Principios del diseño de la interfaz ........................................................................................................... 21 Directrices del diseño de la interfaz .......................................................................................................... 21

Diseño estético ....................................................................................................................... 22 Diseño de contenido ............................................................................................................... 22 Diseño arquitectónico ............................................................................................................. 22 Diseño de navegación ............................................................................................................. 23 Semántica de navegación ......................................................................................................................... 23 Sintaxis de navegación .............................................................................................................................. 23

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

4

Unidad Didáctica: Gestión y Administración Web Diseño al nivel de componenetes ............................................................................................ 23

Indicador de logro 2 ......................................................................................................... 24 Actividad 4: Introducción a las Tecnologías Web ...................................................... 25 Cómo funciona la web ............................................................................................................ 25 Paradigma cliente-servidor ..................................................................................................... 26 Características de las entidades participantes en el diálogo: ..................................................................... 26

Qué son los DNS ..................................................................................................................... 26 Protocolos de internet ............................................................................................................ 27 HTTP (Hypertext Transfer Protocol) .......................................................................................................... 27

Navegadores Web .................................................................................................................. 28 Los motores de renderizado ..................................................................................................................... 28

Servidores web ....................................................................................................................... 28

Actividad 5: Tecnologías front-end y back-end.......................................................... 29 Aplicaciones Web ................................................................................................................... 29 ¿Qué es una aplicación web de base de datos? ........................................................................ 29 Tecnologías front-end ............................................................................................................. 30 Desarrollo front-end ................................................................................................................................. 30 Código HTML ............................................................................................................................................ 30 Estructura HTML ....................................................................................................................................... 31 Hojas de estilo en cascada (CSS: Cascading Stylesheets) ........................................................................... 31 El lenguaje JavaScript ............................................................................................................................... 32 Tipos de imagen en la web ....................................................................................................................... 32 Web API ................................................................................................................................................... 33 Fuentes Web ............................................................................................................................................ 33

Tecnologías back-end.............................................................................................................. 34 Código de lado del servidor ...................................................................................................................... 35 Lenguajes de servidor ............................................................................................................................... 35 Trabajando con datos ............................................................................................................................... 36 CMS (Content Management System) ........................................................................................................ 36 Red de entrega de contenidos (CDN Content Delivery Network) .............................................................. 36 Servicios en la nube .................................................................................................................................. 37

Actividad 6: MySQL .................................................................................................. 38 Introducción ........................................................................................................................... 38 Ventajas de MySQL................................................................................................................................... 38 ¿Cómo trabaja MySQL? ............................................................................................................................ 39 Comunicación con el servidor MySQL ....................................................................................................... 39

La Comunicación con MySQL ................................................................................................... 39 Construyendo consultas SQL .................................................................................................................... 39 Envió de consultas SQL ............................................................................................................................. 40

Construcción de una Base de Datos ......................................................................................... 40 Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

5

Unidad Didáctica: Gestión y Administración Web Creando una nueva base de datos ............................................................................................................ 40 Visualización de las bases de datos ........................................................................................................... 40 Eliminación de una base de datos ............................................................................................................. 40 Agregar tablas a una base de datos .......................................................................................................... 41 Cambiar la estructura de la base de datos ................................................................................................ 41 Manipulando Datos de la Base de Datos ................................................................................................... 41 Controlando el Acceso a los Datos ............................................................................................................ 41 Configuración de cuentas MySQL ............................................................................................................. 42 Copias de respaldo de los Datos ............................................................................................................... 42 Restauración de Datos .............................................................................................................................. 43

Actividad 7: PHP ....................................................................................................... 44 Introducción ........................................................................................................................... 44 Ventajas de PHP ....................................................................................................................................... 44 ¿Cómo trabaja PHP? ................................................................................................................................. 45

Adición de una sección PHP a una página HTML....................................................................... 45 Sentencias PHP ....................................................................................................................... 45 Sentencias simples ................................................................................................................................... 46

Variables PHP ......................................................................................................................... 47 Constantes PHP ...................................................................................................................... 47 Trabajar con números ............................................................................................................. 47 Trabajar con cadena de caracteres .......................................................................................... 48 Trabajar con tiempo y fechas .................................................................................................. 48 Comparación de valores.......................................................................................................... 49 Comentarios en PHP ............................................................................................................... 50 Arreglos PHP .......................................................................................................................... 50 Creación de matrices ................................................................................................................................ 50

Sentencias Condicionales ........................................................................................................ 51 Sentencia if ............................................................................................................................................... 51 Sentencias switch ..................................................................................................................................... 51

Sentencias Repetitivas ............................................................................................................ 52 El bucle for ............................................................................................................................................... 52 El bucle while ........................................................................................................................................... 52 El bucle do .. while .................................................................................................................................... 52

Funciones ............................................................................................................................... 53

Actividad 8: PHP y MySQL......................................................................................... 54 Ventajas de la Relación ........................................................................................................... 54 ¿Cómo trabajan MySQL y PHP juntos? ..................................................................................... 54 Funciones PHP y MySQL .......................................................................................................... 54 Estableciendo una conexión .................................................................................................... 55 Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

6

Unidad Didáctica: Gestión y Administración Web Selección de una base de datos ................................................................................................................ 55 Obteniendo información de una base de datos ........................................................................................ 56 Capturando y usando datos ...................................................................................................................... 56

Colocando información en una base de datos .......................................................................... 56 Preparando los datos ................................................................................................................................ 56 Colocar los datos en variables................................................................................................................... 56 Usar el formato correcto .......................................................................................................................... 56 Limpieza de los datos ............................................................................................................................... 56 Escapar de datos ...................................................................................................................................... 56

Indicador de logro 3 ......................................................................................................... 58 Actividad 9: WordPress ............................................................................................ 59 Sistemas de Gestión de Contenidos (Content Management Systems). ...................................... 59 Creación de contenido .............................................................................................................................. 59 Gestión de contenido ............................................................................................................................... 59 Publicación ............................................................................................................................................... 60 Presentación ............................................................................................................................................ 60 Tipos de gestores de contenidos............................................................................................................... 60 Ventajas de un CMS .................................................................................................................................. 61 ¿Cómo funciona un CMS? ......................................................................................................................... 61 ¿Qué necesito saber antes de utilizar un CMS?......................................................................................... 62

WordPress.............................................................................................................................. 62 Características .......................................................................................................................................... 63 El panel de administración ........................................................................................................................ 63 Administración de entradas ...................................................................................................................... 63 Administración de categorías ................................................................................................................... 64 Administración de etiquetas de entradas ................................................................................................. 64 Administración de contenido multimedia ................................................................................................. 64

Actividad 10: Apariencia........................................................................................... 65 Administración de temas ........................................................................................................ 65 Administración de widgets ...................................................................................................... 65 Administración de menús ....................................................................................................... 65

Actividad 11: Usuarios .............................................................................................. 66 Administración de perfil de usuario ......................................................................................... 66 Administración de usuarios ..................................................................................................... 66 Administración de roles .......................................................................................................... 66

Actividad 12: Páginas ............................................................................................... 67 Diferencia entre entrada y página ........................................................................................... 67 Administración de páginas ...................................................................................................... 67 Administración de comentarios............................................................................................... 68 Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

7

Unidad Didáctica: Gestión y Administración Web

Actividad 13: Plugins y herramientas ........................................................................ 69 ¿Qué son los plugins? ............................................................................................................. 69 Diferencia entre temas (themes) y complementos (plugins) ..................................................... 69 Complementos gratuitos y premium ....................................................................................... 69 Evaluar plugins ....................................................................................................................... 70 Complementos (plugins) populares: ........................................................................................ 70 All One in SEO: .......................................................................................................................................... 70 Akismet: ................................................................................................................................................... 70 Broken Link Checker: ................................................................................................................................ 70 Google Analitycs: ...................................................................................................................................... 71 Share & Follow: ........................................................................................................................................ 71 Contact Form 7: ........................................................................................................................................ 71 Google +1 Button: .................................................................................................................................... 71 WP Touch: ................................................................................................................................................ 71 FeedBurner FeedSmith Extend: ................................................................................................................ 71

Indicador de logro 4 ......................................................................................................... 73 Actividad 14: Posicionamiento Web (SEO) ................................................................ 74 ¿Qué es el SEO? ...................................................................................................................... 74 Definición de SEMPO (Search Engine Marketing Professional Organization) ............................................. 74 Definición complementaria ...................................................................................................................... 74 Definición amplia e inclusiva..................................................................................................................... 74 Algunas consideraciones........................................................................................................................... 74

Diferencias entre SEO y SEM ................................................................................................... 74 Ventajas de ser visibles en buscadores .................................................................................... 75 ¿Cómo funcionan los buscadores?........................................................................................... 75 Los tres pilares del SEO ........................................................................................................... 75 Indexabilidad ............................................................................................................................................ 75 Contenido ................................................................................................................................................. 76 Popularidad. ............................................................................................................................................. 76

Técnicas onsite vs Técnicas offsite ........................................................................................... 76 Técnicas onsite ......................................................................................................................................... 76 Técnicas offsite ......................................................................................................................................... 77

SEO White Hat Vs SEO Black Hat.............................................................................................. 78

Actividad 15: Herramientas SEO ............................................................................... 79 Metodología y proceso del SEO ............................................................................................... 79 FASE I–Descubrimiento del Cliente ........................................................................................................... 79 FASE II–Análisis de Palabras Clave............................................................................................................. 80 FASE III–Optimización de Contenido ......................................................................................................... 81 FASE IV–Popularidad ................................................................................................................................ 82 FASE V–Seguimiento ................................................................................................................................. 83

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

8

Unidad Didáctica: Gestión y Administración Web Recomendaciones de buenas prácticas en SEO ........................................................................ 84

Actividad 16: Google AdWords ................................................................................. 86 Introducción a Google AdWords.............................................................................................. 86 Ventajas de Google AdWords .................................................................................................. 86 • • • • • • • •

Genera tráfico de forma inmediata .................................................................................................. 86 AdWords es modulable .................................................................................................................... 86 Accesible para casi todos los presupuestos ...................................................................................... 87 AdWords es inbound marketing ....................................................................................................... 87 ROI fácil de medir ............................................................................................................................. 87 Permite generar reconocimiento de marca ...................................................................................... 87 Permite segmentaciones precisas .................................................................................................... 87 En campañas de búsqueda sabemos exactamente qué busca el usuario .......................................... 87

Tipos de campañas ................................................................................................................. 88       

Campañas de búsqueda ................................................................................................................... 88 Campañas de display ........................................................................................................................ 88 Campañas de Shopping .................................................................................................................... 88 Campañas de vídeo .......................................................................................................................... 88 Anuncios de video en YouTube ........................................................................................................ 89 Campañas de aplicación universal .................................................................................................... 89 Campañas de remarketing ............................................................................................................... 89

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

9

Unidad Didáctica: Gestión y Administración Web

Indicador de logro 1 Descripción:  Elabora proyecto de desarrollo de aplicación web utilizando correctamente conceptos, técnicas y herramientas de la ingeniería web.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

10

Unidad Didáctica: Gestión y Administración Web

Actividad 1: Formulación y planeación para aplicaciones web Ingeniería web La World Wide Web y la Internet que la alimenta son, posiblemente, los desarrollos más importantes en la historia de la computación. Estas tecnologías nos han llevado a la era de la informática; además se han convertido en parte integral de la vida diaria en nuestros días. Si volteamos la mirada hacia el pasado, el crecimiento caótico de la tecnología web tubo su origen en la creciente necesidad de estar, para bien o para mal, en el ciberespacio; es por ello que los programadores desarrollan sitios web por doquier sin reparar en la calidad de los mismos. Al inicio, debido a que los requerimientos de estos sitios eran sencillos los inconvenientes pasaron por desapercibidos; confome los requerimientos de las aplicaciones web se tornaron más complejos, quedaron al descubierto las falencias del desarrollo sin ningún criterio técnico. Para evitar una web enmarañada y lograr mayor éxito en el desarrollo y la aplicación de sistemas basados en Web complejos y a gran escala, existe una apremiante necesidad de enfoques disciplinados y nuevos métodos y herramientas con que desarrollar, desplegar y evaluar los sistemas y aplicaciones basados en Web. Tales enfoques y técnicas deben considerar las características especiales de los nuevos medios, los ambientes y escenarios operativos, y la multiplicidad de perfiles de usuario que colocan desafios adicionales al desarrollo de aplicaciones basadas en Web. La ingeniería web aplica “sólidos principios científicos, de ingeniería y de administración, y enfoques disciplinados y sistemáticos para el desarrollo, despliegue y mantenimiento exitoso de sistemas y aplicaciones basadas en web de alta calidad. Atributos de los Sistemas y Aplicaciones basados en Web En los primeros días de la World Wide Web los “sitios web” consistían en poco más que un conjunto de archivos de hipertexto ligados que presentaban información mediante texto y gráficos limitados. Conforme el tiempo pasó, el HTML aumentó al desarrollar herramientas (por ejemplo, XML, Java) que permitieron a los ingenieros web ofrecer capacidades de cálculo junto con información. Nacieron los sistemas y aplicaciones basados en web. En la actualidad, las aplicaciones web han evolucionado en sofisticadas herramientas de computación que no sólo proporcidonan función por si mismas al usuario final, sino que también se han integrado con bases de datos corporativas y aplicaciones de negocios. Las aplicaciones web son diferentes a las muchas otras categorias de software informático; los sistemas basados en web involucran una mezcla entre publicación impresa y desarrollo de software, entre marketing e informática, entre comunicaciones internas y relaciones externas, y entre arte y tecnología. En la mayoría de las aplicaciones web se encuentran los siguientes atributos. •

Intensidad de red. Una aplicación web reside en una red y debe satisfacer las necesidades de una variada comunidad de clientes. Una aplicación web puede residier en la Internet. Alternativamente, una aplicación puede colocarse en una Intranet o en una Extranet.

•

Concurrencia. Un gran número de usuarios puede tener acceso a la aplicación web al mismo tiempo. En muchos casos, los patrones de uso entre los usuarios finales variarán enormemente.

•

Carga impredecible. El número de usuarios de la aplicación web puede variar en órdenes de magnitud de día con día.

•

Desempeño. Si un usuario de la aplicación web debe esperar demasiado puede decidir irse a cualquier otra parte.

•

Disponibilidad. Aunque la expectativa de una disponibilidad del total es poco razonable, los usuarios de las aplicaciones web populares con frecuencia demandan acceso bre la base de “24/7/365”.

•

Gobernada por los datos. La función primordial de muchas aplicaciones web es usar hipermedia para presentar contenido de texto, gráficos, audio y video al usuario final. Además, por lo general, Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

11

Unidad Didáctica: Gestión y Administración Web las aplicaciones web se utilizan para tener acceso a información que existe en bases de datos que originalmente no eran parte integral de ambiente basado en web (por ejemplo, comercio electrónico o aplicaciones financieras). •

Sensibilidad al contenido. La calidad y naturaleza estética del contenido sigue siendo un importante determinante de la calidad de una aplicación web.

•

Evolución continúa. A diferencia del software de aplicación convencional, que evoluciona a lo largo de una serie de planeadas liberaciones espaciadas cronológicamente, las aplicaciones web evolucionan de manera continua.

•

Inmediatez. Aunque la inmediatez es una característica de muchos dominios de aplicación, las aplicaciones web con frecuencia muestran un tiempo para comercializar que puede ser cuestión de unos cuantos días o semanas.

•

Seguridad. Puesto que las aplicaciones web están disponibles mediante el acceso a la red, es difícil, si no imposible, limitar la población de usuarios finales que pueden tener acceso a la aplicación. Con la finalidad de proteger el contenido confidencial y ofrecer modos seguros de transmisión de datos, se deben implementar fuertes medidas de seguridad a lo largo de la infraestructura que sustenta una aplicación web y dentro de la aplicación misma.

•

Estética. Una parte innegable de la apariencia de una aplicación web es su presentación y la disposición de sus elementos. Cuando una aplicación se diseña para comercializar o vender productos o ideas, la estética puede tener tanto que ver con el éxito como el diseño técnico.

Estratos de la ingeniería web El desarrollo de aplicaciones Web incorpora métodos de proceso especializados, métodos de ingeniería de software adaptados a características de desarrollo de las aplicaciones Web y un conjunto de importantes tecnologías que permitan un correcto desarrollo de las mismas. Los procesos, métodos y tecnologías (herramientas) proporcionan un enfoque en estratos de la IWeb que es conceptualmente idéntico a los estratos de la ingeniería de software. Proceso Los modelos de procesos Web adoptan la filosofía de desarrollo ágil. El desarrollo ágil enfatiza un enfoque de desarrollo riguroso que incorpora rápidos ciclos de desarrollo. Dichas actividades de marco de trabajo se deben definir dentro de un proceso que: Adopte el cambio. Aliente la creatividad y la independencia del equipo de desarrollo y fortalezca la interacción con el usuario. Construya sistemas que utilicen pequeños equipos de desarrollo. Subraye el desarrollo evolutivo o incremental mediante el uso de cortos ciclos de desarrollo. Métodos Los métodos de la IWeb abarcan un conjunto de labores técnicas que permiten al ingeniero Web comprender, caracterizar y luego construir una aplicación Web de alta calidad. Los métodos de la IWeb se puedes categorizar de la siguiente manera: • •

• •

Métodos de comunicación: Definen el enfoque con que se facilita la comunicación entre ingenieros web y los demás participantes de la WebApp. Métodos de análisis de requisitos: Proporcionan una base para comprender el contenido que se entregará una WebApp, la función que proporcionará al usuario final y los modos de interacción de cada clase de usuario requerirá mientras ocurra la navegación por medio de ls WebApp. Métodos de diseño: Abarcan una serie de técnicas de diseño que abordan el contenido, la aplicación y la arquitectura de información, así como el diseño de interfase y la estructura de navegación de la WebApp. Métodos de prueba: Incorporan revisiones técnicas formales tanto de contenido y el modelo de diseño como de una amplia variedad de técnicas de pruebas que abordan conflictos al nivel de Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

12

Unidad Didáctica: Gestión y Administración Web componente y arquitectónicos, pruebas de la nevegación, pruebas de usabilidad, seguridad y configuración. Herramientas y tecnologías Las tecnologías abarcan un amplio conjunto de descripción de contenido y lenguaje de modelación por ejemplo: HTML, VRML, XML, etc. lenguajes de programación por ejemplo java, php, jsp, etc. recursos de desarrollo basados en componentes por ejemplo corba, com, activeX, .net, etc. navegadores, herramientas multimedia, herramientas de auditoría de sitio, herramientas de conectividad de base de datos, herramientas de seguridad, servidores y utilidades de servidor, y herramientas de administración y análisis de sitio. El proceso de Ingeniería Web Los atributos de los sistemas y aplicaciones basados en web tienen una profunda influencia sobre el proceso de ingeniería web que se elija. La efectividad de cualquier proceso de ingeniería depende de su adaptabilidad. Esto es, la organización del equipo de proyecto, los modos de comunicación entre miembros del equipo, las actividades de ingeniería y las tareas que deben realizarse, la información que se recolecte y cree, y los métodos empleados para producir un producto de alta calidad deben estar adaptados a la gente que realiza el trabajo, el plazo y las restricciones del proyecto, y al problema que se quiere resolver. Antes de definir un marco de trabajo de proceso para Ingeniería Web se debe reconocer que: 1. Las aplicaciones web con frecuencia se entregan de manera incremental. Esto es, las actividades del marco de trabajo ocurrirán de manera repetida conforme cada incremento se someta a ingeniería y se entregue. 2. Los cambios ocurrirán frecuentemente. Estos cambios pueden ocurrir como resultado de la evaluación de un incremento entregado o como consecuencia de cambiar las condiciones de los negocios. 3. Los plazos son cortos. Esto aminora la creación y revisión de voluminosa documentación de ingeniería, pero no excluye la simple realidad de que el análisis crítico, el diseño y la prueba deben registrarse en alguna forma. A continuación se aborda el marco de trabajo para el proceso de ingeniería web. o

Comunicación con el cliente. Dentro del proceso de ingeniería web la comunicación con el cliente se caracteriza por medio de dos grandes tareas: el análisis del negocio y la formulación. El análisis del negocio define el contexto empresarial-organizativo para la aplicación web. Además, se identifican los participantes, se predicen los potenciales cambios en el ambiente o los requisitos del negocio, y se define la integración entre la aplicación web y otras aplicaciones de negocios, bases de datos y funciones. La formulación es una actividad de recopilación de requisitos que involucra a todos los participantes. El intento es describir el problema que la aplicación web habrá de resolver (junto con los requisitos básicos para la aplicación web) con el aprovechamiento de la mejor información disponible. Además, se intenta identificar áreas de incertidumbre y dónde ocurrirán cambios potenciales.

o

Planeación. Se crea el plan de proyecto para el incremento de la aplicación web. El plan consiste de una definición de tareas y un calendario de plazos respecto al periodo (usualmente medido en semanas) proyectado para el desarrollo del incremento de la aplicación web.

o

Modelado. Las labores convencionales de análisis y diseño de ingeniería del software se adaptan al desarrollo de la aplicación web, se mezclan y luego se funden en la actividad de modelado de la ingeniería web. El intento es desarrollar análisis “rápidos” y modelos de diseño que definan requisitos y al mismo tiempo representen una aplicación web que los satisfará.

o

Construcción. Las herramientas y la tecnología de la ingeniería web se aplican para construir la aplicación web que se ha modelado. Una vez que se construye el incremento de aplicación web, se dirige una serie de pruebas rápidas para asegurar que se descubran los errores en el diseño (es Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

13

Unidad Didáctica: Gestión y Administración Web decir: contenido, arquitectura, interface, navegación). Pruebas adicionales abordan otras características de la aplicación web. o

Despliegue. La aplicación web se configura para su ambiente operativo, se entrega a los usuarios finales y luego comienza un periodo de evaluación. La retroalimentación acerca de la evaluación se presenta al equipo de ingeniería web y el incremento se modifica conforme se requiera.

Formulación y Planeación para Ingeniería Web Comenzar siempre es difícil. Por una parte, existe una tendencia a diferir, a esperar hasta que toda t este cruzada y toda i tenga punto antes de que comience el trabajo. Por otra parte, hay un deseo de saltar ya, de comenzar a construir incluso antes de que en realidad se conozca que se necesita hacer. Ambos enfoques son inapropiados y por ello las dos primeras actividades del marco de trabajo de la ingeniería web destacan la formulación y la planeación. La formulación valora la necesidad subyacente de la aplicación web, las características y funciones globales que desean los usuarios y el ámbito del esfuerzo de desarrollo. La planeación aborda los elementos que deben definirse para establecer un flujo de trabajo y programa, y a rastrear el trabajo conforme avanza el proyecto. Formulación de Sistemas Basados en Web La formulación se sistemas y aplicaciones basados en web representa una secuencia de acciones de ingeniería web que comienza con la identificación de las necesidades del negocio, se mueve hacia una descripción de los objetivos de la aplicación web, define grandes características y funciones y realiza la recopilación de requisitos que conducen al desarrollo de un modelo de análisis. La formulación permite que los clientes y el equipo de desarrollo establezcan un conjunto común de metas y objetivos para la construcción de la aplicación web. También identifica el ámbito del esfuerzo de desarrollo y proporciona un medio para determinar un resultado exitoso. El análisis –una actividad técnica que es una continuación de la formulación- identifica los requisitos funcionales, de comportamiento y de datos para la aplicación web. Preguntas de formulación Se sugiere un conjunto de preguntas que deben formularse y responderse al comienzo de la etapa de formulación: •

¿Cuál es la principal motivación (necesidad del negocio) para la aplicación web?

•

¿Cuáles son los objetivos que debe satisfacer la aplicación web?

•

¿Quién usará la aplicación web?

Recopilación de requisitos para aplicaciones web Los objetivos globales de la recopilación de requisitos para aplicaciones web son:  Identificar requisitos de contenido.  Identificar requisitos funcionales.  Definir escenarios de interacción para diferentes clases de usuarios. Los siguientes pasos de la recopilación de requisitos se dirigen para lograr estos objetivos: 1. Pedir a los clientes que definan las categorías de usuario y describan cada categoría. 2. Comunicarse con los clientes para definir los requisitos básicos de la aplicación web. 3. Analizar la información recopilada y utilizar la información para realizar un seguimiento con los clientes. 4. Definir casos de uso que describan escenarios de interacción para cada clase de usuario.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

14

Unidad Didáctica: Gestión y Administración Web Planeación de Proyectos de Ingeniería Web Dada la inmediatez de las aplicaciones web es razonable preguntar: ¿en realidad se necesita gastar tiempo y esfuerzo en la planeación y administración de una aplicación web? Dado que la gestión del proyecto se indica para los proyectos tradicionales, parecería razonable argumentar que también estaría indicada para los grandes proyectos electrónicos. Los pequeños proyectos electrónicos tienen características especiales que los diferencian de los proyectos tradicionales. Sin embargo, incluso en el caso de los pequeños proyectos electrónicos, la planeación se debe realizar, se deben considerar los riesgos, se debe establecer un programa y se deben definir controles de modo que eviten la confusión, la frustración y el fracaso. El Equipo de Ingeniería Web Un equipo de ingeniería web exitoso mezcla una amplia variedad de talentos que deben trabajar como equipo en un ambiente de proyecto con alta presión. Los plazos son cortos, los cambios son inexorables y la tecnología continúa cambiando. La creación de un equipo que se consolide no es un asunto sencillo. Los siguientes papeles se deben distribuir entre los miembros del equipo de ingeniería web. 











Desarrolladores/proveedores de contenido. Dado que el contenidos controla inherentemente las aplicaciones web, una función del equipo se debe enfocar en la generación o recopilación del contenido. Editores de web. El variado contenido que generan los respectivos desarrolladores/proveedores se debe organizar para incluirlo en la aplicación web. Además, alguien debe actuar como conexión entre el equipo técnico que diseña la aplicación web y los desarrolladores/proveedores de contenido sin conocimientos técnicos. Este papel lo satisface el editor web, quien debe entender tanto el contenido como la tecnología de la aplicación web. Ingeniero web. El ingeniero web se involucra en un amplio rango de actividades durante el desarrollo de una aplicación web, que incluyen la obtención de requisitos, el modelado de análisis, el diseño arquitectónico, de navegación y de interfase, la implementación de la aplicación y de las pruebas. También debe tener una sólida comprensión de las tecnologías de componentes, de las arquitecturas cliente/servidor, de HTML/XML y de tecnologías de bases de datos, y un conocimiento práctico de los conceptos multimedia, de las plataformas hardware/software, de la seguridad de redes y de cuestiones de apoyo a sitios web. Expertos en dominios empresariales. Un experto en dominio empresarial debe ser capaz de responder todas las preguntas relacionadas con metas, objetivos y requisitos empresariales relacionados con la aplicación web. Especialistas de soporte. Este papel se asigna a la persona(s) que es (son) responsable(s) del apoyo continuo a la aplicación. Puesto que las aplicaciones web evolucionan continuamente, el especialista de soporte es responsable de las correcciones, adaptaciones y mejoras al sitio, que incluyen actualizaciones de contenido, implementación de nuevos procedimientos y formas, y cambios al patrón de navegación. Administrador. Usualmente llamado “web master”, esta personas tiene la responsabilidad de la operación diaria de la aplicación web, lo que incluye: desarrollo e implementación de políticas para la operación de la aplicación, establecimientos de procedimientos de soporte y retroalimentación, implementación de seguridad y derechos de acceso, medición y análisis de tráfico del sitio web, coordinación de los procedimientos de control de cambios y coordinación con el especialista de soporte. El administrador también puede estar involucrado en las actividades técnicas que realizan los ingenieros web y los especialistas de soporte.

Planeación de aplicaciones web: subcontratación Un porcentaje sustancial de las aplicaciones web se subcontrata con proveedores que (supuestamente) se especializan en el desarrollo de sistemas y aplicaciones basados en web. En tales casos, un negocio (el cliente) pide un precio fijo para desarrollar la aplicación web de uno o más proveedores, evalúa los precios competitivos y luego elige un proveedor para efectuar el trabajo. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

15

Unidad Didáctica: Gestión y Administración Web Planeación de aplicaciones web: ingeniería web en casa Conforme las aplicaciones web se vuelven más extensas y estratégicas para los negocios, muchas compañías han optado por controlar el desarrollo en casa. No sorprende que la ingeniería web en casa se gestione de manera un poco diferente a un esfuerzo de subcontratación. Los pasos siguientes se recomiendan para proyectos de ingeniería web pequeños y de tamaño moderado:  Entender el ámbito, las dimensiones de cambio y las restricciones del proyecto.  Definir una estrategia de proyecto incremental.  Realizar análisis de riesgo.  Desarrollar una estimación rápida.  Elegir un conjunto de tareas (descripción del proceso).  Establecer un programa.  Definir mecanismos de rastreo del proyecto.  Establecer un enfoque de gestión del cambio.

• •

Pressman, R. (2005). Ingeniería del Software – Un enfoque práctico (6 ed.). México, D.F., México: McGraw-Hill. Pressman, R. (2010). Ingeniería del Software – Un enfoque práctico (7 ed.). México, D.F., México: McGraw-Hill.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

16

Unidad Didáctica: Gestión y Administración Web

Actividad 2: Modelado de análisis para aplicaciones web A simple vista, existe una aparente contradicción cuando se considera el modelado de análisis dentro del contexto de la ingeniería web. Ya se ha mencionado que las WebApps tienen características como la inmediates y una volatilidad contraria al modelado detallado, ya sea en la etapa del análisis o en la del diseño. Y si se realiza algún tipo de modelado, la filosofía ágil sugiere que el modelo del análisis se minimice en favor del modelado de diseño limitados.

Requisitos para el análisis de las aplicaciones web El análisis de requisitos para las aplicaciones web abarca tres grandes tareas: formulación, recopilación de requisitos y modelado de análisis. Durante la formulación se identifican la motivación (metas) y los objetivos básicos para la aplicación web, y también se definen las categorias de usuarios. Cuando comienza la recopilación de requisitos se intensifica la comunicación entre el equipo de ingeniería web y los accionistas (por ejemplo: clientes, usuarios finales). Los requisitos de contenido y funcionales se enlistan y se desarrollan los escenarios de interacción (casos de uso) escritos desde el punto de vista del usuario final. La intención es establecer una comprensión básica de por qué se construirá la WebApp, quién la usará y que problema resolverá a sus usuarios. La jerarquía de usuario Las categorías de usuarios finales que interactuarán con la WebApp se identifican como parte de las tareas de formulación y de recopilación de requisitos. En la mayoría de los casos, las categorias de usuario son relativamente limitadas y no necesitan una representación UML. Las categorias de usuario (actores) indican la funcionalidad que ofrecerá la WebApp; además, señalan la necesidad de que se desarrollen casos de uso para cada usuario final anotado en la jerarquía. Desarrollo de casos de uso Los casos de uso se desarrollan para cada categoria de usuario descrita en la jerarquía de usuario. En el contexto de la ingeniería web, el caso de uso en si mismo es relativamente informal: un párrafo narrativo que describe una interacción específica entre un usuario y la WebApp. Afinación del modelo de caso de uso A la par que se crean los diagramas de caso de uso para cada categoría de usuario, se desarrolla una vista superior de los requisitos de la WebApp observables de manera externa. Los casos de uso se organizan en paquetes funcionales y cada paquete se valora para garantizar que es: •

Comprensible: todos los clientes entienden el propósito del paquete.

•

Cohesivo: el paquete aborda funciones relacionadas cercanamente una con otra.

•

Libremente acoplados: las funciones o clases dentro del paquete colaboran una con otra, pero la colaboración exterior del paquete se mantiene en un mínimo.

•

Jerarquicamente superficial: las jerarquías funcionales profundas son difíciles de navegar y entender para los usuarios; en consecuencia, el número de niveles dentro de una jerarquía de casos de uso debe reducirse siempre que sea posible.

El modelo de análisis para aplicaciones web El modelado de análisis para una WebApp se basa en la información que contienen los casos de uso desarrollados para la aplicación. Las descripciones de los casos de uso se analizan gramaticamente para identificar potenciales clases de análisis y las operaciones y atributos asociados con cada clase. Se identifica el contenido que presentará la WebApp y se extraen las funciones que se desarrollarán a partir de las descripciones de caso de uso. Finalmente, los requisitos específicos de la implentación se Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

17

Unidad Didáctica: Gestión y Administración Web deben desarrollar de modo que el ambiente y la infraestructura que apoyan la WebApp pueden construirse.

El modelo de contenido El modelo de contenido contiene elementos estructurales que proporcionan una importante visión de los requisitos de contenido para una WebApp. Dichos elementos estructurales incluyen objetos de contenido (por ejemplo: texto, imágenes, gráficos, fotos, video, audio) que se presentan como parte de la WebApp. Además, el modelo de contenido incluye todas las clases de análisis: entidades visibles para el usuario que se crean o manipulan conforme éste interactua con la WebApp. Una clase de análisis incluye atributos que la describen, operaciones que afectan el comportamiento requerido de la clase y colaboraciones que permiten la comunicación de la clase con otras clases. Al igual que otros elementos del modelo de análisis, el modelo de contenido se deriva a partir de un examen cuidadoso de los casos de uso desarrollados para la WebApp. Los casos de uso se analizan gramaticalmente para extraer objetos de contenido y clases de análisis.

El modelo de interacción Describe como interactúa el usuario con la WebApp. Este modelo de interacción lo componen cuatro elementos: 1) Casos de uso 2) Diagramas de secuencia 3) Diagramas de estado 4) Prototipo de interfaz de usuario

El modelo funcional El modelo funcional aborda dos elementos de procesamiento de la WebApp y cada uno representa un grado diferente de la abstracción de procedimientos: 1) Funcionalidad observable respecto al usuario y que entrega al usuario final la WebApp. 2) Las operaciones dentro de las clases de análisis que implementan comportamientos asociados con la clase.

El modelo de configuración Las WebApps se deben diseñar e implementar de forma que se acomoden a una diversidad de ambientes, tanto del lado del servidor como de lado del cliente. La WebApp puede residir en un servidor que proporcione acceso via internet, una Intranet o una Extranet. Se deben especificar el hardware del servidor y el ambiente del sistema operativo. Además, se deben considerar aspectos de interoperabilidad en el lado del servidor. Si la WebApp debe tener acceso a una gran base de datos o interoperar con las aplicaciones corporativas existentes en el lado del servidor, se deben especificar las interfaces apropiadas, los protocolos de comunicación y la información complementaria necesaria.

Análisis relación – navegación El análisis relación-navegación (ARN) proporciona una serie de pasos de análisis que permiten identificar relaciones entre los elementos descubiertos como parte de la creación del modelo de análisis. El enfoque ARN se organiza en cinco pasos: 1) Análisis de los participantes: identifica las diversas categorias de usuario y establece una apropiada jerarquía de participantes. 2) Análisis de elementos: identifica los objetos de contenido y los elementos funcionales de interés para los usuarios finales. 3) Análisis de relaciones: describe las relaciones entre los elementos WebApp. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

18

Unidad Didáctica: Gestión y Administración Web 4) Análisis de navegación: examina cómo los usuarios pueden acceder a elementos individuales o grupos de elementos. 5) Análisis de evaluación: considera temas pragmáticos (por ejemplo: costo/beneficio) asociados con la implementación de las relaciones definidas con anterioridad.

• • • •

Conallen, J. (2000). Building Web Applications with UML. Addison – Wesley. Pressman, R. (2005). Ingeniería del Software – Un enfoque práctico (6 ed.). México, D.F., México: McGraw-Hill. Pressman, R. (2010). Ingeniería del Software – Un enfoque práctico (7 ed.). México, D.F., México: McGraw-Hill. McGraw-Hill Education, https://www.mheducation.com/highered/home-guest.html

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

19

Unidad Didáctica: Gestión y Administración Web

Actividad 3: Modelado de diseño para aplicaciones web Cuando se aplica el diseño dentro del contexto de la ingeniería web, se deben considerar cuestiones tanto genéricas como específicas. Desde un punto de vista genérico, el diseño resulta en un modelo que guía la construcción de la WebApp. El modelo de diseño, sin importar su forma, debe contener suficiente información para reflejar cómo habrán de traducirse los requisitos de los participantes (definidos en un modelo de análisis) en contenido y código ejecutable. Pero el diseño también debe ser específico. Debe abordar atributos clave de una WebApp en una forma que permita al ingeniero web construir y ponerla a prueba de manera efectiva.

Pirámide del diseño IWeb El diseño conduce a un modelo que contiene la mezcla adecuada de estética, contenido y tecnología. La mezcla variará dependiendo de la naturaleza de la WebApp, y, como consecuencia, las actividades de diseño también variarán.

Diseño de la interfaz Diseño estético Diseño de contenido Diseño de navegación Diseño arquitectónico Diseño de componentes Diseño de la Interfaz de la WebApp Toda interfaz del usuario debe presentar las siguientes características: fácil de aprender, fácil de navegar, intuitiva, consistente, eficiente, libre de errores y funcional. Debe ofrecer al usuario final una experiencia satisfactoria y gratificante. Los conceptos, principios y métodos de diseño de la interfaz brindan al ingeniero web las herramientas requeridas para lograr esta lista de atributos.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

20

Unidad Didáctica: Gestión y Administración Web Principios del diseño de la interfaz  Anticipación: una WebApp se debe diseñar de modo que anticipe el siguiente movimiento del usuario.  Comunicación: la interfaz debe comunicar el estado de cualquier actividad que haya iniciado el usuario.  Consistencia: el uso de los controles de navegación, menús, iconos y estética deben ser consistentes a través de toda la WebApp.  Autonomía controlada: la interfaz debe facilitarle al usuario el movimiento a través de toda la WebApp, pero lo debe hacer en una forma que refuerce las convenciones de navegación establecidas para la aplicación.  Eficiencia: el diseño de la WebApp y su interfaz deben optimizar la eficiencia laboral del usuario, no la eficiencia del ingeniero web que la diseña y la contruye o el ambiente clienteservidor que la ejecuta.  Flexibilidad: la interfaz debe ser lo suficientemente flexible como para permitir que algunos usuarios realicen tareas directamente y otros exploren la WebApp en una forma un tanto aleatoria.  Enfoque: la interfaz de la WebApp (y el contenido que presenta) debe enfocarse en las tareas importantes para el usuario.  Ley del Fitt: “El tiempo para adquierir un objetivo es una función de la distancia a la que se halla y de su tamaño”.  Objetos de interfaz humana: se ha desarrollado una gran librería de objetos de interfaz humana reutilizables para WebApps.  Reducción de latencia: más que obligar al usuario a esperar el fin de alguna operación interna, la WebApp debe usar la multitarea en una forma que permita al usuario proceder con el trabajo como si la operación hubiese sido completada.  Facilidad de aprendizaje: la interfaz de una WebApp se debe diseñar para minimizar el tiempo de aprendizaje y, una vez aprendido, reducir el reaprendizaje requerido cuando se vuelva a visitar la WebApp.  Metaforas: una interfaz que utilice una metafora de interacción es más fácil de aprender y de usar, en tanto la metáfora sea apropiada para la aplicación y el usuario.  Mantener la integridad del producto de trabajo: un producto de trabajo debe guardarse de manera automática de modo que no se perderá si ocurriese un error.  Legibilidad: toda la información presentada a través de la interfaz debe ser legible para jovenes y viejos.  Estado de rastro: cuando sea adecuado, el estado de la interacción del usuario debe rastrearse y alamacenarse de modo que un usuario pueda salir y regresar más tarde al lugar de donde salió.  Navegación visible: una interfaz de WebApp bien diseñada proporciona “la ilusión de que los usuarios están en el mismo lugar y que se les lleva el trabajo hata sus lugares” Directrices del diseño de la interfaz • La rapidez de lectura en un monitor de computadora es aproximadamente 25 por ciento más lenta respecto de la lectura de impresos. En consecuencia no fuerce al usuario a leer voluminosas cantidades de texto, en particular cuando se explica la operación de la WebApp o se ofrece ayuda en la navegación.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

21

Unidad Didáctica: Gestión y Administración Web •

Evite los signos de “en construcción”; crean expectativas y provocan un vinculo innecesario que es seguro para la decepción.

•

Los usuarios prefieren no desplazarse. La información importante debe estar dentro de las dimensiones de una ventana típica de navegador.

•

Los menús de navegación y los encabezados deben estar diseñados de manera consistente y deben estar disponibles en todas las páginas que estén disponibles para el usuario. El diseño no debe descansar en las funciones del navegador para asistir en la navegación.

•

La estética nunca debe sustituir la funcionalidad.

•

Las opciones de navegación deben ser obvias, incluso para el usuario casual.

Diseño estético El diseño estético es un esfuerso artístico que complementa los aspectos técnicos de la ingeniería Web. Sin él, una aplicación web puede ser funcional, pero sin atractivo. Con él, una WebApp lleva a sus usuarios a un mundo que los incluye en un ámbito tanto emocional como intelectual. El diseño estético considera cada aspecto de la presentación y percepción de una WeppApp. El proceso de diseño estético comienza con la plantilla y procede hacia la consideración de esquemas de color globales, tipos de fuentes, tamaños y estilos, el uso de medios audiovisuales complementarios y todos los demás elementos estéticos de una aplicación.

Diseño de contenido El diseño del contenido se enfoca en dos asuntos de diseño diferentes, cada uno lo abordan individuos con distintos conjuntos de habilidades. El diseño del contenido desarrolla una representación de diseño para los objetos de contenido y representa los mecanismos que se requieren para que establezcan sus relaciones no con otros. Esta actividad de diseño lo dirigen los ingenieros web. Además, el diseño de contenido se ocupa de la representación de la información dentro de un objeto de contenido específico: actividad de diseño que dirigen los publicistas, los diseñadores estéticos y otros que generan el contenido de una WebApp. Una vez modelados todos los objetos de contenido, la información que cada objeto entregará debe crearse y luego formaterase para satisfacer mejor las necesadades del cliente. La creación del contenido es el trabajo de los especialistas que diseñan el objeto de contenido al proporcionar un esbozo de la información qe se entregará y una indicación de los tipos de objetos de contenido genéricos mediante los cuales se entregará la información. También se puede aplicar el diseño estético para representar la apariencia y percepción adecuados para el contenido.

Diseño arquitectónico El diseño arquitectónico está enlazado con las metas establecidas para la WebApp, el contenido que se presentará, los usuarios que la visitarán y la filosofía de navegación que se establezca. El diseñador arquitectónico debe identificar la arquitectura de contenido y la arquitectura de la WebApp. La arquitectura de contenido se centra en la forma en la que los objetos de contenido se estructuran para su representación y navegación. La arquitectura de WebApp aborda la forma en la que la aplicación se estructura para gestionar la interacción del usuario, manejar las tareas de procesamiento internas, efectuar la navegación y presentar el contenido. En la mayoría de los casos, el diseño arquitectónico se dirige en paralelo con el diseño de la interfaz, el estético y el de contenido. Puesto que la arquitectura WebApp puede tener una fuerte influencia sobre la navegación, las decisiones tomadas durante esta actividad de diseño influirán en el trabajo dirigido durante el diseño de navegación.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

22

Unidad Didáctica: Gestión y Administración Web

Diseño de navegación una vez establecida la arquitectrura de WebApp y la identificación de los componenetes, el diseñador debe definir las rutas de navegación que habiliten para los usaurios el acceso al contenido y las funciones de la WebApp. Para lograr esto el diseñador debe identificar la semántica de navegación para diferentes usuarios del sitio y definir la mecánica (sintaxis) que logra la navegación. Semántica de navegación Conforme cada usuario interactúa con la WebApp, encuentra una serie de unidades semánticas de navegación (USN), “un conjunto de estructuras de información y navegación relacionadas que colaboran en el cumplimiento de un subconjunto de requisitos de usuario relacionados”. La estructura de una USN está compuesta de un conjunto de subestructura de navegación que se llaman formas de navegación (FdN). Una FdN representa la mejor forma o ruta de navegación para los usuarios con ciertos perfiles para lograr su meta o submeta deseada. Sintaxis de navegación Conforme el diseño se lleva a cabo se define la mecánica de navegación. Algunas opciones son: • • • • •

Vínculo de navegación individual. Barra de navegación horizontal Columna de navegación vertical Pestañas Mapas de sitio

Diseño al nivel de componenetes El diseño de componentes desarrolla la lógica de procesamiento detallado que se requiere para implementar componentes funcionales. Las modernas aplicaciones web entregan funciones de procesamiento cada vez más elaboradas que realizan procesamiento localizado para generar capacidad de contenido y navegación en forma dinámica; ofrecen capacidades de computación o procesamiento de datos que son adecuadas para el dominio de negocios de la WebApp; proporcionan acceso sofisticaddos a bases de datos, establecen interfases de datos con sistemas corporativos externos. Para lograr estas (y muchas otras) capacidades, el ingeniero web debe diseñar y construir componentes de programa que sean idénticos en forma a los componenetes de software para el software convencional.

• • • •

Conallen, J. (2000). Building Web Applications with UML. Addison – Wesley. Pressman, R. (2005). Ingeniería del Software – Un enfoque práctico (6 ed.). México, D.F., México: McGraw-Hill. Pressman, R. (2010). Ingeniería del Software – Un enfoque práctico (7 ed.). México, D.F., México: McGraw-Hill. McGraw-Hill Education, https://www.mheducation.com/highered/home-guest.html

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

23

Unidad Didáctica: Gestión y Administración Web

Indicador de logro 2 Descripción:  Crea aplicaciones web básicas aplicando correctamente los fundamentos de las tecnologías web.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

24

Unidad Didáctica: Gestión y Administración Web

Actividad 4: Introducción a las Tecnologías Web Cómo funciona la web De la mano con la gran proliferación del uso de ordenadores en la actualidad, en los últimos años hemos sido testigos del nacimiento y crecimiento explosivo de uno de las tecnologías que puede ser considerada como la más importante dentro del campo de la computación; se trata de Internet y específicamente uno de sus servicios que es el más ampliamente difundido y vistoso la World Wide Web (WWW). Esta tecnología surgió como un proyecto gubernamental de los Estados Unidos para interconectar centros de investigación e instalaciones militares, posteriormente se masificó su uso y hoy por hoy es impensable un mundo sin Internet. Internet ha cambiado nuestros hábitos y nuestra forma de pensar. Han surgido nuevas disciplinas como: eBusiness, eGovernment, eComerse, etc. e infinidad de nuevos términos: chatear, en línea, no disponible, etc. La forma de comunicarnos ha sufrido un cambio drástico debido a Internet. Los negocios, estudios, salud en fin cada campo del quehacer humano tiene cabida en la Internet. Usted puede comprar y vender sin salir de casa y en contados segundos, puede pagar las cuentas, realizar operaciones bancarias, recibir capacitación sin siquiera moverse y en la comodidad de su hogar Es así que el desarrollo de sitios Web ha proliferado por doquier y esta tendencia va en aumento. Todos quieren estar en el ciber espacio desde las grandes compañías pasando por las medianas y pequeñas hasta el usuario común que tiene su página personal en algún lugar de la Internet y se ha asegurado un lugar en este mundo digital. Internet es una red mundial de ordenadores conectados entre sí mediante cables telefónicos, satélites y otros medios. Para simplificar diremos que todos los ordenadores involucrados en internet se pueden dividir en dos categorías: servidores y clientes. Los servidores son donde se encuentra la mayoría de la información disponible en internet. Se trata de ordenadores especializados que almacenan la información, la comparte con otros servidores y la pone a disposición del público en general. Los clientes son cualquier ordenador estándar que a través de un programa navegador (Google Chrome, Internet Explorer o Mozilla Firefox, etc.) la gente usa para acceder a la World Wide Web. Cuando un ordenador se conecta a internet, conecta con un tipo especial de servidor proporcionado y operado por un proveedor de servicios de Internet (ISP por sus siglas en inglés). El trabajo de este “ISP Server” es establecer un enlace entre el navegador cliente y el resto de Internet. Un único servidor ISP se encarga de las conexiones a Internet de muchos clientes individuales. Los servidores ISP reciben peticiones de los clientes para acceder a páginas Web, consultar el correo electrónico, etc. A fin de atender a los clientes con las páginas y archivos que piden, servidores ISP deben conectarse a otros servidores de Internet, los servidores host. Los servidores host son donde los sitios web “viven”. Cada sitio web en el mundo se encuentra en un servidor host en alguna parte. El trabajo del servidor host es almacenar la información y ponerla a disposición de otros servidores. Para ver una página web desde el navegado cliente, la siguiente secuencia ocurre: 1. 2. 3. 4.

Escribes una URL en la Barra de direcciones, buscas algo en Google o haces clic en un hipervínculo. Se establece una conexión entre el browser y el servidor para satisfacer el requerimiento. Tu navegador envía una petición al servidor ISP pidiendo la página. Tu servidor ISP mira en una enorme base de datos de direcciones de Internet y encuentra el servidor host exacto donde se encuentra el sitio web en cuestión, entonces envía ese servidor anfitrión una solicitud de la página. 5. El servidor host envía la página solicitada a tu servidor ISP. 6. El ISP envía la página al navegador y la visualizas en pantalla. 7. Se cierra la conexión establecida en el punto 2. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

25

Unidad Didáctica: Gestión y Administración Web

Paradigma cliente-servidor Lo podemos definir como un patrón arquitectónico para el desarrollo de sistemas distribuidos. Este tipo de arquitectura distribuye una aplicación entre dos o más componentes especializados cuya ejecución se distribuye entre uno o más equipos. Define dos tipos de entidades diferenciadas (asimétricas) que se responsabilizan de acciones diferentes: clientes y servidores con roles distintos. Un modelo de interacción que se basa en el concepto de servicio implementado sobre un diálogo: “petición-respuesta”. Cliente (parte activa):  Demanda servicios a los servidores.  Se asume que cada petición deberá obtener respuesta.  Diseñado para soportar la interacción con el usuario final. Servidor (parte pasiva)  Espera las peticiones de los clientes.  Procesa esas peticiones y envía una respuesta.  Diseño orientado a maximizar la eficiencia. Esta arquitectura también permite la posibilidad de aplicar el patrón cliente-servidor en múltiples niveles de abstracción dentro de un mismo sistema distribuido (arquitecturas multinivel [n-tier ]) Características de las entidades participantes en el diálogo: Características de los clientes • Componente del sistema que interactúa con el usuario. • No comparte sus recursos con otros clientes (en general). • No suelen tener restricciones especiales respecto a rendimiento, fiabilidad y escalabilidad. • No suele requerir equipos de altas prestaciones. • Un fallo en un cliente no afecta al resto del sistema. • Debe dar soporte a restricciones relativas a ergonomÍa (facilidad de uso) y seguridad (evitar comprometer los demás componentes). Características de los servidores:  Componente del sistema que presta servicios a los clientes.  Gestiona y comparte sus recursos con los clientes a los que sirve.  Suele tener restricciones especiales respecto a rendimiento, fiabilidad, escalabilidad y seguridad.  Capacidad suficiente para atender múltiples clientes.  Fallos en el servidor son críticos e invalidan el sistema.  El número de clientes (peticiones) puede ser muy variable y aumentar si así se requiere.  Evitar comprometer la seguridad de los recursos o datos gestionados y de los clientes. Muchos servicios de Internet dan soporte a aplicaciones cliente-servidor. Estos servicios se conocen por el protocolo que implementa la aplicación. Conocidos servicios de Internet son HTTP, FTP, DNS, finger, gopher y otros.

Qué son los DNS El sistema de nombres de dominio (Domain Name System) es un sistema de nomenclatura jerárquico descentralizado para dispositivos conectados a redes IP como Internet o una red privada. Este sistema asocia información variada con nombre de dominio asignado a cada uno de los participantes. Su función más importante es "traducir" nombres inteligibles para las personas en identificadores Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

26

Unidad Didáctica: Gestión y Administración Web binarios asociados con los equipos conectados a la red, esto con el propósito de poder localizar y direccionar estos equipos mundialmente. El servidor DNS utiliza una base de datos distribuida y jerárquica que almacena información asociada a nombres de dominio en redes como Internet. Aunque como base de datos el DNS es capaz de asociar diferentes tipos de información a cada nombre, los usos más comunes son la asignación de nombres de dominio a direcciones IP y la localización de los servidores de correo electrónico de cada dominio.

Protocolos de internet La familia de protocolos de Internet es un conjunto de protocolos de red en los que se basa Internet y que permiten la transmisión de datos entre computadoras. En ocasiones se le denomina conjunto de protocolos TCP/IP, en referencia a los dos protocolos más importantes que la componen, que fueron de los primeros en definirse, y que son los dos más utilizados de la familia: TCP: protocolo de control de transmisión. IP: protocolo de Internet. Existen tantos protocolos en este conjunto que llegan a ser más de cien diferentes, entre ellos se encuentran: ARP: protocolo de resolución de direcciones, para encontrar la dirección física (MAC) correspondiente a una determinada IP. FTP: protocolo de transferencia de archivos, popular en la transferencia de archivos. HTTP: protocolo de transferencia de hipertexto, que es popular porque se utiliza para acceder a las páginas web. POP: protocolo de oficina de correo, para correo electrónico. SMTP: protocolo para transferencia simple de correo, para el correo electrónico. Telnet (Telecommunication Network): para acceder a equipos remotos. HTTP (Hypertext Transfer Protocol) Protocolo que controla la transferencia de datos en la World Wide Web WWW, proporciona un vehículo de entrega para las imágenes, gráficos, vídeo, hipertexto u otros datos en la Web. Mientras se recorre la Web, el explorador intercambia mensajes con los servidores Web gracias al HTTP. Cada vez que hace un clic en un hipervínculo o pasa de un recurso a otro, el explorador utiliza HTTP para acceder al recurso seleccionado. HTTP es un protocolo sin estado, en otras palabras, el explorador y el servidor deben crear y después cortar una conexión de red por cada operación HTTP, a este conjunto de peticiones y respuestas se denomina transacción. Mediante HTTP los clientes y los servidores determinan de forma dinámica el formato de los documentos, lo que permiten que utilicen formato de datos no estándar para el intercambio de datos. Si el receptor no tiene un modo de ver o acceder a los datos, puede descargar un programa complemento que le permita recibir el contenido. Las cabeceras de HTTP pueden contener información acerca de los objetos que transmite la aplicación a través de la Web. Con la información de las cabeceras, las aplicaciones Cliente-Servidor negocian formatos que pueden utilizar para transferir los objetos. Si no reconocen la información de la cabecera, la ignoran. Por tanto, puede probar nuevos protocolos en la Web sin comprometer la integridad del HTTP. Además, el protocolo está basado en texto por lo cual es legible y no necesita decodificación.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

27

Unidad Didáctica: Gestión y Administración Web

Navegadores Web Un navegador web (también llamado browser) es una aplicación que se instala en la computadora del cliente y que, mediante una conexión a Internet, permite acceder a todos los sitios de la red mundial y así visualizar páginas de hipertexto estáticas y dinámicas. Existen navegadores para diferentes dispositivos y plataformas. Cada uno con sus propias características, todos tienen la misma finalidad: ofrecerle al navegante una representación lo más fiel posible del recurso al que está accediendo, que, por lo general, será un sitio o una aplicación web. Existen diferentes navegadores, dentro de los principales podemos mencionar: Internet Explorer, Firefox, Chrome, Apple Safari y Opera. Los motores de renderizado Son el verdadero corazón del navegador. De ellos depende la representación final de los elementos de una página web, y, en ellos, también recae la palabra compatibilidad. Es un componente interno del navegador que tiene la capacidad de tomar el contenido HTML y CSS y representarlo en el dispositivo de salida (por lo general, la pantalla)

Servidores web Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales y/o unidireccionales y síncronas o asíncronas con el cliente generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. El código recibido por el cliente suele ser compilado y ejecutado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se utiliza el protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del modelo OSI. El término también se emplea para referirse al ordenador que ejecuta el programa. Se pueden utilizar varias tecnologías en el servidor para aumentar su potencia más allá de su capacidad de entregar páginas HTML; éstas incluyen scripts CGI, seguridad SSL y páginas activas del servidor (ASP).

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

28

Unidad Didáctica: Gestión y Administración Web

Actividad 5: Tecnologías front-end y back-end Aplicaciones Web En ingeniería de software una aplicación web es aquella que los usuarios usan accediendo a un servidor web a través de Internet o de una intranet. Las aplicaciones web son populares debido a la practicidad del navegador web como cliente ligero. La habilidad para actualizar y mantener aplicaciones web sin distribuir e instalar software en miles de potenciales clientes es otra razón de su popularidad. Aplicaciones como los webmail, wikis, weblogs, MMORPGs, tiendas en línea son ejemplos bien conocidos de aplicaciones web. Una aplicación Web consta de una o más páginas conectadas entre sí. Un buen punto de partida sería decir que una página Web es un archivo de texto que contiene lenguaje de marcas de hipertexto (HTML), etiquetas de formato y vínculos a archivos gráficos y a otras páginas Web. El archivo de texto se almacena en un servidor de Web al que pueden acceder otras computadoras conectadas ese servidor, vía Internet o una LAN. Al archivo se puede acceder utilizando exploradores Web que no hacen otra cosa que efectuar una transferencia de archivos e interpretación de las etiquetas y vínculos HTML, y muestran el resultado en el monitor.

¿Qué es una aplicación web de base de datos? Una aplicación es un programa o un conjunto de programas diseñados para su uso por un usuario final (por ejemplo, clientes, proveedores, etc.). Si el usuario final interactúa con la aplicación a través de un navegador Web, la aplicación basada en web o aplicación web. Si la aplicación Web requiere el almacenamiento a largo plazo de la información utilizando una base de datos, es una aplicación Web de base de datos. Una aplicación Web de base de datos está diseñada para ayudar al usuario realizar una tarea. Puede ser una sencilla aplicación que muestra información en una ventana del navegador (por ejemplo, las oportunidades actuales de empleo cuando el usuario selecciona un anuncio de trabajo) o un programa complicado con funcionalidades extendidas (por ejemplo, la aplicación bookordering en Amazon.com o en la aplicación de licitación en eBay). Una aplicación Web de base de datos consta de sólo dos piezas: •

Base de datos: La base de datos es la memoria a largo plazo de su aplicación de base de datos Web. La aplicación no puede cumplir su propósito sin la base de datos. Sin embargo, la base de datos por sí sola no es suficiente.

•

Aplicación: La aplicación es el programa o grupo de programas que realizan las tareas. Los programas creados muestran lo que el usuario ve en la ventana del navegador, ellos aseguran que la aplicación interactúe mediante la aceptación y procesamiento de la información que el usuario escribe en la ventana del navegador, ellos almacenan y recuperan la información en la base de datos.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

29

Unidad Didáctica: Gestión y Administración Web

Tecnologías front-end Son todas aquellas tecnologías que corren del lado del cliente, es decir, todas aquellas tecnologías que corren del lado del navegador web, generalizándose más que nada en tres lenguajes, HyperText Markup Language (HTML) que estructura los contenidos de las páginas web, hojas de estilo en cascada (CSS) para describir el aspecto y el formato de la página web más algo de código ejecutable realizado en lenguaje de script del navegador (JavaScript), la persona encargada del front-end, se dedica solo a estas tres tecnologías, aunque esto no significa que no sepa cómo trabaja el back-end, ya que es necesario para que pueda consumir datos y pueda estructurar correctamente un maquetado en HTML y CSS para su mejor comodidad y la comodidad del back-end a la hora de colocarlo sobre un servidor. Desarrollo front-end El desarrollo front-end es el que se encarga de la parte visible con la que interactúa el usuario, es decir el desarrollo front-end desarrolla las interfaces de la aplicación web; es el responsable de mostrar los contenidos, de controlar la interacción del usuario y de las peticiones al servidor. Los contenidos deben ser presentados estéticamente a los usuarios, las interfaces que se construyen deben ser fáciles de usar para ello los desarrolladores front-end deben utilizar adecuadamente las tecnologías front-end y además conocer otras tecnologías relacionadas a fin de lograr interfaces agradables visualmente, pero a su vez que permitan la interacción exitosa del usuario con la aplicación web. Código HTML HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado. El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado. Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo de páginas web compatibles con distintos navegadores y plataformas (PC de escritorio, portátiles, teléfonos inteligentes, tabletas, vipers etc.) No obstante, para interpretar correctamente una nueva versión de HTML, los desarrolladores de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versión del navegador con los cambios incorporados. Normalmente los cambios son aplicados mediante parches de actualización automática (Firefox, Chrome) u ofreciendo una nueva versión del navegador con todos los cambios incorporados, en un sitio web de descarga oficial (Internet Explorer). Por lo que un navegador desactualizado no será capaz de interpretar correctamente una página web escrita en una versión de HTML superior a la que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar técnicas y cambios que permitan corregir problemas de visualización e incluso de interpretación de código HTML. Así mismo, las páginas escritas en una versión anterior de HTML deberían ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores todavía mantienen la capacidad de interpretar páginas web de versiones

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

30

Unidad Didáctica: Gestión y Administración Web HTML anteriores. Por estas razones, todavía existen diferencias entre distintos navegadores y versiones al interpretar una misma página web. Estructura HTML

Información técnica para el navegador

Contenido que se mostrará en la página



Hojas de estilo en cascada (CSS: Cascading Stylesheets) CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

31

Unidad Didáctica: Gestión y Administración Web El lenguaje JavaScript JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo, en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript fue desarrollado originalmente por Brendan Eich de Netscape en 1995 con el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript. Desde entonces JavaScript se ha convertido en uno de los lenguajes de programación más populares en internet. Al principio, sin embargo, muchos desarrolladores renegaban del lenguaje porque el público al que va dirigido lo formaban publicadores de artículos y demás aficionados, entre otras razones. La llegada de Ajax devolvió JavaScript a la fama y atrajo la atención de muchos otros programadores. Como resultado de esto hubo una proliferación de un conjunto de frameworks y librerías de ámbito general, mejorando las prácticas de programación con JavaScript, y aumentado el uso de JavaScript fuera de los navegadores web, como se ha visto con la proliferación de entornos JavaScript del lado del servidor. En enero de 2009, el proyecto CommonJS fue inaugurado con el objetivo de especificar una librería para uso de tareas comunes principalmente para el desarrollo fuera del navegador web. En junio de 2015 se cerró y publicó el estándar ECMAScript 62021 con un soporte irregular entre navegadores y que dota a JavaScript de características avanzadas que se echaban de menos y que son de uso habitual en otros lenguajes como, por ejemplo, módulos para organización del código, verdaderas clases para programación orientada a objetos, expresiones de flecha, iteradores, generadores o promesas para programación asíncrona. La versión 7 de ECMAScript se conoce como ECMAScript 2016, y es la última versión disponible, publicada en junio de 2016. Se trata de la primera versión para la que se usa un nuevo procedimiento de publicación anual y un proceso de desarrollo abierto. Tipos de imagen en la web Uno de las principales decisiones a la hora de incluir gráficos en tu web será elegir el formato correcto para cada tipo de imagen de manera que logres una correcta relación entre la calidad visual de la misma y su peso en Kb. 

JPG JPEG (Joint Photographic Experts Group) es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de grises. Normalmente se le llama JPG debido a la extensión que tiene en sistemas operativos que sólo aceptan tres letras de extensión. JPEG (JPG) es un algoritmo de compresión con pérdida. Esto significa que al utilizar la imagen tras la compresión no obtenemos exactamente la misma imagen que teníamos antes de la compresión. Una de las características que hacen muy flexible el JPEG (JPG) es el poder ajustar el grado de compresión. Si especificamos una compresión muy alta se perderá una cantidad significativa de calidad, pero obtendremos ficheros extremadamente pequeños. Con una cantidad de compresión baja obtenemos una calidad muy parecida a la del original, y un fichero pequeño.



GIF El formato GIF (Graphic Interchange Format) es un formato de archivos gráficos de mapa de bits (una trama) desarrollado por Compuserve. Existen dos versiones de este formato de archivos: GIF 87a y GIF 89a, desarrolladas en 1987 y 1989 respectivamente. GIF 87a soporta la compresión LZW, el entrelazado (posibilidad de una visualización progresiva), una paleta de 256 colores y la posibilidad de crear imágenes animadas (GIF animados)

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

32

Unidad Didáctica: Gestión y Administración Web almacenando varias imágenes en un mismo archivo. GIF 89a añade la posibilidad de definir un color transparente en la paleta y precisar el tiempo de las animaciones. 

PNG El formato PNG (Portable Network Graphics) es un formato de archivos de gráficos de mapa de bits (una trama). Fue desarrollado en 1995 como una alternativa gratuita al formato GIF, cuyos derechos pertenecen a Unisys (propietario del algoritmo de compresión LZW) y a quien los editores de software deben pagar regalías por usar este formato.



SVG SVG (Scalable Vector Graphics) es abierto y está basado en los gráficos XML, un formato que se está incorporando a los estándares Web. Muchos buscadores ya soportan SVG en cierto grado. Puede ser utilizado tanto para imágenes como para animaciones. Dado que SVG es un formato de gráficos vectorizados, las imágenes puedes ser redimensionadas y transformadas sin sufrir pérdidas de calidad ni deformaciones.

Web API La interfaz de programación de aplicaciones (API: Application Programming Interface), es un conjunto de subrutinas, funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción. Una API es una “llave de acceso” a funciones que nos permiten hacer uso de un servicio web provisto por un tercero, dentro de una aplicación web propia, de manera segura. Fuentes Web Se refiere al tipo de letra usada en la World Wide Web. Cuando fue creado HTML, tanto la fuente tipográfica como el estilo venían determinados exclusivamente por las preferencias del navegador web utilizado. No existió ningún mecanismo para el control del tipo de letra en las páginas web hasta que en 1995 Netscape introdujo la etiqueta , la cual fue estandarizada en HTML 2. No obstante, la fuente especificada por esta etiqueta tenía que estar instalada en el ordenador del usuario o tener una fuente de reserva como la predeterminada para la web; Sans-serif o un tipo de letra monoespaciado. La primera especificación de hojas de estilo en cascada (CSS en sus siglas en inglés) fue publicada en 1996 y proporcionaba las mismas prestaciones. En 1998 fue publicado el estándar de CSS2, que intentaba mejorar el proceso de elección de fuentes tipográficas por medio de procedimientos como el de coincidencia de fuentes, síntesis y descarga. Estas técnicas no se llegaron a utilizar demasiado y fueron eliminadas de la especificación en CSS2.1. Sin embargo, Internet Explorer agregó soporte para descarga de fuentes en la versión 4.0, publicada en 1997. Más tarde se incluyó la descarga de fuentes en el módulo de fuentes de CSS3, y desde entonces ha sido implementada en Safari versión 3, Firefox versión 3,5 y Opera. Subsecuentemente, se ha incrementado el interés sobre la tipografía para la web, así como el uso de descarga de fuentes.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

33

Unidad Didáctica: Gestión y Administración Web

Tecnologías back-end

La parte servidor de las aplicaciones web está formada por páginas estáticas que siempre muestran el mismo contenido y por programas o scripts que son ejecutados por el servidor web cuando el navegador del cliente solicita algunas páginas. La salida de este script suele ser una página HTML estándar que se envía al navegador del cliente. Tradicionalmente este programa o script que es ejecutado por el servidor web se basa en la tecnología Common Gateway Interface (CGI). La programación del servidor mediante CGI es compleja y laboriosa. El protocolo HTTP no almacena el estado entre una conexión y la siguiente (es un protocolo sin estado), por lo que es el programador el que se tiene que encargar de conservarlo. Esto conduce a que el programador tenga que dedicar parte de su tiempo a programar tareas ajenas al objetivo de la aplicación, lo que suele ser origen de diversos problemas. Sin embargo, con la entrada en 1995 de Microsoft en el mundo Internet y la salida al mercado de su servidor web (Internet Information Services) se abrió un nuevo campo para las aplicaciones web: Internet Server Application Program Interface (ISAPI). Se trata de un conjunto de funciones que el servidor web pone a disposición de los programadores de aplicaciones web. Con ISAPI, los programadores pueden crear Dynamic Link Library (DLL) con funciones que son invocadas para determinados archivos (se ejecutan cuando el cliente solicita un archivo con una determinada extensión). Todo el sistema Active Server Pages (ASP), no es más que una DLL del tipo ISAPI que es invocada automáticamente para los archivos cuya extensión sea .asp. La DLL ASP preprocesa el archivo .asp interpretando su código como un script a ejecutar en el servidor. Sin embargo, ella no interpreta directamente el código, sino que en función del lenguaje en el que está escrito, invoca a otra DLL que se encarga de ejecutar el script. Después recoge la salida y se la envía al servidor web, el cual a su vez la reenvía al cliente. Las ventajas que presenta ASP frente a CGI son:  Las páginas basadas en CGI resultan difíciles de mantener, ya que las instrucciones HTML se encuentran insertadas en el propio código del programa CGI, mezclándose sus funcionalidades.  La ejecución de un programa CGI es muy ineficiente, debido al proceso de carga del código en memoria que se realiza cada vez que un usuario requiere su ejecución. La existencia de múltiples clientes simultáneos supone múltiples copias del programa en memoria del servidor.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

34

Unidad Didáctica: Gestión y Administración Web  La unión de ISAPI con el servidor web es más “fuerte” (están más integrados), su ejecución es más rápida, con lo que se logra que las aplicaciones basadas en ISAPI tengan un mayor rendimiento que las basadas en CGI. Además de ASP, existen otras tecnologías destinadas a programar la parte servidor de las aplicaciones web: ColdFusion, Java Server Pages (JSP), serv-lets, PHP, etc. Todas ellas son muy similares, se basan en los mismos principios y ofrecen resultados equivalentes. Código de lado del servidor Es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta. Lenguajes de servidor Los Lenguajes de programación del lado del servidor son especialmente útiles en trabajos que se tiene que acceder a información centralizada, situada en una base de datos en el servidor, y cuando por razones de seguridad los cálculos no se pueden realizar en la computadora del usuario. Es importante destacar que los lenguajes de programación del lado del servidor son necesarios porque para hacer la mayoría de las aplicaciones web se debe tener acceso a muchos recursos externos a la computadora del cliente, principalmente bases de datos alojadas en servidores de Internet. Las páginas dinámicas del servidor se suelen escribir en el mismo archivo HTML, mezclado con el código HTML, al igual que ocurría en las páginas del cliente. Cuando una página es solicitada por parte de un cliente, el servidor ejecuta los scripts y se genera una página resultado, que solamente contiene código HTML. Este resultado final es el que se envía al cliente y puede ser interpretado sin lugar a errores ni incompatibilidades, puesto que sólo contiene HTML. Luego es el servidor el que maneja toda la información de las bases de datos y cualquier otro recurso, como imágenes o servidores de correo y luego envía al cliente una página web con los resultados de todas las operaciones. Las ventajas de este tipo de programación son que el cliente no puede ver los scripts, ya que se ejecutan y transforman en HTML antes de enviarlos. Además, son independientes del navegador del usuario, ya que el código que reciben es HTML fácilmente interpretable. Para escribir páginas dinámicas de servidor existen varios lenguajes, entre estos tenemos: 

Practical Extraction and Report Language (PERL): es un lenguaje de programación desarrollado por Larry Wall inspirado en otras herramientas de UNIX. PERL es el lenguaje más utilizado para la creación de programas CGI en los servidores web. Es más rápido que los programas shell script de UNIX, puede leer y escribir ficheros binarios, y puede procesar ficheros grandes. La ventaja más importante de PERL sobre C es que PERL no necesita ser recompilado, es un lenguaje interpretado.



Active Server Pages (ASP): es una tecnología del lado servidor de Microsoft para páginas web generadas dinámicamente, que ha sido comercializada como un anexo a Internet Information Services (IIS). EL estándar ASP permite poder utilizar cualquier lenguaje para la programación, si bien Microsoft favorece que se utilice el VBScript, y en segundo término el JScript (versión del estándar Javascript hecha por Microsoft). En teoría, y mediante la programación, es posible adaptar versiones de lenguajes como Pascal, C y otros, para utilizarlos dentro de páginas ASP.



Java Server Pages (JSP): es la tecnología para generar páginas web de forma dinámica en el servidor, desarrollado por Sun Microsystems, basado en scripts que utilizan una variante del lenguaje Java. La tecnología JSP, o de JavaServer Pages, es una tecnología Java que permite a los programadores generar dinámicamente HTML, XML o algún otro tipo de página web. Esta tecnología permite al código Java y a algunas acciones predefinidas ser embebidas en el contenido Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

35

Unidad Didáctica: Gestión y Administración Web estático. La principal ventaja de JSP frente a otros lenguajes es que permite integrarse con clases Java (.class) lo que permite separar en niveles las aplicaciones web, almacenando en clases java las partes que consumen más recursos, así como las que requieren más seguridad, y dejando la parte encargada de formatear el documento ‘html’ en el archivo jsp. Además, Java se caracteriza por ser un lenguaje que puede ejecutarse en cualquier sistema, lo que sumado a jsp le da mucha versatilidad. 

Hipertext Preprocesor (PHP): PHP (acrónimo recursivo de “PHP: Hypertext Preprocessor”, originado inicialmente del nombre PHP Tools, o Personal Home Page Tools) es un lenguaje de programación interpretado. Aunque fue concebido en el tercer trimestre de 1994 por Rasmus Lerdorf no fue hasta el día 8 de junio de 1995 que fue lanzada la versión 1.0. Se utiliza entre otras cosas para la programación de páginas web activas, y se destaca por su capacidad de mezclarse con el código HTML. Aunque su creación y desarrollo se da en el ámbito de los sistemas libres, bajo la licencia GNU, existe además un compilador comercial denominado (Zend Optimizer). El desarrollo del código abierto por un lado y el firme respaldo comercial por el otro, han elevado a PHP a alcanzar una popularidad más que notable.

Trabajando con datos Muchos sitios web necesitan almacenar información de los usuarios como nombres de usuario, contraseñas, etc. Los datos en internet se han convertido en algo esencial y se pueden gestionar de diferentes formas, de manera general se puede almacenar los datos en el cliente o se puede almacenar en el servidor. Cookie: galleta o galleta informática es una pequeña información enviada por un sitio web y almacenada en el navegador del usuario, de manera que el sitio web puede consultar la actividad previa del usuario. API Web Storage: es una de las APIs de HTML5 que nos permite guardar datos de tipo/valor (key/value) sin tener que utilizar cookies, es decir, no depende del tráfico de Internet. XML: siglas en inglés de eXtensible Markup Language, traducido como "Lenguaje de Marcado Extensible" o "Lenguaje de Marcas Extensible", es un meta-lenguaje que permite definir lenguajes de marcas desarrollado por el World Wide Web Consortium (W3C) utilizado para almacenar datos en forma legible. JSON: acrónimo de JavaScript Object Notation, es un formato de texto ligero para el intercambio de datos. Bases de datos: Una base de datos o banco de datos es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemáticamente para su posterior uso. Reside en el servidor y puede almacenar todo tipo de información. Existen programas denominados sistemas gestores de bases de datos, abreviado SGBD (del inglés database management system o DBMS), que permiten almacenar y posteriormente acceder a los datos de forma rápida y estructurada. CMS (Content Management System) Un sistema de gestión de contenidos es un programa desarrollado para que cualquier usuario pueda administrar y gestionar contenidos de una web con facilidad y sin conocimientos de programación Web. Red de entrega de contenidos (CDN Content Delivery Network) Se trata de una red de entrega de contenidos compuesta por diferentes ordenadores. Es decir, CDN hace referencia a un conjunto de servidores ubicados en diferentes puntos geográficos que contienen copias de contenidos alojados en otros servidores, y es un servicio del que puedes disponer en los mejores proveedores de hosting. Por consiguiente, busca optimizar el acceso a la información de la

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

36

Unidad Didáctica: Gestión y Administración Web red de redes, puesto que el usuario llegará a aquellas copias de datos que se encuentren más próximas a su posición. Servicios en la nube La computación en la nube (cloud computing), conocida también como servicios en la nube, informática en la nube, nube de cómputo, nube de conceptos o simplemente "la nube", es un paradigma que permite ofrecer servicios de computación a través de una red, que usualmente es Internet.

• • • • • • • •

The World Wide Wed Consortium, www.w3.org Wikipedia, www.wikipedia.org Webkit, www.webkit.org/getting-the-code/ Gecko, www.developer.mozilla.org/en-US/docs/Mozilla/Gecko Directnic, www.directnic.com 1&1, www.1and1.com Arsys, www.arsys.es Programación web, https://programacionwebisc.wordpress.com/2-3-lenguajes-deprogramacion-del-lado-del-servidor/

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

37

Unidad Didáctica: Gestión y Administración Web

Actividad 6: MySQL Introducción MySQL es un RDBMS (Relational Data Base Management System) rápido y fácil, utilizado en muchos sitios Web. Sus desarrolladores se enfocaron desde el principio principalmente en la velocidad. En aras de la rapidez, tomaron la decisión de ofrecer menos funciones que sus competidores principales (tales como Oracle y Sybase). Sin embargo, a pesar de que MySQL no cuenta con todas las funcionalidades que sus competidores comerciales poseen, tiene todas las características que necesitan la mayoría de los desarrolladores de base de datos. Es más fácil de instalar y de usar que sus competidores comerciales, y la diferencia de precio está muy a favor de MySQL. El RDBMS MySQL fue desarrollado originalmente por una compañía sueca, pero ahora está desarrollado, comercializado y respaldado por Sun Microsystems. La empresa otorga licencias de dos maneras:  MySQL Community Server: una descarga gratuita, la edición de código abierto de MySQL, lanzado tempranamente y, a menudo con las características más avanzadas. Cualquiera que conozca los requerimientos GPL puede utilizar el software de forma gratuita.  MySQL Enterprise Suscripción: Una amplia oferta de apoyo a la producción, herramientas de seguimiento, y el software de base de datos MySQL. Por una tarifa de suscripción de pago al año por cada servidor, se dispone de actualizaciones mensuales de software, servicios de consultoría, soporte técnico y otros servicios. Ventajas de MySQL MySQL es una base de datos popular entre los desarrolladores Web. Su velocidad y su pequeño tamaño lo hacen ideal para un sitio Web. A esto se añade el hecho de que es de código abierto. Algunas de sus ventajas son:  Es rápido. El objetivo principal de la gente que desarrolló MySQL fue la velocidad. Así, el software fue diseñado desde el principio pensando en la velocidad.  No es costoso. MySQL es gratuito bajo la licencia GPL de código abierto, y la tasa de licencia comercial es razonable.  Es fácil de usar. Usted puede construir e interactuar con una base de datos MySQL utilizando algunas declaraciones simples en el lenguaje SQL, que es el lenguaje estándar para comunicarse con los RDBMS.  Puede correr en muchos sistemas operativos. MySQL se ejecuta en muchos sistemas operativos - Windows, Linux, Mac OS, la mayoría de variedades de Unix (incluyendo Solaris y AIX), reeBSD, OS/2, Irix, y otros.  Está disponible en casi todos los hosts de Internet. Si usted va a correr su sitio Web en una empresa de alojamiento web, MySQL está ampliamente disponible sin costo adicional.  El soporte técnico está ampliamente disponible. Una gran base de usuarios ofrece soporte gratuito a través de listas de correo. Los desarrolladores de MySQL también participar en las listas de correo electrónico.  Es seguro. El sistema flexible de autorización de MySQL permite otorgar algunos o todos los privilegios de base de datos (por ejemplo, el privilegio de crear una base de datos o suprimir los datos) a los usuarios o grupos específicos de usuarios. Las contraseñas están cifradas. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

38

Unidad Didáctica: Gestión y Administración Web  Es compatible con bases de datos grandes. MySQL maneja bases de datos de hasta 50 millones de registros o más. El tamaño límite predeterminado para una tabla es de 4 GB, pero este puede aumentar (si su sistema operativo puede manejarlo) a un límite teórico de 8 millones de terabytes (TB).  Es personalizable. La licencia de código abierto GPL permite a los programadores modificar el software MySQL para adaptarse a entornos específicos. ¿Cómo trabaja MySQL? El software MySQL consiste en el servidor MySQL, varios programas de utilidad que ayudan en la administración de bases de datos MySQL, y algunos programas de apoyo que el servidor MySQL necesita. El corazón del sistema es el servidor MySQL. El servidor MySQL es el administrador del sistema de base de datos. Se ocupa de todas las instrucciones de la base de datos. Por ejemplo, si desea crear una nueva base de datos, se envía un mensaje al servidor MySQL que dice "crear una nueva base de datos y llamarlo NewData." El servidor MySQL a continuación, crea un subdirectorio con el nombre de NewData en su directorio de datos, y pone los archivos necesarios con el formato requerido en el subdirectorio NewData. De la misma manera, para añadir datos a la base de datos, envía un mensaje al servidor MySQL, dándole los datos e indicando donde se desea que los datos que se añadan. Antes de que pueda dar instrucciones al servidor MySQL, debe estar en ejecución a la espera de peticiones. El servidor MySQL se instala generalmente de manera que se inicia cuando el equipo se inicia y continúa funcionando todo el tiempo. Esta es la configuración habitual para un sitio Web. Sin embargo, no es necesario configurarlo para iniciarse cuando se inicia el equipo. Si es necesario, se puede iniciar manualmente cada vez que desee acceder a una base de datos. Cuando se está ejecutando, el servidor MySQL escucha continuamente los mensajes que se dirigen a él. Comunicación con el servidor MySQL Toda su interacción con la base de datos se lleva a cabo a través del envío de mensajes al servidor MySQL. Puede enviar mensajes al servidor MySQL de varias maneras. El software PHP tiene indicaciones específicas que se utilizan para enviar instrucciones al servidor MySQL. El servidor MySQL debe ser capaz de comprender las instrucciones que le envíe. Usted se comunica con SQL (Structured Query Language), que es un lenguaje estándar entendido por muchos RDBMS. El servidor MySQL entiende SQL. PHP no entiende SQL, pero no lo necesita: PHP sólo establece una conexión con el servidor MySQL y envía el mensaje de SQL a través de la conexión. El servidor MySQL interpreta el mensaje de SQL y sigue las instrucciones. El servidor MySQL envía un mensaje de respuesta, que indique su situación y lo que hizo (o informa de un error si no estaba en condiciones de comprender o seguir las instrucciones).

La Comunicación con MySQL El servidor MySQL es el gestor de bases de datos: 

Crea nuevas bases de datos.



Conoce dónde se almacenan las bases de datos.



Almacena y recupera información, guiado por las peticiones o consultas, que recibe.

Para hacer una solicitud que MySQL pueda entender, se debe construir una consulta SQL y enviarla al servidor MySQL. Construyendo consultas SQL SQL (Structured Query Language) es el lenguaje informático que se utiliza para comunicarse con MySQL. SQL está hecho en gran parte de palabras en inglés, reunido en cadenas de palabras que suenan similares a las expresiones en inglés.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

39

Unidad Didáctica: Gestión y Administración Web La primera palabra de cada consulta es su nombre, que es una palabra de acción (un verbo) que le dice a MySQL lo que quieres hacer. Las consultas que veremos son CREATE, DROP, ALTER, SHOW, INSERT, LOAD, SELECT, UPDATE y SUPR. Este vocabulario básico es suficiente para crear - e interactuar con bases de datos en los sitios web. El nombre de la consulta es seguido por las palabras y frases - algunas obligatorias y otras opcionales - que le indican a MySQL cómo realizar la acción. Éstos son algunos criterios generales a tener en cuenta al construir una consulta SQL:  Mayúsculas: Es aconsejable escribir las instrucciones SQL en mayúsculas y tener cuidado en los nombres de Tablas y columnas.  Espaciado: Las palabras SQL deben estar separadas por uno o más espacios. SQL tampoco hace caso al final de la línea.  Comillas: Utilizar comillas (“) para las cadenas de caracteres. Envió de consultas SQL Cuando se construye una aplicación de web de base de datos, dos formas comunes para enviar consultas SQL al servidor MySQL son: •

phpMyAdmin: phpMyAdmin es un software desarrollado específicamente con el fin de gestionar bases de datos MySQL. Está escrito en PHP y se ejecuta en un navegador. Proporciona una interfaz de usuario que simplifica en gran medida sus interacciones con MySQL.

•

Scripts PHP: El lenguaje PHP dispone de funciones desarrolladas específicamente con el propósito de enviar consultas SQL a bases de datos MySQL y recibir información de las bases de datos.

Construcción de una Base de Datos Una base de datos consta de dos partes: una estructura para contener los datos y los propios datos. En primer lugar, se crea una base de datos vacía sin estructura en absoluto, y luego se agregan tablas a la misma. Rara vez se crea la base de datos desde un script PHP. En general, la base de datos debe existir antes de que la aplicación web pueda realizar sus funciones - visualización de los datos de la base de datos, almacenamiento de datos en la base de datos, o ambos. Puede ser que una aplicación requiera la creación de una nueva tabla para cada cliente, como por ejemplo crear una galería fotográfica o un nuevo cuadro de información de producto para cada individuo. En este caso, la aplicación necesita crear una nueva tabla mientras se está ejecutando. Pero es raro que una aplicación cree una base de datos o una tabla mientras se ejecuta. Creando una nueva base de datos Puede crear su base de datos nueva y vacía utilizando phpMyAdmin. Después de crear una nueva base de datos, puede agregar tablas a la misma. Visualización de las bases de datos Puede ver una lista de los nombres de sus bases de datos actuales en cualquier momento abriendo la página principal de phpMyAdmin. Los nombres se muestran en el panel izquierdo de la página. La lista incluye un número después del nombre de la base. Este número representa el número de mesas actualmente definidos para la base de datos. Eliminación de una base de datos Puede eliminar una base de datos en el equipo local utilizando phpMyAdmin.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

40

Unidad Didáctica: Gestión y Administración Web Agregar tablas a una base de datos Puede agregar tablas a cualquier base de datos, ya sea una nueva base de datos que acaba de crear o una base de datos existente que ya tiene tablas y datos en ella. En la mayoría de los casos, cree las tablas en la base de datos antes del script(s) PHP de acceso a la base de datos. Por lo tanto, en la mayoría de los casos, se utiliza phpMyAdmin para agregar las tablas. Cambiar la estructura de la base de datos Puede cambiar el nombre de la tabla, agregar, eliminar o cambiar el nombre de una columna, o cambiar el tipo de datos u otros atributos de la columna. Se puede cambiar la estructura, incluso después de que la tabla contiene datos, siempre y cuando no cambie la definición de un campo a una definición que es incompatible con los datos actualmente en la columna. Manipulando Datos de la Base de Datos Una base de datos vacía no es de ningún provecho. Una base de datos sólo es útil con respecto a la información que ésta contiene. Una base de datos tiene que ser capaz de recibir información para su almacenamiento y proporcionar información a solicitud. Es posible realizar cuatro tipos de tareas en la base de datos: 

Añadir información: Agregar una fila a una tabla.



Actualización de la información: Cambio de información en un registro existente. Esto incluye la adición de datos a un campo en blanco en una fila existente.



Recuperación de la información: Consultando los datos. Esta solicitud no elimina los datos de la base de datos.



Remoción de información: Eliminación de datos de la base de datos.

Controlando el Acceso a los Datos Es necesario controlar el acceso a la información en su base de datos. Usted necesita decidir quién puede ver los datos y que se puede modificar. MySQL proporciona un sistema de seguridad para proteger sus datos. Nadie puede acceder a los datos en su base de datos sin una cuenta. Cada cuenta MySQL tiene las siguientes atribuciones:  Un nombre  Un nombre de equipo - la máquina desde la cual la cuenta puede acceder al servidor MySQL  Una contraseña  Un conjunto de privilegios Para acceder a sus datos, alguien tiene que utilizar un nombre de cuenta válido y conocer la contraseña asociada a esa cuenta. Además, esa persona debe estar conectada desde un ordenador que permite conectarse a su base de datos a través de esa cuenta específica. Después de que el usuario tiene acceso a la base de datos, lo que él o ella puede hacer a los datos depende de qué privilegios se han establecido para la cuenta. Cada cuenta se permite o no se les permite realizar una operación en su base de datos, como SELECT, DELETE, INSERT, CREATE o DROP. Los ajustes que especifican lo que una cuenta puede hacer son privilegios, o permisos. Puede configurar una cuenta con todos los privilegios, sin privilegios, o cualquier otra combinación. Si un usuario intenta conectarse a MySQL y ejecutar una consulta, MySQL controla el acceso a los datos en dos etapas:

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

41

Unidad Didáctica: Gestión y Administración Web  Comprobación de conexión: MySQL comprueba la validez del nombre de cuenta y contraseña y comprueba si la conexión proviene de un host que está autorizado para conectarse al servidor MySQL utilizando la cuenta especificada. Si todo va bien, MySQL acepta la conexión.  Comprobación de solicitudes: Después de que MySQL acepta la conexión, comprueba si la cuenta tiene los privilegios necesarios para ejecutar la consulta especificada. Si lo hace, MySQL ejecuta la consulta. Configuración de cuentas MySQL Una cuenta se identifica por el nombre de cuenta y el nombre de la computadora que permite el acceso a MySQL utilizando esta cuenta. Usted tiene una cuenta que puede utilizar para administrar sus bases de datos MySQL. Esta cuenta se mostrará en la página principal de phpMyAdmin. En el equipo local, es probable que sea root@localhost. Esta es la única cuenta que usted necesita para su sitio de desarrollo, porque nadie necesita acceder a él desde el exterior - sólo desde el ordenador. En su cuenta de alojamiento Web, la cuenta puede ser dominio@localhost o algo parecido. Las empresas de Web hosting utilizan diferentes convenciones de nomenclatura. Sin embargo, usted no necesita preocuparse por el nombre de host. Su anfitrión Web maneja su cuenta. Usted puede ver la cuenta y nombre de host en la página principal de phpMyAdmin. Si estás utilizando un sitio web de una compañía, su compañía de personal de TI le proporciona un nombre de cuenta y nombre de host. Es necesario crear al menos una cuenta con privilegios limitados para utilizar en su sitio Web en PHP que acceden a la base de datos. Al crear una cuenta nueva, puede especificar una contraseña cuando se crea la cuenta o se puede añadir una contraseña más tarde. Puede configurar los privilegios cuando se crea la cuenta, agregar o quitar los privilegios más tarde. Copias de respaldo de los Datos Usted necesita tener al menos una copia de su valiosa base de datos. Los desastres son muy poco frecuentes, pero ocurren. La computadora donde se almacena la base de datos puede estroperase y perder sus datos, el archivo de computadora puede ser dañada, el edificio se puede quemar, y así sucesivamente. Las copias de seguridad resguardan la base de datos contra la pérdida de estos por desastres. Si su sitio web está alojado en una empresa de alojamiento web o en el ordenador de la empresa, otras personas son responsables de realizar copias de seguridad del sitio Web, incluyendo la base de datos. Los administradores de los equipos dispondrán de procedimientos de copia de seguridad en el lugar. Al menos, usted puede asumir que tienen estos procedimientos. Sin embargo, lo mejor es estar seguro. Hable con personal de la empresa de alojamiento web o del departamento de IT de su compañía sobre sus procedimientos de copia de seguridad. Asegúrese de que las copias de seguridad que le hagan sentirse seguro sobre sus datos y que permiten el reemplazo rápido de una base de datos dañada. Incluso si se está contento con los procedimientos de copia de seguridad en su lugar a su empresa de alojamiento Web, usted probablemente querrá una copia de seguridad de base de datos en el equipo local. De este modo, se está doblemente seguro de que usted tiene una copia de seguridad y acelera el proceso de sustitución de un archivo dañado. Puede hacer copia de su base de datos tantas veces como lo consideren necesario. Además, si su sitio web recoge datos de los usuarios, puede instalar la copia de seguridad de su sitio Web en su equipo local. Por lo tanto, cuando usted está desarrollando y probando en su sitio de desarrollo local, está utilizando la base de datos real, haciendo que su prueba sea más fiable. En general, se necesita tener dos copias de seguridad de los datos: una copia en un lugar de fácil acceso donde puede ser rápidamente sustituido y otra copia en una ubicación física diferente de la ubicación del sitio Web por la remota posibilidad de que el edificio se incendie. El proveedor de hosting probablemente almacena las copias de seguridad en un equipo diferente que el equipo que aloja el sitio Web y / o base de datos. El anfitrión de Internet también puede almacenar una copia de sus copias de seguridad fuera del sitio. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

42

Unidad Didáctica: Gestión y Administración Web Restauración de Datos Luego de haber creado una copia de seguridad de la base de datos; se puede volver a crear la base de datos en cualquier equipo que tiene instalado MySQL desde el archivo de copia de seguridad que ha guardado. Se puede reemplazar la base de datos o mover la base de datos a un equipo nuevo donde no exista actualmente. Existen muchas razones por las que se desea volver a un estado guardado de las bases de datos por ejemplo tablas dañadas, índices incorrectos, etc. En algunos casos las tablas dañadas pueden ocasionar que el servidor MySQL se cierre. Puede utilizar el archivo de texto que creó cuando realizó la copia de seguridad para volver a crear la base de datos. Sin embargo, tal como se describe anteriormente, se genera una base de datos mediante la creación de la base de datos y a continuación, agregar tablas a la base de datos. El archivo de copia de seguridad contiene todas las declaraciones necesarias SQL para reconstruir las tablas, pero no contiene las instrucciones necesarias para crear la base de datos. Su base de datos debe existir antes de poder volver a crear las tablas del archivo de copia de seguridad.

• • • • •

Harris, A. (2009). Programación con PHP 6 y MySQL. Madrid, España: Anaya Multimedia. Pavón, J. (2007). Creación de un Portal con PHP y MsQL. Madrid, España: Ra-Ma S.A. Perez, C. (2997). MySQL para Windows y Linux (2 ed.). Madrid, España: Ra-Ma. Welling, L., Thomson, L.(2017). Desarrollo Web con PHP y MySQL (5 ed.). Madrid, España: Anaya Multimedia. MySQL, https://www.mysql.com/

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

43

Unidad Didáctica: Gestión y Administración Web

Actividad 7: PHP Introducción PHP, un lenguaje de programación diseñado específicamente para su uso en la Web, es una herramienta para crear páginas Web dinámicas. Rico en características que hacen más fácil el diseño y programación web, PHP está en uso en más de 20 millones de dominios y su popularidad sigue creciendo. PHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools). Fue creado originalmente por Rasmus Lerdorf en 1994; sin embargo, la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar de facto para PHP al no haber una especificación formal. Publicado bajo la PHP License, la Free Software Foundation considera esta licencia como software libre. La sintaxis del lenguaje PHP es similar a la sintaxis de C. PHP es en realidad más simple que C, ya que no utiliza algunos de los conceptos más difíciles de C. PHP tampoco incluye las capacidades de programación de bajo nivel de C debido a que PHP está diseñado para programar sitios web y no requiere de las capacidades requeridas por el lenguaje C. PHP es particularmente fuerte en su capacidad para interactuar con bases de datos. Es compatible con casi todas las bases de datos alguna conocida. PHP maneja la conexión a la base de datos y la comunicación con ella. Ventajas de PHP La popularidad de PHP creció rápidamente debido a sus muchas ventajas:  Es rápido. Debido a que es embebido en el código HTML, el tiempo de respuesta es corto.  No tiene costo. Gracias a su licencia GPL (General Public License)  Es fácil de usar. PHP contiene muchas características especiales y funciones necesarias para crear páginas Web dinámicas. El lenguaje PHP está diseñado para incluirse fácilmente en un archivo HTML.  Puede funcionar en muchos sistemas operativos. Se ejecuta en una variedad de sistemas operativos - Windows, Linux, Mac OS, y la mayoría de variedades de Unix.  Está disponible en casi todos los hosts de Internet. Si usted va a publicar el sitio Web en un servidor Web, encontrará PHP instalado en casi todos los hosts de Internet de forma gratuita.  El soporte técnico está ampliamente disponible. Una gran base de usuarios ofrece soporte gratuito a través de correo electrónico en las listas de discusión.  Es seguro. El usuario no ve el código PHP.  Está diseñado para soportar bases de datos. PHP incluye una funcionalidad diseñada para interactuar con bases de datos específicas.  Es personalizable. La licencia de código abierto permite a los programadores modificar el software PHP, añadir o modificar características, según sea necesario para adaptarse a sus entornos específicos.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

44

Unidad Didáctica: Gestión y Administración Web ¿Cómo trabaja PHP? PHP es un lenguaje de scripts incrustados cuando se utiliza en páginas Web. Esto significa que el código PHP está incrustado en el código HTML. Se usa etiquetas HTML para incluir el lenguaje PHP que se insertan en el archivo HTML - de la misma forma que se usaría otras etiquetas HTML. Puede crear y editar páginas web que contienen PHP de la misma manera que crea y edita páginas de HTML. El software PHP funciona con el servidor Web. El servidor Web es el software que proporciona páginas Web para el mundo. Cuando escribe una dirección URL en su navegador Web, usted está enviando un mensaje al servidor Web en esa dirección, pidiéndole que le envíe un archivo HTML. El servidor Web responde enviando el archivo solicitado. Su navegador lee el archivo HTML y muestra la página Web. También se puede pedir al servidor Web que envíe un archivo al hacer clic en un enlace en una página Web. Además, el servidor Web procesa un archivo cuando se hace clic en un botón de la página web que envía a un formulario. Cuando se instala PHP, el servidor Web está configurado para esperar determinadas extensiones de archivos para guardar instrucciones del lenguaje PHP. A menudo, la extensión es .php o .phtml, pero cualquier extensión se puede utilizar. Cuando el servidor Web recibe una solicitud de un archivo con la extensión designada, envía las sentencias HTML como son, pero las declaraciones de PHP son procesadas por el software PHP antes de que se envíe al solicitante. Cuando las sentencias del lenguaje PHP se procesan, solo la salida es enviada por el servidor Web al explorador Web. Las instrucciones del lenguaje PHP no se incluyen en el resultado enviado al navegador, así que el código PHP es seguro y transparente para el usuario. PHP no está integrado con todos los servidores web, pero funciona con muchos de los más populares servidores Web. PHP es desarrollado como un proyecto de la Apache Software Foundation - por lo tanto, lo mejor es con Apache. PHP también funciona con Microsoft IIS / PWS, iPlanet (antes Netscape Enterprise Server), y otros.

Adición de una sección PHP a una página HTML PHP es un aliado para HTML, permitiéndole hacer cosas que no puede hacer por sí solo. Por ejemplo, HTML puede mostrar páginas Web, HTML tiene características que le permiten dar formato a las páginas Web. HTML también permite mostrar gráficos en sus páginas web y reproducir archivos de música. Pero HTML no permite interactuar con la persona que ve la página Web. Se utilizan etiquetas HTML para hacer el lenguaje PHP parte las declaraciones de los scripts HTML. El archivo se nombra con una extensión .php. (El administrador PHP puede definir otras extensiones, como .phtml o .php5, pero .php es la más común). Las instrucciones del lenguaje PHP se incluyen en las etiquetas PHP con el siguiente formato:


?>

Sentencias PHP La sección de PHP que se agrega a un archivo HTML se compone de una serie de sentencias PHP. Cada sentencia PHP es una instrucción de PHP para hacer algo. Las sentencias PHP terminan con un punto y coma (;). PHP no se da cuenta de un espacio en blanco o el final de las líneas. Continúa leyendo una sentencia hasta que encuentra un punto y coma o la etiqueta de fin de código, no importa cuántas líneas se expanda la sentencia. A veces, grupos de sentencias se combinan en un bloque. Un bloque está encerrado entre llaves, { }. Las sentencias de un bloque ejecutan juntas. Un uso común de un bloque es un bloque condicional, en el que se ejecutan las instrucciones sólo cuando se cumplen determinadas condiciones.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

45

Unidad Didáctica: Gestión y Administración Web Sentencias simples Una declaración simple es una sola instrucción seguida de un punto y coma (;). Estas son algunas de las sentencias simples útiles que se usan en los programas de PHP: La sentencia echo Se utiliza la sentencia echo para producir una salida. La salida desde una sentencia echo es enviada a el navegador de usuario, el cual maneja la salida como HTML. Sintaxis: echo itemsalida, itemsalida, itemsalidad, ... Dónde:

 Un itemsalida puede ser un número, una cadena o variable. Una cadena debe ir entre comillas.  La lista de itemsalida que sea necesario, deben ir separados por comas.

Sentencia de Asignación Las sentencias de asignación son declaraciones que asignan valores a las variables. El nombre de la variable está a la izquierda del signo igual y el valor que se asigna a la variable está a la derecha. Sintaxis: $nombrevariable = valor; Dónde:

 El valor puede ser un valor único o una combinación de valores, incluidos los valores de las variables. Una variable puede contener números o caracteres, pero no ambas al mismo tiempo. Por lo tanto, un valor no puede ser una combinación de números y caracteres.

Sentencias de incremento A menudo se utiliza una variable como un contador. Las sentencias siguientes muestran el uso de un contador:  $counter++;  $counter--;  $counter+=2;  $counter-=3;  $counter*=2;  $counter/=3;

Sentencia exit A veces desea que el programa deje de ejecutarse. La sentencia exit detiene el programa. Ninguna otra instrucción se ejecuta después de la instrucción exit. Sintaxis: exit(“mensaje”); Dónde:

 mensaje, es un mensaje que se emite al salir del programa.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

46

Unidad Didáctica: Gestión y Administración Web

Variables PHP Las variables son los recipientes utilizados para almacenar información. Una variable tiene un nombre, y la información se almacena en la variable. Después de que la información se almacena en una variable, puede ser utilizada más adelante en el programa. Uno de los usos más comunes de variables es de conservar la información que un usuario digita en un formulario.

$NombreVariable = ValorVariable; Al nombrar una variable tener en cuenta lo siguiente:  Todos los nombres de las variables tienen un signo de dólar ($) delante de ellas. Esto le indica a PHP que es un nombre de variable.  Los nombres de variable pueden tener cualquier longitud.  Los nombres de variable pueden incluir solamente letras, números y guiones.  Los nombres de variable deben comenzar con una letra o un subrayado. No pueden comenzar con un número.  Mayúsculas y minúsculas no son lo mismo.

Constantes PHP Las constantes de PHP son similares a las variables. A las constantes se les da un nombre y un valor se almacena en ellas. Sin embargo, las constantes son constantes, es decir, no pueden ser modificadas por el programa. Después de establecer el valor de una constante, este sigue siendo el mismo. Las constantes se utilizan cuando un valor es necesario en varios lugares en el programa y no cambia durante la ejecución del programa. El valor se establece en una constante en el inicio del programa. Mediante el uso de una constante en lugar de una variable, se asegura que el valor no sea cambiado accidentalmente.

define(“NombreConstante”, “ValorConstante”); Trabajar con números PHP permite hacer operaciones aritméticas con números. En la siguiente tabla se muestra los operadores que se pueden usar en PHP: OPERADORES ARITMÉTICOS Operador

Descripción

+

Sumar dos números.

-

Restar el segundo número del primero.

*

Multiplica dos números.

/

Divide el primer número por el segundo número.

%

Encontrar el residuo cuando el primer número es dividido por el segundo número.

El orden en que se lleva a cabo las operaciones aritméticas es importante. Se puede conseguir resultados diferentes dependiendo de qué operación se realiza en primer lugar. PHP hace la multiplicación y la división en primer lugar, seguida de la suma y la resta. Si las operaciones tienen la misma prioridad, PHP las realiza de izquierda a derecha. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

47

Unidad Didáctica: Gestión y Administración Web Se puede cambiar el orden en que se realiza el cálculo utilizando paréntesis. Las operaciones dentro de los paréntesis se realizan primero.

Trabajar con cadena de caracteres Una cadena de caracteres es una serie de caracteres. Los caracteres son letras, números y signos de puntuación. Cuando un número se utiliza como un carácter, es sólo un carácter almacenado, lo mismo que una letra. No se puede utilizar en las operaciones aritméticas. Cuando se almacena una cadena de caracteres en una variable, le dices a PHP donde la cadena comienza y termina utilizando comillas dobles o comillas simples. Cadenas entre comillas simples y comillas dobles se tratan de manera diferente. Las cadenas entre comillas simples se almacenan literalmente, con la excepción de \ ', que se almacena como un apóstrofo. En las cadenas entre comillas dobles, variables y algunos caracteres especiales se evalúan antes que la cadena sea almacena.

Trabajar con tiempo y fechas Las fechas y horas pueden ser elementos importantes en una aplicación Web de base de datos. PHP tiene la capacidad para reconocer fechas y tiempos y manejarlos de manera diferente a las cadenas de caracteres sin formato. Las fechas y horas son almacenados por la computadora en un formato llamado timestamp. Sin embargo, esto no es un formato en el usuario desearía ver la fecha. PHP convierte las fechas desde su anotación en timestamp que el equipo entiende y desde un valor temporal en un formato familiar para las personas. PHP maneja las fechas y horas utilizando las funciones integradas. El formato de fecha y hora es Unix Timestamp, que es un número entero que es el número de segundos desde el 1 de enero 1970, 00:00:00 GMT (Greenwich Mean Time) para el tiempo representado por la marca de tiempo. Este formato hace que sea fácil de calcular el tiempo transcurrido entre dos fechas - sólo se resta una fecha y hora de la otra. La hora actual es un concepto difícil en la Web. La hora actual es la hora almacenada en el servidor donde se está ejecutando PHP. Si está utilizando una empresa de alojamiento web, es probable que ni siquiera sepa dónde están los servidores que su empresa de alojamiento web mantiene. Además, los visitantes que visiten su sitio web pueden estar en cualquier parte del mundo. En consecuencia, rara vez se desea mostrar la hora actual en su página Web. Incluso la fecha puede ser diferente si el servidor Web y el visitante están en zonas bastante separadas de tiempo. Si se tiene una razón para querer mostrar la hora actual en una ubicación específica, se hace mediante la inclusión de la siguiente declaración en el script:

Puede ver qué zona horaria es actualmente su zona horaria predeterminada mediante las siguientes sentencias:

Para dar formato a una fecha, la función que se utiliza con más frecuencia es date, que convierte una fecha y hora en un formato que usted especifique. El formato general es:

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

48

Unidad Didáctica: Gestión y Administración Web SÍMBOLOS DE FORMATO DE FECHA Símbolo

Significado

Ejemplo

F

Mes en texto, sin abreviación

January

M

Mes en texto, abreviado

Jan

m

Mes en números con ceros a la izquierda

02, 12

n

Mes en números sin ceros a la izquierda

1, 12

d

Día del mes; dos dígitos con ceros a la izquierda

01,14

j

Día del mes sin ceros a la izquierda

3, 14

l

Día de la semana en texto, sin abreviación

Friday

D

Día de la semana en texto, abreviado

Fri

w

Día de la semana en números (0 a 6)

0 (Sunday)

Y

Año en cuatro dígitos

2010

y

Año en dos dígitos

10

g

Hora entre 0 y 12 sin ceros a la izquierda

2, 10

G

Hora entre 0 y 24 sin ceros a la izquierda

2, 15

h

Hora entre 0 y 12 con ceros a la izquierda

02, 10

H

Hora entre 0 y 24 con ceros a la izquierda

02, 15

i

Minutos

00, 59

s

Segundos

00, 59

a

am o pm en minúsculas

am, pm

A

AM o PM en mayúsculas

AM, PM

Comparación de valores PHP ofrece varias maneras de comparar valores. La siguiente tabla muestra las comparaciones que están disponibles: COMPARANDO VALORES Comparación

Descripción

==

Son los dos valores iguales?

>

Es el primer valor mayor que el segundo valor?

>=

Es el primer valor mayor o igual que el segundo valor?

<

Es el primer valor menor que el segundo valor?

<=

Es el primer valor menor o igual que el segundo valor?

!=

Son los dos valores diferentes?

<>

Son los dos valores diferentes?

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

49

Unidad Didáctica: Gestión y Administración Web

Comentarios en PHP PHP soporta tres formas de comentarios:

1. /* comentario continua el comentario */ 2. # Comentario de línea 3. // Comentario de línea

Arreglos PHP Los arreglos o matrices son variables complejas. Una matriz almacena un grupo de valores del mismo tipo bajo un solo nombre de variable. La información en una matriz se puede manejar, acceder y modifica fácilmente. Hay dos tipos de matrices: los que se accede de acuerdo con la posición de índice en el que reside el elemento, y las que son de carácter asociativo, se accede por un valor clave que lleva algún tipo de asociación con su valor correspondiente. En la práctica, sin embargo, ambos son manipulados de la misma manera. Las matrices también pueden ser unidimensionales o multidimensionales. Creación de matrices La forma más sencilla de crear una matriz es asignar un valor a una variable con corchetes ([ ]) al final de su nombre. Ejemplos: $arrego[1] = “Trujillo”; //matriz indexada unidimensional $arreglo = array( “Trujillo”, ”Lima”, ”Piura”); //otra forma $lenguajes["España"] = "Español"; //matriz asociativa $lenguajes["Brasil"] = "Portugués"; $datos[1] [4] = "ventas"; // dos dimensiones $capitales["Perú"] ["La Libertad"] = "Trujillo"; // dos dimensiones $calles["Perú"] ["La Libertad"]["Trujillo"] = "Bolivar"; // tres dimensiones

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

50

Unidad Didáctica: Gestión y Administración Web

Sentencias Condicionales Una sentencia condicional ejecuta un bloque de instrucciones sólo cuando se cumplen ciertas condiciones. Hay dos tipos de sentencias condicionales: Sentencia if Una sentencia if pregunta si se dan ciertas condiciones. Un bloque de instrucciones se ejecuta en función de que se cumplan las condiciones. Sintaxis: if( condición ... ) {

Bloque de sentencias } elseif( condición ... ) { Bloque de sentencias } else { Bloque de sentencias } Dónde:

 condición, es una condición lógica que se evalúa a verdadero (true) o falso (false).  Bloque de sentencias, son bloques de código que se ejecutan de acuerdo a la evaluación de la condición

Sentencias switch La sentencia switch comprueba el valor de una variable y ejecuta el bloque de sentencias para el valor correspondiente de la variable. Sintaxis: switch ( $nombrevariable ) { case value : bloque de sentencias; break; case value : bloque de sentencias; break; ... default: bloque de sentencias; break; } Dónde:

 $nombrevariable, es un identificador válido.  break, esta instrucción causa la salida inmediata de la sentencia switch. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

51

Unidad Didáctica: Gestión y Administración Web

Sentencias Repetitivas Las sentencias repetitivas son utilizadas con frecuencia en los programas, para configurar un bloque de instrucciones que se repiten. A veces, el bucle se repite un número determinado de veces. Otras veces, el bucle se repite hasta que una determinada condición existe. Hay tres tipos de bucles: El bucle for El más básico para los ciclos se basa en un contador. Se establece el valor inicial del contador, establecer el valor final, y se establece cómo se incrementa el contador. Sintaxis: for(valorinicial; condiciónfinal; incremento) { Bloque de instrucciones; } Dónde:

 valorinicial, es el valor inicial a partir del cual se empieza a contar.  condiciónfinal, una sentencia que establece el valor final.  Incremento, una instrucción que incrementa el contador.

El bucle while Un bucle while continúa repitiéndose siempre y cuando cierta condición sea verdadera. Sintaxis: while( condicion ) { Bloque de instrucciones; } Dónde:

 condición, condición lógica que se evalúa a true o false.

El bucle do .. while Un bucle do..while es similar a un bucle while. Es decir se continúa repitiendo mientras la condición sea verdadera; pero, la condición se evalúa al final de cada bucle. Sintaxis: do { Bloque de instrucciones; } while( condicion ) Dónde:

 condición, condición lógica que se evalúa a true o false.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

52

Unidad Didáctica: Gestión y Administración Web

Funciones Las aplicaciones suelen realizar la misma tarea en diferentes puntos en el programa o en programas diferentes. Se puede crear una función que contenga todas las instrucciones necesarias y utilizarla cuando se necesite. Sintaxis: function nombrefuncion( ) { Bloque de instrucciones; return; } Dónde:

• • • • • •

 nombrefunción, es un identificador válido el que va ha usarse cuando se requiera la función.

Harris, A. (2009). Programación con PHP 6 y MySQL. Madrid, España: Anaya Multimedia. Heurtel, O. (2016). PHP 7. Desarrollar un sitio web dinámico e interactivo. Barcelona, España: Eni ediciones. Pavón, J. (2007). Creación de un Portal con PHP y MsQL. Madrid, España: Ra-Ma S.A. Perez, C. (2997). MySQL para Windows y Linux (2 ed.). Madrid, España: Ra-Ma. Welling, L., Thomson, L.(2017). Desarrollo Web con PHP y MySQL (5 ed.). Madrid, España: Anaya Multimedia. PHP, http://php.net/manual/es/intro-whatis.php

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

53

Unidad Didáctica: Gestión y Administración Web

Actividad 8: PHP y MySQL MySQL y PHP se utilizan con frecuencia juntos. Son a menudo llamados el dúo dinámico. MySQL proporciona la parte de base de datos y PHP proporciona la parte de aplicación de una aplicación web de base de datos.

Ventajas de la Relación MySQL y PHP como pareja tienen varias ventajas:  Son gratis. Es difícil de superar esta ventaja, libre de costo.  Están orientados a Web. Ambos fueron diseñados específicamente para su uso en sitios Web. Ambos tienen un conjunto de características enfocadas a la creación de sitios Web dinámicos.  Son fáciles de usar. Ambos fueron diseñados para obtener un sitio Web con rapidez.  Son rápidos. Ambos fueron diseñados con la velocidad como un objetivo de mayor importancia. Juntos proporcionan una de las maneras más rápidas para ofrecer páginas web dinámicas a los usuarios.  Se comunican bien una con otra. PHP tiene funciones integradas para comunicarse con MySQL.

¿Cómo trabajan MySQL y PHP juntos? Como un RDBMS, MySQL puede almacenar información compleja. Como un lenguaje de script, PHP puede realizar complicadas manipulaciones de datos, en cualquiera de los datos que tiene que modificar antes de guardarla en la base de datos o datos que se recuperan de la base de datos y la necesidad de modificar antes de mostrar o utilizar para otra tarea. Juntos, PHP y MySQL puede ser usado para construir una aplicación web de base de datos sofisticada y compleja.

Funciones PHP y MySQL Puede utilizar las funciones integradas de PHP para interactuar con MySQL. Estas funciones conectan con el servidor MySQL, seleccionan la base de datos correcta, envían consultas SQL y realizan la comunicación con otras bases de datos MySQL. No es necesario conocer los detalles de interactuar con la base de datos debido a que PHP maneja todos los detalles. Usted sólo necesita saber cómo utilizar las funciones. A partir de PHP 5, PHP ofrece dos tipos de funciones para comunicarse con MySQL: un conjunto de funciones (las funciones mysqli) para el uso con MySQL 4.1 o posterior y otra serie de funciones (las funciones de mysql) para el uso con MySQL 4.0 y versiones anteriores. La mayoría de Web ofrecen MySQL 5.0 o 5.1. Si ofrecen sólo versiones anteriores de MySQL, puede ponerse en contacto con la gente de soporte técnico para ver cuándo van a ofrecer una versión más reciente de MySQL. Las funciones de PHP para su uso con MySQL 5.1 tiene el siguiente formato general:

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

54

Unidad Didáctica: Gestión y Administración Web Sintaxis para funciones mysql y mysqli Funciones mysqli

Funciones mysql

mysqli_connect ($host, $user, $passwd, $dbname)

mysql_connect($host,$user,$passwd) seguido de: mysql_select_db($dbname)

mysqli_errno($cxn)

mysql_errno() o mysql_errno($cxn)

mysqli_error($cxn)

mysql_error() o mysql_error($cxn)

mysqli_fetch_array($result)

mysql_fetch_array($result)

mysqli_fetch_assoc($result)

mysql_fetch_assoc($result)

mysqli_fetch_row($result)

mysql_fetch_row($result)

mysqli_insert_id($cxn)

mysql_insert_id($cxn)

mysqli_num_rows($result)

mysql_num_rows($result)

mysqli_query($cxn,$sql)

mysql_query($sql) o mysql_query($sql,$cxn)

mysqli_select_db($cxn,$dbname)

mysql_select_db($dbname)

mysqli_real_escape_string($cxn,$data)

mysql_real_escape_string($data)

Estableciendo una conexión El primer paso en la comunicación con su base de datos MySQL es la conexión con el servidor MySQL. Para conectar con el servidor, lo que necesita saber es el nombre del equipo donde se encuentra la base de datos, el nombre de su cuenta MySQL y la contraseña de su cuenta MySQL. Para abrir la conexión, utilice la función mysqli_connect de la siguiente manera:

$cxn = mysqli_connect(“host”, “acct”, “password”, “dbname”) or die (“message”); Donde: •

host: El nombre del equipo donde está instalado MySQL.

•

acct: El nombre de cualquier cuenta válida de MySQL.

•

password: La contraseña para la cuenta de MySQL especificada por acct.

•

dbname: El nombre de la base de datos con la que se quiere comunicar.

•

message: El mensaje enviado al navegador si la conexión falla.

La variable $cxn contiene información que identifica a la conexión. Se puede tener más de una conexión abierta a la vez utilizando más de un nombre de variable. Una conexión permanece abierta hasta que se cierre o hasta que termine el programa. Se cierra una conexión de la siguiente manera:

mysqli_close($nombre_conexión); Selección de una base de datos mysqli_select_db($nombre_conexión, “nombre_basedatos”) or die (“mensaje”);

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

55

Unidad Didáctica: Gestión y Administración Web Obteniendo información de una base de datos Se utiliza la consulta SELECT para obtener datos de la base de datos. Las consultas SELECT están escritas en el lenguaje SQL. $consulta = “SELECT * FROM tabla”; $resultado = mysqli_query($nombreconexión,$consulta) or die (“mensaje_error”); Capturando y usando datos Utilice la función mysqli_fetch_assoc o la función mysqli_fetch_row para obtener los datos de la ubicación temporal. La función mysqli_fetch_assoc devuelve los datos en una matriz asociativa; mysqli_fetch_row devuelve los datos en una matriz numérica. De vez en cuando, es posible que necesite obtener los datos tanto en una matriz asociativa y numérica, lo que se puede hacer con mysqli_fetch_array.

Colocando información en una base de datos Su aplicación probablemente necesita almacenar los datos en su base de datos. Los datos se almacenan mediante el envío de consultas SQL a MySQL. Preparando los datos Se necesita preparar los datos antes de almacenarlos en la base de datos. Preparar los datos implica: •

Colocar los datos en variables

•

Asegurarse que los datos están en el formato específico para la base de datos.

•

Limpieza de los datos.

•

Escapar de datos.

Colocar los datos en variables Puede almacenar los datos, enviándolos a la base de datos en una consulta SQL. Agrega los datos a la consulta mediante la inclusión de los nombres de variable en la consulta. La mayor parte de los datos que desea almacenar son tecleados por el usuario en un formulario. Usar el formato correcto Al diseñar la base de datos, se establece el tipo de datos para cada columna. Los datos que desea almacenar deben coincidir con el tipo de datos de la columna que se quiere guardar. Si envía un formato incorrecto de datos, MySQL almacena los datos, pero no puede almacenar el valor que se esperaba. Limpieza de los datos Los usuarios pueden introducir datos en un campo de texto, ya sea accidental o maliciosa, que pueden causar problemas para su aplicación, la base de datos, o sus usuarios. La comprobación de los datos y aceptar sólo los caracteres que se espera de la información solicitada puede evitar muchos problemas. Escapar de datos Un usuario puede escribir información en el formulario que, cuando se utiliza en la consulta, la modifica de modo que funciona de forma diferente a lo esperado. Algunos de estos daños a consultas se crean mediante la manipulación de las comillas en la consulta. Se puede proteger contra este tipo de ataque, llamado una SQL injection, para escapar de las comillas en los campos de formulario enviado. Escapar de caracteres especiales, tales como comillas, significa colocar una barra invertida (\) delante del carácter.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

56

Unidad Didáctica: Gestión y Administración Web

• • • • • • • • • • • • •

Greenspan, J., Bulger B. (2001). MySQL/PHP Database Applications. Foster City, USA: IDG Books. Harris, A. (2009). Programación con PHP 6 y MySQL. Madrid, España: Anaya Multimedia. Heurtel, O. (2016). PHP 7. Desarrollar un sitio web dinámico e interactivo. Barcelona, España: Eni ediciones. Pavón, J. (2007). Creación de un Portal con PHP y MsQL. Madrid, España: Ra-Ma S.A. Perez, C. (2997). MySQL para Windows y Linux (2 ed.). Madrid, España: Ra-Ma. Welling, L., Thomson, L.(2017). Desarrollo Web con PHP y MySQL (5 ed.). Madrid, España: Anaya Multimedia. Valade, J. (2010). PHP & MySQL For Dummies (4 ed.). Indianapolis, USA: Wiley Publishing, Inc. PHP, https://secure.php.net MySQL, https://www.mysql.com/ Apache Friends, www.apachefriends.org The World Wide Wed Consortium, www.w3.org Joomla! Web Site Oficial, https://www.joomla.org/ PHP, http://php.net/manual/es/intro-whatis.php

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

57

Unidad Didáctica: Gestión y Administración Web

Indicador de logro 3 Descripción:  Crea, implementa y administra aplicación web organizacional utilizando correctamente un sistema gestor de contenidos (CMS).

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

58

Unidad Didáctica: Gestión y Administración Web

Actividad 9: WordPress Sistemas de Gestión de Contenidos (Content Management Systems). Un sistema de gestión de contenidos (Content Management System o CMS) es un software que se utiliza principalmente para facilitar la gestión de sitios web, ya sea en Internet o en una intranet, y por eso también son conocidos como gestores de contenido web (Web Content Management o WCM). Hay que tener en cuenta, sin embargo, que la aplicación de los CMS no se limita sólo a las webs. Cuenta con una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio web. El sistema permite manejar de manera independiente el contenido y el diseño. James Robertson en su artículo “How to evaluate a content management system”, propone una división de la funcionalidad de los sistemas de gestión de contenidos en cuatro categorías: Creación de contenido Un CMS aporta herramientas para que los creadores sin conocimientos técnicos en páginas web puedan concentrarse en el contenido. Lo más habitual es proporcionar un editor de texto WYSIWYG, en el que el usuario ve el resultado final mientras escribe, al estilo de los editores comerciales, pero con un rango de formatos de texto limitado. Esta limitación tiene sentido, ya que el objetivo es que el creador pueda poner énfasis en algunos puntos, pero sin modificar mucho el estilo general del sitio web. Hay otras herramientas como la edición de los documentos en XML, utilización de aplicaciones ofimáticas con las que se integra el CMS, importación de documentos existentes y editores que permiten añadir marcas, habitualmente HTML, para indicar el formato y estructura de un documento. Un CMS puede incorporar una o varias de estas herramientas, pero siempre tendría que proporcionar un editor WYSIWYG por su facilidad de uso y la comodidad de acceso desde cualquier ordenador con un navegador y acceso a Internet. Para la creación del sitio propiamente dicho, los CMS aportan herramientas para definir la estructura, el formato de las páginas, el aspecto visual, uso de patrones, y un sistema modular que permite incluir funciones no previstas originalmente. Gestión de contenido Los documentos creados se depositan en una base de datos central donde también se guardan el resto de datos de la web, cómo son los datos relativos a los documentos (versiones hechas, autor, fecha de publicación y caducidad, etc.), datos y preferencias de los usuarios, la estructura de la web, etc. La estructura de la web se puede configurar con una herramienta que, habitualmente, presenta una visión jerárquica del sitio y permite modificaciones. Mediante esta estructura se puede asignar un grupo a cada área, con responsables, editores, autores y usuarios con diferentes permisos. Eso es imprescindible para facilitar el ciclo de trabajo (workflow) con un circuito de edición que va desde el autor hasta el responsable final de la publicación. El CMS permite la comunicación entre los miembros del grupo y hace un seguimiento del estado de cada paso del ciclo de trabajo. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

59

Unidad Didáctica: Gestión y Administración Web Publicación Una página aprobada se publica automáticamente cuando llega la fecha de publicación, y cuando caduca se archiva para futuras referencias. En su publicación se aplica el patrón definido para toda la web o para la sección concreta donde está situada, de forma que el resultado final es un sitio web con un aspecto consistente en todas sus páginas. Esta separación entre contenido y forma permite que se pueda modificar el aspecto visual de un sitio web sin afectar a los documentos ya creados y libera a los autores de preocuparse por el diseño final de sus páginas. Presentación Un CMS puede gestionar automáticamente la accesibilidad del sitio web, con soporte de normas internacionales de accesibilidad como WAI (Web Accessibility Initiative), y adaptarse a las preferencias o necesidades de cada usuario. También puede proporcionar compatibilidad con los diferentes navegadores disponibles en todas las plataformas (Windows, Linux, Mac, Palm, etc.) y su capacidad de internacionalización lo permite adaptarse al idioma, sistema de medidas y cultura del visitante. El sistema se encarga de gestionar muchos otros aspectos como son los menús de navegación o la jerarquía de la página actual dentro del web, añadiendo enlaces de forma automática. También gestiona todos los módulos, internos o externos, que incorpore al sistema. Así, por ejemplo, con un módulo de noticias se presentarían las novedades aparecidas en otro web, con un módulo de publicidad se mostraría un anuncio o mensaje animado, y con un módulo de foro se podría mostrar, en la página principal, el título de los últimos mensajes recibidos. Todo eso con los enlaces correspondientes y, siguiendo el patrón que los diseñadores hayan creado. Tipos de gestores de contenidos Los gestores de contenido se pueden clasificar según diferentes criterios: Según el lenguaje de programación empleado: • • • • • • •

Active Server Pages, Java, PHP, ASP.NET, Ruby On Rails, Python, PERL.

Según la licencia: • •

Código abierto, Software propietario.

Por su uso y funcionalidad •

Blogs: para páginas personales. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

60

Unidad Didáctica: Gestión y Administración Web • • • • • • • •

Foros: para compartir opiniones. Wikis: para el desarrollo colaborativo. Enseñanza electrónica: plataforma para contenidos de enseñanza en línea. Comercio electrónico: plataforma de gestión de usuarios, catálogo, compras y pagos. Publicaciones digitales. Difusión de contenido multimedia. Propósito general. Aplicación móvil: plataformas de gestión de aplicaciones móviles.

Otras clasificaciones según su funcionalidad diferencian entre contenidos empresariales (ECM), contenidos web (WCM), documentos y contenidos multimedia (DMS) y contenidos para el aprendizaje (LCMS).

Ventajas de un CMS a) Los contenidos generalmente se guardan en una base de datos, lo que facilita la exportación, catalogación o búsqueda. b) El diseño normalmente está separado del contenido (la mayoría de CMS tiene colecciones gratuitas de diseños que se pueden instalar y configurar fácilmente). c) Es muy sencillo crear y actualizar una página Web. Algunos CMS tienen una curva de aprendizaje un poco pronunciada al principio que se ve compensada con el tiempo. d) El contenido es fácilmente escalable, y se puede estructurar en diferentes vistas según el contexto. e) La mayoría de los CMS tienen módulos que incrementan las potencialidades del mismo, permitiendo la inclusión de elementos multimedia y vinculación con otras herramientas. f)

Los CMS más conocidos incorporan editores de texto visuales (WYSIWYG) que facilitan la edición de los textos.

g) Gestión de usuarios. Podemos crear diferentes usuarios según tipologías definidas en los diferentes CMS. Algunos CMS permiten incluso definir qué puede hacer o no un tipo de usuario según el contexto. ¿Cómo funciona un CMS?  Primero tenemos que crear la base de datos dónde guardaremos los contenidos del CMS (algunas aplicaciones no trabajan con bases de datos y guardan la información en archivos de texto).  Normalmente, los CMS tienen un instalador que copia los archivos y la estructura principal sobre la que podemos trabajar. En otras ocasiones, basta con copiar una carpeta.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

61

Unidad Didáctica: Gestión y Administración Web  Una vez instalado, tendremos un acceso como administrador. Con este acceso podemos crear los diferentes tipos de contenidos que permita el CMS.  La mayoría de CMS tienen directorios de temas y módulos para descargar e instalar, así como paquetes de idioma para traducirlo a otros idiomas.  







Los temas, permiten cambiar gráficamente de apariencia un CMS, normalmente guardando un conjunto de archivos en un directorio concreto. Los módulos son códigos desarrollados aparte del software principal y añaden funcionalidades a los CMS. Hay cientos de módulos disponibles, si bien no todos los módulos son plenamente compatibles con todas las versiones. Por último, los paquetes de idioma, nos facilitan la edición de contenidos al presentar la interfaz de administración y edición en el idioma que deseemos. El castellano está en los paquetes de idioma descargables en Wordpress, Drupal y Joomla. Si nuestro CMS está basado en open source, es posible que también podamos crear nuestra propia traducción de un idioma, diseñar nuestro estilo gráfico propio o desarrollar un módulo a medida. Una vez instalado el software y los módulos, adaptado el idioma y definido el estilo gráfico ya podemos comenzar a trabajar.

¿Qué necesito saber antes de utilizar un CMS? • La mayoría de CMS necesitan una base de datos (generalmente MySQL) y un servidor web (Apache) que lea los archivos php. Deberías contar con un servidor de alojamiento que te facilite ambos. Si optas por otro tipo de CMS deberías saber qué base de datos necesita y en qué lenguaje está escrito para contratar un servicio de alojamiento adecuado. •

Un CMS no creará una web por sí sólo. Te proporciona una base para construirla, pero todos los CMS tienen una curva de aprendizaje mayor o menor.

•

Aunque la mayoría de los CMS permiten crear diferentes tipos de contenidos, según el tipo de web que deseemos configurar, podemos encontrar CMS específicos. Si quiero crear un campus on-line, seguramente será mejor opción usar Moodle, Dokeos o Claroline, si por el contrario busco crear una red social, probaré Drupal, Joomla o Social Engine, y para blogs la mejor opción es Wordpress o Movable Type.

•

Normalmente los CMS tienen muchas más opciones que las que seguramente necesitamos para nuestra web. Conviene que nos centremos en aprender aquello que vamos a necesitar.

•

Aunque podemos crear un CMS, añadirle funcionalidades (módulos) y cambiarlo gráficamente (temas), es posible que nuestra idea precise modificar la estructura de contenidos o hacer cambios gráficos o bien desarrollar nuevas funcionalidades. Esto es factible, pero requiere de conocimientos de programación y desarrollo web bastante avanzados.

WordPress WordPress es una poderosa plataforma semántica de publicación, y viene con una gran cantidad de características incorporadas, diseñadas para hacer tan fácil, placentera y atractiva como sea posible la experiencia de publicar en Internet. WordPress es un sistema de publicación personal distribuido libremente, basado en estándares web, rápido, ligero y gratis; con una configuración y características muy bien pensadas, y un núcleo extremadamente personalizable.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

62

Unidad Didáctica: Gestión y Administración Web Características Probado WordPress impulsa más de una cuarta parte de los nuevos sitios de hoy, es el sistema de administración de contenido (CMS) preferido por casi la mitad de los principales sitios que lo hacen más popular en la web, y es confiable para los editores de contenido, tanto grandes como pequeños incluyedo CNN y el NY Times. Con más de 50 millones de sitios en todo el mundo y 13 años de historia probada, sabrá que está obteniendo el mejor software para el trabajo. Fácil de usar El núcleo de WordPress es una interfaz simple similar al software de edición de escritorio usado actualmente. Sin necesidad de experiencia en codificación o conocimiento experto, la curva de aprendizaje suele ser tan corta como escribir en la URL de su sitio e iniciar sesión. De hecho, la mayoría de los usuarios pueden aprender lo básico sin ningún tipo de capacitación. Las interfaces son pulidas y fáciles de usar, y son el resultado de años de refinamiento. Es el poder de Microsoft Word con la intuición de un iPhone. Creado para publicar WordPress hace que compartir contenido y atraer lectores a su sitio sea muy sencillo. Ya sea empujando contenido a redes sociales, asegurándose de que su sitio web esté en el formato óptimo para aparecer en la parte superior de los resultados de búsqueda en el momento de publicar o de que los visitantes puedan suscribirse a sub-feeds de contenido específicos en su lector de feeds favorito (o incluso por correo electrónico), WordPress no es simplemente un sitio web, sino una plataforma de publicación de contenido. Con un solo clic, tienes un poderoso megáfono para transmitir tu mensaje al mundo. Respaldado por el apoyo de la comunidad WordPress cuenta con el respaldo de una vibrante comunidad de usuarios que ya han resuelto muchos de los desafíos más difíciles para compartir información en la actualidad. La versión 4.6 de WordPress se ha descargado más de 20 millones de veces desde su lanzamiento hace unos meses. Con una biblioteca de más de 50,000 complementos y plugins gratuitos de código abierto que crecen cada día y cientos de contribuidores principales en cada ciclo de publicación, la comunidad de WordPress es un ecosistema creado en torno a la viabilidad de la plataforma y el éxito comprobado. Multiple Sitio WordPress se puede extender a la función Multiple sitio bajo demanda. Puede desarrollar y mantener múltiples sitios usando una sola instalación de WordPress. Multisite es una característica de WordPress 3.0 y versiones posteriores que permite que varios sitios virtuales compartan una sola instalación de WordPress. Cuando se activa la función de varios sitios, el sitio original de WordPress se puede convertir para admitir una red de sitios. El panel de administración El panel de administración permite configurar las características del sitio web. En el escritorio (primera pantalla que se ve tras iniciar sesión) se muestra información acerca de la actividad reciente en el sitio web, así como avisos de actualizaciones o información relevante de la comunidad Wordpress. El menú para navegar en el panel de administración se encuentra en la parte izquierda de la pantalla. Es un menú de navegación intuitivo y flexible, permitiendo llegar a las funciones con pocos clics. Administración de entradas Las entradas son noticias que se mostrarán en orden cronológico inverso en la página de inicio de la web. Normalmente son las que más se comentan, y se incluyen en el feed RSS de la web.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

63

Unidad Didáctica: Gestión y Administración Web Administración de categorías Cada entrada se clasifica bajo una o varias categorías. Las categorías permiten la clasificación de las noticias y páginas en grupos y subgrupos, de tal manera que ayuden al visitante en el navegación y uso del sitio web. Cada categoría puede tener una categoría “padre” para crear una jerarquía dentro de la estructura de categorías. Administración de etiquetas de entradas Cada noticia se clasifica de manera opcional bajo una o varias etiquetas. A diferencia de las categorías, las etiquetas no tienen jerarquía por lo que no hay relación de padres e hijos, pero al igual que las categorías, los nombres de etiqueta deben ser únicos. Administración de contenido multimedia La pantalla de administración de contenido multimedia permite subir contenido multimedia para luego ser utilizada en entradas y páginas.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

64

Unidad Didáctica: Gestión y Administración Web

Actividad 10: Apariencia Administración de temas Los temas o las plantillas de Wordpress definen la apariencia que tendrá nuestra Web para los visitantes. La instalación y configuración de los temas es una tarea fácil. Wordpress viene con un reducido número de plantillas preinstaladas. La gran comunidad que se ha desarrollado alrededor de Wordpress posibilita el uso de una enorme cantidad de temas gratuitos y también se puede optar por adquirir plantillas profesionales, aunque esto dependerá del presupuesto con el que se cuente.

Administración de widgets Un widget es una aplicación adicional muy útil que te da acceso a funciones de uso habitual. Por ejemplo, en el panel de la derecha de nuestro Wordpress, encontramos varios widgets como el de búsqueda, entradas recientes etc. Los widgets, pueden cambiar en función de la plantilla que estemos usando. El trabajo con widgets, es fácil e intuitivo, ya que sólo hay que arrastrarlos.

Administración de menús Los menús son una de las partes más importantes de un sitio web. Los menús claros, con opciones interesantes para los usuarios y que sean fáciles de utilizar son fundamentales para que los usuarios permanezcan más tiempo en el sitio web y visiten las secciones que más interesen al creador del sitio web. La creación de menús y su mantenimiento en Wordpress es un proceso fácil sin embargo requiere ser cuidadoso al momento de elegir los elementos a los que se accede desde el menú.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

65

Unidad Didáctica: Gestión y Administración Web

Actividad 11: Usuarios Administración de perfil de usuario Dentro del menú de usuarios disponemos de una sección de “Perfil” que no es otra cosa que información sobre nuestra cuenta de usuario, del usuario que en este momento esté accediendo al panel de administración de WordPress.

Administración de usuarios La gestión de usuarios es muy importante para un sitio web. Desde WordPress podemos crear y administrar varios usuarios asignándole distintos perfiles o roles dependiendo de esto el usuario tendrá mayores o menores atribuciones en el sitio web.

Administración de roles Desde el desplegable perfil podemos determinar el rol de cada usuario, que se detalla a continuación: •

Suscriptor: son usuarios que pueden acceder a contenidos privados o solo para suscriptores. Es un perfil ideal para webs donde se permita solo el acceso a los contenidos a usuarios registrados, capacidad que se habilita también en el panel de administración.

•

Colaborador: es cualquier usuario que pueda escribir nuevos artículos y noticias, y modificarlos. Cualquier contenido nuevo no se publica directamente, sino que requiere aprobación de un administrador. Ideal para blogs con muchos colaboradores y que requieran de un nivel mínimo de calidad en las nuevas entradas.

•

Autor: es otro perfil de colaborador, pero este puede publicar directamente sus escritos. También puede subir archivos.

•

Editor: es casi un administrador que, salvo las funciones propias del administrador (instalaciones, modificación de plantillas, plugins, etc.) puede gestionar artículos y noticias de cualquier otro usuario.

•

Administrador: tiene acceso a todo en el sitio web y es quien recibe en su correo las notificaciones de los eventos que se sucedan (nuevos comentarios, contacto, actualizaciones, etc.). Es el encargado de las actualizaciones, instalación de plugins, cambio de plantillas y configuración.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

66

Unidad Didáctica: Gestión y Administración Web

Actividad 12: Páginas Diferencia entre entrada y página Una de las cosas que debemos saber sobre WordPress es la diferencia entre una Entrada o Post y una Página, que aunque no es muy difícil puede llevarnos a confusión. Es necesario entender que, pese a que WordPress es un CMS muy potente y extendido, originalmente fue concebido para generar Blogs, y conserva esta característica, que nos proporciona ventajas adicionales sobre gestores más complejos como Joomla! o Drupal. Una Entrada o Post, es el contenido dinámico de nuestro sitio, característica propia del Blog. Puede ser actualización o noticia, que permite ir actualizando nuestra web de forma cronológica, aunque también podemos organizar las entradas por categorías, etiquetas o autores. Una Página, es el contenido estático de nuestro sitio web, donde se muestra la información referente a los servicios que se prestan u otro tipo de información útil a nuestros visitantes. Permite la creación de apartados o áreas en nuestro sitio web. Las páginas se organizan mediante los elementos de menú. En su instalación WordPress, integra una entrada de ejemplo “Hola Mundo” y una “Página de ejemplo” en su menú principal.

Administración de páginas Las entradas o noticias son objetos orientados en el tiempo. Se escriben en un tiempo específico, y ese tiempo define su contexto. Ejemplos de noticias serían las actividades del mes que viene, boletín mensual, etc. Las páginas, por el contrario, se usan la mayor parte de las veces para presentar la información atemporal sobre el sitio web. Ejemplos de páginas a incluir serían “Acerca de”, “Contacto”, “Copyright”, etc. Las páginas en WordPress, se caracterizan por: •

Son para el contenido que es menos dependiente del tiempo que las entradas.

•

Pueden organizarse en páginas y subpáginas.

•

Pueden usar diferentes plantillas de página que pueden incluir archivos de plantilla, etiquetas de plantilla y otro código PHP. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

67

Unidad Didáctica: Gestión y Administración Web El panel de administración de WordPress permite la creación de nuevas páginas, la edición de páginas existentes y la eliminación de páginas. Al agregar una nueva página encontraremos un editor idéntico al que encontramos con las entradas, aunque los paneles laterales tienen opciones distintas: En el panel “Publicar” encontramos las opciones de “Estado” para situar la página como “borrador”, “publicada” o “pendiente de revisión”. En “Visibilidad” establecemos quien puede ver la página. Cada nueva página se añade un nuevo ítem en el menú principal de nuestra web. En el panel “Atributos de la página” tenemos la opción de situar este ítem den la parte superior del menú o anidarlo dentro de otro ítem existente. Por defecto WordPress incluye la opción de “Comentarios” para todas las páginas, entre otros parámetros que podemos configurar.

Administración de comentarios En WordPress todas las entradas y páginas tienen la opción de ser comentadas por los visitantes al sitio web, estos comentarios pueden ser administrados por el webmaster, realizando así un filtro de los comentarios. Por defecto WordPress muestra los comentarios en su Escritorio al acceder a la administración: Los comentarios de usuarios no registrados se muestran en color amarillo, y los creados por los usuarios del sistema se muestran con normalidad. También podemos acceder a ítem de comentarios del menú de WordPress. Al pasar el ratón sobre el comentario podemos administrar el mismo, con varias opciones como: Aprobar, responder, editar, spam o enviar a la papelera. En el caso de seleccionar spam el sistema bloqueará permanentemente al usuario que ha dejado este comentario.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

68

Unidad Didáctica: Gestión y Administración Web

Actividad 13: Plugins y herramientas ¿Qué son los plugins? Los plugins son componentes de código, es decir, programas que se instalan en WordPress para ampliar su funcionalidad estándar. Estos programas modifican al propio gestor. Se puede decir que son partes de programas independientes con los cuales podemos completar y configurar la plataforma a nuestra medida. Están hechos con las mismas tecnologías que WordPress, es decir, están programados en PHP, y usan HTML, hojas de estilos CSS y JavaScript para la parte de interfaz de usuario.

Diferencia entre temas (themes) y complementos (plugins)  Un tema es una colección de archivos de plantilla que le permiten cambiar la apariencia de un sitio web WordPress. Estos archivos gobiernan el layout, diseño y presentación sin afectar el subyacente Software WordPress. Se puede cambiar un tema en cualquier momento sin cambiando el software de WordPress o cualquiera de las características que aplicó a través de plugins de WordPress.  Un complemento es una colección de archivos que crea un programa o herramienta para extender las características y el comportamiento de WordPress. Cualquier complemento puede ser descargado desde el Directorio de complementos de WordPress para proporcionar alguna nueva característica para el administrador o los usuarios del sitio de WordPress. Cambiar un tema no debería afectar las características de los complementos aplicados y, de manera similar, cambiar un complemento no debe afectar la apariencia de su sitio aplicado por el tema elegido. Se debe tener en cuenta al usar complementos o temas:  Se puede querer cambiar el tema del sitio web, pero mantener la funcionalidad como esta. Si se agregó todas las características del sitio web mediante el uso de complementos, no hay problema. Si ajustó un tema para lograr algunas de las características (por ejemplo, el seguimiento de estadísticas sobre los visitantes de su blog), esas características desaparecerán cuando se cambia de tema.  Si desea usar temas para proporcionar funciones para el sitio web, entonces solamente se puede elegir temas que hagan lo que se tiene en mente. Si utiliza complementos para ocuparse de las tareas del sitio, se puede seleccionar cualquier tema que se desee.

Complementos gratuitos y premium Los complementos están disponibles de dos maneras:  Plugin gratuito / plugin premium: obtienes un cierto conjunto de funciones gratis y características adicionales por un precio. Muchas de las compañías de software más conocidas siguen este modelo  Soporte Premium: las compañías de software de código abierto se dan cuenta de que problema con WordPress y software similar es el acceso a un buen soporte y, por lo tanto, desarrollar programas de soporte premium para ofrecer acceso a buen soporte técnico por un precio. Muchos desarrolladores de complementos y temas usan este modelo para beneficiar a la comunidad. Con este modelo, muchos desarrolladores proporcionar un programa de membresía donde el usuario paga una tarifa fija por adelantado para soporte por un lapso de tiempo específico (por ejemplo, $ 50 por uno año de soporte, lo que requiere que renueve su membresía para continuar obteniendo soporte por otro año, y así sucesivamente).

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

69

Unidad Didáctica: Gestión y Administración Web

Evaluar plugins ¿Cómo sabes que un plugin hace lo que se supone que debe hacer? Se puede evaluar un plugin de varias maneras, pero, desafortunadamente, ninguno es infalible. La forma más confiable de saber si un plugin es bueno es examinar el código fuente, pero no todos tienen ese tipo de conocimiento de programación. Si eres un extraño a la programación hay algunos métodos simples para ayudar a determinar si los usuarios de WordPress están usando un plugin exitosamente:  Revise la popularidad del plugin. Cada complemento en el Directorio de Plugins de WordPress muestra el número de descargas del complemento. El número podría no coincidir con la cantidad de usuarios satisfechos, pero no es una mala medida aproximada. Si las descargas son menos de mil, tenga cuidado, especialmente si el complemento ha estado en el repositorio por mucho tiempo. Sin embargo, un complemento en el repositorio durante un año y descargado solo 30 veces podría no ser un mal complemento; el complemento puede ser una función de nicho que no sea popular.  Revise cuando el plugin fue actualizado. Este número se muestra en el directorio de complementos, también. Si el complemento no se ha actualizado en varios años, es posible que ya no se mantenga, o el desarrollador dejó de soportarlo. Los buenos desarrolladores de complementos deberían lanzar regularmente actualizaciones de sus complementos porque WordPress no es una aplicación estática; siempre está cambiando. Los desarrolladores de complementos deben actualizar sus complementos cuando se producen cambios importantes en WordPress.  Revise la versión del complemento. Si muestra Alpha o Beta en la versión, el plugin está siendo probado y puede tener errores que podrían afectar su sitio; es posible que desee esperar hasta que el complemento haya sido probado exhaustivamente y lanzado como una versión completa. La comunidad de WordPress no tiene un estándar para la numeración de las versiones de los complementos, pero, en general, cuanto mayor sea el número de versión, más maduro (es decir, probado y estable) es el complemento.  Revise la cantidad de descargas por día. Se muestra en la pestaña Estadísticas de la página del complemento. De nuevo, este no es un método infalible, pero el gráfico de descargas por día puede indicar que las personas están usando plugin con algo de éxito.  Use las calificaciones en la página del complemento. Puede usarse como una guía (parcial) para lo que la gente piensa del plugin Si el promedio del complemento es de cinco estrellas, pero es calificado solo por dos personas, este enfoque puede no ser de ayuda. Sin embargo, si 200 personas le dan al complemento cinco estrellas, se tiene una mejor indicación de que los usuarios gustan del plugin.

Complementos (plugins) populares: All One in SEO: Con este plugin configuraremos la optimización SEO de nuestra Web. Además de configurarlo, cada vez que introduzcamos una entrada nueva o incluso cuando subamos una foto, nos pedirá que determinemos palabras clave, tags y metatags para cada una de ellas. Akismet: Gestiona y reduce el spam entrante a través de los comentarios de las entradas. Broken Link Checker: Este plugin monitoriza la Web en busca de links rotos. Busca por posts, páginas, blogroll y también en fotos o imágenes. Avisa por mail o a través del tablero. Periódicamente comprueba los vínculos en los mensajes, páginas, comentarios, campos personalizados y el blogroll. Además, permite editar todas Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

70

Unidad Didáctica: Gestión y Administración Web las instancias de un enlace específico a la vez. Ofrece una lista de todos los vínculos publicados en su sitio, con la posibilidad de buscar y filtrar y es altamente configurable. Google Analitycs: Realmente indispensable. Nada de lo que hacemos o tenemos pensado hacer tiene sentido si no medimos los resultados. Este plugin enlaza directamente con la app de Google, en la cual deberemos darnos de alta previamente. Share & Follow: Este plugin ofrece la posibilidad de enlazar con la mayoría de las Redes Sociales y de compartir contenidos en ellas, actualmente goza de gran popularidad ya que Web y Redes están íntimamente ligadas, sobre todo si se persigue una estrategia de social media. Éstas son algunas de las posibilidades que nos ofrece: • • • • • • • • •

Adicción automática de los enlaces más populares a Facebook y Twitter, incluyendo los botones Tweet/Retweet, con los contadores configurables. Ficha de seguimiento (Facebook / Rss / Twitter / etc.) a la parte superior / inferior / izquierda / derecha de la pantalla. Impresión, Navegador de Favoritos y botones de correo electrónico. Widget para gestionar las acciones de seguimiento. Versión abreviada para compartir el post o una página. Función de acceso para las etiquetas de tema para compartir. Iconos disponibles en tamaños de 16, 24, 32, 48, 60 px. Se puede mostrar como texto, icono o sólo texto. Los usuarios pueden cambiar todos los enlaces de texto a su antojo. Etc.

Contact Form 7: Simple y flexible, eso es precisamente lo que hace grande a este plugin. Con él diseñaremos de manera flexible formularios y podremos enviarlos. Además, soporta muchas características incluyendo la presentación de AJAX, CAPTCHA, el filtrado de spam Akismet, carga de archivos, etc. Aunque la implementación de un Formulario en nuestra Web, no obliga a la correspondiente declaración bianual según la LOPD. Google +1 Button: Al igual que el anteriormente descrito Share & Follow, la reciente aparición de esta característica de Google en ese afán de volverse más social ha propiciado que aparezca este plugin específico para ello, aunque no es descartable que próximamente aparezca incluido en algunos de los ya explicados. WP Touch: ¿Qué hace que WPtouch sea imprescindible? Pues es muy sencillo, transforma automáticamente su blog de WordPress en una aplicación para móviles. Es compatible con iPhone, iPod touch, Android, Palm Pre, Samsung y BlackBerry Storm, lo que le hace realmente potente ya que cada día el acceso móvil gana posiciones. El panel de administración te permite personalizar muchos aspectos de su apariencia, y que su carga sea rápida, fácil y elegante, sin necesidad de modificar un solo bit de código o que afecten al tema de escritorio. La visualización desde el móvil da la opción al visitante de nuestro blog a cambiar la apariencia que desee entre clásica y móvil. FeedBurner FeedSmith Extend: Con este plugin lo que conseguimos es crear un feed o una fuente de donde beban lectores de noticias. Hay suscriptores que son reacios a facilitar su email con el fin de que les enviemos información. Así conseguimos que a través de Google, que adquirió el servicio feedburner en 2007, o a través de Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

71

Unidad Didáctica: Gestión y Administración Web cualquier otro lector de noticias, cada vez que publiquemos una entrada nueva le pueda llegar de inmediato al suscriptor sin tener que facilitarnos el mail. De ahí su importancia, ya que es uno de los medios que tenemos a nuestro alcance para dar difusión a nuestro blog. De poco serviría todo el esfuerzo si luego no lo difundimos.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

72

Unidad Didáctica: Gestión y Administración Web

Indicador de logro 4 Descripción:  Aplica técnicas y herramientas adecuadas para optimizar y posicionar la aplicación web organizacional.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

73

Unidad Didáctica: Gestión y Administración Web

Actividad 14: Posicionamiento Web (SEO) ¿Qué es el SEO? Definición de SEMPO (Search Engine Marketing Professional Organization) SEO (Search Engine Optimization) es la práctica de utilizar un rango de técnicas, incluidas la rescritura del código html, la edición de contenidos, la navegación en el sitio, campañas de enlaces y más acciones, con el fin de mejorar la posición de un web site en los resultados de los buscadores para unos términos de búsqueda concretos. Definición complementaria De sus siglas en inglés (Search Engine Optimization), es la práctica de utilizar una serie de técnicas que implican la optimización de la página (con los llamados factores on site) y su socialización en Internet con otras páginas (los llamados factores off site) con la finalidad de mejorar la posición de un web site en los resultados de los buscadores para unos términos de búsqueda concretos. Estas técnicas, y su relevancia para mejorar el posicionamiento, son diversas y cambiantes en función de la evolución continua de los buscadores. Definición amplia e inclusiva Estrategia y conjunto de prácticas destinadas a la captación y fidelización del tráfico proveniente de los buscadores. Algunas consideraciones El SEO se integra dentro de la propia estrategia de negocio y comunicación de la empresa/institución. Las buenas posiciones por sí solas no valen de nada, si no aportan nada a los objetivos de negocio. He aquí, por tanto, la necesidad de integrar la estrategia SEO con el resto de actividades de marketing.

Diferencias entre SEO y SEM Los resultados de los buscadores son de dos tipos: •

Resultados patrocinados o de pago: SEM (Search Engine Marketing) En este caso los resultados se basan en un sistema de publicidad contextualizado referente a uno o varios criterios de búsqueda. Es decir, los anunciantes deciden una serie de términos que, cuando sean buscados por los usuarios, mostrarán sus anuncios. El orden de los resultados depende de varios factores, entre los que se encuentra un sistema de pujas. El anunciante sólo paga cuando se hace clic en uno de sus anuncios, motivo por el cual a este sistema se le conoce también por sus siglas PPC (Pago Por Clic). Estos resultados están identificados como publicidad. Por ejemplo, Google los identifica como “resultados patrocinados”.

•

Resultados orgánicos: SEO (Search Engine Optimization) Los resultados orgánicos son generados por el buscador en función de su índice de resultados y a un sistema propietario para asignar la relevancia de los mismos por medio de un proceso algorítmico. En este caso no se paga nada en concepto de publicidad, y aparecer en los primeros resultados depende de seguir una serie de técnicas que forman la disciplina SEO.

La diferencia más importante entre ambos sistemas radica en que un anunciante puede asegurarse, de manera aproximada, el estar en los resultados del buscador con sus campañas de Pago Por Clic, mientras que nadie puede asegurar estar en la primera posición en los resultados orgánicos, ya que depende al 100% del algoritmo del buscador, así como de los cambios y modificaciones que se van introduciendo en dicho algoritmo. Por otra parte, es importante resaltar que no existe ninguna interrelación entre los resultados de los enlaces patrocinados y los resultados orgánicos. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

74

Unidad Didáctica: Gestión y Administración Web

Ventajas de ser visibles en buscadores La diferencia de la visibilidad con buscadores frente a otros modelos de publicidad en Internet es que el usuario busca de forma voluntaria un servicio, producto o información. Se asemeja a la búsqueda de información en las páginas amarillas tradicionales. Esto significa que la búsqueda responde a una necesidad y que, en algunos casos, puede suponer el inicio de un proceso de compra, ya sea en su fase de información, comparación o decisión final. Estar en el sitio y momento adecuado en función de un término de búsqueda adecuado puede convertirse en una oportunidad clara de negocio. El SEO permite controlar, dentro de lo incontrolable (nadie puede asegurar un posicionamiento fijo en los buscadores), la posibilidad de aumentar las opciones de ser visible y de que se convierta en el primer paso para reconducir búsquedas en procesos de compra, apoyados por otras disciplinas como la analítica Web y la optimización de páginas de aterrizaje, para que, en la medida de lo posible, se pueda capitalizar esa visibilidad.

¿Cómo funcionan los buscadores? Para entender cómo funcionan los buscadores podemos hacer una comparación con el funcionamiento en la publicación de artículos científicos o tesis doctorales en el ámbito de la investigación. La relevancia de un artículo se basa en la importancia (popularidad + especialización) del medio donde se ha publicado, así como en las menciones que otros colegas han hecho sobre ese artículo. Los buscadores utilizan el mismo principio: primero rastrean la Red en busca de contenidos, que en volumen suponen miles de millones de documentos, los indexan y los clasifican para luego calcular la popularidad por el mismo principio, pero con base en los enlaces. Es decir, el número de enlaces que apuntan a una página y la calidad de las mismas (en función de la temática y relevancia de esas páginas). Para el rastreo los buscadores van siguiendo los enlaces existentes y estableciendo relaciones entre las diferentes páginas. Estos procesos de recuperación de la información son multiformato. Es decir, se pueden aplicar a distintos tipos de documentos como imágenes, vídeos, mapas, noticias, documentos PDFs…etc.

Los tres pilares del SEO El trabajo SEO se centra en tres grandes áreas: Indexabilidad Hace referencia a la capacidad de una web de ser accedida en su totalidad y de forma apropiada por los robots de los buscadores, permitiendo que sea almacenada en los índices de dichos buscadores. Cuando una web se indexa correctamente existe una correspondencia entre los contenidos existentes en la web y los almacenados por el buscador en su índice. Al número de páginas de nuestro sitio web accesibles a los buscadores se le conoce como “número de páginas indexadas” y conviene maximizarlo para que sea igual al número de páginas existentes en nuestro sitio web. Los buscadores ofrecen información acerca del número de páginas que tienen almacenadas de cada sitio web, lo que permite la comparación entre páginas existentes y páginas almacenadas en el buscador. Algunos de los problemas principales que se pueden detectar son: •

Tecnologías no entendidas por buscadores Los buscadores acceden a nuestras páginas a través de navegadores propios que no son capaces de ejecutar algunas órdenes. Así pues, y a pesar de los avances hechos los buscadores, todavía tienen problemas para acceder a contenidos hechos con tecnología Flash o que requieran de la ejecución de código javascript. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

75

Unidad Didáctica: Gestión y Administración Web •

Contenidos no enlazados o muy profundos Los buscadores acceden a los diferentes contenidos siguiendo enlaces. Si un contenido no está enlazado o hay que seguir muchos enlaces para acceder a él, los buscadores pueden tener problemas para acceder a dicho contenido.

•

Problemas de servidor Redirecciones inapropiadas, un tiempo muy lento de respuesta o la caída de un servidor pueden originar problemas de indexación o pérdida de páginas indexadas.

Contenido Una vez el buscador ha accedido e indexado nuestros contenidos, se trata de hacerlos relevantes para determinadas búsquedas. Así pues, dichos contenidos han de contener los términos que queremos posicionar en los lugares del documento más importantes y un número apropiado de veces. Algunas recomendaciones a considerar son: o

Tener en cuenta el lenguaje del usuario. Muchas veces la terminología del usuario es diferente a la utilizada internamente en la empresa/institución.

o

Generar contenidos adaptados a las diferentes tipologías de búsquedas. Es complicado optimizar una página para muchas palabras, por lo que se recomienda utilizar diferentes páginas para captar tráfico de diferentes páginas.

o

Combinar el contenido con las etiquetas HTML apropiadas para dar al documento una jerarquía de contenidos fácilmente entendible e incluyendo los términos que más nos interese posicionar en lugares predominantes.

Popularidad. Hace referencia al número de veces que nuestro sitio web es enlazado, como la calidad y tipo de sitios que nos enlazan. Otra forma de organizar las actividades SEO es la división entre técnicas offsite y técnicas onsite.

Técnicas onsite vs Técnicas offsite Técnicas onsite Son aquellas mejoras que se llevan a cabo dentro del propio sitio web. Hacen referencia, por tanto, a aspectos que controlamos plenamente, como pueden ser optimizaciones de código, procesos de servidor y generación / edición del contenido dentro del sitio web. He aquí algunos de los aspectos que tratan estas técnicas. Arquitectura y Usabilidad: para asegurar la correcta indexación por parte de buscador, encontrar y guardar en su base de datos todas las páginas; son los aspectos de indexabilidad. Algunos ejemplos:  Disponer de una sección “mapa web” para asegurar el fácil acceso de los buscadores a las diferentes secciones de nuestra página.  Configurar el archivo sitemaps, que sirve para proporcionar a los buscadores el listado de páginas que forman nuestro sitio web.  Generar una estructura de enlaces internos que favorezca el acceso a toda la información de nuestra web.  Comprobar que las tecnologías utilizadas para la creación de la web son accesibles a los buscadores. Optimización del Contenido: para asegurar la correcta interpretación y clasificación de los contenidos por parte del buscador (aspectos semánticos). Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

76

Unidad Didáctica: Gestión y Administración Web Algunos ejemplos:  Libro de estilo: etiquetar los títulos y descripciones de cada una de las páginas en función de su contenido, teniendo en cuenta las palabras clave más importantes.  Localización de las palabras clave  Densidad de las palabras clave  Análisis de tendencias y estacionalidad de los contenidos.  Análisis de oportunidades; contenidos muy demandados, pero con poca competencia. Aspectos relacionados con la Infraestructura: para asegurar la configuración, conectividad y respuesta del servidor en función de unos estándares (aspectos de optimización de la infraestructura) Algunos ejemplos:  Velocidad de respuesta  Robot.txt  Redireccionamientos  Geolocalización de IPs…etc Técnicas offsite Para el posicionamiento de un sitio web existen factores offsite, localizados fuera de nuestra web. Hacen referencia fundamentalmente al número de veces que nuestra web es enlazada, el tipo de sitios (en temática) y los términos incluidos en dichos enlaces. Es la conocida como “popularidad” de un sitio web. La popularidad depende de: 

Número de enlaces Cuanto mayor sea el número de enlaces apuntando a nuestro sitio web, mayor será la popularidad. Es conveniente que los enlaces apunten a diferentes secciones de nuestra web y no sólo a la home o inicio.



Calidad de los sitios web que nos enlazan Los enlaces de sitios más populares o de calidad contrastada tienen mayor importancia que webs de menor popularidad. Es decir, los enlaces de webs populares, muy referenciadas y con una antigüedad considerable, tienen más importancia que webs recientes y poco referenciadas.



Antigüedad de los enlaces Los enlaces van ganando importancia con el paso del tiempo. Es decir, proporciona más popularidad un enlace que permanece activo desde hace dos años, que un enlace que lleva una semana.



Tipo de contenido de los sitios web que nos enlazan Los enlaces de sitios con contenido afín tienen más importancia que enlaces de sitios web con poca relación a nivel de contenidos.



Los textos de los enlaces a nuestra web Todo enlace tiene un texto que podemos leer, conocido como “anchor text”. Los enlaces con un determinado “anchor text” hacen las páginas más relevantes para las búsquedas con ese texto.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

77

Unidad Didáctica: Gestión y Administración Web 

Enlaces entendibles por los buscadores Los enlaces han de estar hechos con tecnologías entendibles por los buscadores. Debido a la importancia de los enlaces y el abuso que se ha hecho de ellos en sitios web donde era posible generarlos, los buscadores crearon una etiqueta HTML conocida como “nofollow” que indica que ese enlace no tiene valor para los buscadores.

SEO White Hat Vs SEO Black Hat Siendo conocidos algunos aspectos que afectan al posicionamiento se ha llegado a puntos de exceso y sobre optimización para buscadores que acaban por mostrar en buscadores páginas poco relevantes para los usuarios en los resultados de esas búsquedas. Es por ello que los buscadores realizan labores de mejora y con ello eliminan algunas páginas que aplican ciertas prácticas, basadas en la optimización exclusivamente para los buscadores, pero sin beneficio para el usuario. Existe una práctica aceptada, efectiva y legítima para lograr optimizar el tráfico de buscadores siguiendo las directrices de los buscadores, conocido como “White Hat SEO”. Por otro lado, existen una serie de técnicas conocidas como “Black Hat SEO” y penalizadas por los buscadores al violar sus directrices, como por ejemplo haber pagado por enlaces o mostrar contenido diferente a los buscadores que a los usuarios. Si bien cada vez existen técnicas más avanzadas y que estas prácticas pueden generar resultados a corto plazo, es una estrategia muy arriesgada que acaba en penalizaciones por parte de los buscadores que trabajan por poder ofrecer mejores resultados a sus usuarios.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

78

Unidad Didáctica: Gestión y Administración Web

Actividad 15: Herramientas SEO Metodología y proceso del SEO FASE I–Descubrimiento del Cliente Objetivos y características del negocio Como parte de la estrategia de marketing de la empresa, el SEO debe atender a los objetivos que ésta tenga estipulados y seguir la misma línea para llegar al público objetivo. En tal sentido el primer paso para definir un proyecto SEO con éxito es conocer los requerimientos del cliente y qué desea lograr con el desarrollo del mismo. Para ello, se debería establecer una reunión introductoria en la que el cliente pueda estipular cuáles son sus necesidades y el analista pueda conocer las características de su negocio. En dicha reunión se debería responder como mínimo a las siguientes preguntas: 1. ¿Cuáles son los objetivos de marketing de la empresa? 2. ¿Cuál es la línea comunicativa que se sigue? 3. ¿Qué acciones de marketing online y offline está llevando a cabo o se han realizado en el último año? 4. ¿Se trata una nueva página web o de una página web ya existente? En caso de una página ya existente, ¿se trata de un rediseño? 5. ¿Cuáles son los principales competidores de la empresa? 6. ¿Qué se espera de aplicar una estrategia SEO? ¿Con qué métricas se desea comprobar la eficacia de la estrategia SEO? 7. ¿Se cuenta con un equipo para el desarrollo y mantenimiento de la página web o se subcontrata el servicio? 8. ¿Se posee un equipo o persona dedicada a la producción de textos corporativos? ¿Su dedicación es online y también offline? Análisis de la web Una vez establecidos los objetivos del cliente se procede a revisar la página web para detectar cualquier elemento en su definición y contenido que estén afectando a la efectiva indexación por parte de los buscadores. En líneas generales lo que se analiza del sitio web está en estrecha vinculación con los pilares fundamentales del SEO, que como hemos visto anteriormente son el aspecto técnico de la web, los contenidos y las referencias desde otros sitios web. Se parte por analizar los elementos técnicos, entre los que se encuentran entre otros: 

Presencia de JavaScript o Flash en exceso ya que estas tecnologías no pueden ser rastreadas fácilmente por los buscadores.



Errores en la programación que afecten el desempeño de la página.



Programación de enlaces sin atributo title o con rutas relativas.



URLs poco amigables, con una gran cantidad de parámetros o sin hacer referencia al contenido real de la página a la que definen.



Estructura del sitio web, características del dominio y servidor que lo aloja.



Tiempos de carga de las principales páginas.

Con respecto al contenido se evalúa tanto la relevancia de la información que se presenta, como que ésta siga la línea comunicacional y de los objetivos que persigue la organización. No se trata sólo de detectar las palabras clave por las cuales realizan las búsquedas nuestros clientes, sino asociar nuestros contenidos a dichas búsquedas de forma coherente y con una finalidad en mente. Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

79

Unidad Didáctica: Gestión y Administración Web Finalmente, en lo que respecta a la valoración de la popularidad del sitio web se evalúan los enlaces que están llegando a la página del cliente, no sólo atendiendo a la cantidad sino a la calidad de las referencias, analizando factores como el PageRank del enlace, temática del sitio que apunta al del cliente y, por tanto, grado de afinidad con lo que éste desea comunicar. FASE II–Análisis de Palabras Clave Con las características del cliente y su negocio en mente, se procede a hacer un análisis de los criterios de búsqueda del sector, para lo cual se realiza un análisis de palabras clave vinculadas al área de acción del cliente y además una investigación de las características principales de su competencia. En este punto cabe destacar que el cliente puede tener un conjunto de competidores detectados en el ámbito de su negocio que no necesariamente se corresponden a su competencia online. Estudio de palabras clave Se trata de detectar el conjunto de palabras clave que interesan al público objetivo y que además están en consonancia con la línea comunicativa y de marketing del cliente. El proceso a grosso modo que se sigue es: 1. Determinación del campo de acción. Obtener palabras clave candidatas y las líneas a seguir en la definición de las palabras clave atendiendo a: a. Objetivos del negocio. b. Lista de palabras clave propuestas por el cliente de acuerdo a su conocimiento de productos/servicios y líneas de comunicación de la empresa. c. Palabras clave incluidas en campañas de PPC. d. Palabras clave de acceso al sitio web obtenidas a partir de las herramientas de analítica web. e. Palabras clave sugeridas por herramientas gratuitas o propietarias. f.

Palabras clave utilizadas por la competencia.

g. Contenido del sitio web del cliente. 2. Construir un listado amplio de palabras clave atendiendo a la información recabada en el punto 1, haciendo uso de herramientas de estimación de tráfico potencial que pueden generar estas palabras y observando el nivel de competencia que tiene cada una. 3. Sobre ese listado comenzar a realizar revisiones con el cliente y llegar a un listado final de optimización acorde al tamaño de la página del cliente y su capacidad de generación de nuevo contenido. 4. Tras cerrar este listado se deben realizar revisiones periódicas atendiendo a cambios en las tendencias de búsqueda o lanzamientos de servicios y productos que deben ser considerados en el proceso de optimización e incluirse por tanto en el listado de palabras clave.

Análisis de competencia Con esta actividad se pretende obtener una visión de qué hace la competencia y cómo el cliente puede tomar partido de la situación para lograr mayor visibilidad que ésta. Se parte por determinar con las palabras clave que serán objeto de optimización, quiénes son los principales actores online y en conjunción con los competidores detectados por el cliente, que generalmente obedecen a su ámbito Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

80

Unidad Didáctica: Gestión y Administración Web de negocio, extraer un listado de competidores de los que se analizará visibilidad y factores técnicos que favorecen su posicionamiento, además de llevar a cabo un análisis benchmarking para determinar las buenas prácticas que están aplicando y pueden extrapolarse a nuestro cliente. FASE III–Optimización de Contenido Análisis de contenidos actuales del sitio Los buscadores hacen especial énfasis en el contenido del sitio a la hora de indexar las páginas. Se comienza por hacer un análisis del contenido actual del sitio:  Recorriendo todas las páginas y haciendo un estudio de las palabras clave que se podrían utilizar en cada caso dependiendo de los conceptos e ideas expresadas.  Asegurándose de que ese contenido es único. Es decir, que ese contenido no sea copiado de otra página web. Ofrecer contenidos únicos es un criterio muy importante para el posicionamiento de una página web. Para cada página existe una palabra clave primaria que engloba la idea principal, y alrededor de nueve palabras clave secundarias que guardan relación con el resto de los conceptos expresados. Por una parte, debe serle relevante al usuario –que debe ser el actor más importante a considerar al escribir el contenido– al tiempo que debe seguir una estrategia de redacción idónea para facilitar su indexación por parte de los buscadores. Teniendo en mente al usuario, el contenido debe: 

Estar escrito con claridad y coherencia, siguiendo a cabalidad las reglas gramaticales y ortográficas del idioma y en correspondencia con la estrategia comunicacional establecida por la empresa.



Ser de utilidad al usuario, proporcionándole datos e información real y que le puedan resultar beneficiosos o de interés. No se trata sólo de captar la atención del usuario en primera instancia, sino de mantenerla. Para esto se debe ser empático y ponerse en el lugar del que está buscando la información, y qué podría resultar interesante saber acerca del tema.



Referirse al tema principal de la página, enlazando a contenidos relacionados en la misma web cuando sea posible. Los enlaces dentro del mismo sitio web se conocen como netlinking interno y son de gran importancia para mantener al usuario enganchado.



Hacer buen uso de la estructura y el diseño del sitio, siguiendo la jerarquía lógica de la información en la página.



Ir en concordancia con la estrategia de palabras clave propuesta para el sitio y para la página en específico.

Para los buscadores debe: 

Lograr de forma natural, una repetición óptima de las palabras clave que se quieren posicionar para esa página. Aquí yace uno de los grandes retos en cuanto a generación y optimización de contenidos se refiere, ya que queremos potenciar las palabras clave sin ir en detrimento del contenido del sitio.



Hacer buen uso de la estructura y el diseño del sitio, siguiendo la jerarquía lógica de la información en la página. Típicamente, el título de la página debe ir en la etiqueta h1 y los subtítulos en las etiquetas h2, h3 y sucesivamente dependiendo de la relevancia.



Tratar de potenciar la estrategia de netlinking interno, haciendo referencia, cuando sea posible, a otras páginas dentro del mismo sitio.

Todas las decisiones descritas anteriormente, deben estar apoyadas en un cuidadoso estudio del ámbito de negocios de la compañía y los objetivos trazados al principio de las acciones SEO.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

81

Unidad Didáctica: Gestión y Administración Web Definición de metaetiquetas y título Las metas son etiquetas de configuración que le dan información adicional a los buscadores sobre las páginas. Los títulos (identificados con la metaetiqueta “title”) aparecen usualmente en la parte superior del navegador. Lo más recomendado es que esté compuesto por la palabra clave primaria junto con el nombre de la página. Se coloca la palabra clave primaria de primero para darle mayor relevancia ya que generalmente el nombre de la página o empresa tiene suficiente peso gracias a la URL. La descripción (escrita en la metaetiqueta “description”) debe ser única para cada página y debe llamar a la acción. Es la información que por lo general despliegan los buscadores para describir el contenido de la página sin que el usuario tenga que acceder a ella por lo que no se recomienda que sea muy extensa. Otras etiquetas importantes son las que tienen que ver con la organización y jerarquía del contenido en cada página. Las demás etiquetas se escriben dándole relevancia a los demás subtítulos de la página en orden decreciente de importancia. Revisión de textos Los textos redactados por el equipo editorial del cliente son revisados para constatar que se hayan aplicado las recomendaciones pertinentes, ofreciendo alternativas puntuales en caso de no ser posible la aplicación de las mismas. FASE IV–Popularidad Determinación de situación actual Existen diversas maneras de determinar la popularidad de un sitio web. Lo mejor es contar con alguna herramienta de medición de tráfico, que proporcione datos exactos de las visitas que la página ha recibido. Existe una gran cantidad de herramientas, tanto gratuitas como de pago, con las que se pueden obtener estadísticas de uso del sitio por parte de los usuarios. De acuerdo a la estrategia SEO acordada con el cliente, se puede hacer un análisis para conocer qué herramienta es mejor para los propósitos y objetivos de la estrategia. Algunas de las herramientas más utilizadas son Google Analytics, Piwik, QuantCast, AFS Analytics, etc. Así como la calidad y estructura del contenido de las páginas pueden hacer que un sitio posicione mejor, la popularidad de los sitios web viene dada en buena manera por la cantidad de enlaces que otras compañías y sitios web hagan a nuestro sitio. A esto se le conoce como netlinking externo. Cuantos más enlaces a nuestro sitio tengamos, mayor será la importancia que le darán los buscadores. Es importante aclarar que no todos los enlaces que hacen las demás páginas tienen el mismo peso. Esto viene dado por la popularidad en Internet de la página que hace el enlace, siendo de más calidad cuando la empresa o página tiene buena reputación. De hecho, una página con mala reputación puede hacer que nuestro sitio baje su popularidad, por lo que es de suma importancia buscar enlaces de calidad. Google mide la popularidad de cada sitio utilizando un número llamado “PageRank” generado por ellos mismos utilizando un algoritmo especial que analiza los enlaces que se hacen a cada sitio de Internet y quién los hace. La puntuación más baja que puede obtenerse es 1 y la más alta 10. El PageRank refleja nuestra visión sobre la importancia de las páginas web, considerando más de 500 millones de variables y 2 mil millones de términos. Las páginas que consideramos importantes reciben un PageRank más alto y son más propensas a aparecer en el tope de los resultados de búsquedas. El PageRank también considera la importancia de cada página que da un voto, ya que se considera que los votos de ciertas páginas tienen más valor, por tanto, dándole a la página enlazada mayor valor.”

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

82

Unidad Didáctica: Gestión y Administración Web Cuantos más sitios relevantes y de calidad creen vínculos a nuestro sitio, mejor posicionamiento obtendrá. Es importante verificar que el enlace no contenga el atributo “nofollow” ya que, de tenerlo, no cuenta en la evaluación de nuestro sitio. Estrategia de Netlinking Externo Dependiendo de la estrategia SEO diseñada y el tipo de empresa, se pueden tomar varias acciones para aumentar el número de enlaces apuntando nuestro sitio. Cabe destacar que en este ámbito no hay nada definido a rajatabla y dependerá mucho de la capacidad creativa de cada persona orientada a la industria en la que se mueve la empresa o el tema de la página, siempre teniendo en cuenta que se quiere generar ruido y hacerla visible a la mayor cantidad de internautas. Típicamente, o

Envío de URL a directorios Los directorios son portales en Internet que agrupan páginas web por contenido. Para aparecer en ellos, se deben remitir los datos del sitio web manualmente. Muchos buscadores se apoyan en el contenido de los directorios para indexar nuevas páginas, y, si los directorios tienen buena reputación (de al menos 3 de PageRank), ayudan a subir la reputación de nuestro sitio. Hay que hacer una selección cuidadosa de la categoría donde se va a introducir la web, ya que, de no cumplir los requisitos que el directorio exige, no se agregará. Los directorios más importantes son dmoz y Yahoo! Luego, existen muchos otros por país, por mercado, por tema, etc.

o

Optimización de notas de prensa Siguiendo la línea comunicativa de nuestra empresa, se pueden elaborar artículos informativos optimizados que se pueden suministrar a cadenas de prensa digital.

o

Medios sociales Es indudable la importancia que tienen en la actualidad los medios sociales para generar ruido en Internet. Con una apropiada estrategia de medios sociales, se puede incrementar la visibilidad de la página web en Internet y lograr, de forma natural, enlaces a nuestro sitio generados por usuarios target, que a su vez podrán tener un efecto multiplicador de distribución informativa. Para ello, se puede colaborar en blogs y foros que traten temas relacionados con nuestra industria y en donde podamos ofrecer información novedosa e interesante, que capte la atención de nuevos usuarios.

Para que el trabajo de NetLinking sea exitoso, tiene que ser un proceso continuo y paulatino. Es una labor mensual que ha de ser planificada durante varios meses. Aumentos bruscos del número de enlaces externos puede tener un efecto improductivo. Los buscadores pueden no tomar en cuenta esos enlaces a la hora de calcular de nuevo la popularidad de un sitio web. FASE V–Seguimiento Una vez llevadas a cabo las labores de optimización de los aspectos técnicos del sitio web, los contenidos del mismo y, teniendo en proceso la estrategia de Netlinking externo descrita en el punto anterior, se procede a llevar a cabo el proceso de seguimiento en el que se reporta al cliente la evolución mes a mes de las métricas determinadas en la FASE I del proyecto. Si en dichos reportes se observan desviaciones con respecto a los objetivos que se desean alcanzar, se procede a estudiar el caso y proponer al cliente planes correctivos pertinentes para recuperar la línea evolutiva deseada.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

83

Unidad Didáctica: Gestión y Administración Web

Recomendaciones de buenas prácticas en SEO En el SEO todas las partes trabajan para presentar información relevante y de alta calidad a los usuarios, que son los buscadores de información. Debido a la propia naturaleza de la actividad y a la personalidad de empresas y profesionales, existen diferentes aproximaciones para conseguir resultados. Es decir, dentro de la propia actividad normal, puede existir una predisposición a tratar mejor a los usuarios, a los motores de búsqueda o a los clientes. No olvidemos que el SEO es una actividad remunerada, donde una parte cobra por conseguir el rango más alto para su cliente y por lo tanto puede tener efectos muy positivos para su actividad online. En esta situación es fácil que ocurran conflictos de intereses. Al igual que ocurre en otras muchas actividades, el asunto es conseguir el equilibrio entre las partes y cumplir una serie de principios básicos, para lo cual sugerimos estos puntos de buenas prácticas para todos los agentes del sector. En este texto, SEO se refiere tanto a la propia actividad de optimización para los motores de búsqueda, como a los individuos y empresas que profesionalmente se dedican a tareas/prácticas de SEO. 1. En la realización de los procesos y trabajos de SEO no se dañará intencionadamente al cliente. Es decir, no se emplearán de forma continuada ninguna tecnología o procedimiento conocidos que usados sin la debida atención puedan resultar en la exclusión de la web del cliente de los índices de los motores de búsqueda o directorios o hacerla inoperativa. El cumplimiento cuestionable de los estándares debe hacerse vía el Robots Exclusion Standard. 2. Los SEO aplicarán y seguirán todas las reglas publicadas o impuestas por los motores de búsqueda o directorios. Si, como sucede a menudo, las reglas y guías cambiaran, el SEO tomará acción rápidamente para aplicarlas según proceda para cada cliente. Cuando estas reglas y guías no estén claras, el SEO buscará información y esperará aprobación del motor de búsqueda correspondiente, antes de continuar usando tecnologías o procedimientos potencialmente dañinos. 3. El consumidor/usuario no será intencionadamente engañado u ofendido por el SEO. Ningún individuo que esté utilizando un motor de búsqueda será engañado por la información presentada al motor de búsqueda o dañado u ofendido al llegar a la web del cliente. Esto incluye técnicas como la utilización de “bait and switch” (presentar cebo y luego ofrecer otra información) donde la página del cliente no contiene o no está claramente asociada a los términos de optimización o puede resultar ofensiva para los visitantes objetivo. 4. Los trabajos de SEO se harán respetando la legislación vigente y con especial atención a los derechos de propiedad intelectual, copyright, marcas registradas y/o de servicio y leyes relacionadas con el spam que puedan existir a nivel nacional o internacional. 5. El contenido de la web del cliente no se representará de manera falsa. Esto incluye la práctica de presentar diferentes versiones de páginas web a usuarios distintos, excepto cuando la información se altera con el único propósito de cumplir las especificaciones y necesidades del navegador, sensibilidad a factores regionales como idioma o necesidades específicas del producto. En particular se evitarán las técnicas llamadas de cloaking vs las llamadas IP Delivery que se sí se aceptan como lícitas. En general, todas las solicitudes de una URL específica deberán ser servidas en idéntico html por el servidor web. 6. El trabajo SEO que se haga para un cliente será original y personalizado. No se harán copias textuales del trabajo de otros (en vez de realizar trabajo original), sin el consentimiento previo de todas las partes. 7. Las empresas y profesionales establecidos y reconocidos en el sector no falsearán sus propias habilidades, educación, formación, estándares de resultados, certificaciones, afiliación a grupos del sector, bagaje técnico o experiencia. Esto incluye declaraciones relacionadas con calendarios (cronogramas) de proyectos, historial de resultados, recursos de la compañía (empleados, equipamiento, productos propietarios) y lista de clientes. Las garantías estarán restringidas a los elementos y prácticas sobre los que el SEO tiene un control razonable.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

84

Unidad Didáctica: Gestión y Administración Web 8. Cuando exista en un conflicto de intereses entre clientes no se realizará ningún trabajo sin la comunicación previa a todas las partes involucradas. Esto incluye la práctica de mejorar (a propósito) a un cliente sobre otro en términos competitivos para así obtener más beneficio para el SEO. Todos los clientes se deben tratar por igual y recibirán el mismo esfuerzo en su optimización para los motores de búsqueda. 9. En los trabajos de SEO no se ofrecerán expectativas poco razonables al cliente, ni garantías falsas de posicionamiento en buscadores, exceptuando el caso en que los objetivos sean requisito indispensable para el cobro del servicio. Esto incluye la práctica de aceptar más de un número razonable de clientes competiendo por los mismos términos e insinuando que todos estarán en las posiciones primeras de los motores de búsqueda. También incluye la presunción de que los resultados pueden obtenerse en periodos no razonables de tiempo, dadas las conocidas condiciones de los motores de búsqueda, la web del cliente y la competencia. 10. Todos los SEO ofrecerán a los clientes procedimientos de resolución de conflictos tanto internos como externos. Esto incluye la publicación en la web del SEO de su dirección y teléfono y la inclusión de links de terceras partes para la resolución de conflictos, además de incluir en los contratos de proyectos cláusulas de resolución de conflictos. 11. Todos los SEO protegerán la confidencialidad y anonimato de sus clientes con vistas a la salvaguarda de la información privilegiada y de los elementos que implican recomendaciones de apoyo para el SEO. Todo el personal será responsable de la protección de la información que no sea de dominio público y que pueda dañar al cliente. Los SEO no incluirán la publicación de recomendaciones y logos propietarios de clientes, notas de prensa y otros materiales colaterales sobre el cliente sin la previa aprobación explícita por parte del cliente. 12. Todos los SEO trabajarán con sus mejores habilidades para incrementar o mantener el ranking de sus clientes, tratando de dirigir la mayor cantidad de tráfico cualificado hacia la web del cliente. Los clientes contratarán al SEO por unos honorarios para obtener y mantener la posición en el motor de búsqueda. El SEO tiene la obligación de utilizar las tecnologías y metodologías permitidas y apropiadas para incrementar o mantener el ranking de los clientes frente a los cambios de la tecnología de los motores de búsqueda, la competencia y las necesidades de la web del cliente.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

85

Unidad Didáctica: Gestión y Administración Web

Actividad 16: Google AdWords Introducción a Google AdWords Google AdWords es la plataforma de Google que se utiliza para gestionar las campañas de anuncios en los medios que tiene disponibles. Básicamente existe dos grupos de soporte dónde aparecen los anuncios. Por una parte, las páginas que son propiedad de Google, como su buscador, la comunidad de vídeos de Youtube, Gmail, Google Maps, etc. Y por otra, en un gran conjunto de páginas web, aplicaciones para móviles y contenido de vídeo denominada red de anunciantes asociados. Este conjunto de anunciantes asociados proviene de programas como Google AdSense o los sitios de editores de DoubleClick Ad Exchange y su número se cuenta por millones. AdWords es una herramienta publicitaria online desarrollada por Google en el año 2.000, con el objetivo de ofrecer la posibilidad a cualquier usuario de publicitarse de una forma patrocinada en Internet, más concretamente, en Google. Este sistema publicitario se basa en una estrategia de pujas entre los anunciantes. Cada uno determina la cantidad que está dispuesto a pagar y, si gana la subasta, será mostrado. Es una herramienta que cuenta con millones de clientes en todas las partes del mundo, y cuya intención es la de anunciarse de una manera relevante a través de los resultados de búsqueda que ofrece Google en la SERP, para así aumentar su cartera de clientes y su visibilidad en la red. Es junto a Google AdSense una de las mejores herramientas para conseguir sacar rentabilidad a tus proyectos en Internet. La filosofía de Google para la plataforma es que los anunciantes obtengan un ROI positivo con las campañas de publicidad, por ello establece unas estrategias de puja (pago por la publicidad) que puedan ser atractivas y rentables para el anunciante. En general, todas las campañas funcionan mediante la estrategia de puja coste por clic (CPC), aunque existen variantes como el CPC avanzado, coste por visionado (CPV) para vídeos. También existen otras estrategias como el coste por mil (CPM) para campañas de display o coste por adquisición (CPA). Además, Google AdWords establece un sistema de calidad dentro de la plataforma que se utiliza para calcular el coste de la publicidad y la posición dónde se ubican los anuncios. Por ejemplo, es posible que un anunciante que pague un CPC de 0.10€ tenga los anuncios en una posición mejor que otro anunciante que pague 0.20€ de CPC debido a la calidad de los anuncios. AdWords establece un sistema de calidad que premia a los anunciantes con mayor ranking, obteniendo mejores posiciones de anuncio a menor precio que otros anunciantes.

Ventajas de Google AdWords Para conseguir obtener tráfico, AdWords es una solución muy efectiva, ya que tiene ciertas ventajas sobre otras estrategias de atracción de tráfico, como son las siguientes: •

•

Genera tráfico de forma inmediata Lograr buenas posiciones en los resultados naturales para las búsquedas más rentables implica una inversión considerable de esfuerzo y paciencia. Y, aun así, los resultados para un sitio Web recién publicado pueden tardar en alcanzarse. Por el contrario, una campaña de Google AdWords comienza a producir tráfico cualificado de forma inmediata. Si necesita visitas en un dominio recién lanzado de hoy para mañana, una campaña de Google AdWords puede ser la estrategia más recomendada para arrancar su negocio, mientras trabaja en SEO para conseguir buenas posiciones a medio y largo plazo, y va construyendo una base de datos para desarrollar más adelante estrategias de fidelización y venta cruzada. AdWords es modulable Mientras que el posicionamiento natural es una estrategia que tiene una gran inercia (implica tiempo tanto para conseguir buenas posiciones como para perderlas) AdWords permite, de una forma muy flexible, modular el tráfico que deseamos generar durante un periodo muy determinado de tiempo. En ocasiones es posible que lo que nos interese sea incrementar las visitas durante las épocas del año en que la demanda natural de nuestros productos es menor, de forma Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

86

Unidad Didáctica: Gestión y Administración Web

•

•

•

•

•

•

que ayudemos a equilibrar el patrón estacional de la demanda. En otros casos, por ejemplo, cuando la demanda se concreta en una época muy concreta del año, como la navideña, nos interesará invertir para lograr así el mayor número de ventas. Los enlaces patrocinados nos permiten, pues, invertir para complementar los pedidos durante los valles de la demanda o bien maximizar los resultados justo cuando ésta es más fuerte. Accesible para casi todos los presupuestos A pesar de que el precio promedio del coste por clic ha aumentado considerablemente en los últimos años, sobre todo, para ciertas categorías de productos y servicios especialmente competidos, lo cierto es que la inversión necesaria para lograr una visita de calidad en los buscadores se mantiene, en general, en importes contenidos por debajo de un euro para muchas categorías. Con esta estrategia, además, somos nosotros quienes marcamos una inversión máxima diaria, una inversión máxima mensual y el coste máximo que estamos dispuestos a pagar por visita. Controlando estos tres valores con cierto sentido común, prácticamente cualquier negocio puede obtener tráfico rentable a través de Google AdWords. AdWords es inbound marketing Aunque se está pagando por visitas, lo cierto es que dicha visita está originada por el propio interés del usuario. Cuando la campaña se origina en los buscadores, es la propia intención de búsqueda del usuario la que sirve para seleccionar los enlaces patrocinados relevantes que podrían ser también resultados de su interés y que, por tanto, los buscadores muestran junto a los resultados naturales. ROI fácil de medir Una de las principales virtudes de AdWords como estrategia de atracción de tráfico es que permite realizar un seguimiento de las visitas generadas y medir la conversión que dichas visitas nos han generado. A partir de dicha conversión, ya sea en forma de generación de leads o, directamente, ventas, podremos determinar su es una estrategia rentable o no para nuestro proyecto empresarial. Si los beneficios que generaron las ventas de visitantes procedentes de pago por clic fueron mayores que la inversión necesaria para generar dicho tráfico, entonces la estrategia es rentable. En caso contrario, tendremos que buscar otras alternativas para atraer dicho tráfico o concretaremos en mejorar la conversión de nuestro sitio web. Permite generar reconocimiento de marca Invertir en Google AdWords y estar visibles en un número amplio de búsquedas relacionadas con nuestro sector contribuye a generar entre nuestros clientes potenciales un cierto reconocimiento de marca. Los usuarios tienden a identificar a las empresas que ocupan los primeros puestos en los enlaces patrocinados de forma que encontrarnos reiteradamente en dichas posiciones contribuirá a implantar nuestra marca entre sus conocidas. Esto incrementará gradualmente el tráfico directo y las visitas repetidas, así como el tráfico procedente de búsquedas con marca, donde mayor ventaja podemos extraer de posicionarnos por encima de nuestra competencia. Permite segmentaciones precisas Google AdWords nos sólo posibilita graduar la inversión a lo largo del tiempo, sino que permite segmentar de forma muy precisa a los destinatarios de nuestra publicidad y concretar esa visibilidad sobre los productos más rentables y las ofertas más atractivas. Además, permite concentrar nuestra inversión en áreas geográficas muy determinadas, en periodos de tiempo precisos, así como ciertos rangos de horas y días de la semana concretos. Dado que el tráfico generado por AdWords cuesta dinero, es fundamental segmentarlo muy bien para concentrar los recursos en aquellas visitas que mayor rentabilidad puedan generar. En campañas de búsqueda sabemos exactamente qué busca el usuario Si analizamos las búsquedas que generaron visitas en los resultados naturales de los buscadores, comprobaremos cómo algunos visitantes llegaron a nuestro sitio Web a partir de búsquedas que apenas guardan relación con nuestra oferta. La sinonimia y la polisemia provocan que los buscadores puedan mostramos como resultados relevantes a usuarios cuya intención de búsqueda poco o nada tenían que ver con nuestros contenidos. Por el contrario, en las campañas de pago por clic, nosotros somos los que seleccionamos cuidadosamente en qué búsquedas queremos que Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

87

Unidad Didáctica: Gestión y Administración Web se incluyan nuestros anuncios, y podemos redactarlos de una forma precisa para comunicar una oferta muy concreta. Esto nos permite anticiparnos y preparar una página de aterrizaje (landing page) especialmente diseñada para recibir al usuario que se interesó por dicho anuncio. El anuncio y la página de aterrizaje trabajan como un tándem para generar una conversión que, si se hace correctamente, debería ser superior al promedio de las visitas originadas en los resultados naturales.

Tipos de campañas Google AdWords cuenta con diferentes tipos de campañas, enfocadas a la consecución de distintos objetivos. Con la evolución de la plataforma y de la publicidad en Internet, es bastante común encontrarse con nuevos tipos de campañas pensados para obtener un tipo concreto de objetivo. A continuación, se enumeran los distintos tipos de campañas existente actualmente.  Campañas de búsqueda Las campañas de búsqueda son aquellas que están directamente relacionadas con las búsquedas que realiza el usuario en el buscador de Google. A partir de dicha búsqueda, se muestran anuncios relacionados que enlazan con páginas web que son potencialmente interesantes para el usuario. Este tipo de campañas suelen utilizar exclusivamente anuncios de texto. Los anuncios se pueden mostrar en los resultados de búsqueda de Google, en Google Shopping, en Google Maps, en Grupos o en los socios de búsqueda. Este tipo de campañas suelen utilizarse para conseguir leads o ventas, ya que suelen dar buenos resultados al mostrar el usuario un interés explícito mediante la búsqueda realizada.  Campañas de display Este tipo de campañas muestran anuncios directamente, sin que el usuario muestre intención o interés por el producto o servicio, por lo que, a priori, tendrán menos interés para el usuario que los anuncios mostrados por campañas de búsqueda. Aunque este tipo de campañas se suelen utilizar con anuncios de imagen estáticos, también se pueden utilizar anuncios de texto, rich media y de vídeo. Estos anuncios se pueden mostrar en sitios web que muestran anuncios de Google pertinentes, Vídeos, Aplicaciones para móvil, Gmail, YouTube, Blogger, Google Finance y Google Maps. Este tipo de campañas están enfocadas para aumentar la visibilidad del anunciante y mejorar el reconocimiento de la marca.  Campañas de Shopping Las campañas de Google Shopping están especialmente pensadas para promocionar productos de tiendas online. Al igual que con las campañas de búsqueda, muestran los anuncios cuando el usuario realiza alguna búsqueda relacionada. Utiliza anuncios específicos, llamados “anuncios de ficha de producto” que se nutren de los datos cargados mediante un feed de datos. Estos anuncios son muy completos comparados con otros tipos de anuncios ya que, además del título y una descripción corta, muestra una imagen, el precio y la tienda que vende el producto. Estos anuncios se pueden mostrar en sitios web que muestran anuncios de Google Shopping (en los países en los que esté disponible), en la búsqueda de Google y en sitios web de partners de búsqueda de Google. Este tipo de campañas está enfocada a una estrategia de conversión de ventas, ya que reúne la información más importante de los productos y la presenta en formato de anuncio para que el usuario tenga suficiente información para valorar si el producto le es interesante o no.  Campañas de vídeo Las campañas de vídeo son campañas específicas de display que centran su soporte publicitario en anuncios de vídeo. Como sucede con las campañas de display, los anuncios se muestran al usuario sin que este muestre interés por el producto o servicio, aunque existen herramientas de segmentación que permiten conocer los intereses de los usuarios para poder ofrecerle anuncios más relevantes. En este tipo de campañas se pueden utilizar los mismos tipos que en campañas de display, es decir, anuncios de imagen estáticos, anuncios de texto, rich media y de vídeo. Estos anuncios pueden ser Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

88

Unidad Didáctica: Gestión y Administración Web mostrados en resultados de búsqueda, sitios web relevantes de la red de display, sitios web que muestran anuncios de Google, vídeos, aplicaciones, Gmail, YouTube, Blogger, Google Finance y Google Maps.  Anuncios de video en YouTube Este tipo de campañas suelen utilizarse para reforzar la marca y conseguir más visibilidad. Gracias a los anuncios de vídeo se puede dar más información que en imágenes estáticas y el impacto suele ser mucho mayor.  Campañas de aplicación universal Este tipo de campañas muestran anuncios tanto por búsqueda realizadas por el usuario, como en sitios web que tengan algún tipo de relación con la aplicación. Está pensada para facilitar la descarga directa de la APP en el dispositivo del usuario. Los anuncios universales de aplicaciones obtienen los datos de los anuncios de la ficha de la aplicación en Google Play, de cualquiera de las cuatro líneas de texto proporcionadas por el usuario en el momento de crear el anuncio y, opcionalmente, por un vídeo de YouTube. Estos anuncios se pueden mostrar en Google Play, el buscador de Google, la red de partners de búsqueda, YouTube, en otras aplicaciones y en las versiones para móviles de sitios web de noticias, de blogs o de otros sitios web de Internet. Este tipo de campañas se utiliza para conseguir promocionar una APP y que sea descargada por los usuarios.  Campañas de remarketing Aunque no es un tipo de campaña sino más bien, una especialidad dentro de las campañas de búsqueda, display y vídeo, su utilidad más que reseñable hace imprescindible hablar de ellas. Las campañas de remarketing muestran anuncios específicos para los usuarios que han visitado una página web. Su importancia reside en que, aplicando las estrategias oportunas, suelen dar mejores resultados de conversión que las campañas “normales”, al impactar la publicidad en usuarios que ya nos conocen. Las campañas se configuran para que únicamente muestren los anuncios a un listado de usuarios. Dicho listado se configura desde la plataforma de Google AdWords y, por ejemplo, pueden ser los usuarios que visitan la página web anunciada. Tanto los anuncios como las ubicaciones donde se muestran, dependen exclusivamente del tipo de campaña, ya que, no hay que olvidar que estamos hablando de campañas de remarketing en búsqueda, display o vídeo. Seguramente en un futuro el remarketing se pueda utilizar en todos los tipos de campañas disponibles.

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil

89