TECNOLÓGICO NACIONAL DE

MÉXICO
Instituto Tecnológico de Zitácuaro

WEB CENTER.

¿Qué es?

Web Center es una potente plataforma para Administración de paquetes, basada en la

Web, que les permite gestionar su proceso operativo, ciclos de aprobación y activos
digitales a empresas.

Es un conjunto integrado de productos utilizados para crear aplicaciones sociales,

portales empresariales, comunidades de colaboración, aplicaciones compuestas y sitios
Web de internet o intranet sobre una arquitectura orientada o servicio lo cual nos brindan
capacidades de contenido, colaboración, presciencia y redes sociales para crear una
experiencia del usuario altamente interactúa.

¿Dónde se usa?

Web Center como una ventana para su cliente: le ayuda a gestionar y automatizar con
seguridad los ciclos de aprobación, soportados por una herramienta rápida y precisa de
visualización online. La estructura inteligente de Web Center para aprobación y
anotación, la convierten en la mejor plataforma para gestión y aprobación de los archivos
gráficos y estructurales.

Web Center agiliza su comunicación: ayudan a agilizar la comunicación entre todos los
colaboradores de las cadenas de suministro de packaging e impresión. Trabajen
virtualmente en tiempo real, con sus propios grupos de creación, marketing, diseño de
envases e ingeniería, fabricantes y proveedores.

¿Quién lo usa?

A través de los años, hemos podido trabajar en varios tipos de servicios donde un Web
Center juega un papel fundamental, entre ellos destacamos:

1
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

• Compañías de seguros. La recepción de las llamadas de los asegurados para

notificar un accidente y asignar a personal especializado para que los atienda en
sitio, es una de las muchas oportunidades en donde se aplica un Web Center.
• Recuperación de cartera extrajudicial. Esta actividad se puede ver desde dos
aristas, la primera es para las empresas que son contratadas por un tercero para
realizar las labores de recuperación de adeudos de personas físicas y morales o
para las empresas que requieren contratar los servicios de organizaciones
especializadas en la recuperación de cartera. El manejo de cumplimiento de
metas e indicadores de productividad, juegan un papel muy importante.
• Servicios. La necesidad de contar con un Web Center que permita atender a los
clientes, aceptar sugerencias, quejas, reclamaciones o información sobre el tipo
de servicios que se proporcionan, es de vital importancia para conocer de manera
inmediata, los puntos de oportunidad que requieren los clientes, así como de
posibilidades de venta.

La cantidad de posibilidades en donde se necesita un Web Center es impresionante,

como por ejemplo:

• Campañas políticas. Dar a conocer a la ciudadanía el pensamiento y

características de los aspirantes a puestos de elección popular o sondeos de
votación.
• Asesoría Turística. Facilitar el acceso de información de puntos de interés para
las personas que visitan nuestro país o que provienen de otra entidades
federativas y cuenten con la asesoría en alimentos, medios de trasporte, hoteles,
museos, etc., redunda en una imagen y apoya al turismo.
• Captación de recursos donados. En nuestro país, se ha hecho una tradición el
generar colectas para poyar diversos tipos de programas encaminados a la salud,
educación, etc., el contar con un Centro de atención las 24 horas del día, facilita
que los donadores tengan el camino abierto para hacer sus contribuciones.
• Soporte técnico. Es común la consulta en línea de gente especializada en un
tema para aquella gente que ha adquirido un producto o que desea conocer
detalles particulares de interés para quien lo contacta.

2
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

Podríamos señalar otros nichos empresariales y gubernamentales que se apoyan en la

infraestructura de un Web Center para atender el mercado de su interés y para promover
los productos que comercializan, entre otras muchas opciones, lo importante es medir a
través de éstos, los grados de penetración de los servicios que se ofrecen y la opinión
que tiene el mercado objetivo de lo que se ofrece.

¿Para qué se usa?

Un centro de servicio Web es el método con el que las empresas buscan mantener el
contacto con sus clientes, para ofrecer sus servicios, brindar asistencia y darse a conocer
en el mercado global puede ser cubierto con la implementación de un Web Center.

Empresas que lo emplean:

• TELCEL
• BANAMEX
• CINÉPOLIS
• BANCOMER
• NISSAN
• TELEVISA
• TV AZTECA
• AXTEL
• ALFA
• VISA
• COCA COLA FEMSA
• CHEDRAUI
• CAJA POPULAR MEXICANA

Tecnologías utilizadas y su estructura

La conexión a internet. La independencia del sistema a la conexión de internet sigue

siendo barrera a su adopción. Si bien las empresas de telecomunicaciones cada vez son
más fiables y mantiene mejores conexiones, siempre existen la posibilidad de quedarse

