UNIVERSIDAD SAN FRANCISCO DE QUITO

Nuevo sitio web Oshyn Inc. www.oshyn.com

Carlos Manuel Araujo Coronel

Tesis de Grado presentada como requisito para la obtencion del tıtulo

de Ingeniero en Sistemas

Quito, Marzo 2010

UNIVERSIDAD SAN FRANCISCO DE QUITOColegio Politecnico

HOJA DE APROBACION DE TESIS

Nuevo sitio web Oshyn Inc. www.oshyn.com

Carlos Manuel Araujo Coronel

Fausto Pazmay, MBA .....................................................................Director de Tesis yDirector del Departamentode sistemas (firma)

Enrique Vinicio Carrera, DSC ...............................................................Profesor del Departamento deSistemas (firma)

Fernando Romo, MSc ...............................................................Decano del ColegioPolitecnico (firma)

Quito, Marzo 2010

iii

© Derechos de Autor

Carlos Manuel Araujo Coronel2010

iv

Dedico esta tesis a mi familia, mi padre Pablo Fernando Araujo

Ribadeneira, mi madre Mariana Coronel Almeida a mis hermanos y mis

sobrinos Camila y Mateo.

v

Agradecimientos

Agradezco a los profesores, de quienes obtuve las herramientas necesarias

para mi vida profesional, en especial a los directores de la carrera de In-

genierıa de Sistemas, Enrique Vinicio Carrera y Fausto Pasmay, por su

incondicional apoyo durante todo el dessarrollo de esta tesis.

vi

Resumen

El sitio web de una empresa es la carta de presentacion que la companıa

da frente a los visitantes del sitio, que pueden terminar convirtiendose en

clientes. Ademas es una herramienta para promover actuales y nuevos ser-

vicios que provee la companıa. Oshyn Inc, decidio renovar su imagen web

con un sitio nuevo, tanto en el aspecto visual, como en el manejador de

contenidos que se usa para el mantenimiento y desarrollo del sitio. Esta

decision se convirtio en un proyecto interno, cuyo proposito fundamental es

la actualizacion del sitio, usando tendencias web del momento.

vii

Abstract

A company web site is the way an enterprise has to present itself to the visi-

tors, and a visitant can convert into a future client. Also the website is a tool

to promote new and current services that the company offers. Oshyn Inc,

decided to renew its web image with an updated visual design plus a new

Content Management System, that will help to handle the maintainance

and the develop of the site. This decision became an internal project which

primordial objective is the website redesign with today web tendencies.

Tabla de Contenido

1 Introduccion 1

1.1 Antecedentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1.1 Origen del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1.2 Versiones previas del sitio web . . . . . . . . . . . . . . . . . . . 2

1.2 Presentacion del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.3 Impacto del Proyecto dentro de la empresa . . . . . . . . . . . . . . . . 4

2 Marco Teorico 6

2.1 Tecnicas y tecnologıas a ser usadas . . . . . . . . . . . . . . . . . . . . 6

2.1.1 Programacion orientada a objetos . . . . . . . . . . . . . . . . . 6

2.1.2 Sistema de gestion de contenidos (CMS) . . . . . . . . . . . . . 6

2.1.2.1 Enterprise CMS (ECMS) . . . . . . . . . . . . . . . . 7

2.1.2.2 Web CMS/Portals (WCMS) . . . . . . . . . . . . . . . 8

2.1.3 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1.3.1 HTML 4.01 . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.3.2 SGML . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.4 Hojas de estilo en cascada CSS . . . . . . . . . . . . . . . . . . 12

2.1.5 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.1.5.1 DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.1.6 Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3 Descripcion 16

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio . . . . . . 16

3.1.1 Business Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.1.2 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.1.3 ifByPhone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.1.4 API de mapas de Google . . . . . . . . . . . . . . . . . . . . . . 22

3.1.5 RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

viii

TABLA DE CONTENIDO ix

4 Desarrollo 24

4.1 Plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

4.1.1 Uso de plantillas dentro del CMS . . . . . . . . . . . . . . . . . 25

4.1.1.1 Plantillas de sitio . . . . . . . . . . . . . . . . . . . . . 25

4.1.2 Creacion de plantillas . . . . . . . . . . . . . . . . . . . . . . . . 25

4.2 Modulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.2.1 Menu de navegacion . . . . . . . . . . . . . . . . . . . . . . . . 28

4.2.1.1 Mapa del sitio Site map˝ . . . . . . . . . . . . . . . . 29

4.2.1.2 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 29

4.2.2 Home Page Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.2.2.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.2.3 Cajas de informacion pagina principal . . . . . . . . . . . . . . 33

4.2.3.1 Content Holders˝ . . . . . . . . . . . . . . . . . . . . 33

4.2.3.2 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.2.4 Buscador interno . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.2.4.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.2.5 Modulos CTA . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.2.5.1 Definicion . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.2.5.2 Uso en Oshyn.com . . . . . . . . . . . . . . . . . . . . 36

4.2.6 Modulo contactenos . . . . . . . . . . . . . . . . . . . . . . . . . 37

4.2.6.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 37

4.2.7 Historias exitosas de clientes . . . . . . . . . . . . . . . . . . . . 38

4.2.7.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.2.8 Modulo : Que dicen los clientes sobre Oshyn . . . . . . . . . . . 39

4.2.8.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 39

4.2.9 Documentos White Papers˝ . . . . . . . . . . . . . . . . . . . . 40

4.2.9.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.2.10 Noticias y Eventos . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.2.10.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.2.11 Ultimos posts . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.2.11.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.2.12 Animacion : Trabajos realizados por Oshyn . . . . . . . . . . . . 45

4.2.12.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 45

4.2.13 Trabaje con nosotros . . . . . . . . . . . . . . . . . . . . . . . . 46

4.2.13.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 46

4.3 Integraciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

TABLA DE CONTENIDO x

4.3.1 Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

4.3.1.1 Desarrollo e implementacion . . . . . . . . . . . . . . . 48

4.3.2 Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

4.3.2.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 50

4.3.3 AddThis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

4.3.3.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 51

4.3.4 SalesForce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

4.3.4.1 Reto de la integracion . . . . . . . . . . . . . . . . . . 54

4.3.4.2 Ques informacion guardar . . . . . . . . . . . . . . . . 55

4.3.4.3 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 55

4.4 SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

4.4.1 sitemap.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

4.4.1.1 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 58

4.4.2 robots.txt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

4.4.2.1 Como funcionan . . . . . . . . . . . . . . . . . . . . . 58

4.4.2.2 Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . 59

4.4.3 HTML Meta datos . . . . . . . . . . . . . . . . . . . . . . . . . 60

5 Resultados, Conclusiones y Recomendaciones 62

5.1 Resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

5.1.1 Posicionamiento en buscadores . . . . . . . . . . . . . . . . . . . 62

5.1.2 Incremento de trafico hacia el sitio web . . . . . . . . . . . . . . 63

5.1.3 Mejoras en tecnicas SEO . . . . . . . . . . . . . . . . . . . . . . 67

5.1.4 Mejoras en desempeno del sitio . . . . . . . . . . . . . . . . . . 67

5.1.5 Campanas de mercadeo . . . . . . . . . . . . . . . . . . . . . . . 68

5.2 Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

5.3 Recomendaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Lista de Figuras

2.1 Diagrama General de uso de un CMS . . . . . . . . . . . . . . . . . . . 7

2.2 Ejemplo de una etiqueta codigo HTML . . . . . . . . . . . . . . . . . . 11

2.3 Jerarquıa de objetos en un ejemplo HTML DOM . . . . . . . . . . . . 13

2.4 Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.1 Pagina login Business Catalyst . . . . . . . . . . . . . . . . . . . . . . 19

3.2 Ejemplos de como se ve en un sitio web el servicio Click to Call . . . . 22

3.3 Vista de mapa a traves de Google Maps . . . . . . . . . . . . . . . . . 22

4.1 Estructura de un template vista por Business Catalyst . . . . . . . . . 26

4.2 Plantilla para todas las paginas internas. CommonBlueTemplate˝ . . . 27

4.3 Plantilla paginas de inicio y exposicion de trabajos HWBlueTemplate 27

4.4 Menu navegacion principal . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.5 Ejemplo de Mapa del sitio. Site map˝ . . . . . . . . . . . . . . . . . . 29

4.6 Inicializacion del menu usando droppy . . . . . . . . . . . . . . . . . . 30

4.7 Estructura HTML del menu . . . . . . . . . . . . . . . . . . . . . . . . 31

4.8 Vista para editar menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.9 Vista para editar menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.10 Archivo homeinfo.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

4.11 Cajas de informacion pagina principal . . . . . . . . . . . . . . . . . . . 34

4.12 Buscador pagina de inicio . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.13 Buscador paginas internas . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.14 Modulo Contactenos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

4.15 Ventana para pedir que Oshyn llame en ese instante . . . . . . . . . . . 38

4.16 Link hacia la seccion de historias exitosas de clientes Oshyn . . . . . . 39

4.17 Frases de clientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

4.18 Link hacia documentos creados por Oshyn . . . . . . . . . . . . . . . . 40

4.19 Registro para noticias y eventos . . . . . . . . . . . . . . . . . . . . . . 41

4.20 Ultimos posts de Oshyn blogs . . . . . . . . . . . . . . . . . . . . . . . 42

xi

LISTA DE FIGURAS xii

4.21 Codigo del Almacenador de Contenido para posts del blog de CMS . . 43

4.22 Codigo de la pagina web que alberga el modulo de los 5 ultimos posts

del blog de CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

4.23 Animacion Flash. Pagina de proyectos realizados por Oshyn. Vista de

galerıa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

4.24 Animacion Flash. Pagina de proyectos realizados por Oshyn. Vista in-

formacion de proyecto. . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

4.25 Pagina web para aplicar por un puesto en Oshyn . . . . . . . . . . . . 47

4.26 Uso de Google Maps API para generar mapa de Oshyn Baltimore. . . . 48

4.27 Google Map. Oficina Los Angeles. . . . . . . . . . . . . . . . . . . . . . 49

4.28 Google Map. Oficina Baltimore. . . . . . . . . . . . . . . . . . . . . . . 49

4.29 Logo de Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

4.30 Oshyn Twitter widget . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

4.31 Asistente para creacion de boton AddThis . . . . . . . . . . . . . . . . 52

4.32 Overlay del boton AddThis dentro de la seccion Blogs . . . . . . . . . . 53

4.33 Opcion de mas˝del boton AddThis dentro de la seccion Blogs . . . . . 53

4.34 Flujo de informacion del sitio hacia el CRM . . . . . . . . . . . . . . . 54

4.35 sitemap.xml sitio Oshyn . . . . . . . . . . . . . . . . . . . . . . . . . . 57

4.36 URL Sitemap.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

4.37 robots.txt sitio Oshyn.com . . . . . . . . . . . . . . . . . . . . . . . . . 60

5.1 Posicion Oshyn en buscador Google . . . . . . . . . . . . . . . . . . . . 64

5.2 Posicion Oshyn en buscador Google con tema relacionado . . . . . . . . 64

5.3 Numero de visitas en rango de tiempo . . . . . . . . . . . . . . . . . . 65

5.4 Numero de paginas vistas por visita . . . . . . . . . . . . . . . . . . . . 66

5.5 Numero de visitas por fuente de estas . . . . . . . . . . . . . . . . . . . 66

Capıtulo 1

Introduccion

1.1 Antecedentes

Dentro de estas secciones se explicara sobre el origen y razones del porque Oshyn

decidio ejecutar el proyecto para la creacion del nuevo sitio web empresarial.

1.1.1 Origen del proyecto

Oshyn Inc. es una empresa que impulsa la innovacion con estrategias dinamicas

de diseno, tecnologıa y talento. Se encarga especialmente de desarrollar y entregar

soluciones de negocios para la web y equipos moviles, usando plataformas con tecnologıa

de punta, para el mundo de negocios actual.(1)

La base de la empresa es en Los Angeles con presencia en Baltimore y en Quito. Oshyn

ha entregado productos de calidad a una cantidad grande de empresas entre las mas

destacadas se encuentran : Best Buy, Electronic Arts, Laureate Education, Miramax,

Walt Disney y Volkswagen.

Oshyn fue fundada en 2001, y desde esa fecha, su pagina web no ha sido actualizada

para cumplir con los requisitos actuales de usuarios y de editores. La pagina version

1, que existio entre 2006 - 2008, dejo de cumplir con caracterısticas que el mundo web

requiere en la actualidad. Entre las caracterısticas que se necesitan estan : interaccion

con usuarios a traves de blogs, wikis y formularios web, la mayorıa de esta funciona-

lidad se provee a traves del uso de tecnologıas web 2.0 que buscan siempre mejorar la

experiencia del usuario. Ademas, la version anterior no usaba tecnologıas como CSS 2.0

o Flash o Ajax, ni cumplıa con un diseno empresarial moderno, ni facilidad de editar

contenido, entre las mas importantes.

1

1.1 Antecedentes 2

Adicionalmente, por la falta de un manejador de contenidos moderno y completo, la

pagina dejo de ser actualizada y la plataforma con la que fue construida se convirtio

en un impedimento tanto para los desarrolladores como para los editores de la pagina.

Es por eso, que a finales del 2008, se decidio crear un proyecto interno para la reali-

zacion del nuevo sitio web de la empresa, que atraiga usuarios, que permita una facil

actualizacion y que cumpla con caracterısticas del mundo web actual.

Seleccionando un manejador de contenidos estable actual y escalable, que esencialmente

provea una interface de usuario facil de interpretar y usar, que posea caracterısticas de

CRM, es decir, que posea un modelo de gestion orientada al cliente y al mercado, que

permita analizar y medir el pulso del sitio, es decir, que permita construir metricas,

analizar reportes de visitas y el origen de estas. Basicamente, que sea simple, solido y

seguro. Estas son varias de las caracterısticas que el CMS que contenga el nuevo sitio

web de Oshyn debe poseer.

Es ası como en Noviembre 2008 Oshyn Inc decidio dar inicio al proyecto New Oshyn

Site˝.

1.1.2 Versiones previas del sitio web

Oshyn.com ha tenido varias mutaciones a lo largo de la existencia de la pagina

corporativa. La primera version de este sitio data del ano 2002 ; posteriormente, tenemos

una version en el 2004 ; mas adelante, otra version en el 2006 ; y, la version actual, la