3
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

sin conexión en la mitad de una jornada laboral, lo que impediría el uso del sistema. Este
problema debe convertirse tan residual como la caída de la energía eléctrica, que si bien
ocurre, no es causa suficiente como para no operar en base a ella.

La seguridad de datos confidenciales, como la contabilidad, facturación este uno de los

aspectos que más se debaten, al estar almacenando en servidores ajenos.
Centrándonos en las necesidades de las pymes es probable que los datos estén en mejor
recaudo de servidores de empresa dedicadas a ello que en ordenadores que
normalmente son mucho más vulnerables a ataques de virus, troyanos, espías. No
obstante, como ocurrió con el tema del pago con concienciación por parte de las
empresas.

Agiliza su proceso operativo; El potente flujo de trabajo y la fácil utilización de las

herramientas de administración de proceso, les ayuda a las empresas que lo utilicen a
gestionar eficazmente sus procesos operativos y también les ayudan a eliminar sus
pasos redundantes.

Es una ventana para sus colaboradores externos o bien les ayuda a administrar y
automatizar con seguridad los ciclos de aprobación, soportados por una herramienta
rápida y precisa de visualización online.

Mejora su comunicación; agilizando la comunicación entre todos los colaboradores de

las cadenas de suministro de o paquetes e impresión.

Sirve como una ubicación central para archivos digitales; Los Proyectos de Web Center
pueden contener cualquier tipo de documento: Archivos CAD, archivos gráficos, tablas
de cálculo, ofertas, pedidos, especificaciones del cliente.

Extrapolación y sindicación absoluta. El hecho de que las aplicaciones se realicen

sobre Web va a permitir que entre ellas se pueda compartir toda la información
(principalmente XML). Esto nos va a permitir:

Propagación inmediata de contenido e información RSS que va a permitir un mejor

desarrollo de la estructura en red.

4
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

Uso de otras fuentes para desarrollar nuevas aplicaciones. Esta cuestión va a permitir
que el desarrollo de nuevas aplicaciones se centra en la aportación de valor añadido,
centrando los recursos en lo nuevo, y sacando partido de lo hecho por otros.

Aplicaciones software como servicio y no como producto.

Esto elimina el coste de acceso de las pymes a la tecnología más moderna, anulando
las barreras de entrada a competir en los mercados por esa vía.

El pago se hace por servicio, lo cual en pequeñas empresas es una muy pequeña
cantidad en relación con el coste de la plataforma que obtiene que obtener y fuera de su
alcance a través de inversiones que las sacarían del mercado.

Es un servicio externalizado sin barreras de salida para el cambio, lo que permite una
mayor dinámica al no estar apalancada negativamente por las inversiones.

Las innovaciones son constantes entre otras cuestiones por que las estrategias de
supervivencia de las ASP radican, sin necesidad de actualizaciones ni cambios.

Ubicuidad. La web ya ha consagrado como el canal de interoperabilidad por excelencia.

Es decir, las aplicaciones basadas en web pueden desarrollarse en cualquier terminal
necesariamente en PC ordenadores, móviles, PDAs, TV digital, esto va a permitir tener
información en todo momento y desde cualquier terminal con conexión a internet.

Cooperación. Las necesidades de la sociedad y empresa red radican principalmente en

la cooperación entre los diferentes actores. Estos sistemas permiten anular
prácticamente los costes de las relaciones sociales, llegando incluso a la cooperación
entre actores que no mantiene relación. La estructura del sistema coordinara la relación.

Área de Operaciones:

5
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

• Ejecutivos de Atención al cliente, para respuestas concretas.

• Sitios web para atención al cliente automatizadas.
• Coordinadores de Servicio.
• Supervisor de Servicio.
• Jefes de Departamento o Gerentes.
• Director de Cuentas.
• Director General.

Áreas de Apoyo

• Departamento de Recursos Humanos (RR. HH).

• Departamento de Tecnología.
• Planificación y desarrollo.
• Departamento de Calidad.
• Departamento Legal.
• Servicio Médico.

Área Comercial

Como cualquier otra empresa las web center necesitan captar nuevos clientes para
mantener su flujo de ingresos. Por esa razón no dudan en incorporar un su estructura
organizacional al área comercial.

El área comercial suele estar compuesta por:

• Director Comercial.
• Gerente comercial o gerente de ventas.
• Gerente de productos.
• Ejecutivos de cuentas.

6
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

¿Cómo debe hacerse un web center?

Pasos del Desarrollo:

1. Una vez instalado, crearemos una aplicación del tipo WebCenter Portal. En el
Jdeveloper, haga clic en el enlace "New Application"

2. Indique los datos de la aplicación y elija "WebCenter Portal Application". Pulse Next y
mantenga todos los valores sugeridos hasta culminar el asistente. Tenga en cuenta que
para este proyecto estamos usando como paquete base otnla, el cual será referenciado
a partir de ahora como <PAQUETE_BASE>

7
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

Nota: Es posible Lanzar este asistente también usando las opciones File | New |
Applications | WebCenter Portal Applications.

3. Evaluando lo que ha creado el asistente notamos que se han creado 2 proyectos:

Portal y PortalWebAssets. El primero es un proyecto basado en un proyecto web, y sobre
él incluiremos las páginas y componentes comunes del portal. El segundo servirá para
almacenar contenido estático que utilice el portal como HTML e imágenes.

8
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

4. Analicemos ahora el proyecto Portal, para comprender la arquitectura de componentes

que la herramienta ha generado. Note que se han creado 2 secciones:

• Application Sources: Esta sección incluirá descriptores y clases que dan soporte a las
funcionalidades que tiene el portal. Generalmente estos elementos son alterados por los
asistentes de la herramienta. Sin embargo, será útil que analicemos los paquetes y
descriptores contenidos en esta sección:

• oracle. WebCenter. portalapp: Este paquete incluye entre otras cosas, descriptores de
los bindings asociados a las páginas. Un descriptor de bindings es básicamente un
archivo XML que tiene referencias a los datos que son implementados en una capa de
negocio. Las páginas hacen uso de estos descriptores para poder exponer esta
información y evitar acoplarse con la capa de negocio. Un ejemplo de descriptor de
bindings es [Link]

9
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

• <PAQUETE_BASE>.portal: Incluye el descriptor [Link] que cumple la

función de enlazar las páginas (jspx) con sus respectivos descriptores de bindings
indicados previamente. Adicionalmente, define los datacontrols que utilizará la
aplicación.
• META-INF: En esta carpeta se encuentra el archivo [Link], que
registra todos los templates que tendrá el portal. Nuestro portal podrá disponer de
muchos templates que podrán aplicarse a las páginas que desarrollemos.

• Web Content: Esta sección contiene los componentes web tradicionales tales como
páginas, imágenes y estilos. Adicionalmente, esta sección contiene descriptores que
permiten personalizar características como seguridad, navegación y biblioteca de
componentes que tendrá nuestro portal. Analicemos los paquetes y componentes
definidos en esta sección.

10
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

• images: Este paquete incluirá las imágenes que usará el portal.

• oracle: La configuración de la seguridad, navegación, etc., son definidos en este
paquete. Abordemos cada uno de los subpaquetes contenidos en la ruta oracle.
[Link]

• catalogs: Este subpaquete incluye el descriptor default_catalog.xml que sirve para

configurar el catálogo de componentes que el usuario puede usar en tiempo de ejecución
para componer su página. Por ejemplo, si creamos y empaquetamos un componente en
un .jar., será necesario registrarlo en este descriptor para que los usuarios que componen
el portal puedan incluirlo en sus páginas.

• navigations: Este subpaquete dispone de un descriptor denominado:

default_navigation_model.xml. Su función es definir el modelo de navegación que
tendrán las páginas, y es usado para poblar las opciones de menú que tendrá el portal.

11
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

En consecuencia, si se necesita definir un menú con las opciones de "Principal"," Nuestra

Empresa", y dentro de la última opción los sub menús "Palabras de Bienvenida" y
"Nuestros Productos”, será necesario aplicar esa configuración en el descriptor definido
en este subpaquete.

• pagehierarchy: Mencionamos que una de las ventajas que ofrece WebCenter Portal es
la gestión de seguridad. En este subpaquete se tiene el descriptor [Link], el cual
define las páginas y sus correspondientes perfiles autorizados. En el ejemplo la página
home puede ser accedida por todos los perfiles definidos en la sección Security - View.

12
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

• pages: Almacenará las páginas que se construyan en el portal

• pagetemplates: Define los templates que usará la aplicación. Es necesario recordar que
un template define las características gráficas comunes que tendrán las paginas (banner,
pie de página, etc). Inicialmente la herramienta genera el template: pageTemplate_globe.
jspx que es usado por default.
• skins: Incluye las hojas de estilo que serán utilizadas por los componentes de las
páginas para definir su estética. Por default se crea el archivo [Link]

5. Modifiquemos ahora algunos de los componentes descritos previamente para

entender las funcionalidades explicadas en la parte teórica. Empezaremos por modificar
algunos de los elementos gráficos que ofrece el portal para mostrar la forma en que se
personaliza el entorno estético.