cual desarrolle como parte de estas tesis.

Todas las versiones, a excepcion de la actual, han carecido de interfaces que per-

mitan una actualizacion facil e inmediata por parte de los encargados de la edicion de

contenido. Normalmente las personas encargadas de esto carecen de conocimientos en

tecnologıa web, lo cual les ha impedido realizar tareas basicas de mantenimiento de

una forma eficiente.

Los sitios del 2002 y 2004 han sido basicamente sitios informativos y para compartir

datos de contacto. La carencia de informacion sobre los sitios web del 2002 y 2004 me

ha impedido compararlos de una forma mas tecnica, con el nuevo sitio. Lo que sı puedo

mencionar es que estos sitios eran estaticos, carecıan completamente de caracterısticas

web 2.0, siendo esto logico, ya que recien en el 2004 comienza el apogeo de la web 2.0

en el internet.

1.2 Presentacion del proyecto 3

El sitio del 2006 fue desarrollado usando el CMS Dot Net Nuke˝. Este CMS es

de fuente abierta y usa la tecnica de plantillas y modulos para su funcionamiento,

este esta basado en las plataformas VB.net y ASP.net (2). Esta version de la pagina

poseıa mas funcionalidades que las versiones previas, sin embargo, no aprovechaba las

caracterısticas de un sitio web 2.0 actual, lo cual influyo fuertemente en la necesidad de

buscar diferentes opciones a nivel de manejador de contenidos, para la nueva version

del sitio web.

Al consultar a los manejadores de contenido del sitio web de oshyn.com la razon por

la cual decidieron no usar mas este manejador de contenidos, la respuesta fue que el

desarrollo de nuevos modulos y la lentitud para poder actualizar contenido fue la mayor

razon para buscar horizontes diferentes. El equipo de mercadeo, el cual es el encargado

del manejo del sitio, siempre ha deseado poder actualizar y manejar contenido sin tener

que contactar a un desarrollador para realizar esta tarea.

1.2 Presentacion del proyecto

Oshyn Inc. al decidir realizar una renovacion total de su sitio empresarial web, creo

un proyecto interno para cumplir con esta meta. Para esto se necesito el apoyo de varias

secciones de la empresa :

– Departamento de analisis de negocio (Business Analyst Department˝)

– Departamento de mercadeo

– Departamento de recursos humanos

– Departamento de gerencia de proyectos (Project Manager Department˝)

– Departamento de desarrollo

El departamento de analistas, estudio una variedad de manejadores de contenido

web para tomar la decision de adoptar uno de estos para el nuevo sitio. Es claro que

los analistas realizaron este trabajo basandose en los requerimientos entregados por el

departamento de mercadeo.

El departamento de mercadeo por su parte, realizo un analisis de manejadores de

contenido web y de las caracterısticas que estos deben tener. Es decir, este proceso de

decision fue comandado conjuntamente entre los dos departamentos de la empresa.

El departamento de recursos humanos realizo el analisis para crear el equipo de

desarrolladores de trabajo que cumplira el proyecto. Ademas, decidieron que un gerente

1.3 Impacto del Proyecto dentro de la empresa 4

de proyecto estara supervisando y manejandolo para de esta forma crear un canal de

comunicacion fluido entre los duenos del proyecto (Departamento de Marketing) y los

desarrolladores.

El departamento de desarrollo decidio incorporar basicamente a dos personas, una

que sera la encargada del desarrollo del sitio en todo su aspecto y otra que creara las

animaciones que se desee incluir en el sitio.

1.3 Impacto del Proyecto dentro de la empresa

El departamento de mercadeo junto con los gerentes de la empresa estan convencidos

que el sitio web es una herramienta muy importante para atraer y generar potenciales

nuevos clientes.

Las caracterısticas del nuevo sitio web deben ser las siguientes :

– Diseno moderno.- Una combinacion grafica adecuada es una pieza importantısima

a la hora de hacer que los visitantes se sientan comodos. Un sitio, por mas conte-

nido que tenga, si no tiene un buen diseno grafico, difıcilmente lograra un lugar

destacado entre otros sitios del mismo tipo.

– Facil de actualizar.- Los editores de contenido, de lo cual normalmente se encarga

el departamento de mercadeo, han tenido varios inconvenientes en el pasado, en

cuanto a actualizacion de texto, imagenes y enlaces se trata. Un sitio interesante

es aquel que cada vez que se lo visite, brinde al usuario algo diferente en lo cual

gastar tiempo para analizar. Esto unicamente se puede llegar a cumplir, creando

contenido interesante para el visitante y usando un manejador de contenidos

amigable y facil de usar para el editor de contenido del sitio. Recordemos que el

editor de contenido, la mayorıa de veces, y en esta vez sin excepcion, conoce muy

poco de HTML y de codigo web.

– Contenido dinamico.- El sitio debe poseer caracterısticas que permitan generar

contenido actual y dinamico.

– Que permita interactuar con el usuario.- El usuario, si necesita, debe poder

facilmente interactuar con el sitio, es decir, enviar peticiones de informacion o

enviar peticiones de contacto.

– Facil navegacion.- La informacion que ira en el sitio debe poseer una clasificacion

apropiada. Aquı hay que encontrar un adecuado balance entre la linealidad y la

jerarquizacion.

1.3 Impacto del Proyecto dentro de la empresa 5

– Integracion con varios servicios web.- Ahora el internet posee una variedad de

herramientas y de servicios, tales como conexion con redes sociales, widgets de

interaccion telefonica entre otros. Las integraciones con CRMs, integraciones con

redes sociales y con servicios utilitarios son esenciales en un sitio web del mo-

mento. La utilizacion e integracion de este tipo de servicios le da al sitio web una

atraccion extra al usuario.

Ademas, junto a la creacion del nuevo sitio se tiene pensado realizar varios proyec-

tos/campanas en los cuales es la principal herramienta es el sitio web. Esto es :

Campanas de la carta mensual de Oshyn hacia sus clientes y visitantes, campanas

ofertando productos.

Campanas para atraer visitantes al sitio, para esto se ha escogido un grupo de blog

posters los cuales postearan sobre temas importantes en tecnologıa.

Ademas, campanas usando tecnologıa de terceros, puntualmente con Google Ad-

words˝, el cual es un servicio de Google para crear y ejecutar publicidad patrocinada

para atraer mas clientes al sitio web.

Cada interaccion de un usuario a traves de un formulario es capturada. La infor-

macion relevante es enviada a un CRM (Custom Relationship Management). De esta

manera se logra apoyar a la gestion de las relaciones con los clientes, a la venta y al

marketing.

Ahora que tenemos una idea de las razones por las cuales se creo este proyecto interno,

el cual lo realizo como mi tesis y que ademas tenemos en cierta medida las expectativas

que tiene la empresa al finalizar el proyecto, podemos mencionar las tecnologıas y

tecnicas a usarse para la realizacion del mismo.

Capıtulo 2

Marco Teorico

2.1 Tecnicas y tecnologıas a ser usadas

2.1.1 Programacion orientada a objetos

La Programacion orientada a objetos es un paradigma de programacion que usa ob-

jetos y sus interacciones para disenar aplicaciones y programas de computadora. Esta

basado en varias tecnicas, incluyendo herencia, modularidad, polimorfismo y encapsula-

miento (3). Su uso se popularizo a principios de la decada de los noventa. Actualmente

son muchos los lenguajes de programacion que soportan la orientacion a objetos.

2.1.2 Sistema de gestion de contenidos (CMS)

Tambien conocido como manejador de contenidos, es una herramienta que per-

mite crear una estructura de soporte para la creacion y administracion de contenidos,

principalmente en paginas web, por parte de webmasters, editores de contenido y de-

sarrolladores (4).

Dicho de otra forma, un CMS es una herramienta que permite a un editor crear, cla-

sificar y publicar cualquier tipo de informacion en una pagina web. Generalmente los

CMS trabajan contra una base de datos, de modo que el editor simplemente actualiza

una base de datos, incluyendo nueva informacion o editando la existente.

Existen CMS de toda forma y tamano, y pueden basicamente manejar una gran varie-

dad de cosas, ya sea individualmente o por grupo. Pueden manejar contenido estatico

de un website, colaborar con documentos a traves de la web, o realizar funcionalidades

6

2.1 Tecnicas y tecnologıas a ser usadas 7

Fig. 2.1: Diagrama General de uso de un CMS

de CMS. Los CMS generalmente pueden ser clasificados en dos categorıas : Enterprise

CMS y Web CMS. Ver figura 2.1.

La figura nos explica como tanto los desarrolladores, los tecnicos de informacion y los

editores de contenido interactuan con el CMS para la publicacion de alguna informacion

en el sitio web.

Los CMS son desarrollados usando lenguajes escalables y modulares como es PHP,

Java, .net. Entre ejemplos de CMS tenemos :

– Joomla - PHP

– Drupal - PHP

– Jahia - Java

– RedDot - .net

– Sitecore - .net

– Umbraco - .net

– Liferay - JAVA

2.1.2.1 Enterprise CMS (ECMS)

Son paquetes de software que contienen soluciones altamente efectivas e eficientes

para el manejo de contenido en un nivel corporativo. Estos paquetes han sido disenados

para ayudar a las corporaciones a volverse mas eficientes y aumentar el nivel de fun-

cionalidad y calidad mientras se decrementa el error humano y el tiempo de respuesta.

Este tipo de CMS puede integrar funciones corporativas como : sistemas de envıo y

2.1 Tecnicas y tecnologıas a ser usadas 8

entrega, facturacion, recursos humanos, relaciones de clientes CRM, manejo de do-

cumentacion y sistemas de ventas transaccionales (5). Los Enterprise CMS tratan al

manejo de datos a un nivel de usuario, en el cual varios usuarios pueden agregar piezas

individuales a un grupo grande de datos integrados. Companıas que instalan este tipo

de sistemas complejos ofrecen un grupo de soluciones que ayudaran a la empresa a

personalizar y mejorar aspectos de funcionalidad, este software usualmente viene con

un precio realmente alto. Como ejemplos de ECMS tenemos :

– Sitecore - http ://www.sitecore.net/

– Reddot - http ://www.opentext.com/

– Jahia - http ://www.opentext.com/

2.1.2.2 Web CMS/Portals (WCMS)

Paquetes de CMS web son mayoritariamente creados para ser usados en la web. Pue-

den ser incorporados para realizar funciones numerosas, o centrarse especıficamente en

una funcionalidad. Permiten a los editores de contenido actualizar porciones dentro de

un sitio web comun y colaborar en un sitio de comunidad. CMS web realmente ayu-

dan al desarrollador a crear funcionalidad especıfica de una manera rapida y eficiente,

permitiendo al desarrollador incluir otros desarrolladores sin el temor de irse contra los

estandares (6).

Los Web CMS poseen una categorıa que contiene paquetes que pueden ser utilizados

a traves de una intranet o internet y son disenados para colaborar entre usuarios.

Estos usuarios pueden estar trabajando en el mismo proyecto y el CMS le permite

utilizar funcionalidades como manejo de proyecto, versionamiento de archivos, sistemas

de calendario, email y foros internos (6).

Como ejemplos de CMS web puedo listar :

– Joomla

– Drupal

– Business Catalyst

– Acumium

El tipo de CMS que se uso para el sitio web de Oshyn es un web CMS. Es por eso

que seguire profundizando un poco sobre las funcionalidades de este tipo de CMSs.

Un WCMS es un sistema de software usado para administrar y controlar una co-

leccion dinamica de material web, entre este material estan : HTML, documentos,

2.1 Tecnicas y tecnologıas a ser usadas 9

imagenes y otras formas de medios web. Las facilidades de un CMS permiten controlar,

auditar, editar y observar el manejo de este material a traves del tiempo (6). Un CMS

posee :

– Plantillas automatizadas.- Creacion de plantillas de salida estandares usualmente

hechas en HTML y XML. Estas pueden ser automaticamente aplicadas a paginas

nuevas del sitio o a paginas ya existentes. Esto permite realizar actualizaciones a

contenido general desde un sitio central.

– Contenido facilmente editable.- Una vez que el contenido es separado en parte

visual del sitio, se vuelve facil el manipularlo y editarlo. La mayorıa de WCMS

incluyen una herramienta de edicion WYSISYG editor˝, esta herramienta per-

mite a individuos que no poseen conocimientos tecnicos, crear y editar contenido

del sitio.

– Grupo de caracterısticas escalables.- La mayorıa de WCMS incluyen modulos

plug-in˝es decir, que son facilmente agregables, son de facil instalacion y ayudan

a extender la funcionalidad del sitio existente. La mayorıa de WCMS tienen la

capacidad de soportar add-ons˝, que proveen funcionalidades extensibles, por

ejemplo modulos de foros, almacenes web, galerıas de fotos, manejo de contactos

y redes sociales. A estas funcionalidades adicionales se las conoce como modulos,

nodos, widgets˝y extensiones.

– Estandares WEB actualizables.- El software que compone un WCMS es actuali-

zado regularmente con nuevos grupos de funcionalidades y permite mantener al

sistema y al sitio actual en referencia a estandares y nuevos componentes web.

– Administracion de flujos de trabajo.- Un flujo de trabajo es el proceso de crear

ciclos secuenciales y paralelos de tareas que deben ser cumplidas dentro del CMS.

Por ejemplo, un editor de contenido puede realizar un cambio a un texto, este

texto primero debe ser aprobado por el area de edicion y por el webmaster antes de

ser realmente publicado en el sitio, de la asignacion de estas tareas y la secuencia

se encarga el CMS.

– Roles de trabajo.- La mayorıa de CMS y por supuesto WCMS permiten la creacion

de grupos de usuarios, a estos grupos se les puede asignar privilegios limitados

dentro de las funcionalidades del CMS, como el manejo de contenido o adminis-

tracion del CMS entre otros.

– Administracion de documentos.- El software del CMS provee un manejo de ar-

chivos y el ciclo de vida de estos. (Fecha de creacion, fecha de publicacion y fecha

de expiracion.)

2.1 Tecnicas y tecnologıas a ser usadas 10

– Virtualizacion de contenido.- El software de un CMS permite que cada usuario

trabaje con una copia virtual del sitio entero, documentos, contenido y codigo.

Esto permite que se realicen cambios a recursos multiples e interdependientes que

seran ejecutados en contexto antes de ser publicados.

Es bueno tambien nombrar los tres grandes subclasificaciones de WCMS, basandose