6. Vamos a usar una imagen distinta como banner superior. Entonces copiemos la
imagen [Link], que se encuentra en el zip de recursos ubicado al final de este
artículo, hacia la ruta PortalOTNLA/Portal/public_html/images/.

13
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

7. Ahora, modifiquemos el template para usar la imagen copiada en el punto anterior.

Abra el archivo: pageTemplate_globe. jspx y modifique la referencia [Link] por
[Link]. Tenga en cuenta que el templase se está editando en modo "Source".
Inicialmente:

Con el cambio:

8. Sobre el mismo template, volvamos al modo "Design" y modifiquemos la etiqueta " Tag
Line for Your Company" por "OTN Lat"

14
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

9. Por default, los textos de las etiquetas y links están definidos en color blanco. Teniendo
en cuenta que nuestro fondo también será del mismo color tendremos que modificar el
color de estos textos a verde para que puedan distinguirse.

10. Cambiemos los colores de las etiquetas "Login" y "Password". En este caso
modificaremos las propiedades LabelStyle de estas etiquetas tal como muestra la
siguiente imagen.

11. Repitamos el cambio de color sobre el control Link que permite la autenticación del
usuario. Elíjalo y cambie su color tal como se muestra en la siguiente figura:

15
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

12. Modifiquemos también las etiquetas y enlaces contenidos en la sección superior

izquierda del portal. Realice los cambios tal como se muestran en la siguiente imagen.

13. Por default, todas las pantallas ofrecen un fondo blanco con un degrade en azul.
Modifiquemos esto para tener un fondo uniforme de color blanco. Dado que este
comportamiento aplica sobre todas las pantallas, haremos uso de la hoja de estilo del
portal la cual regula el comportamiento gráfico de todos los componentes. Modifique la
hoja de estilo [Link] agregando el siguiente selector que define el color de fondo
para el contenedor de las páginas:

af|document

background-color: White;

font-family: Arial, Helvetica, sans-serif;

color: #000000;

font-size:12px;

16
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

14. Ejecutemos el portal. Haga clic derecho sobre el proyecto Portal y elija la opción Run.

15. Notará que diseño por default ha cambiado. Con los colores y banners que hemos
elegido.

17
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

16. Una de las ventajas de esta tecnología es la capacidad de permitir la participación de

usuarios "no técnicos" en el desarrollo del portal. Esto se logra gracias a las herramientas
de "composición" que Webcenter ofrece en tiempo de ejecución y al catálogo de
componentes indicado en la introducción. Veamos un ejemplo de esta actividad
modificando la página home.

17. Autentíquese la portal usando el usuario: weblogic, password: weblogic1. Notará que
aparecen ahora disponible unos enlaces en la parte superior. Haga clic sobre el enlace
Administration para entrar al entorno de administración del portal.

18. Este entorno permite la administración de gran parte de las configuraciones que
hacemos desde Jdeveloper en tiempo de diseño. En este caso, note que los cambios los
hacemos en tiempo de ejecución, sin ningún conocimiento especializado de
programación y con la ventaja que los cambios se aplican de inmediato sin la necesidad
de realizar un proceso previo de despliegue.

19. Inicialmente se listan las páginas disponibles por el portal. Tenga en cuenta que
desde este entorno podríamos agregar más páginas haciendo uso del botón "Crear
Página". Sin embargo para este ejemplo editaremos la página Home que se ha creado

18
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

por Default. Utilice el botón de acciones para editar la página tal como se indica en la
siguiente figura.

20. En este entorno, podemos modificar la distribución de componentes y añadir

elementos tales cómo contenido informativo, funcionalidades de negocio, gestores de
documentos y recursos Web 2.0. Sin embargo para efectos de este ejemplo incluyamos
un texto fijo sobre la página. Pulse el botón "Agregar Contenido" para ver el catálogo de
componentes.

21. Del catálogo de componentes elija la categoría "Web Development”, posteriormente

aparecerán los controles disponibles en esta categoría. De la lista mostrada, agreguemos
el control Text pulsando el botón "Agregar". Luego pulse "Cerrar" para regresar a la
página diseñada.

19
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

22. Para modificar el texto, haga clic sobre el link "Editar Texto", y modifique el texto
según lo deseado. Puede usar las herramientas de formato para darle un diseño
especial. Finalice esta etapa pulsando el enlace "Edición Terminada".

20
 TECNOLÓGICO NACIONAL DE
MÉXICO
Instituto Tecnológico de Zitácuaro

23. Pulse Cerrar, para salir del modo de Edición de la página y vemos el resultado final
de la página construida en tiempo de ejecución.

21