en terminos de cuando la presentacion de la plantilla sera aplicada para renderizar

contenido estructurado (6). Estos son :

– Procesamiento fuera de lınea (offline processing˝).- Tambien conocidos como

sistemas de horneado o en ingles baking systems. Estos sistemas pre procesan

todo el contenido aplicando plantillas antes de la publicacion de las paginas web.

Dado que estos sistemas no requieren de un proceso que aplique las plantillas al

momento que se genero el pedido de una pagina, proveen paginas mas rapidamente

y mejoran la correccion de errores.

– Procesamiento en lınea o en ingles Online processing˝.- Tambien conocidos en

ingles como frying systems˝. Estos tipos de sistemas aplican las plantillas en

demanda, es decir, cuando ha sido requerida una pagina. El HTML puede ser

generado en el lado del servidor cuando el usuario visita la pagina o puede retirar

el pedido del HTML de un cache.

– Sistemas hıbridos.- Algunos sistemas combinan las caracterısticas de los dos an-

teriores. Estos ejecutan codigo JSP, ASP, PHP en lugar de solo codigo HTML. Lo

cual para renderizar contenido combina las dos estrategias anteriores, la primera

para tener el contenido que genera el codigo ; y, la segunda para aplicar plantillas

generales y no dinamicas.

2.1.3 HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hiper-

texto), es el lenguaje de marcado predominante para la construccion de paginas web.

Es usado para describir la estructura y el contenido en forma de texto, ası como para

complementar el texto con objetos tales como imagenes.

HTML tambien es usado para referirse al contenido del tipo de MIME text/html o

todavıa mas ampliamente como un termino generico para el HTML, ya sea en forma

descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directa-

mente de SGML (como HTML 4.01 y anteriores).

2.1 Tecnicas y tecnologıas a ser usadas 11

En la figura 2.2 podemos observar como esta estructurada una etiqueta de tipo HTML.

Toda la etiqueta incluyendo el contenido, es el elemento, la etiqueta en este caso es

p˝que se refiere a parrafo, esta puede tener atributos y estos a su vez tienen valores,

los cuales se aplicaran al contenido. La etiqueta posee contenido y para finalizar la

estructura que cierra la etiqueta.

Fig. 2.2: Ejemplo de una etiqueta codigo HTML

2.1.3.1 HTML 4.01

Esta especificacion define el Lenguaje de Formato de Documentos para Hipertexto

(HyperText Markup Language, HTML), el lenguaje de publicacion de la World Wide

Web. La especificacion HTML 4.01 es una version de HTML 4. HTML 4 soporta mas

opciones de multimedia, lenguajes de scripts, hojas de estilo, mejores capacidades de

impresion y documentos mas accesibles a usuarios con discapacidades. HTML 4 tambien

da un gran paso adelante hacia la internacionalizacion de los documentos, con la in-

tencion de hacer la Web autenticamente universal.

HTML4 es una aplicacion de SGML conforme al estandar internacional ISO 8879 –

Standard Generalized Markup Language [ISO8879].

2.1.3.2 SGML

O en ingles Standard Generalized Markup Language˝, es un estandar ISO para

definir lenguaje de formato generalizado para documentos (7). El formato generalizado

se basa en dos postulados :

– El formato debe describir la estructura de un documento y otros atributos.

– El formato debe ser riguroso para que tecnicas de procesamiento puedan definir

el procesamiento de este tipo de documentos.

2.1 Tecnicas y tecnologıas a ser usadas 12

2.1.4 Hojas de estilo en cascada CSS

Hoja de estilos o en ingles Cascading Style Sheets CSS˝, es un lenguaje de estilos

usado para describir la presentacion, es decir, la forma como se ve y el formato de un

documento escrito en lenguaje de marcado, como lo es el HTML. La aplicacion mas

comun de este lenguaje es la presentacion de paginas web escritas en HTML o XHTML.

CSS fueron disenados principalmente para permitir la separacion del contenido de un

documento y la presentacion de este mismo documento, incluyendo elementos como

despliegue, colores y tipos de letras. Esta separacion mejora el acceso al contenido,

provee mas flexibilidad y control sobre las especificaciones de presentacion y permite

compartir el formato entre diferentes paginas, ademas reduce la complejidad y contenido

estructural repetido (8).

Las especificaciones CSS son mantenidas por la W3C World Wide Web Consortium.

Existen tres formas de manejar y aplicar estilos en un sitio web.

– Externa.- es decir se maneja los estilos en una hoja CSS externa, almacenada en

un archivo diferente al de la pagina. Esta es la manera mas eficiente de manejar

y programar hojas de estilos CSS. De esta forma separamos completamente el

contenido de la presentacion del HTML.

– Interna.- es decir, va dentro de la pagina web, pero definida en la cabecera de esta.

De esta forma se separa el contenido de la presentacion pero no en su totalidad,

ya que las definiciones de estilos, de todas maneras estaran incluidas dentro de la

pagina. Otra deficiencia al utilizar este tipo de CSS, es que no se podran volver

a usar entre diferentes paginas ya que al declararlos internamente en una pagina

no se pueden compartir con otras.

– En lınea.- se inserta las definiciones de estilo directamente dentro de la etiqueta

HTML. Esta manera de programar no es la mas adecuada, ya que el manteni-

miento y actualizacion de codigo se hacen mas complejos.

2.1.5 JavaScript

Es un lenguaje de script orientado a objetos que permite programaticamente el ac-

ceso a objetos dentro de la aplicacion cliente. Es especialmente usado al lado de clientes

es decir de quien hizo la peticion y se ejecuta en el navegador de este. Javascript viene

a ser un componente integrado al web browser. Este lenguaje permite el desarrollo

2.1 Tecnicas y tecnologıas a ser usadas 13

ampliado de interfaces de usuario y de sitios web dinamicos. Este lenguaje ha sido in-

fluenciado por varios lenguajes y fue disenado para que se parezca al lenguaje orientado

a objetos JAVA, pero que a su vez sea mas facil de manejar, actualizar y programar

(9).

En la actualidad todos los navegadores modernos interpretan el codigo JavaScript

dentro de las paginas web. La interaccion con la pagina web se realiza usando el lenguaje

y manejando objetos del DOM.

2.1.5.1 DOM

Es una convencion independiente del lenguaje y multiple plataforma, usado para

representar e interactuar con objetos HTML, XHTML y documentos XML. Aspectos

del DOM pueden ser manipulados dentro de la sintaxis del lenguaje de programacion,

como vendrıa a ser el caso del javascript (10).

Fig. 2.3: Jerarquıa de objetos en un ejemplo HTML DOM

En la figura 2.3 podemos ver un ejemplo HTML de DOM. Desde la ventana del

navegador se puede navegar interiormente hacia los nodos de la jerarquıa. La navegacion

en el DOM es bidireccional, es decir, se puede ingresar hacia el interior de esta, desde

nodo padre hacia los hijos, y tambien se puede navegar desde adentro hacia el exterior,

nodos hijos hacia el los nodos padres.

2.1 Tecnicas y tecnologıas a ser usadas 14

2.1.6 Web 2.0

La Web 2.0 es la representacion de la evolucion de las aplicaciones tradicionales hacia

aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente

una tecnologıa, podrıamos decir que es una tecnica asociada a varias aplicaciones para

facilitar la comparticion de informacion, interoperabilidad, diseno centrado en el usuario

y colaboracion a traves de la World Wide Web.

El termino Web 2.0 fue acunado por Tim O’Reilly en 2004 para referirse a una segunda

generacion en la historia del desarrollo de tecnologıa Web basada en comunidades de

usuarios y una gama especial de servicios, como las redes sociales, los blogs y los wikis

que fomentan la colaboracion y el intercambio agil de informacion entre los usuarios de

una comunidad o red social. La Web 2.0 es tambien llamada web social por el enfoque

colaborativo y de construccion social de esta herramienta.

En la figura 2.4 podemos ver una comparativa de dos eras. La era Web 1.0 y la era

Web 2.0. A la era Web 1.0 se la podrıa describir generalmente como la era del modo

solo lectura. El contenido era publicado para el alcance de los usuarios y el usuario

generaba muy poco contenido. La era Web 2.0 podemos categorizarla como la era del

modo lectura y escritura. Existe un gran flujo de contenido que se publica al lado del

generador de contenidos y un flujo del mismo tamano o mas grande, que es generado

por los usuarios que visitan los sitios.

2.1 Tecnicas y tecnologıas a ser usadas 15

Fig. 2.4: Web 2.0

Capıtulo 3

Descripcion

3.1 Descripcion de tecnologıas y tecnicas usadas

dentro del sitio

El sitio oshyn.com fue desarrollado utilizando las siguientes tecnologıas las cuales

ire describiendo a traves de este capıtulo.

El uso dado a cada una de estas tecnologıas sera descrito en el siguiente capıtulo en la

seccion modulos del sitio.

– Business Catalyst.- Este es el WCMS que llego a ser escogido y fue utilizado para

el desarrollo del sitio web.

– JQuery.- Librerıa javascript utilizada para el desarrollo de varios componentes

dinamicos.

– addThis.- Es el marco de trabajo para permitir la comparticion de contenido en

diferentes sitios sociales.

– ifByPhone.- Servicio click to call˝. Este tipo de servicios permite convertir trafico

web en comunicaciones telefonicas entre el visitante y el dueno de la entidad.

– Google maps API.- A traves de este API Google es posible insertar mapas Google

en las paginas usando javascript.

– RSS.- formato para suministrar informacion actualizada a subscriptores, usando

formatos de fuentes web codificados en lenguaje XML.

La lista anterior es una lista general de los productos usados. Cada producto fue

utilizado para crear o generar mas de un servicio. Esto veremos a continuacion.

16

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio 17

3.1.1 Business Catalyst

Este CMS entra dentro de la categorıa de manejadores de contenidos web. Este

CMS es propietario de Adobe company. Es un producto todo en uno. Alrededor de

10 herramientas esenciales para negocios y sitios de internet se encuentran dentro del

CMS. Ademas Business Catalyst ofrece como servicio complementario no opcional el

hosting de los archivos, paginas y demas activos del sitio (12).

Entre las razones por las cuales se escogio este CMS estan (12) :

– Permite el manejo facil del sitio web, es decir, editar y actualizar informacion de

una manera rapida y eficiente.

– Permite guardar informacion de clientes cuando estos ingresan informacion a

traves del sitio.

– Permite crear campanas de mercadeo gracias al sistema de mercadeo que posee

el CMS, y generar reportes de estas campanas.

– Posee una herramienta fuerte para obtener metricas sobre visitas y caracterısticas

de estas.

– Provee servicio de hosting, permitiendo tener un alto porcentaje de disponibilidad.

Entre las caracterısticas de este CMS estan (12) :

– Panel de control amigable y accesible a traves de la web. Los menus que se

presentan en el panel de control pueden ser editables por el administrador. Es

decir, permite diversificar que menus son visibles dependiendo de que rol tiene

un usuario del CMS.

– Permite tener plantillas diferentes para que estas sean aplicadas a las paginas, de

acuerdo a la necesidad.

– Dos tipos de herramientas para la edicion de contenido. WYSIWYG editor, es

el nombre que se da al editor que permite visualizar y editar el contenido, el

contenido es bastante similar a como se ve en el sitio web. Tambien existe el

editor HTML, el cual permite usando etiquetas HTML editar el contenido.

– Creacion y edicion de blogs y posts usando una herramienta incorporada para

el manejo de blogs dentro del CMS. Creacion de RSS para el manejo de blogs.

Permite la clasificacion de posts dentro de jerarquıas internas de clasificacion. Per-

mite configurar y determinar tags para cada post, y el uso del tag clouds˝dentro

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio 18

del blog. Cabe mencionar que un glosario de tags o Tag Cloud˝es una lista vi-

sual con pesos. Tags son palabras que tienen una importancia dentro de un blog

dependiendo de cuantas veces se repite en cada entrada del blog.

– Manejo de feeds RSS, no solo para blogs, sino para cualquier pagina o contenido

del sitio.

– Buscador de elementos del sitio.

– Editor y creador de formularios web. Estos formularios web estan integradas con el

repositorio de contactos del sistema. Ademas permite enviar correos electronicos

automatizados, al ser completado un formulario web.

– Manejo de la base de datos de contactos.

– Para el manejo de archivos y recursos, como hojas de estilos y javascript se puede

usar conexiones FTP.

– Creacion y manejo de zonas seguras. Esta funcionalidad se puede aplicar tanto

para archivos o paginas web. Acceso a estas paginas tendran unicamente usuarios

que hayan pasado a traves de un proceso de registro a la zona segura.

– Integracion de SEO para Google, Yahoo y otros buscadores.

– Manejo de archivos de literatura dentro del sitio. Archivos pdf, word y de texto.

Estos pueden ser clasificados dentro de categorıas y zonas seguras.

– Creacion contenido reusable, el cual comprende pedazos de codigo que pueden ser

usados en cualquier parte del sitio. Estos contenidos son llamados almacenadores

de contenido o en ingles Content Holders˝.

– Este CMS tambien permite la edicion de contenido usando la caracterıstica de

sitewalk˝. Esta caracterıstica permite editar contenido tal como si se estuviera

navegando a traves del sitio.

– Funcionalidad de versionamiento y reversion de contenido.

– Galerıa de fotos.

– Rotadores de texto, imagenes, codigo HTML, objetos flash.

– Manejo global e individual de meta datos. Es decir, edicion de las etiquetas meta

datos keywords˝y descripcion que van en cada pagina HTML.

– El CMS tambien posee una gran herramienta para el manejo de comercio electro

nico. Permite la creacion de productos y catalogos y determinar como se des-

plegaran estos en un sitio. Permite el soporte para el manejo de inventarios, el

agrupamiento de productos, programas para afiliados y manejo del enlaces para

pagos electronicos.

– Este CMS posee una herramienta fuerte para el manejo de mercadeo a traves

de campanas de correo electronico. Permite crear plantillas de correo electronico

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio 19

ya sea HTML o texto simple. Permite escoger la lista de correos electronicos de

contactos existentes dentro del CMS, y subir nuevos contactos. Ademas la varie-

dad de reportes que permite obtener la herramienta basandose en una campana

es importante para el usuario.

– Este CMS es XHTML Complaint˝. Es decir de acuerdo al codigo HTML escrito

este sera compatible con la reglas de XHTML. Cualquier modulo que es insertado

por el CMS esta asegurado que este codigo HTML es compatible. Una pagina o

un sitio web es XHTML compatible cuando el codigo HTML sigue las reglas y

especificaciones determinadas por la W3C, con esto se garantiza que los navega-

dores web entenderan el codigo escrito y renderizaran este de la forma correcta

y adecuada. Al ser un sitio compatible con los estandares determinados de cierta

forma se garantiza accesibilidad, rapidez, diversidad, y un mejor uso y eficacia

del SEO (Search Engine Optimization˝).

– Creacion de usuario y roles. Cada una de estas cuentas de usuarios posee correo

POP. Esto permite que varios usuarios esten conectados trabajando simulta

neamente.

– Flujos de trabajo pueden ser personalizados para manejar edicion de contenido y

notificaciones sobre eventos que sucedan en el sitio. Eventos como el envıo de un

formulario web o de un nuevo comentario en un post.

Fig. 3.1: Pagina login Business Catalyst

3.1.2 jQuery

Es una librerıa rapida y concisa de lenguaje javascript. Ayuda a simplificar co-

mandos HTML y la tranversacion del DOM HTML. Manipula eventos, animaciones e

interacciones AJAX. El release de esta librerıa se dio en un BarCamp en el ano 2006.

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio 20

Estadısticas muestran que el 20 por ciento de los mas grandes sitios de ente 10.000 usan

jQuery, actualmente es el marco de trabajo en javascript mas popular y usado a nivel

web (13). JQuery es gratis, y su codigo fuente es abierto. jQuery presenta las siguientes

caracterısticas :

– Seleccion de elementos del DOM, usando comandos que funcionan en todos los

navegadores.

– Manejo y manipulacion de eventos.

– Manipulacion de CSS.

– Efectos y animaciones.

– Ajax. Es una manera de realizar llamadas al servidor asincronicamente.

– Extendible, para ası agregar funcionalidades.

– Funcionalidades extras, tales como version de browser, entre otras.

A la fina, jQuery es un marco de trabajo basado en javascript, cuya finalidad es ayudar

al desarrollador a realizar codificaciones mas faciles, y reducir el tiempo de estas. jQuery

se ha ganado a pulso la caracterıstica de ser un framework con una claridad de codigo

y comandos mucho mas eficiente que el resto de marcos de trabajo en javascript que

existen en la red, como Prototype, MooTools, entre otros. Entre los beneficios de usar

esta librerıa tenemos :

– Encadenamiento.- Objetos de jQuery contienen funcionalidad embebidas a cada

uno de los objetos de la librerıa, es por eso que, cuando se llama a un metodo

de la librerıa, sabemos que nos retorna otro objeto que pertenece a la librerıa

jQuery. Como ejemplo veamos :

¦(p.surprise˝).addClass(ohmy˝).show(slow˝) ;

En este ejemplo vemos como el metodo addClass nos devuelve un objeto al cual

le podemos activar el metodo show.

– Uso de selectores CSS y operadores XPath.- Ya que jQuery pasa mensajes a ob-

jetos,este puede implementar funciones de selectores adicionales. Desarrolladores

de plugins pueden agregar parseadores adicionales.

– Desarrollo de plugin.- La forma en como esta estructurado jQuery es ideal para el

desarrollo de plugins. No es complicado el crear funcionalidades adicionales para

los objetos jQuery.

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio 21

– Iteraciones automaticas.- Metodos de esta librerıa automaticamente iteran sobre

los elementos del DOM y aplican el metodo deseado. Ası la expresion :

¦(expression).after(some HTML˝)

agrega el HTML luego de cada elemento que retorna la expresion. Por ejemplo :

¦(p˝).after(some HTML˝)

3.1.3 ifByPhone

Es un marco de trabajo para el uso del servicio Click to Call˝en espanol es click

para llamar. Es una manera de conectar el sitio web de la companıa con el telefono del

usuario. Este servicio permite que los visitantes web llamen a la empresa.

El sistema funciona de esta manera :

Cuando un cliente ingresa su numero telefonico en Click-to-Call, tanto el telefono

del cliente como el de la empresa empiezan a sonar y ası se logra comunicar a ambas

partes.

Este servicio convierte clicks de mouse ejecutados en el sitio web en llamadas

telefonicas, haciendo simple la interaccion con el usuario y haciendo real el texto

”Llamenos ahora”. Este tipo de servicio reduce la cantidad de usuarios que dejan de

navegar por falta de informacion, incrementa la cantidad de nuevos posibles proyectos

y mejora el mercadeo en lınea.

Este servicio fue contratado por Oshyn para mejorar la funcionalidad e interaccion con

el usuario/cliente. La empresa a la cual se contrato el servicio es if by phone˝.

(http ://public.ifbyphone.com/services/click-to-call).

En la figura 3.2 podemos observar diferentes tipos de botones que promueven esta

accion de Click-to-Call.

Gracias a este servicio se puede :

– Crear configuraciones web instantaneas para Click to Call˝

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio 22

Fig. 3.2: Ejemplos de como se ve en un sitio web el servicio Click to Call

– Se puede direccionar las llamadas basandose en horarios. Es decir horarios dentro

de horas de oficina y fuera de estas.

– Reportes y seguimiento de las llamadas.

– Manejar posibles nuevos clientes de una forma mas rapida y eficaz.

3.1.4 API de mapas de Google

Fig. 3.3: Vista de mapa a traves de Google Maps

El API de Google Maps permite incluir mapas Google dentro de un sitio web usando

comandos y sentencias javascript. Este API provee un numero de utilidades para ma-

nipular mapas y utilizar la variedad de servicios que ofrece el marco de trabajo (14).

Entre los servicios que se puede manipular estan Google Ride Finder, Google Transit,

mapas a nivel de calle, planeamiento de rutas para movilizacion en carro, a pie o usando

transporte publico.

3.1 Descripcion de tecnologıas y tecnicas usadas dentro del sitio 23

El API de Google es un servicio gratis y disponible para cualquier sitio web.

Para el uso de este servicio se necesita llenar una solicitud para la obtencion de la llave

del API. Una vez obtenida esta llave, se puede empezar a desarrollar la aplicacion de

mapas usando las instrucciones de la documentacion.

La version utilizada en el sitio es la version 2 del API. Actualmente la version 3 de

Google labs acaba de ser lanzada.

Otros proveedores de servicios similares son : Bing Maps que es un servicio de Microsoft,

MapQuest, Yahoo ! Maps, entre otros.

En el grafico 3.3 podemos ver la oficina de Oshyn en Los Angeles California, este grafico

es ya utilizando el API y sus funcionalidades. En el proximo capıtulo se explicara la

implementacion de este.

3.1.5 RSS

RSS (Rich Site Summary) es un formato para entregar contenido que regularmente

cambia. Muchos sitios web y weblogs sindican su contenido en formato RSS para los

lectores.

RSS ayuda a los usuarios a mantenerse informado, ya que un lector RSS recoge la

ultima informacion sindicada en un sitio web. Con esto los usuarios ahorran tiempo y

no necesitan visitar cada sitio para obtener la informacion.

Para leer informacion sindicada de tipo RSS, se necesita de un lector de este tipo de

informacion. La mayorıa de navegadores poseen lectores incorporados, tambien existen

programas externos para leer RSS tales como FeedReader, NewsGator, GoogleReader,

entre otros.

Capıtulo 4

Desarrollo

En este capıtulo comenzaremos explicando el funcionamiento y uso de las plantillas

dentro del sitio y luego se explicara el funcionamiento de cada modulo que contiene el

sitio y la tecnologıa que este usa para proveer funcionalidad. Se proveera de impresiones

de pantallas donde se destaca el modulo cuando se crea necesario hacerlo. Ademas en

aquellos modulos que han requerido integracion con otros servicios se explicara la razon

por la cual se integro y la funcionalidad extra que se esta dando al modulo.

4.1 Plantillas

Las plantillas web son utilizadas para separar contenido y presentacion. Una plan-

tilla web es como un formato en particular de una carta. La idea principal es usar

constantemente el mismo diseno web a traves del sitio. Al usar plantillas estamos ase-

gurando que ciertas caracterısticas visuales del sitio seran las mismas entre las diferentes

paginas (12). Ciertas caracterısticas que se cumplen al usar plantillas son :

– Separacion efectiva entre logica de contenido y presentacion.

– Presentacion flexible. Al existir cambios generales, estos cambios se los realiza en

un solo lugar y seran vistos en todo el sitio.

– Reusabilidad.

Una plantilla normalmente contiene estructuras que seran usadas estrictamente a traves

de todo el sitio o de un grupo de paginas. Cada pagina que use estas estructuras podra

contener cualquier tipo de informacion definida para la pagina.

Entonces dos razones generales del porque usar plantillas son :

– Mantener un estilo visual a traves de todas las paginas del sitio.

24

4.1 Plantillas 25

– Administrar el estilo visual del sitio en un mismo lugar. Un cambio realizado sera

reflejado en todo el sitio.

4.1.1 Uso de plantillas dentro del CMS

El CMS nos permite tener una variedad de plantillas, entre estas estan las plantillas

de sitio, plantillas de impresion, plantillas de email. Las que mas nos interesan son las

plantillas de sitio.

4.1.1.1 Plantillas de sitio

Es la plantilla por defecto que representa el diseno visual o en ingles el Look and

feel˝del sitio entero (Ver figura 4.1). Esta plantilla usualmente se aplica a cada pagina

y nuevas paginas creadas del sitio. Para el CMS una plantilla es un fragmento de una

pagina web que permite volver a usar elementos de contenido a traves de varias paginas

web.

Las plantillas ayudan a ahorrar bastante cantidad de tiempo ayudando al desarrollador

a no repetir codigo de elementos en comun, como cabeceras y pies de pagina. Una

plantilla es desarrollada para envolver contenido de una pagina, lo que permite man-

tener consistencia en cada pagina del sitio. Para entender un poco mas este concepto

observemos la figura 4.1, extraıda del sitio de Business Catalyst (12).

4.1.2 Creacion de plantillas

La creacion de plantillas dentro del CMS es sencilla y envuelve dos etapas : Ingresar

el nombre de la plantilla y crear el contenido de la plantilla.

La plantilla puede contener varios modulos, entre estos, el modulo que genera el conte-

nido especifico para una pagina {tag pagecontent}, ademas, en la plantilla para el sitio

de Oshyn, se incorpora el modulo que contiene el menu, eso lo explicaremos en este

mismo capıtulo mas adelante.

Para el sitio de Oshyn se ha creado las siguientes plantillas para la funcionalidad de-

seada.

– CampaignTemplate : esta plantilla es utilizada para la creacion de las paginas

que son direccionadas desde Google o por documentos especializados creados por

Oshyn Whitepapers˝.

4.1 Plantillas 26

Fig. 4.1: Estructura de un template vista por Business Catalyst

– CommonBlueTemplate : Es la plantilla por defecto para cada pagina normal del

sitio. Contiene la estructura del menu navegacional, cabeceras y pies de pagina

deseados segun el diseno. Ver figura 4.2

– HomeWorkBlueTemplate : Esta plantilla es utilizada en dos lugares del sitio. En

la pagina de inicio y en la pagina donde se expone una animacion con los trabajos

realizados por Oshyn. Es una plantilla diferente a la anterior debido a la ubicacion

y contenido del pie de pagina y a que esta no tiene el background donde va el

contenido en texto. Ver figura 4.3.

4.1 Plantillas 27

Fig. 4.2: Plantilla para todas las paginas internas. CommonBlueTemplate˝

Fig. 4.3: Plantilla paginas de inicio y exposicion de trabajos HWBlueTemplate

4.2 Modulos 28

4.2 Modulos

Durante esta seccion se enumerara los modulos creados para el sitio, se explicara la

funcionalidad, la tecnologıa usada y la ubicacion de cada uno de estos en el sitio.

4.2.1 Menu de navegacion

Como podemos observar en la figura 4.4, el menu principal es aquel que permite

la navegacion del sitio a traves de los nodos principales y de los hijos de cada uno de

estos.

Fig. 4.4: Menu navegacion principal

Este menu contiene enlaces a las diferentes paginas del sitio. Su razon de ser es permitir

estructurar todas las paginas web en funcion de un menu o de una lista de paginas

principales, estas podran ser accedidas en cualquier lugar del sitio. Esto permite que

los visitantes del sitio al llegar a cualquier pagina, con simplemente observar, puedan

identificar las paginas y el contenido en general del sitio.

Las paginas principales que la empresa quiere que los visitantes identifiquen son los

enlaces que estan representados en el menu de navegacion principal.

En el caso de oshyn.com se ha identificado seis paginas principales o tambien les po-

demos llamar secciones, ya que cada una de estas contiene al menos una pagina hija

relacionada con la pagina principal y con el contenido que esta representa.

4.2 Modulos 29

4.2.1.1 Mapa del sitio Site map˝

Un mapa del sitio o en ingles site map˝es una lista de paginas de un sitio que seran

accesibles para los crawlers˝(aranas informaticas que recorren un sitio web) o usuarios.

Este puede ser, un documento de planeacion del sitio para el diseno web, o una pagina

web que lista las paginas del sitio. Esta estructura esta normalmente organizada de

forma jerarquica. El mapa del sitio ayuda a los visitantes y robots de los buscadores a

encontrar paginas dentro del sitio. El mapa del sitio otras veces llamado indice, provee

una vista general de arriba a abajo del contenido del sitio (15).

Dado que el mapa del sitio provee de jerarquıa y vision general de la estructura de

contenidos, es tambien usado para la creacion del menu principal del sitio. Con el mapa

del sitio, se puede distinguir claramente las ramas principales y los hijos de cada una

de estas, basandose en esto se construye el menu navegacional del sitio.

Fig. 4.5: Ejemplo de Mapa del sitio. Site map˝

4.2.1.2 Desarrollo

Business Catalyst posee una herramienta para la generacion automatica del menu

principal usando la funcionalidad de los menus dinamicos.

4.2 Modulos 30

Este tipo de menus son menus de navegacion que se pueden usar a traves de todo el

sitio. Este tipo de menus no necesita codigo de programacion, simplemente hace falta

agregar ıtems al menu dentro del CMS (12).

La desventaja de usar esta funcionalidad integrada al CMS es la dificultad de per-

sonalizar la visualizacion del menu, la creacion de submenus y la personalizacion de

estos.

Es por lo descrito en el parrafo anterior que se decidio incorporar un menu personalizado

para implementar la navegacion del sitio. La idea es no obstruir la actualizacion de este

pero a la vez permitir crear un menu completamente personalizable y que se adapte a

las necesidades del diseno del sitio.

Para lograr la creacion de este menu, utilice otro componente del CMS llamado Content

Holders˝. Se habla mas adelante de estos contenedores, por el momento solo tomemos

en cuenta que son contenedores de contenido y estos pueden ser reusables. Para la

personalizacion visual se uso estilos, y para el despliegue del menu se utilizo javascript,

para ser mas precisos, un plugin de la librerıa jQuery.

El nombre del plugin usado es droppy˝, este es basado en jQuery, que es la librerıa

y marco de trabajo javascript usado en el sitio, como se menciono en el capıtulo ante-

rior. Este plugin permite crear menus desplegables anidados con estilos y manejos de

animaciones jQuery. El uso de droppy ˝es sencillo, simplemente se agrega la librerıa

de javascript que contiene el plugin, luego se inicializa el menu en el evento deseado

del navegador, en nuestro caso es en el On Load˝que es cuando el browser ha cargado

todo el contenido de una pagina (16). Ver figura 4.6.

Fig. 4.6: Inicializacion del menu usando droppy

El plugin buscara en el contenido HTML la estructura a cual activar, especificada

por un id. En el grafico 4.7 podemos ver un codigo HTML que sirve para la creacion

de un menu usando droppy. Como podemos ver es una estructura de listas. La primera

4.2 Modulos 31

lista contiene un id, en ese caso en particular es el id nav˝. El plugin se encarga de

leer esta lista y de construir el menu.

Para la personalizacion del menu se uso hojas de estilos acoplando el diseno presentado.

Fig. 4.7: Estructura HTML del menu

Es un tarea sencilla para los editores de contenido el poder modificar los menus. Sim-

plemente deben ingresar a la seccion de manejadores de contenido y editar el item blue

menu˝. Para editar existen dos opciones, usando el editor visual WYSISYG o editando

el HTML directamente. Ver figura 4.8.

4.2.2 Home Page Flash

Este modulo se localiza en la pagina principal del sitio o pagina de entrada o tambien

denominada Home Page˝.

Este modulo es basicamente una animacion realizada en Flash que presenta varios

proyectos de clientes y varios productos que ha realizado y realiza la empresa. Ver figura

4.9.

4.2.2.1 Desarrollo

Este modulo fue creado usando la tecnologıa Flash con script AS3, por el departa-

mento de flash dentro de la empresa.

4.2 Modulos 32

Fig. 4.8: Vista para editar menu

Fig. 4.9: Vista para editar menu

4.2 Modulos 33

Para la alimentacion del contenido de esta pieza flash se usa un XML el cual es leıdo

por el codigo y alimenta las diferentes animaciones de esta pieza. El archivo XML

reside dentro del CMS y puede ser editado por el editor de contenido, para la edicion

de este XML se necesita conocimiento de lenguaje y etiquetas XML ademas el nombre

y ubicacion de los recursos a ser usados.

Fig. 4.10: Archivo homeinfo.xml

La imagen 4.10 muestra la ventana de edicion de un archivo XML dentro del CMS.

4.2.3 Cajas de informacion pagina principal

Este modulo se creo utilizando y mezclando diferentes caracterısticas y modulos

del CMS. Entre estos se encuentran los mencionados anteriormente, almacenadores de

contenido o en ingles Content Holders˝. A continuacion se explicara las caracterısticas

de estos componentes, su utilidad y uso.

4.2.3.1 Content Holders˝

Porciones de codigo HTML, CSS y Javascript pueden ser agrupadas en fragmentos

de contenido que pueden ser usados en varias partes del sitio. A esto se le denomina

almacenadores de contenido. Una pagina web dentro del CMS puede contener uno o

varios modulos de este tipo. La unica restriccion establecida por el CMS es que un

modulo no puede contener a otro modulo (12).

4.2 Modulos 34

Dentro del CMS estos modulos se encuentran dentro de la seccion de manejadores de

contenido.

Para usar uno de estos modulos simplemente se debe anadir este a cualquier pagina o

a una plantilla, usando el administrador de modulos o traves de triangle. Triangle es

un plugin para el programa DreamWeaver˝que permite acceder a las paginas web y

recursos de estilos y javascript del CMS a traves de este.

La estructura de este modulo es la siguiente :

{module contentholder,ID} donde ID es asignado por el sistema a cada modulo.

En otras palabras se puede decir que estos almacenadores de contenido son porciones

de codigo que proveen cierta funcionalidad, estos pueden ser usados a traves del sitio

repetidas veces.

4.2.3.2 Desarrollo

Como se menciono anteriormente, este modulo es compuesto por otros modulos.

Para entender con mas precision veamos la siguiente grafica. Figura 4.11.

Fig. 4.11: Cajas de informacion pagina principal

Este modulo tiene 4 cajas. Desde la izquierda la primera, Solutions˝ ; y, la segunda,

Resources˝, son enlaces y textos estaticos a diferentes paginas dentro del sitio, para

proveer una mejor edicion de este contenido cada una de estas es un almacenador de

contenido.

La tercera caja Blog˝se creo usando un tag de la herramienta de blogs para obtener

los ultimos 3 posts entre todos los blogs. La cuarta caja News˝, de manera parecida,

se obtuvo usando una etiqueta de las herramientas de anuncios que posee el CMS.

Las etiquetas que generan la informacion presentada en estas dos cajas fue formateada

usando hojas de estilo, de esta forma se da el estilo visual deseado.

4.2 Modulos 35

4.2.4 Buscador interno

El motor de busqueda del sitio provee una herramienta completa para que los usua-

rios y visitantes puedan buscar rapidamente informacion dentro del sitio. El sistema de

busqueda permite buscar a traves de :

– Contenido de paginas web.

– Documentos de literatura creados y publicados en el sitio.

– Anuncios creados y publicados.

– Posts hechos a blogs.

4.2.4.1 Desarrollo

Usando el CMS se puede crear la instancia de buscador que se usara en el sitio.

A traves del CMS se puede especificar que tipo de buscador sera, entre las opciones

tenemos :

– Todo el sitio, y solo contenido no seguro.

– Todo el sitio.

– Solo paginas web, solo blogs, solo anuncios.

– Solo elementos de zonas seguras.

El utilizado en el sitio es el tipo todo el sitio˝sin restriccion, es decir, tambien

encontrara elementos que se encuentren atras de una zona segura. El concepto y el uso

de zonas seguras se lo realizara mas adelante. Una vez creado este ıtem de busqueda,

se procede a generar el codigo del formulario que albergara el buscador, y se manda a

indexar el sitio entero.

El resultado de las busquedas se presenta en una pagina especificada por defecto y

la plantilla de esta pagina puede ser editada en la seccion donde se encuentran las

plantillas de elementos internos del sistema del CMS.

En el sitio de Oshyn, el buscador existe en dos lugares diferentes, esto dependio del

diseno visual del sitio. En la pagina de inicio y en la pagina de presentacion de trabajos

el buscador se encuentra en la parte inferior del pie de pagina y en el resto del sitio el

buscador esta en la parte superior debajo del menu principal.

Fig. 4.12: Buscador pagina de inicio

En las figuras 4.12 y 4.13 podemos ver ejemplos de este modulo. La instancia usada es

la misma, simplemente varıa su localizacion y aspecto visual.

4.2 Modulos 36

Fig. 4.13: Buscador paginas internas

4.2.5 Modulos CTA

Antes de proseguir es importante definir lo que mencionaremos de aquı en adelante

como modulos que llaman a una accion por parte del visitante o en ingles Call To

Action˝. La idea principal de modulos de este tipo es que inviten al usuario del sitio

web a realizar la accion que la empresa quiere que haga. Normalmente estos modulos

se encuentran en lugares estrategicos de cada pagina y siempre estan al alcance del

visitante.

4.2.5.1 Definicion

Tener modulos efectivos de este tipo es una parte importante de cualquier sitio web

actual. Modulos Call to Action˝no esta limitado a sitios web que manejan comercio

electronico, cualquier sitio web debe tener claro que informacion quiere obtener de

parte del visitante del sitio web, ya sea llenando el formulario de contactenos, o que el

visitante se registre para una campana de email voluntariamente.

Un modulo de este tipo provee :

– Concentracion en el sitio.

– Una manera de medir el exito del sitio.

– Direccion a los visitantes.

4.2.5.2 Uso en Oshyn.com

Para alcanzar este objetivo el departamento de marketing y la empresa que realizo

el diseno grafico de la pagina se reunieron para definir que clase de botones de este tipo

se necesita para la pagina web de Oshyn.

Los modulos que pertenecen a este tipo y estan definidos en el sitio web de Oshyn.com

son :

– Contactenos

– Historias de clientes

– Rotulo aleatorio de Que dicen nuestros clientes˝

– Whitepapers˝o documentos creados por la empresa.

4.2 Modulos 37

– Inscripcion para el email mensual de Oshyn.

4.2.6 Modulo contactenos

Tambien conocido en ingles como Contact Us˝, su funcion es proveer informacion

rapida y concisa de como el usuario, visitante y posible cliente puede llegar a contactarse

con Oshyn, es la finalidad que el modulo de contactenos debe poseer. Este modulo se

encuentra dentro del grupo de modulos Call To Action˝.

Fig. 4.14: Modulo Contactenos

Como podemos observar en la figura 4.14 este modulo posee instrucciones claras para

quien quiera hacer uso de este : el numero de Oshyn, pedir mas informacion, pedir una

cita, o hacer que Oshyn llame al cliente en ese instante, son las opciones que el visitante

posee con este modulo. Todas estas funcionalidades se encuentran dentro de este Call

To Action˝

4.2.6.1 Desarrollo

Este modulo se encuentra dentro de un almacenador de contenido, consiste en codigo

HTML, CSS y javascript.

Javascript en este modulo juega un papel bastante importante para la funcionalidad

de request further information˝carga un formulario web usando la tecnica de carga

asincronica Ajax. Para esto, una vez mas, la librerıa jQuery nos permite realizar este

proceso eficientemente, usando metodos y propiedades del marco de trabajo. De igual

forma, la creacion del enlace Que Oshyn me llame˝o en ingles Have Oshyn call

you˝es a traves de javascript. La integracion que aquı se realiza entre este enlace y la

plataforma que permite realizar este tipo de funcionalidad, en este caso ifByPhone, es

usando javascript.

En la figura 4.15 podemos ver la ventana que se abre al hacer clic en el enlace antes

mencionado.

4.2 Modulos 38

Fig. 4.15: Ventana para pedir que Oshyn llame en ese instante

Para realizar esta integracion se necesito realizar los siguientes pasos. Primero la

creacion de una cuenta con la empresa ifByPhone(http ://public.ifbyphone.com/) luego

configurar telefonos, personas de contacto, horarios de contacto, logo de la empresa,

tamano de la ventana, entre otras cosas. Una vez configurado esto, se procede a exportar

el codigo que genera ifByPhone para este servicio Click to call˝. Este codigo se ingresa

en el link del modulo, en la figura 4.15 podemos ver en la caja roja el link, con esto la

integracion se ha realizado.

El codigo que se ingreso en el link del modulo es :

javascript :clickwin= window.open(’http ://www.ifbyphone.com/clickto getphone.php ?

click id= 7751&key=21d2452c49e33aadfa917f93028b3e29093b926a’, ’Clickto’ , ’toolbar

= no, location=no, menubar=no, scrollbars=no, copyhistory=no ,resizable=yes, width

= 430, height=330’)

4.2.7 Historias exitosas de clientes

Tambien conocido en ingles como Client Success Stories˝, su funcion es proveer de

un acceso rapido al visitante a la seccion donde se encuentran las historias exitosas con

clientes que Oshyn posee, es la finalidad de este modulo.

4.2.7.1 Desarrollo

Este, al igual que el anterior, es un modulo del tipo Call to Action˝. Ademas, este

modulo se almacena en un almacenador de contenido para que pueda ser vuelto a usar

en cualquier pagina del sitio.

A este modulo se le conoce dentro del CMS como Case Studies Call Out˝. Para la

creacion de este modulo se utilizo codigo HTML y CSS.

4.2 Modulos 39

Fig. 4.16: Link hacia la seccion de historias exitosas de clientes Oshyn

4.2.8 Modulo : Que dicen los clientes sobre Oshyn

Tambien conocido en ingles como What our clients say about us˝. Este modulo

presenta varias frases que clientes de Oshyn han mencionado sobre la calidad y ex-

celencia del trabajo realizado. La finalidad de este modulo es proveer al visitante de

informacion sobre el trabajo que Oshyn brinda a los clientes y el concepto que ellos

tienen sobre Oshyn.

Fig. 4.17: Frases de clientes

4.2.8.1 Desarrollo

Este modulo es un almacenador de contenido, podra ser usado a traves de todo

el sitio. La frase presentada en este modulo varıa en forma aleatoria cada vez que el

visitante ingresa a una pagina. Para lograr este cometido, lo que se utilizo es la tecnica

de banner. Con esta tecnica me refiero a que se presentara una diferente imagen/texto

en una forma aleatoria.

El CMS posee la funcionalidad de crear contenido rotacional. Esto permite mantener

a este modulo variante y randomicamente desplegar informacion. Este modulo puede

contener codigo texto, objetos flash, imagenes y combinacion de estos.

4.2 Modulos 40

4.2.9 Documentos White Papers˝

Proveer un enlace hacia documentos tecnicos preparados por Oshyn para el publico

en general es la finalidad de este modulo.

Expertos que pertenecen al grupo de trabajo y de la empresa Oshyn, crean docu-

mentos tecnicos sobre productos y tecnologıas actuales que el mundo web utiliza en

la actualidad. Estos documentos son subidos al CMS y clasificados como literatura. El

uso y funcionalidad de este tipo de documentos se los explicara mas adelante en este

capıtulo.

Fig. 4.18: Link hacia documentos creados por Oshyn

4.2.9.1 Desarrollo

Este modulo es otro de los de la agrupacion Call to action˝. Ademas es un almace-

nador de contenido que permitira que este modulo sea usado a traves de todo el sitio.

Este modulo posee codigo HTML y estilos en cascada CSS.

4.2.10 Noticias y Eventos

Tambien conocido en ingles como News and Events˝. La finalidad de este modulo

es permitir al visitante registrarse para recibir noticias y notificaciones de eventos que

programe la empresa Oshyn. Oshyn registra los datos de visitantes, entre esta infor-

macion esta nombre, apellido y direccion electronica. Visitantes que se han registrado

recibiran las noticias y campanas de email que la empresa realice.

4.2.10.1 Desarrollo

Este modulo es un Call to Action˝y ademas se encuentra dentro de un almacenador

de contenido.

Para la creacion de este modulo se necesito realizar las siguientes etapas :

– Crear el formulario interno dentro del CMS. Cada formulario web que se cree

para uso del sitio web necesita estar registrado dentro del CMS.

4.2 Modulos 41

Fig. 4.19: Registro para noticias y eventos

– Proveer de seguridad tipo Captcha˝. Para evitar que robots llenen formularios

varias veces y envıen informacion basura, existe un recurso llamado captcha˝.

Lo que se agrega al formulario es un campo de texto que el usuario debe llenar

en base a una imagen de letras y numeros que se le presenta. El contenido de

este campo de texto es validado al lado del servidor, a traves de codigo, y si

concuerdan estos datos, el formulario sera guardado exitosamente, caso contrario

los datos seran desechados.

– Creacion de lista de usuarios. En el CMS se crea una lista de contactos especial.

Los datos del usuario, al enviar informacion a traves de este formulario, iran

directo a una lista de distribucion de emails, y esta lista sera usada al momento

de crear campanas mensuales de distribucion o de notificacion de eventos.

Cabe mencionar, que para cargar el formulario en este modulo se uso la tecnica asincro

nica Ajax. Para el CMS, el uso de captcha ya es el uso de un modulo. Es decir, el

formulario con esta seguridad agregada viene a ser un modulo. Al agregar este formu-

lario a un almacenador de contenido, que en sı es un modulo, estarıamos violando la

regla del CMS, de no permitir que un modulo contenga a otro modulo. Para permitir

que este modulo de noticias y eventos se convierta en un modulo, se necesito de Ajax.

Es decir, el formulario se encuentra en una pagina web sin decoracion, es decir, solo

se encuentra el formulario puro. El almacenador de contenido posee el resto de codigo

HTML y la llamada Ajax para llenar el formulario dentro del modulo asincronicamente.

Ası logramos que el modulo sea completamente reusable y que se encuentre el codigo

centralizado, para permitir su rapida edicion y propagacion de cambios, y tampoco

violamos la regla de no permitir que un modulo contenga otro modulo.

4.2 Modulos 42

4.2.11 Ultimos posts

O en ingles Latest Blogs˝tiene la funcionalidad de presentar los ultimos posts

realizados dentro de los blogs que la pagina de Oshyn posee, es la finalidad de este

modulo. De esta forma el visitante tiene acceso directo a un post de interes que el

pueda tener. Ver figura 4.20.

Fig. 4.20: Ultimos posts de Oshyn blogs

4.2.11.1 Desarrollo

Para la creacion de este modulo se uso codigo HTML, hojas de estilo y javascript.

Para obtener los ultimos posts de un blog o de todos los blogs que posee el sitio,

se utilizo un modulo interno del CMS. El modulo es {module blogsitesummary,ID,

numberfOfPosts} el tag que representa al modulo es module blogsitesummary, ID es el

numero de ID del blog a presentar, o si se quiere sustraer los ultimos 5 de entre todos

los blogs se setea con -1, el parametro numberOfPosts˝es el numero de posts que se

quiere presentar.

Dado que este modulo y tag nos permiten sacar N cantidad de posts de un solo blog

o de varios blogs, se procedio a crear varios modulos de este tipo. Entre estos estan :

– Ultimos 5 posts del Blog de Content Management System.

– Ultimos 5 posts del Blog de General.

– Ultimos 5 posts del Blog de SOA.

– Ultimos 5 posts de entre todos los blogs.

A cada uno de estos modulos se los coloco en una pagina web de acuerdo al contenido

de la pagina. Es decir, en la pagina que contiene contenido de CMS, se coloco el modulo

4.2 Modulos 43

de Ultimos 5 posts del Blog de Content Management Systems˝, en la pagina que se

habla sobre SOA, se coloco el modulo que representa a los posts de SOA.

Al igual que el modulo que se represento en la seccion 4.2.10, al ser el proceso de

extraccion de los ultimos N posts un modulo, y al ser en sı mismo otro modulo, se habrıa

violado la regla de tener un modulo dentro de otro. Es por eso, que de igual forma se

procedio a utilizar la tecnica de ajax para lograr la creacion eficaz y centralizada de

estos modulos.

En la seccion de almacenadores de contenido, existen 4 nuevos elementos. Cada uno

de estos representa a los ultimos 5 posts del blog de General, CMS, SOA, y el de

todos. El contenido de estos almacenadores es basicamente codigo HTML y Javascript.

La funcionalidad de javascript aquı es la de llamar y cargar dentro del contenedor

usando Ajax la informacion que se desea presentar. Para entender de mejor manera a

continuacion veremos el codigo de un almacenador de contenido, figura 4.21, y de como

llega a cargarse la informacion.

Fig. 4.21: Codigo del Almacenador de Contenido para posts del blog de CMS

Como podemos ver en la figura, el codigo simplemente es un elemento HTML DIV, con

un ID especıfico y unico, ademas de codigo javascript que llama a una funcion ajax que

carga la informacion de la pagina /blogCOcmsLatestFive.

Es decir la funcion de javascript se encarga a traves de ajax de llamar a otra pagina web

almacenada dentro del CMS. Esta pagina web contiene el tag y modulo que extrae los

ultimos 5 posts de un blog, en especıfico en este caso, del blog de Content Management

System˝.

4.2 Modulos 44

Ahora en la figura 4.22 podemos ver el codigo que contiene la pagina web blogCOcms

LatestFive˝. Esta simplemente contiene codigo HTML y el tag antes mencionado

en este caso es {module blogsitesummary,1907,5}, el codigo del blog de CMS es 1907

y 5 la cantidad de posts a extraer.

El resto simplemente es uso de estilos para presentar la informacion de acuerdo al estilo

visual deseado.

Fig. 4.22: Codigo de la pagina web que alberga el modulo de los 5 ultimos posts delblog de CMS

4.2 Modulos 45

4.2.12 Animacion : Trabajos realizados por Oshyn

Este modulo tiene como finalidad exponer al visitante una animacion con varios

trabajos que ha realizado la empresa con clientes.

4.2.12.1 Desarrollo

Este modulo al igual que la animacion de la pagina de inicio Home Page˝es reali-

zado en flash.

La pieza de flash se alimenta de informacion externa para su animacion. Esta infor-

macion viene en un archivo XML que se encuentra guardado dentro del CMS. Este

archivo de XML especifica con etiquetas informacion de imagenes, de texto y de orden

de despliegue.

Esta animacion consta de dos secciones, la primera es donde se presenta un icono de

cada empresa dentro de una galerıa, ver figura 4.23. Y en la segunda se presenta la

descripcion del proyecto realizado, con enlaces a documentos blancos o hacia el sitio,

ver figura 4.24.

Fig. 4.23: Animacion Flash. Pagina de proyectos realizados por Oshyn. Vista de galerıa.

4.2 Modulos 46

Fig. 4.24: Animacion Flash. Pagina de proyectos realizados por Oshyn. Vista infor-macion de proyecto.

4.2.13 Trabaje con nosotros

Trabaje con nosotros o Apply for a Job˝. La finalidad de este modulo es proveer

al visitante interesado en trabajar para Oshyn, una forma de enviar sus datos y hoja

de vida a traves de la pagina web. Ası, el visitante se esta garantizando que sus datos

junto con el currıculum llegaran a la persona adecuada. Ver figura 4.25.

Este modulo se encuentra en la pagina de carreras dentro de la seccion de companıa. En

esta pagina web se especifican que carreras o que areas la empresa contrata y necesitara

personal nuevo. En la derecha de esta pagina (http ://www.oshyn.com/company/

careers.html) se encuentra el formulario para que el visitante llene con la informacion

respectiva, suba el currıculo y lo envıe.

4.2.13.1 Desarrollo

Este modulo basicamente esta conformado por un formulario que es creado inter-

namente en el CMS. El formulario posee un campo que permite realizar el envıo de un

documento adjunto, que en este caso es el currıculum del aspirante. Ver figura 4.25.

Una etapa adicional que se implemento en este formulario es el manejo, a traves de

flujos de trabajo de la recepcion de la informacion enviada por el aspirante.

El formulario esta ligado a un flujo de trabajo llamado Carrers Inquiry Handler˝,

en espanol es administrador de currıculum. Personas asignadas a este rol recibiran

4.3 Integraciones 47

Fig. 4.25: Pagina web para aplicar por un puesto en Oshyn

notificaciones cada vez que un aspirante haya llenado el formulario respectivo y se

procedera con los procesos internos de reclutamiento.

4.3 Integraciones

En esta seccion se tratara sobre las integraciones que se han hecho con servicios

externos. Estas integraciones se han realizado con el proposito de agregar funcionalidad

al sitio de Oshyn. Basicamente existen 4 integraciones realizadas a servicios externos.

Google Maps API, SalesForce, IfByPhone y AddThis.

4.3.1 Google Maps

Como se menciono en la seccion 1.4 del capıtulo 3, el API de google maps, permite

embeber mapas google dentro de un sitio web externo, usando comandos y lıneas de

sentencias javascript.

4.3 Integraciones 48

4.3.1.1 Desarrollo e implementacion

La version del API utilizada en esta implementacion es la 2, recientemente Google

Lab˝lanzo la version 3.

Para el uso de este API en version 2, es necesario registrarse para la obtencion de una

llave que se utilizara para la creacion de mapas y uso. Una vez registrado se procede

agregar una librerıa de javascript que sera utilizada para la creacion de los mapas. El

key para Oshyn es :

ABQIAAAAgXUJptq4DHNbtMMquKM9XxTpeSyeIxwLgv2 Y3ji6d0JXOBI BTNH-

JSFO64o R4sofMtyMiYtsBYbSQ

Luego de esto se procede a crear las instancias de los mapas. Para Oshyn se creo

3 instancias : la oficina de Oshyn en LA, oficina de Oshyn en Baltimore y oficina de

Oshyn en Quito. Los parametros que se necesitan configurar son : Geo Latitud del lugar,

el tipo de mapa por defecto, los controles que se proveera al mapa y la informacion

de la ventana de Informacion extra. Veamos el siguiente codigo en la figura 4.26 para

comprender de mejor manera lo mencionado anteriormente.

Como podemos mirar, la funcion de javascript crea un objeto tipo GMAP, a este objeto

se le asigna los valores de geo posicionamiento, ademas se le puede asignar comporta-

miento al mapa, comportamiento como botones de navegacion, alejar y acercar, tipo de

mapas entre ellos, satelital, hıbrido y terrenal. Ademas, el API permite jugar con obje-

tos GInfoWindow, que son utilizados para desplegar informacion del lugar seleccionado,

en este caso, de la direccion y contacto de la oficina.

Fig. 4.26: Uso de Google Maps API para generar mapa de Oshyn Baltimore.

4.3 Integraciones 49

Podemos observar en las figuras 4.27 y 4.28 ejemplos de mapas generados usando el

API de Google Maps, estos mapas son utilizados en el sitio web de Oshyn.

Fig. 4.27: Google Map. Oficina Los Angeles.

Fig. 4.28: Google Map. Oficina Baltimore.

4.3.2 Twitter

Twitter es un servicio gratis de red social y de micro blogging que permite a los

usuarios enviar y leer mensajes conocidos como susurros o en ingles Tweets˝. Los

4.3 Integraciones 50

susurros son textos de maximo 140 caracteres desplegado en la pagina del autor y en

cada subscriptor a los susurros del autor (17).

Desde su creacion en el 2006, Twitter ha ganado notoriedad y popularidad a nivel mun-

dial. Es comunmente descrito como el SMS del internet. En la figura 4.29 se encuentra

en logo de este servicio, el cual es un pajaro azul.

Fig. 4.29: Logo de Twitter

4.3.2.1 Desarrollo

Twitter ofrece varios servicios a traves de su API y tambien ofrece widgets˝que

permiten agregar funcionalidades tanto a aplicaciones como a paginas web. Este es el

caso de la pagina de Oshyn, donde se uso el widget denominado de perfil. Es decir,

con este se puede desplegar los mas recientes susurros o actualizaciones que publique

Oshyn en su perfil.

Para obtener este widget se necesita tener una cuenta en Twitter, y usar una librerıa

de javascript, mas una funcion con parametros que permitirıa el despliegue de este en el

sitio web. Se puede personalizar a este elemento con colores de fondo, mostrar avatares

de usuarios, mostrar la hora, apariencia de links, colores de fondo, dimensiones, entre

otras cosas menores. En la siguiente figura, 4.30, se puede observar como quedo el

widget utilizado para Oshyn.

Este componente fue agregado a un almacenador de contenido, para que ası,de una

manera eficiente pueda ser vuelto a usar a traves de todo el sitio en las paginas que el

editor de contenido desee ubicarlo.

4.3 Integraciones 51

Fig. 4.30: Oshyn Twitter widget

4.3.3 AddThis

Es un servicio para direccionar trafico hacia el sitio web, haciendo mas facil a los

visitantes compartir contenido.

Dicho de otra forma ayuda a los usuarios a compartir contenido en varias y multiples

redes sociales. De esta forma permite generar trafico de regreso hacia el sitio, incre-

mentando el ranking en buscadores web. Este servicio es gratis.

El contenido puede ser compartido a una gran gama de servicios, entre estos Facebook,

Twitter, Digg, Meneame, Hatena, Nujij, entre otros, ademas de utilidades como impri-

mir, traducir, enviar por correo electronico y convertir a PDF en lınea. Cada vez que se

agrega un nuevo servicio no hace falta actualizar el servicio, ya que al usar una librerıa

de javascript, addthis lo mantiene actualizado.

4.3.3.1 Desarrollo

Este servicio se lo importa usando librerıas y comandos de javascript.

Lo primero que se necesita hacer es crear una cuenta gratis con AddThis, al tener

una cuenta, es mas eficiente, ya que se puede hacer tracking de clicks que han hecho

los visitantes y hacia que red social se propaga mas el contenido. Luego, usando un

asistente de creacion se procede a crear el estilo visual, el tipo de boton, el tipo y orden

4.3 Integraciones 52

de servicios, colores, entre otras cosas, como cierto tipo de funcionalidad del boton. Si

se desea realizar personalizaciones mas avanzadas simplemente se necesita ingresar a

la seccion de desarrolladores, y usando javascript personalizar lo deseado.

Fig. 4.31: Asistente para creacion de boton AddThis

Este servicio de compartir contenido, fue agregado a varios lugares del sitio de Oshyn,

lugares estrategicos donde es importante compartir contenido y generar trafico. Los

lugares escogidos son :

– Pagina web de Blogs.

– Cada post.

– Pagina web de noticias y eventos.

A continuacion veamos las imagenes de dos estados de este servicio, el estado de overlay

(Figura 4.32) y el estado cuando se hace click en mas˝(Figura 4.33).

Dentro de la opcion mas, encontramos funcionalidades como imprimir, enviar por correo

electronico entre otros.

4.3 Integraciones 53

Fig. 4.32: Overlay del boton AddThis dentro de la seccion Blogs

Fig. 4.33: Opcion de mas˝del boton AddThis dentro de la seccion Blogs

4.3 Integraciones 54

4.3.4 SalesForce

Es un software en lınea que brinda servicios (SaaS Software as a Service˝). Sales-

forece es la companıa que distribuye este software, el cual es accedido o comprado por

los usuarios en forma de subscripcion. Se le conoce a este software por el manejo de

productos CRM que posee (18).

Un CRM es una herramienta para manejo de relaciones con clientes. Es implementado

en estrategias para administrar y alimentar las interacciones con clientes y posibles

clientes. La tecnologıa es usada para organizar, automatizar y sincronizar procesos de

negocio, especialmente los enfocados a actividades de ventas. Las metas generales son

encontrar, atraer y ganar nuevos clientes, mantener y enriquecer contactos con clientes

antiguos, reducir costos de marketing / mercadeo y mejorar el servicio al cliente, son

las tareas y objetivos principales de un cliente (18).

4.3.4.1 Reto de la integracion

Salesforce es un CRM que Oshyn ha venido manejando y usando hace tiempo atras.

Al realizarse varias transacciones de informacion en el nuevo sitio de Oshyn y al guar-

darse esta informacion en el CMS de la pagina web, se considero importante y de gran

valor guardar esta informacion de posibles nuevos clientes en el CRM que la empresa

usa, Salesforce. Ver figura 4.34.

Fig. 4.34: Flujo de informacion del sitio hacia el CRM

4.3 Integraciones 55

4.3.4.2 Ques informacion guardar

Los analistas y consultores de Oshyn, junto al departamento de marketing, analizan

que informacion que genera el sitio de Oshyn.com deberıa ser guardada en el CRM

Salesforce.

La informacion a ser guardada debe ser informacion de visitantes que puedan terminar

siendo posibles clientes. Es por eso que se creo una campana que es dirigida por dos

frentes : mercadeo por correo electronico y Google Adwords. Desde estas fuentes se

direcciona al sitio de Oshyn con paginas especiales conocidas como Landing Pages˝,

estas paginas permiten al visitante descargarse documentos blancos (Whitepapers˝)

creados por la empresa que sirven de documentacion y guıas para diferentes temas

tecnologicos.

En estas paginas, una por cada documento blanco que posee la empresa, se pide al

visitante informacion basica e informacion especial dependiendo del documento. La

informacion es guardada tanto en el CMS para registro de la transaccion, esta se usara

luego en listas de distribucion de correos electronicos, y la informacion se envıa a

Salesforce para uso del CRM.

4.3.4.3 Desarrollo

Para desarrollar esta integracion entre el CMS del sitio de Oshyn y Salesforce,

se procedio analizar varias alternativas, entre estas estaba el uso del API que posee

salesforce y el uso de webservices del mismo. El API de salesfoce es bastante fuerte

pero la tarea simple que se desea hacer no justificaba el uso de este, es por eso que se

decidio utilizar un servicio web que ofrece Salesforce denominado Web To Lead˝.

Los pasos que fueron realizados al lado de SalesForce son :

– Habilitar funcionalidad Web-to-Lead.

– Crear formulario Web-to-Lead, usando los campos predefinidos en Salesforce o

aumentar campos personalizados en caso de ser necesario.

– Extraer el codigo HTML generado por el servicio Web-to-Lead.

Cabe mencionar que no todos los campos que llena el visitante en el formulario son

enviados a Salesforce, es decir el formulario del CMS es diferente al del CRM.

Los pasos seguidos a nivel del CMS de Oshyn.com son :

4.4 SEO 56

– (1) Crear pagina web que albergue el codigo del formulario web obtenido.

– (2) Crear pagina web que alberga el formulario del CMS.

– Insertar el formulario (1) dentro de la pagina web de (2) a traves de tecnicas

HTML.

– Usar javascript para llenar el formulario (1) dinamicamente luego que el visitante

ha llenado el formulario (2), y hacer el envıo de (1).

Una vez que el visitante llena la informacion, para el es transparente este proceso de

guardado de informacion en el sistema CRM externo. El usuario, sera redirigido a una

pagina que contiene un enlace hacia el documento blanco que desea bajarse. Ademas,

al email que uso para el registro tambien se enviara informacion como el enlace hacia

el documento. Todo esto es configurado a nivel de CMS en la seccion de formularios.

4.4 SEO

SEO es un acronimo de Search engine optimization˝. Optimizacion para motores

de busqueda, es un proceso para mejorar la cantidad, volumen y calidad de trafico

hacia un sitio web desde buscadores web, de una forma natural, sin necesidad de pagar

por posicion. Normalmente mientras mas arriba o alto aparece un sitio web en una

busqueda, mas visitantes tendra ese sitio. SEO trata y tramita estrategias para dife-

rentes tipos de busqueda, tales como : busqueda de imagenes, busqueda de videos y

busquedas especificas a la industria. Todo esto da una presencia en la web al sitio web.

Para mejorar la efectividad de SEO es posible que se necesiten cambios al codigo estatico

del sitio, entre estos : al HTML, mejorar menus, uso de manejadores de contenido,

imagenes, videos, y otros elementos son usados para mejorar al sitio y exponerla a la

web de una forma correcta.

4.4.1 sitemap.xml

Este documento lista las paginas a las cuales tiene acceso una arana informatica

crawler˝de un motor de busqueda o en ingles conocidos como Crawlers˝. Quien in-

trodujo este tipo de documentos XML fue Google, de esta forma desarrolladores web

pueden publicar listas de enlaces del sitio.

Metodos usando este tipo de XML han reemplazado la vieja manera de enviar ındices

a los motores de busqueda. Antes se realizaba llenando un formulario en los motores.

4.4 SEO 57

Ahora los desarrolladores simplemente envıan el sitemap.xml o esperan que los motores

de busqueda los encuentre.

Los buscadores lıderes en la red como Google y Yahoo, usan crawlers˝para encontrar

paginas usando sus algoritmos de busquedas. Normalmente, el robot de los buscadores

busca en la raız del sitio web el archivo XML antes mencionado, el del sitio de Oshyn se

encuentra en http ://www.oshyn.com/sitemap.xml . Cabe mencionar, que no todas las

paginas del sitio son indexadas, todo depende de muchos factores, entre estos, distancia

de una pagina hacia el nodo raız, contenido y ademas porque simplemente Google no

pretende indexar todas las paginas del sitio.

Los beneficios de usar XML son varios, ya que en este lenguaje no se permiten errores en

sintaxis, el codigo debe ser estricto y de esta manera sera leıble por varios buscadores.

Se especifican las etiquetas a ser usadas y estas contienen la informacion justa que el

motor necesita para indexarla. A continuacion la figura 4.35, nos da una muestra de

una entrada dentro del sitemap.xml del sitio web de Oshyn.

Fig. 4.35: sitemap.xml sitio Oshyn

Podemos observar en la figura que los tags principales son tags url, dentro de estos

se encuentran tags como loc, lastmod, changefreq y priority. Cada uno de esos tags

contiene informacion util para la indexacion.

– loc (requerido) : contiene la ubicacion de la pagina web.

– lastmod (opcional) : contiene informacion de cuando fue la ultima vez que se

modifico esa pagina web en particular. El formato usado es en ISO 8601

– changefreq (opcional) : la frecuencia con la que cambia la pag. Los valores que

pueden tomar este campo son, always (siempre), hourly (por hora), daily (diaria-

mente), weekly (semanalmente), monthly (mensualmente), yearly (anualmente),

never (nunca).

4.4 SEO 58

– priority (opcional) : la prioridad que esta pagina tiene para el sitio. Los valores

van entre el rango de 0.1 a 1. 1 que es el valor mas importante.

4.4.1.1 Desarrollo

Usando la estructura antes mencionada y usando una herramienta para creacion de

sitemap que posee el CMS, se creo el archivo XML sitemap.xml para el sitio de Oshyn.

Para la formacion del URL completo, el CMS usa el dominio configurado por defecto.

La ubicacion de este archivo como ya se menciono antes es en la raız del sitio.

http ://www.oshyn.com/sitemap.xml ver figura 4.36.

Fig. 4.36: URL Sitemap.xml

4.4.2 robots.txt

Robots de web tambien conocidos como aranas, Crawlers˝, son programas que

transversan la web automaticamente. Estos programas son usados por los motores de

busqueda web para indexar sus ındices.

Los duenos de sitios web usan un archivo de texto llamado robots, para dar instruc-

ciones a estos robots de como transversar el sitio. Muchas veces existen en un sitio web

paginas que simplemente el dueno del sitio no quiere exponerlas a los buscadores. Estas

instrucciones tambien se las puede dar a traves de este mismo archivo de texto, usando

un protocolo de exclusion.

4.4.2.1 Como funcionan

Funcionan de esta manera, un robot quiere visitar una URL de un sitio web, digamos

que de http ://www.example.com/welcome.html, antes de visitarlo, el robot chequea

http ://www.example.com/robots.txt y verifica que no exista una restriccion para la

pagina.

Existen dos importantes consideraciones al usar el robots.txt :

4.4 SEO 59

– Robots pueden ignorar el archivo de texto robots.txt. Especialmente robots crea-

dos para atacar y simplemente escanear vulnerabilidades haran caso omiso a este

archivo de texto.

– El archivo de texto robots.txt es un archivo publico, cualquiera puede ver sus sec-

ciones y las reglas escritas. Es decir robots.txt no sirve para ocultar informacion,

es simplemente usado para proveer de reglas al robot.

Este archivo de texto debe ir en la raız del sitio, en el caso de Oshyn, este se

encuentra en http ://www.oshyn.com/robots.txt. El nombre del archivo es sensitivo a

mayusculas y minusculas.

El contenido de este archivo es simplemente reglas, se puede especificar que robots de

buscadores pueden indexar el sitio, que secciones del sitio no permiten indexar, cuanto

puede tardarse el robot indexando, entre otras cosas menos importantes.

4.4.2.2 Desarrollo

El contenido de este archivo de texto fue creado por el equipo de desarrolladores y

conocedores de tecnicas de SEO. Se lo ubico en la raız del sitio para que de esta manera

cada robot de un motor de busqueda pudiera encontrarlo. A continuacion, en la figura

4.37 veamos el contenido de este archivo ubicado en http ://www.oshyn.com/robots.txt.

Como podemos observar, cualquier robot de un motor de busqueda puede ingresar e

intentar indexar el sitio. Se permite indexar cualquier pagina a partir de la raız y existen

varias secciones a las cuales no se les permite indexar y de esta manera no apareceran

en los ındices de motores de busqueda. Ver figura 4.37.

4.4 SEO 60

Fig. 4.37: robots.txt sitio Oshyn.com

4.4.3 HTML Meta datos

Etiquetas de meta datos es codigo HTML que es insertado en la cabecera de la

pagina web. Son varias etiquetas que cumplen diversos roles, pero en el contexto de

optimizar las busquedas de los motores son bastante utiles ya que proveen de infor-

macion a estos motores de busquedas. Entre las mas importantes etiquetas estan la de

descripcion y palabras claves.

Cuando se trata de alcanzar un buen ranking y mejorar la cantidad y calidad de los

visitantes al sitio, el papel que cumplen las etiquetas de meta datos es importante.

Para esto existen varios meta datos, entre estos estan las palabras claves keywords˝,

descripcion description˝, robots˝, entre otros.

Al ir mejorando los algoritmos de clasificacion y de busqueda, y al ser usadas estas

etiquetas meta datos por la mayorıa de sitios, los buscadores, cada mes, dan menos

importancia a estos, pero esto no significa que no sean todavıa importantes y ayuden

a mejorar el ranking y la busqueda en un motor de busquedas de un sitio.

Entre las caracterısticas que aun hacen a un meta dato importante estan :

4.4 SEO 61

– Crear un diferente keyword˝y description˝meta dato para cada pagina web del

sitio. Es decir no duplicar contenido de estas etiquetas.

– Para la etiqueta title˝, incluir palabras como el nombre de la companıa y pala-

bras relevantes para esa pagina en particular, hasta un maximo de 90 caracteres,

incluyendo espacios.

– Para la etiqueta description˝, poner un resumen conciso del contenido de la

pagina, el maximo de caracteres no deberıa exceder de 170 caracteres, incluyendo

espacios.

– Para la etiqueta Keyword˝, un maximo de 900 caracteres es recomendable, es

decir entre 10 a 20 palabras claves por pagina.

Capıtulo 5

Resultados, Conclusiones yRecomendaciones

Una vez concluido el nuevo sitio web de Oshyn, usando la herramienta Business

Catalyst como CMS, podemos sacar varias conclusiones, algunas de estas basadas en

datos reales obtenidos y otras son declaraciones de como ha afectado el sitio a la empresa

directamente.

5.1 Resultados

Dentro de esta seccion, se explicaran ciertos resultados obtenidos con el nuevo sitio

web desde que este fue lanzado en Marzo 2009.

Desde su lanzamiento, se puede decir que han existido resultados en las siguientes

areas :

– Posicionamiento en buscadores.

– Incremento de trafico hacia el sitio web.

– Mejoras en tecnicas SEO.

– Mejoras en desempeno del sitio.

– Campanas de mercadeo.

– Uso del sitio como herramienta de mercadeo.

5.1.1 Posicionamiento en buscadores

Una metrica importante para conocer el grado de efectividad que tiene el Sitio Web,

comprende en revisar periodicamente su presencia a traves de los buscadores de Internet

62

5.1 Resultados 63

mas populares, como actualmente son Google y Yahoo. Que el sitio web aparezca en

estos buscadores garantizara que los usuarios que esten buscando la empresa o temas

relacionados con la empresa la puedan encontrar.

Es importante que la busqueda que se haga del sitio en los buscadores se haga a traves

de dos criterios :

– Buscar por el nombre de la companıa : cuando se busca por el nombre, nor-

malmente el sitio web deberıa aparecer en los primeros lugares de la primera

pagina. Si no es ası, hay un trabajo fuerte que hacer para mejorar los meta tags

y contenido del sitio.

– Buscar por los temas : cuando se busca por los temas relacionados que la empresa

maneja, es menos probable que el Sitio Web aparezca arriba en los primeros

lugares. Para mejorar ese posicionamiento es necesario refinar tecnicas de SEO y

la forma de desplegar la informacion en el sitio.

Si se realiza una busqueda con el parametro Oshyn˝en el buscador Google, el sitio

de Oshyn aparecera en primer lugar. Esto podemos observar en la figura 5.1. Para

que esto sea posible, se usaron tecnicas de posicionamiento en buscadores y estrategias

SEO, descritas en el capıtulo anterior.

Para comprobar el segundo punto mencionado en la lista anterior, hagamos una busqueda

de temas que expone el sitio de Oshyn y que la empresa esta interesada en salir en una

busqueda de ese tipo. El parametro de busqueda ahora es opentext liveserver tuning˝.

Paginas del sitio de Oshyn aparecen en los primeros lugares. Veamos la figura 5.2.

5.1.2 Incremento de trafico hacia el sitio web

Una de las caracterısticas interesantes que tiene un Sitio Web, es que ofrece in-

formacion permanente de las actividades que estan ocurriendo en su interior, lo que

permite tener siempre cifras que ayudan a evaluar la gestion.

Es importante mencionar, que el anterior sitio web no poseıa herramienta alguna que

permita realizar este tipo de analisis.

Esta evaluacion se puede hacer gracias a metricas y herramientas que nos proporcionen

reportes sobre visitas en un tiempo determinado. Esto es posible en el nuevo sitio

5.1 Resultados 64

Fig. 5.1: Posicion Oshyn en buscador Google

Fig. 5.2: Posicion Oshyn en buscador Google con tema relacionado

5.1 Resultados 65

web a traves de dos herramientas. Business Catalyst, el CMS, provee una herramienta

para hacer un rastreo de visitas, ubicacion de estas, la fuente de estas, visitas nuevas

y retornos, cuadros de paginas vistas por visitas, entre otros. Esta herramienta es

muy completa, pero para complementarla se instalo en el sitio de Oshyn tambien la

herramienta para rastreo que provee Google, esta herramienta es Google Analytics.

Miremos las figuras 5.3, 5.4 y 5.5 para observar las metricas antes mencionadas.

Fig. 5.3: Numero de visitas en rango de tiempo

En el grafico 5.3 podemos observar la cantidad de visitas que ha tenido el sitio web

entre Febrero 24 y Marzo 03 del 2010. Se puede observar como esta ha ido variando a

traves del rango de tiempo.

El grafico 5.4 nos muestra un reporte importante de informacion. Este grafico compara

la cantidad de visitas con la cantidad de paginas vistas por dıa. Podemos ver claramente

que en febrero 27 y febrero 28, dıas de fin de semana, la cantidad de visitas disminuye

al igual que la cantidad de paginas vistas por visitas.

Otro reporte bastante interesante, figura 5.5, es aquel que nos muestra la fuente de

nuestras visitas. Donde podemos ver si las visitas vinieron a traves de un buscador, o si

fue por medio de una campana de mercadeo, o por otros sitios que mencionan al sitio

de Oshyn, o si simplemente fue directo el acceso.

Como podemos observar, la cantidad de visitas mas grande que tiene el sitio, son visitas

directas, el rango de medicion es la semana entre el 24 de Febrero y el 03 de Marzo. La

cantidad de paginas vistas es tambien alta, con una visita directa. Le sigue las visitas

5.1 Resultados 66

Fig. 5.4: Numero de paginas vistas por visita

Fig. 5.5: Numero de visitas por fuente de estas

5.1 Resultados 67

que surgen a traves de un buscador, luego visitas por paginas que hacen referencia al

sitio de Oshyn y visitas obtenidas por campanas de mercadeo realizadas.

5.1.3 Mejoras en tecnicas SEO

Siempre el departamento de mercadeo junto con los principales de la empresa estan

buscando la manera de mejorar el posicionamiento del sitio en buscadores web, como

son Google, Bing y Yahoo.

Para lograr esta causa se ha realizado un estudio sobre tecnicas para mejorar la posicion

en buscadores, estas tecnicas son conocidas como SEO. Se ha dejado claro que no solo

es importante estar en un buscador, sino mantenerse y ubicarse alto. Para lograr esto

se ha realizado :

– Envio de sitemaps y robots a cada buscador.

– Uso de herramientas para webmasters que cada buscador provee.

– Mejorar y crear cajas que contienen texto para la pagina de inicio.

– Creacion y actualizacion constante de blogs del sitio.

– Uso de redes sociales para atraer visitantes y mejorar posicionamiento. Redes

sociales como Facebook y Twitter especialmente.

5.1.4 Mejoras en desempeno del sitio

Para encontrar problemas tecnicos en desempeno del sitio se utilizo herramientas

de los navegadores. En este caso se utilizo YSlow, una herramienta de Yahoo que se

puede agregar al Firefox. Esta herramienta analiza paginas web y sugiere maneras para

mejorar el performance, basadas en reglas de alto rendimiento en sitios web. Ademas

se utilizo una herramienta similar, pero de Google, al igual que la anterior, se le agrega

al navegador Firefox para su uso. El nombre de esta herramienta es Page Speed˝.

Gracias a esta herramienta se siguieron practicas como :

– Minimizar contenidos en hojas externas de javascript, es decir, minificarlos a estos

para borrar espacios y saltos de lıneas innecesarios para el navegador.

– Se procedio de igual forma a minimizar las hojas de estilo externas. De igual

forma se borran espacios en blanco y saltos de lıneas, los cuales son innecesarios

para el navegador.

5.2 Conclusiones 68

– Optimizar las imagenes del sitio.

– Evitar tener referencias a estilos dentro de la pagina y ponerlos a estos en hojas

de estilo externas.

– Evitar tener sentencias de javascript dentro de la pagina y ponerlas a estas en

hojas externas.

– Habilitar compresion.

Existen otras recomendaciones realizadas por estas herramientas pero que dado la na-

turaleza del CMS no se pueden implementar, sugerencias como, comprimir contenido

al lado del servidor, tener las imagenes, hojas de estilos y recursos externos en un CDN,

entre otros.

5.1.5 Campanas de mercadeo

Oshyn y el departamento de mercadeo han estado realizando periodicamente, cada

mes procesos para enviar campanas a traves del sitio web. Estas campanas estan en-

focadas en generar trafico hacia el sitio y en generar posibles nuevos clientes y de esta

forma, nuevos negocios.

Esto se ha realizado gracias a la herramienta de campanas que posee el sitio y gracias

a esto, de igual forma, se puede medir la efectividad de una campana.

Hasta el momento se han enviado 9 campanas categorizadas como la carta mensual de

Oshyn, y a la vez se han enviado dos campanas a un grupo especıfico de destinatarios

para generar atencion hacia el sitio y hacia productos y servicios que ofrece la empresa.

5.2 Conclusiones

Es un hecho que el nuevo sitio de Oshyn, es una herramienta y una parte importante

para la empresa. El sitio al ser considerado importante y ser tomado en cuenta por

el departamento de mercadeo como una forma de atraer nuevos clientes necesita ser

mantenido constantemente y necesita estar incorporando nuevos modulos y nuevas

tecnologıas durante su ciclo de vida.

El sitio web actual dejo de ser simplemente un sitio informativo con noticias, productos

y servicios que la empresa provee a sus clientes, ahora el sitio tambien es una fuente

5.2 Conclusiones 69

de informacion para el visitante, el sitio ahora contiene documentos de diferentes ca-

tegorıas, contiene informacion de desarrollo en tecnologıas y tendencias. Ademas se ha

logrado construir comunicaciones directas con los visitantes a traves de herramientas

como blogs y comentarios que ofrece el sitio.

Gracias a lo descrito en el parrafo anterior, el sitio web es una herramienta para atraer

nuevos clientes, mantener una cantidad de visitantes a traves de blogs y de mantener

comunicacion fluida con el usuario.

Existen varias formas de obtener posibles oportunidades de ventas. Mercadeo telefonico,

nuevos proyectos con antiguos clientes, referencias obtenidas por clientes, expansion de

proyectos actuales, mercadeo en lınea.

Este ultimo es el que se ha profundizado con el nuevo sitio de Oshyn. Se recogen datos

de posibles clientes ya sea a traves de un formulario de contacto, enviando un pedido

de una proforma, usando el modulo de Click to call˝, a traves de formularios regados

por el sitio web. Todos estos datos se guardan en el CMS y se genera una alerta en el

CRM SalesForce para que un agente de ventas de Oshyn realice el seguimiento.

Por el lado tecnologico, con el nuevo sitio de Oshyn, se ha logrado integrar im-

portantes componentes de la tecnologıa web 2.0, se esta utilizando un CMS moderno

el cual permite realizar evaluaciones del sitio y del mercadeo en lınea a traves de los

reportes obtenidos.

El manejo de alternativas para mejorar SEO es bien importante, la presencia y

ubicacion dentro de buscadores es importante para una empresa de este tipo. Se debe

realizar un mantenimiento continuo de estas estrategias para mantenerse y mejorar en

los buscadores. El departamento de mercadeo ha realizado importantes estudios para

crear nuevas estrategias de impacto directo al SEO. Muchas de estas se estan siendo

implementadas en el sitio para mejorar su ubicacion y presencia en los principales

buscadores.

Con el uso de la herramienta de blogs para el sitio, se ha creado una cultura de

crear y publicar conocimientos obtenidos por los empleados de Oshyn en herramientas

usadas para la elaboracion de los proyectos. Esto ha sido importante ya que ası se

mantiene informado a los visitantes de alternativas y del conocimiento que tiene el

grupo de trabajo en Oshyn.

5.3 Recomendaciones 70

Business Catalyst, el CMS, al ser cerrado en codigo, no permite incorporar nuevas

funcionalidades externas a las que ya contiene dicho manejador de contenidos, lo cual

obstruye de cierta forma el crear funcionalidades bastante especıficas para un sitio web.

Es importante informar al cliente en este caso a la empresa y a quienes manejan el sitio

web sobre esto para que en futuros requerimientos se tome en cuenta esto.

5.3 Recomendaciones

Durante el desarrollo de este proyecto, se fueron presentando situaciones de las

cuales sacar recomendaciones para trabajos futuros es interesante.

Se debe realizar planes de mantenimiento continuo, es importante tener el sitio lo

mas actual posible y que su contenido varıe para ası lograr que los visitantes retornen

al sitio y subir la tasa de visitantes que retornan.

Es importante y se recomienda analizar junto con los desarrolladores las caracterısticas

de un CMS antes de escoger el CMS en el cual se implementara el sitio. Con esto, se

garantiza en un mayor porcentaje, que ciertos requerimientos especıficos se lograran

incorporar y desarrollar con el CMS usado.

Para acelerar la etapa de desarrollo, se recomienda mejorar procesos en etapa de

levantamiento de requerimientos. Esto ayudara a construir modulos mas precisos en

menos tiempo.

Referencias

[1] Oshyn, Inc. Web site.. About us. http://www.google.com, Marzo 2010. 1

[2] Wikipedia Enciclopedia. DotNetNuke. http://en.wikipedia.org/wiki/Dot_

Net_Nuke, Enero 2010. 3

[3] Wikipedia Enciclopedia. Object Oriented Programming. http://en.wikipedia.

org/wiki/Object-oriented_programming, Enero 2010. 6

[4] Wikipedia Enciclopedia. Content management system. http://en.wikipedia.

org/wiki/Content_management_system, Noviembre 2009. 6

[5] Wikipedia Enciclopedia. Enterprise content management. http://en.wikipedia.

org/wiki/Enterprise_content_management, September 2009. 8

[6] Wikipedia Enciclopedia. Web content management system. http://en.

wikipedia.org/wiki/Web_content_management_system, Enero 2010. 8, 9, 10

[7] Wikipedia Enciclopedia. Standard Generalized Markup Language. http://en.

wikipedia.org/wiki/SGML, Diciembre 2009. 11

[8] W3Schools. Cascading Style Sheets. http://www.w3schools.com/css/, Di-

ciembre 2009. 12

[9] Wikipedia Enciclopedia. JavaScript. http://en.wikipedia.org/wiki/

JavaScript, Agosto 2009. 13

[10] Wikipedia Enciclopedia. Document Object Model. http://en.wikipedia.org/

wiki/Document_Object_Model, Noviembre 2009. 13

[11] Wikipedia Enciclopedia. Web 2.0. http://en.wikipedia.org/wiki/Web_2.0,

Enero 2009.

71

REFERENCIAS 72

[12] Business Catalyst. Business Catalyst CMS system. http://businesscatalyst.

com/product-tour/content-management, Enero 2010. 17, 24, 25, 30, 33

[13] jQuery librerıa javaScript. jQuery librerıa javaScript. http://jquery.com/, Fe-

brero 2010. 20

[14] Google Maps API Concepts. Google Maps API Concepts. http://code.google.

com/apis/maps/documentation/index.html, Febrero 2010. 22

[15] Wikipedia Enciclopedia. Site map. http://en.wikipedia.org/wiki/Site_map,

Febrero 2010. 29

[16] One hack or another. Droppy - Nested drop down menus. http://

onehackoranother.com/projects/jquery/droppy/, Febrero 2008. 30

[17] Wikipedia Enciclopedia. Twitter. http://en.wikipedia.org/wiki/Twitter,

Abril 2009. 50

[18] Wikipedia Enciclopedia. Salesforce.com. http://en.wikipedia.org/wiki/

Salesforce.com, Enero 2009. 54