procedimiento para la creaciÓn de un sitio web
TRANSCRIPT
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN
SITIO WEB
COMPONENTES ESPECIALES
Procedimiento Para la Creacioacuten de un Sitio Web
Componentes
Especiales
Fondo de Informacioacuten y Documentacioacuten para la Industria
Av San Fernando 37 Col Toriello Guerra Del Tlalpan
Meacutexico DF
El Copyright y las Marcas registradas INFOTEC WebBuilder SemanticWebBuilder el personaje Semius y demaacutes logotipos emblemas y caracteriacutesticas distintivas asiacute como elementos relacionados son propiedad de INFOTEC Fondo de Informacioacuten y Documentacioacuten para la Industria Centro de Investigacioacuten CONACYT
Reservados todos los derechos Queda estrictamente prohibido bajo las sanciones establecidas en las leyes la reproduccioacuten parcial o total de esta obra por cualquier medio o procedimiento de alquiler o preacutestamos puacuteblicos de ejemplares de la misma sin la autorizacioacuten escrita de INFOTEC Fondo de Informacioacuten y Documentacioacuten para la Industria Centro de Investigacioacuten CONACYT
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO i
Prologo
SemanticWebBuilder (SWB) es una plataforma tecnoloacutegica desarrollada en INFOTEC un Centro de Investigacioacuten y Desarrollo Tecnoloacutegico del CONACYT por lo que es un producto hecho en Meacutexico y por mexicanos que tiene como propoacutesito principal el brindar los elementos y utileriacuteas necesarias para permitir una construccioacuten raacutepida y simple de Sitios y Portales Web Semaacutenticos asiacute como desarrollo de aplicaciones con caracteriacutesticas semaacutenticas
La idea principal de aplicar Semaacutentica a los Sitios y Portales Web o mejor dicho incorporarle Semaacutentica a Internet es permitir que la informacioacuten pueda ser definida con un significado especiacutefico de forma que conforme se le van incorporando descripciones y propiedades a cada elemento de informacioacuten este pueda tener maacutes aspectos que lo distingan de los demaacutes y lo puedan identificar mejor logrando con ello que pueda ser faacutecilmente consultado interpretado y procesado ya sea por personas o incluso por otras aplicaciones y sistemas es decir por maquinas
Esta caracteriacutestica de la semaacutentica que hace que la informacioacuten tenga un mayor significado y en consecuencia sea faacutecilmente consultada por personas o sistemas implica que el intercambio e integracioacuten de informacioacuten sea de forma maacutes natural sin importar el lugar fiacutesico donde se encuentre la informacioacuten o la forma en que haya sido procesada originalmente
Esto implica que podremos realizar una consulta de informacioacuten y la respuesta seraacute maacutes completa y adecuada a nuestro criterio de buacutesqueda pues la fuente de consulta podraacute ser leiacuteda interpretada e integrada a partir de la informacioacuten publicada por diferentes organizaciones a muacuteltiples niveles teacutecnicos yo humanos permitiendo con ello obtener informacioacuten maacutes completa y adecuada a los requerimientos especiacuteficos de cada usuario en la red
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ii
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iii
Iacutendice de Contenidos
Prologo i
Iacutendice de Contenidos iii
Acerca de este manual iv
Objetivos iv
Convenciones usadas en este manual v
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema vi
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal) vii
Comenzando a trabajarhellip x
Instalacioacuten SWBhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip1
Generar un Usuario con Privilegios de SU (Suacuteper Usuario)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3
Desactivar al Administradorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip5
Generar un Sitio Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip8
Generar una Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip10
Generar una Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip15
Agregar un Componente de tipo Contenido HTMLContenthelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip17
Asignar una Plantilla HTML a la Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip19
Generar un Menuacute (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip21
Agregar Componentes de Estrategia (Menuacute)a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip23
Generar un Banner (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip25
Agregar Componentes de Estrategia (Banner) a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip28
Visualizacioacuten de Pagina Web desde un navegadorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iv
Acerca de este manual
Este manual fue realizado con el objetivo de explicar el conocimiento miacutenimo necesario de los procesos para la generacioacuten de Paacuteginas Web en una Arquitectura de Sitio construida dentro de una instancia de SemanticWebBuilder
Indicaacutendole ademaacutes los mecanismos necesarios para implementar en cada Paacutegina los diferentes componentes de personalizacioacuten y publicacioacuten que se incluyen en la herramienta mostrando su uso y aplicacioacuten de forma que el resultado en Internet sea el deseado presentando la informacioacuten correcta a la persona correcta en el momento correcto en el contexto correcto
Objetivos
General
El objetivo de este manual es mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear y visualizar una Paacutegina Web desde cero creando un sitio asignando una plantilla a Paacutegina Web y pueda visualizarla en un navegador
Especiacuteficos
Al finalizar el tema de Procedimiento para la creacioacuten de un sitio Web el usuario seraacute capaz de construir un Sitio Web mediante la administracioacuten de paacuteginas o secciones de forma que le permitan asegurar que la informacioacuten contenida en ellas se muestre de la forma adecuada y seraacute capaz de modificar dichas caracteriacutesticas
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento Para la Creacioacuten de un Sitio Web
Componentes
Especiales
Fondo de Informacioacuten y Documentacioacuten para la Industria
Av San Fernando 37 Col Toriello Guerra Del Tlalpan
Meacutexico DF
El Copyright y las Marcas registradas INFOTEC WebBuilder SemanticWebBuilder el personaje Semius y demaacutes logotipos emblemas y caracteriacutesticas distintivas asiacute como elementos relacionados son propiedad de INFOTEC Fondo de Informacioacuten y Documentacioacuten para la Industria Centro de Investigacioacuten CONACYT
Reservados todos los derechos Queda estrictamente prohibido bajo las sanciones establecidas en las leyes la reproduccioacuten parcial o total de esta obra por cualquier medio o procedimiento de alquiler o preacutestamos puacuteblicos de ejemplares de la misma sin la autorizacioacuten escrita de INFOTEC Fondo de Informacioacuten y Documentacioacuten para la Industria Centro de Investigacioacuten CONACYT
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO i
Prologo
SemanticWebBuilder (SWB) es una plataforma tecnoloacutegica desarrollada en INFOTEC un Centro de Investigacioacuten y Desarrollo Tecnoloacutegico del CONACYT por lo que es un producto hecho en Meacutexico y por mexicanos que tiene como propoacutesito principal el brindar los elementos y utileriacuteas necesarias para permitir una construccioacuten raacutepida y simple de Sitios y Portales Web Semaacutenticos asiacute como desarrollo de aplicaciones con caracteriacutesticas semaacutenticas
La idea principal de aplicar Semaacutentica a los Sitios y Portales Web o mejor dicho incorporarle Semaacutentica a Internet es permitir que la informacioacuten pueda ser definida con un significado especiacutefico de forma que conforme se le van incorporando descripciones y propiedades a cada elemento de informacioacuten este pueda tener maacutes aspectos que lo distingan de los demaacutes y lo puedan identificar mejor logrando con ello que pueda ser faacutecilmente consultado interpretado y procesado ya sea por personas o incluso por otras aplicaciones y sistemas es decir por maquinas
Esta caracteriacutestica de la semaacutentica que hace que la informacioacuten tenga un mayor significado y en consecuencia sea faacutecilmente consultada por personas o sistemas implica que el intercambio e integracioacuten de informacioacuten sea de forma maacutes natural sin importar el lugar fiacutesico donde se encuentre la informacioacuten o la forma en que haya sido procesada originalmente
Esto implica que podremos realizar una consulta de informacioacuten y la respuesta seraacute maacutes completa y adecuada a nuestro criterio de buacutesqueda pues la fuente de consulta podraacute ser leiacuteda interpretada e integrada a partir de la informacioacuten publicada por diferentes organizaciones a muacuteltiples niveles teacutecnicos yo humanos permitiendo con ello obtener informacioacuten maacutes completa y adecuada a los requerimientos especiacuteficos de cada usuario en la red
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ii
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iii
Iacutendice de Contenidos
Prologo i
Iacutendice de Contenidos iii
Acerca de este manual iv
Objetivos iv
Convenciones usadas en este manual v
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema vi
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal) vii
Comenzando a trabajarhellip x
Instalacioacuten SWBhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip1
Generar un Usuario con Privilegios de SU (Suacuteper Usuario)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3
Desactivar al Administradorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip5
Generar un Sitio Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip8
Generar una Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip10
Generar una Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip15
Agregar un Componente de tipo Contenido HTMLContenthelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip17
Asignar una Plantilla HTML a la Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip19
Generar un Menuacute (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip21
Agregar Componentes de Estrategia (Menuacute)a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip23
Generar un Banner (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip25
Agregar Componentes de Estrategia (Banner) a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip28
Visualizacioacuten de Pagina Web desde un navegadorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iv
Acerca de este manual
Este manual fue realizado con el objetivo de explicar el conocimiento miacutenimo necesario de los procesos para la generacioacuten de Paacuteginas Web en una Arquitectura de Sitio construida dentro de una instancia de SemanticWebBuilder
Indicaacutendole ademaacutes los mecanismos necesarios para implementar en cada Paacutegina los diferentes componentes de personalizacioacuten y publicacioacuten que se incluyen en la herramienta mostrando su uso y aplicacioacuten de forma que el resultado en Internet sea el deseado presentando la informacioacuten correcta a la persona correcta en el momento correcto en el contexto correcto
Objetivos
General
El objetivo de este manual es mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear y visualizar una Paacutegina Web desde cero creando un sitio asignando una plantilla a Paacutegina Web y pueda visualizarla en un navegador
Especiacuteficos
Al finalizar el tema de Procedimiento para la creacioacuten de un sitio Web el usuario seraacute capaz de construir un Sitio Web mediante la administracioacuten de paacuteginas o secciones de forma que le permitan asegurar que la informacioacuten contenida en ellas se muestre de la forma adecuada y seraacute capaz de modificar dichas caracteriacutesticas
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
El Copyright y las Marcas registradas INFOTEC WebBuilder SemanticWebBuilder el personaje Semius y demaacutes logotipos emblemas y caracteriacutesticas distintivas asiacute como elementos relacionados son propiedad de INFOTEC Fondo de Informacioacuten y Documentacioacuten para la Industria Centro de Investigacioacuten CONACYT
Reservados todos los derechos Queda estrictamente prohibido bajo las sanciones establecidas en las leyes la reproduccioacuten parcial o total de esta obra por cualquier medio o procedimiento de alquiler o preacutestamos puacuteblicos de ejemplares de la misma sin la autorizacioacuten escrita de INFOTEC Fondo de Informacioacuten y Documentacioacuten para la Industria Centro de Investigacioacuten CONACYT
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO i
Prologo
SemanticWebBuilder (SWB) es una plataforma tecnoloacutegica desarrollada en INFOTEC un Centro de Investigacioacuten y Desarrollo Tecnoloacutegico del CONACYT por lo que es un producto hecho en Meacutexico y por mexicanos que tiene como propoacutesito principal el brindar los elementos y utileriacuteas necesarias para permitir una construccioacuten raacutepida y simple de Sitios y Portales Web Semaacutenticos asiacute como desarrollo de aplicaciones con caracteriacutesticas semaacutenticas
La idea principal de aplicar Semaacutentica a los Sitios y Portales Web o mejor dicho incorporarle Semaacutentica a Internet es permitir que la informacioacuten pueda ser definida con un significado especiacutefico de forma que conforme se le van incorporando descripciones y propiedades a cada elemento de informacioacuten este pueda tener maacutes aspectos que lo distingan de los demaacutes y lo puedan identificar mejor logrando con ello que pueda ser faacutecilmente consultado interpretado y procesado ya sea por personas o incluso por otras aplicaciones y sistemas es decir por maquinas
Esta caracteriacutestica de la semaacutentica que hace que la informacioacuten tenga un mayor significado y en consecuencia sea faacutecilmente consultada por personas o sistemas implica que el intercambio e integracioacuten de informacioacuten sea de forma maacutes natural sin importar el lugar fiacutesico donde se encuentre la informacioacuten o la forma en que haya sido procesada originalmente
Esto implica que podremos realizar una consulta de informacioacuten y la respuesta seraacute maacutes completa y adecuada a nuestro criterio de buacutesqueda pues la fuente de consulta podraacute ser leiacuteda interpretada e integrada a partir de la informacioacuten publicada por diferentes organizaciones a muacuteltiples niveles teacutecnicos yo humanos permitiendo con ello obtener informacioacuten maacutes completa y adecuada a los requerimientos especiacuteficos de cada usuario en la red
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ii
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iii
Iacutendice de Contenidos
Prologo i
Iacutendice de Contenidos iii
Acerca de este manual iv
Objetivos iv
Convenciones usadas en este manual v
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema vi
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal) vii
Comenzando a trabajarhellip x
Instalacioacuten SWBhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip1
Generar un Usuario con Privilegios de SU (Suacuteper Usuario)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3
Desactivar al Administradorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip5
Generar un Sitio Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip8
Generar una Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip10
Generar una Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip15
Agregar un Componente de tipo Contenido HTMLContenthelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip17
Asignar una Plantilla HTML a la Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip19
Generar un Menuacute (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip21
Agregar Componentes de Estrategia (Menuacute)a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip23
Generar un Banner (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip25
Agregar Componentes de Estrategia (Banner) a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip28
Visualizacioacuten de Pagina Web desde un navegadorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iv
Acerca de este manual
Este manual fue realizado con el objetivo de explicar el conocimiento miacutenimo necesario de los procesos para la generacioacuten de Paacuteginas Web en una Arquitectura de Sitio construida dentro de una instancia de SemanticWebBuilder
Indicaacutendole ademaacutes los mecanismos necesarios para implementar en cada Paacutegina los diferentes componentes de personalizacioacuten y publicacioacuten que se incluyen en la herramienta mostrando su uso y aplicacioacuten de forma que el resultado en Internet sea el deseado presentando la informacioacuten correcta a la persona correcta en el momento correcto en el contexto correcto
Objetivos
General
El objetivo de este manual es mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear y visualizar una Paacutegina Web desde cero creando un sitio asignando una plantilla a Paacutegina Web y pueda visualizarla en un navegador
Especiacuteficos
Al finalizar el tema de Procedimiento para la creacioacuten de un sitio Web el usuario seraacute capaz de construir un Sitio Web mediante la administracioacuten de paacuteginas o secciones de forma que le permitan asegurar que la informacioacuten contenida en ellas se muestre de la forma adecuada y seraacute capaz de modificar dichas caracteriacutesticas
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO i
Prologo
SemanticWebBuilder (SWB) es una plataforma tecnoloacutegica desarrollada en INFOTEC un Centro de Investigacioacuten y Desarrollo Tecnoloacutegico del CONACYT por lo que es un producto hecho en Meacutexico y por mexicanos que tiene como propoacutesito principal el brindar los elementos y utileriacuteas necesarias para permitir una construccioacuten raacutepida y simple de Sitios y Portales Web Semaacutenticos asiacute como desarrollo de aplicaciones con caracteriacutesticas semaacutenticas
La idea principal de aplicar Semaacutentica a los Sitios y Portales Web o mejor dicho incorporarle Semaacutentica a Internet es permitir que la informacioacuten pueda ser definida con un significado especiacutefico de forma que conforme se le van incorporando descripciones y propiedades a cada elemento de informacioacuten este pueda tener maacutes aspectos que lo distingan de los demaacutes y lo puedan identificar mejor logrando con ello que pueda ser faacutecilmente consultado interpretado y procesado ya sea por personas o incluso por otras aplicaciones y sistemas es decir por maquinas
Esta caracteriacutestica de la semaacutentica que hace que la informacioacuten tenga un mayor significado y en consecuencia sea faacutecilmente consultada por personas o sistemas implica que el intercambio e integracioacuten de informacioacuten sea de forma maacutes natural sin importar el lugar fiacutesico donde se encuentre la informacioacuten o la forma en que haya sido procesada originalmente
Esto implica que podremos realizar una consulta de informacioacuten y la respuesta seraacute maacutes completa y adecuada a nuestro criterio de buacutesqueda pues la fuente de consulta podraacute ser leiacuteda interpretada e integrada a partir de la informacioacuten publicada por diferentes organizaciones a muacuteltiples niveles teacutecnicos yo humanos permitiendo con ello obtener informacioacuten maacutes completa y adecuada a los requerimientos especiacuteficos de cada usuario en la red
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ii
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iii
Iacutendice de Contenidos
Prologo i
Iacutendice de Contenidos iii
Acerca de este manual iv
Objetivos iv
Convenciones usadas en este manual v
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema vi
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal) vii
Comenzando a trabajarhellip x
Instalacioacuten SWBhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip1
Generar un Usuario con Privilegios de SU (Suacuteper Usuario)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3
Desactivar al Administradorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip5
Generar un Sitio Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip8
Generar una Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip10
Generar una Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip15
Agregar un Componente de tipo Contenido HTMLContenthelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip17
Asignar una Plantilla HTML a la Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip19
Generar un Menuacute (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip21
Agregar Componentes de Estrategia (Menuacute)a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip23
Generar un Banner (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip25
Agregar Componentes de Estrategia (Banner) a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip28
Visualizacioacuten de Pagina Web desde un navegadorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iv
Acerca de este manual
Este manual fue realizado con el objetivo de explicar el conocimiento miacutenimo necesario de los procesos para la generacioacuten de Paacuteginas Web en una Arquitectura de Sitio construida dentro de una instancia de SemanticWebBuilder
Indicaacutendole ademaacutes los mecanismos necesarios para implementar en cada Paacutegina los diferentes componentes de personalizacioacuten y publicacioacuten que se incluyen en la herramienta mostrando su uso y aplicacioacuten de forma que el resultado en Internet sea el deseado presentando la informacioacuten correcta a la persona correcta en el momento correcto en el contexto correcto
Objetivos
General
El objetivo de este manual es mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear y visualizar una Paacutegina Web desde cero creando un sitio asignando una plantilla a Paacutegina Web y pueda visualizarla en un navegador
Especiacuteficos
Al finalizar el tema de Procedimiento para la creacioacuten de un sitio Web el usuario seraacute capaz de construir un Sitio Web mediante la administracioacuten de paacuteginas o secciones de forma que le permitan asegurar que la informacioacuten contenida en ellas se muestre de la forma adecuada y seraacute capaz de modificar dichas caracteriacutesticas
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ii
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iii
Iacutendice de Contenidos
Prologo i
Iacutendice de Contenidos iii
Acerca de este manual iv
Objetivos iv
Convenciones usadas en este manual v
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema vi
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal) vii
Comenzando a trabajarhellip x
Instalacioacuten SWBhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip1
Generar un Usuario con Privilegios de SU (Suacuteper Usuario)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3
Desactivar al Administradorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip5
Generar un Sitio Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip8
Generar una Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip10
Generar una Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip15
Agregar un Componente de tipo Contenido HTMLContenthelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip17
Asignar una Plantilla HTML a la Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip19
Generar un Menuacute (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip21
Agregar Componentes de Estrategia (Menuacute)a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip23
Generar un Banner (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip25
Agregar Componentes de Estrategia (Banner) a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip28
Visualizacioacuten de Pagina Web desde un navegadorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iv
Acerca de este manual
Este manual fue realizado con el objetivo de explicar el conocimiento miacutenimo necesario de los procesos para la generacioacuten de Paacuteginas Web en una Arquitectura de Sitio construida dentro de una instancia de SemanticWebBuilder
Indicaacutendole ademaacutes los mecanismos necesarios para implementar en cada Paacutegina los diferentes componentes de personalizacioacuten y publicacioacuten que se incluyen en la herramienta mostrando su uso y aplicacioacuten de forma que el resultado en Internet sea el deseado presentando la informacioacuten correcta a la persona correcta en el momento correcto en el contexto correcto
Objetivos
General
El objetivo de este manual es mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear y visualizar una Paacutegina Web desde cero creando un sitio asignando una plantilla a Paacutegina Web y pueda visualizarla en un navegador
Especiacuteficos
Al finalizar el tema de Procedimiento para la creacioacuten de un sitio Web el usuario seraacute capaz de construir un Sitio Web mediante la administracioacuten de paacuteginas o secciones de forma que le permitan asegurar que la informacioacuten contenida en ellas se muestre de la forma adecuada y seraacute capaz de modificar dichas caracteriacutesticas
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iii
Iacutendice de Contenidos
Prologo i
Iacutendice de Contenidos iii
Acerca de este manual iv
Objetivos iv
Convenciones usadas en este manual v
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema vi
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal) vii
Comenzando a trabajarhellip x
Instalacioacuten SWBhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip1
Generar un Usuario con Privilegios de SU (Suacuteper Usuario)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3
Desactivar al Administradorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip5
Generar un Sitio Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip8
Generar una Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip10
Generar una Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip15
Agregar un Componente de tipo Contenido HTMLContenthelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip17
Asignar una Plantilla HTML a la Paacutegina Webhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip19
Generar un Menuacute (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip21
Agregar Componentes de Estrategia (Menuacute)a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip23
Generar un Banner (Componentes de Estrategia)helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip25
Agregar Componentes de Estrategia (Banner) a la Plantillahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip28
Visualizacioacuten de Pagina Web desde un navegadorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iv
Acerca de este manual
Este manual fue realizado con el objetivo de explicar el conocimiento miacutenimo necesario de los procesos para la generacioacuten de Paacuteginas Web en una Arquitectura de Sitio construida dentro de una instancia de SemanticWebBuilder
Indicaacutendole ademaacutes los mecanismos necesarios para implementar en cada Paacutegina los diferentes componentes de personalizacioacuten y publicacioacuten que se incluyen en la herramienta mostrando su uso y aplicacioacuten de forma que el resultado en Internet sea el deseado presentando la informacioacuten correcta a la persona correcta en el momento correcto en el contexto correcto
Objetivos
General
El objetivo de este manual es mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear y visualizar una Paacutegina Web desde cero creando un sitio asignando una plantilla a Paacutegina Web y pueda visualizarla en un navegador
Especiacuteficos
Al finalizar el tema de Procedimiento para la creacioacuten de un sitio Web el usuario seraacute capaz de construir un Sitio Web mediante la administracioacuten de paacuteginas o secciones de forma que le permitan asegurar que la informacioacuten contenida en ellas se muestre de la forma adecuada y seraacute capaz de modificar dichas caracteriacutesticas
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO iv
Acerca de este manual
Este manual fue realizado con el objetivo de explicar el conocimiento miacutenimo necesario de los procesos para la generacioacuten de Paacuteginas Web en una Arquitectura de Sitio construida dentro de una instancia de SemanticWebBuilder
Indicaacutendole ademaacutes los mecanismos necesarios para implementar en cada Paacutegina los diferentes componentes de personalizacioacuten y publicacioacuten que se incluyen en la herramienta mostrando su uso y aplicacioacuten de forma que el resultado en Internet sea el deseado presentando la informacioacuten correcta a la persona correcta en el momento correcto en el contexto correcto
Objetivos
General
El objetivo de este manual es mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear y visualizar una Paacutegina Web desde cero creando un sitio asignando una plantilla a Paacutegina Web y pueda visualizarla en un navegador
Especiacuteficos
Al finalizar el tema de Procedimiento para la creacioacuten de un sitio Web el usuario seraacute capaz de construir un Sitio Web mediante la administracioacuten de paacuteginas o secciones de forma que le permitan asegurar que la informacioacuten contenida en ellas se muestre de la forma adecuada y seraacute capaz de modificar dichas caracteriacutesticas
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO v
Convenciones usadas en este manual
Las siguientes convenciones son utilizadas en este manual para representar diferentes elementos de capacitacioacuten y recursos alternativos de aprendizaje
Iconos
Sabiacuteas Que ndash Indica comentarios al margen en los que se extenderaacute el tema expuesto mediante recomendaciones o tips que mejoren el aprovechamiento de la herramienta
Consideraciones Importantes ndash Exponen puntos importantes que deben tenerse en cuenta para la correcta operacioacuten de las utileriacuteas
Nota ndash Indica Informacioacuten adicional que puede ayudarle a aprovechar mejor la funcionalidad expuesta
Referencia ndash Indica la necesidad de consultar otro documento o direccioacuten Web en donde se encontrara mayor informacioacuten sobre el tema expuesto
Procedimiento Guiado ndash Indica que se comenzara la descripcioacuten paso a paso de la operacioacuten de un proceso
Ejercicio Guiado ndash A partir de este punto se comenzara la ejecucioacuten de un ejercicio que deberaacute realizar el usuario de manera guiada paso a paso con el manual
Resultado ndash Expone el efecto final correcto de una operacioacuten o procedimiento
Diagnostico ndash Por caracteriacutesticas de la tecnologiacutea involucrada se generan resultados no deseados Aquiacute se indicara como resolverlo
Improcedente ndash Indica situaciones tecnoloacutegicas en las que no es posible realizar una operacioacuten o que requiere de alguacuten proceso alterno para obtener el resultado deseado
Cuidado ndash Indica que existe alguna informacioacuten restringida o con derechos reservados
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vi
Convenciones Tipograacuteficas
Arial 26 Negrita es utilizada como tiacutetulo de tema
Calibri 14 color Azul Eacutenfasis Negrita es utilizada para los tiacutetulos de tema
Calibri 12 color Azul Eacutenfasis 1 negrita es utilizada para destacar subtemas
Arial 11 es utilizada como fuente principal para el cuerpo del texto
ltTimes New Roman 11gt es utilizada para descripcioacuten de configuraciones o coacutedigo
Arial 10 negrita color azul con recuadro y sombreado azul indica temas a resaltar yo puntos importante en los que el lector debe prestar especial atencioacuten Arial 10 en color azul con recuadro azul y sombreado azul se utiliza para denotar puntos importantes en los que el lector debe prestar atencioacuten especial
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO vii
Acerca del administrador de SemanticWebBuilder Portal (SWBPortal)
Para acezar a la administracioacuten de SemanticWebBuilder Portal (SWBPortal) es necesario que en el URL agregue al final ldquoswbadminrdquo como se muestra a continuacioacuten
Portal Publico Administracioacuten del sitio
httpwwwsitiocomswb httpwwwsitiocomswbswbadmin
Nota El contexto ldquoswbrdquo indicado aquiacute puede ser opcional y cambiar de una instancia de SWB a otra dependiendo de la configuracioacuten especiacutefica establecida en cada caso
A continuacioacuten se mostraraacute la ventana de identificacioacuten (login) de SWBPortal en donde deberaacute proporcionar su usuario su contrasentildea para despueacutes presionar el botoacuten entrar
El administrador de SemanticWebBuilder Portal (SWBPortal) tiene diferentes zonas o aacutereas de trabajo en las cuales se presentan los elementos y componentes mediante los cuales es posible incorporar los diferentes recursos de configuracioacuten y administracioacuten con los que puede desarrollar y dar mantenimiento a su Sitio Web
Las diferentes Zonas que se localizan en el sitio Administrador de SWBPortal se detallan en las imaacutegenes siguientes
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO viii
Descripcioacuten
Barra de Menus
En esta barra se contienen las opciones generales de la administracioacuten de la herramienta
Acordeones de Estructura
En esta zona se mostraran en pestantildeas expandibles (Acordeones) diversos elementos de configuracioacuten de la estructura de los sitios generados en la herramienta asiacute como herramientas y funcionalidades de operacioacuten general
Zona de Trabajo
Aacuterea en la que se despliega el detalle de la informacioacuten elementos de configuracioacuten y administracioacuten de los elementos de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO ix
Descripcioacuten
Cataacutelogos de Estructura
Se denomina ldquoCatalogo de Estructura dehelliprdquo a cada uno de los acordeones donde se localizaran diversos cataacutelogos de elementos que permiten la administracioacuten especifica de los diferentes recursos de SWB
Zona de Informacioacuten
Esta zona mostrara la informacioacuten baacutesica del componente o recurso seleccionado en los acordeones de estructura Tambieacuten se le conoce como la zona de metadatos del elemento
Pestantildeas de Elementos
En esta zona se mostraran las pestantildeas de administracioacuten de cada uno de los componentes que sean abiertos dentro de SWB de forma que se pueda pasar de uno a otro sin perder la informacioacuten o cambios que se hubieran efectuado en otro componente
Pestantildeas de
Configuracioacuten de Elemento
A segundo nivel en la zona de ldquoPestantildeas de Elementosrdquo se muestran las pestantildeas de administracioacuten especifica del componente seleccionado permitiendo la configuracioacuten a detalle de cada componente en el SWB
Barra Emergente de Estatus
Esta barra se mostrara de manera emergente en la parte inferior de la pantalla de Administracioacuten de SWB y mostrara mensajes sobre el eacutexito o no de la operacioacuten realizada
Zona de Trabajo y
Configuracioacuten
Muestra el detalle de cada aspecto de configuracioacuten de las ldquoPestantildeas de Configuracioacuten de Elementosrdquo de forma que pueda trabajar con cada recurso y lo configure de acuerdo a sus requerimientos
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO x
Comenzando a trabajarhellip
PROCEDIMIENTO PARA LA CREACIOacuteN DE UN SITO
WEB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 1
Este manual es para mostrar los pasos baacutesicos para crear un Sitio Web y el manejo de algunas herramientas para crear una Paacutegina Web asignar Plantilla a Paacutegina Web y pueda visualizarla en un navegador
Instalacioacuten de SWB
Procedimiento
Nota SemanticWebBuilder es una herramienta multiplataforma por lo que se puede instalar en diferentes ambientes y se cuenta con los manuales referentes a esta como son Instalacioacuten Inicial SemanticWebBuilder Instalacioacuten SemanticWebBuilder en GlassFish Instalacioacuten SemanticWebBuilder para plataformas tipo Unix Instalacioacuten Inicial SemanticWebBuilder en JBOSS Instalacioacuten Inicial SemanticWebBuilder en WebLogic Instalacioacuten SWB WebLogic_11g
1 Realizar la instalacioacuten de SemanticWebBuilder
Referencia Para el procedimiento de instalacioacuten de SemanticWebBuilder diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
2 Una vez instalada la aplicacioacuten de SemanticWebBuilder diriacutejase a abrir un navegador y escriba la siguiente ruta httpdireccioacuten_ippuertoswbadmin
Nota La ruta de navegacioacuten para entrar a la administracioacuten de SWB se arma de la siguiente manera http Protocolo Direccioacuten IP Direccioacuten del servidor donde se levantoacute la aplicacioacuten Puerto Puerto que se configuro en el AppServer para levantar la aplicacioacuten Swbadmin prefijo para accesar a la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 2
3 Se mostraraacute en el navegador la paacutegina de acceso para la administracioacuten de SWB en el campo de ldquoUserrdquo escriba ldquoadminrdquo y en el campo de ldquoPasswordrdquo escriba ldquowebbuilderrdquo y dar clic en el botoacuten de ldquoLoginrdquo
Resultado
Se acceso a la administracioacuten de SWB con el usuario general
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 3
Generacioacuten de un usuario con privilegios de Suacuteper Usuario (SU)
Procedimiento
1 En la ldquoBarra de Menuacutesrdquo localizar y seleccionar la opcioacuten ldquoUsuariosrdquo y en el menuacute
desplegable dar clic en la opcioacuten ldquoAgregar usuariordquo
2 Se mostraraacute una ventana emergente donde se tendraacute que llenar los campos de ldquoRepositorio de Usuariosrdquo ldquoUsuariordquo y ldquoContrasentildeardquo con los datos solicitados
3 Una vez llenado los campos dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoAdmin User Repositoryrdquo es el repositorio que nos permite crear usuarios con privilegios para la administracioacuten de SWB
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 4
En el aacuterea de trabajo se mostrara las pestantildeas correspondientes al usuario que se generoacute
4 Llenar los campos solicitados en la pestantildea de ldquoInformacioacutenrdquo (los campos con asterisco son obligatorios) dar clic en check box de ldquoActivordquo Y dar clic en el botoacuten de ldquoGuardarrdquo
5 Seleccionar la pestantildea de ldquoGrupos de Usuariosrdquo y dar clic en el botoacuten ldquoAgregar de
listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 5
Se enlistaraacute los 2 roles para ser asignados al usuario para este ejemplo se asignaraacute
permiso de ldquoSuacuteper Usuariordquo seleccionar el check box de ldquoSuacuteper Usuariordquo y dar clic en el
botoacuten de ldquoAgregar seleccionadosrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de un usuario diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Usuariosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado Se creoacute el usuario con el rol de Suacuteper Usuario el cual tiene todo el acceso y los permisos para la administracioacuten de SWB
Desactivar al administrador
Procedimiento
Una vez contando con el usuario con privilegios de SU termine la sesioacuten activa que se tiene con el usuario general
1 En Barra de Menuacutes del lado derecho estaacute el botoacuten de salir dar clic para terminar la sesioacuten con el usuario actual
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 6
2 Iniciar sesioacuten con el Usuario con privilegios de Suacuteper Usuario que fue creado dirigieacutendose a la ruta httpIPPuertoswbadmin y autenticarse
3 En la ldquoBarra de Menuacutesrdquo seleccionar a Usuarios 4 Se mostraraacute un menuacute despegable dar clic en ldquoBuscadorrdquo
5 Se mostraraacute un formulario con los criterios de buacutesqueda en el campo ldquoRepositorio de usuariosrdquo seleccionar el repositorio ldquoAdmin User Repositoryrdquo el cual es al que el usuario ldquoadminrdquo pertenece
6 En ldquoNombre(s)rdquo escribir el usuario ldquoadminrdquo 7 Dar clic en el botoacuten de ldquoBuscarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 7
8 Se mostraraacute los resultados de la buacutesqueda dar doble clic en el usuario ldquoadminrdquo
Nota En el buscador de usuarios se puede definir solo un campo o todos los campos de los criterios de buacutesqueda para arrojar los resultados seguacuten la buacutesqueda de usuario definida
9 Seleccionar la pestantildea de ldquoInformacioacutenrdquo en donde se desactivara el check box de ldquoActivordquo dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 8
Resultado El usuario General fue deshabilitado
Generar un sitio Web
Nota Por default la herramienta tiene precargado un Sitio con el nombre de Demo
Procedimiento
1 En ldquoBarra de Menuacutes Seleccionar ldquoArchivordquo 2 Dar clic en la opcioacuten de ldquoCrear Sitio Webrdquo 3 Dar clic sobre la opcioacuten de ldquoNuevordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 9
4 Se muestra una ventana emergente en donde se definiraacuten los campos con la
informacioacuten que requerida cuando se define el campo de ldquoTiacutetulordquo de manera
automaacutetica SWB lo toma como referencia para definir el campo de ldquoIdentificadorrdquo
este puede ser editado si asiacute se requiere En el campo de ldquoRepositorio a utilizarrdquo
seleccione ldquoExclusivordquo con fines de ejemplificacioacuten de este manual Y por uacuteltimo en
el campo de ldquoTipo de Sitiordquo seleccione ldquoSitio Webrdquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Nota La definicioacuten de un ID debe de ser una cadena de valores que no contenga caracteres especiales ni espacios en blanco
5 Se mostraraacute en el ldquoCatalogo de Estructurardquo el Sitio que se creoacute dar clic en ldquoSitiordquo
se mostraraacute en la ldquoZona de Trabajo y Configuracioacutenrdquo la informacioacuten 6 Dar clic en el check box de ldquoActivordquo 7 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 10
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Sitios diriacutejase al manual ldquoCreacioacuten_y_Administracioacuten_de_Portales_SWBrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El sitio se muestra activado mostrando la pestantildea de ldquoInformacioacutenrdquo
Generar una Plantilla
Procedimiento
1 En el Catalogo de Estructura del Sitio dar clic derecho sobre ldquoPlantillasrdquo y seleccionar la opcioacuten ldquoAgregar Grupo de Plantillasrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 11
2 Se mostraraacute una ventana emergente llenar el campo y dar clic en el botoacuten de
ldquoGuardarrdquo
3 Se mostraraacute la informacioacuten general del Grupo de Plantillas que se acaba de crear se puede llenar la ldquoDescripcioacutenrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El ldquoGrupo de plantillasrdquo nos sirve para ordenar yo clasificar en base a las caracteriacutesticas de presentacioacuten que se desee dar a las plantillas
4 En el ldquoCatalogo de Estructurardquo dar clic sobre Plantillas se mostraraacute un menuacute
desplegable dar clic en el ldquoGrupo de plantillasrdquo que se acaboacute de crear dar clic en ldquoAgregar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 12
5 En la Zona de Trabajo y Configuracioacuten se mostraraacute una ventana emergente la cual se tendraacute que llenar el campo de ldquoTiacutetulordquo y dar clic en el botoacuten de ldquoGuardarrdquo
6 Se mostraraacute la informacioacuten de la Plantilla en ldquoVista Previardquo que se acaba de crear
dar clic en el check box de ldquoActivordquo y dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten y propiedades de una plantilla diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para la Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta
httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 13
7 Seleccionar la pestantildea ldquoEditar Plantillardquo 8 Dar clic en el icono de edicioacuten
Consideraciones Importantes Al generar una nueva plantilla en SemanticWebBuilder se genera con el coacutedigo inicial de una plantilla blanca con tags scripts y elementos necesarios para el buen funcionamiento de la plantilla y los componentes a asignar
La zona de trabajo presentaraacute el editor WYSIWYG en el modo ldquoTextordquo mostrando la plantilla a editar
Referencia Para maacutes informacioacuten del procedimiento de los SWBTags diriacutejase al manual ldquoUso e implementacioacuten de SWBTagsrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
En el editor de la plantilla muestra los botones que le serviraacuten para la edicioacuten de la misma estos son
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 14
Nuevo Genera una nueva plantilla
Abrir de Archivo Permite cargar una plantilla HTML
Guardar Guarda las modificaciones realizadas a la plantilla
Cargar Archivos Permite la subida de archivos en la ruta donde se generoacute la plantilla
Cortar Permite cortar el texto seleccionado de la plantilla
Copiar Permite copiar el texto seleccionado de la plantilla
Pegar Permite pegar el texto copiado de la plantilla
Liga Permite crear un hiperviacutenculo a un archivo o paacutegina
Imagen Permite la subida de archivos
Tabla Permite crear una tabla dentro de tu plantilla
Recurso Te permite agregar un componente de estrategia yo sistema a la plantilla
Contenido Permite agregar el SWBTag de ltcontentgtque hace el llamado a los componentes de contenido asignados a las paacuteginas web
Colorear Sintaxis Permite pintar el texto marcado a evaluar
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 15
Resultado
Se mostraraacute la Plantilla en HTML o Texto
Dar clic en la pestantildea de ldquoHTMLrdquo para editar la Plantilla ya sea en Texto o en HTML
Una vez que se termine la edicioacuten de la plantilla dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten del procedimiento y edicioacuten de una plantilla diriacutejase al manual ldquoAdministracioacuten_yCreacioacuten_de_Plantillas_para_Presentacioacuten_de_Paginas_Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar una Pagina Web 1 En el ldquoCatalogo de Estructurardquo dar clic derecho sobre la Paacutegina Web ldquoHomerdquo
2 Se mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Pagina Webrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 16
3 Se mostraraacute una ventana emergente donde se definiraacute los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic en el botoacuten de ldquoGuardarrdquo
Nota El Identificador que se defina para la paacutegina a crear seraacute el que arme la ruta de navegacioacuten (URL) por lo que no se permiten los caracteres especiales ni espacios en blanco
4 Se mostraraacute la Paacutegina Web sobre ldquoVista Previardquo seleccionar la pestantildea de
ldquoInformacioacutenrdquo dar un clic en check box de ldquoActivordquo y dar clic en el botoacuten de
ldquoGuardarrdquo
Resultado La Paacutegina se habraacute creado y activado
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 17
Referencia Para maacutes informacioacuten del procedimiento de creacioacuten de Paacuteginas Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Agregar un Componente de tipo Contenido ldquoHTMLContentrdquo Ya creada nuestra Paacutegina Web
1 Seleccionar la pestantildea de ldquoContenidosrdquo dar clic en el botoacuten de ldquoAgregar nuevordquo
2 Se mostraraacute el listado de todos los contenidos disponibles para este ejemplo
seleccionar el contenido ldquoHTMLContentrdquo
3 Defina el campo de ldquoTiacutetulordquo dar clic sobre el botoacuten ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 18
4 Se genera un contenido HTMLContent dar clic en el check box de ldquoActivordquo
5 Dar clic en el botoacuten de ldquoGuardarrdquo
6 Seleccionar la pestantildea ldquoEditar Versioacutenrdquo se enlistaraacuten las versiones del contenido por default se cuenta con la versioacuten ldquo1rdquo para ser editada dar clic sobre el icono de edicioacuten para acceder al editor del HTMLContent
7 Dentro del editor se introduce el contenido ya sea de modo HTML o texto que seraacute
visualizado en la paacutegina en el aacuterea de contenido terminando la edicioacuten dar clic
sobre el botoacuten de ldquoGuardarrdquo y para regresar al listado de versiones dar doble clic
sobre ldquoEditar Versioacutenrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 19
Consideraciones Importantes Para este ejemplo se utilizo el texto ldquoHola Mundordquo pero el editor HTMLContent cuenta con numerosas bondades requeridas para generar contenidos
Referencia Para maacutes informacioacuten del procedimiento de agregar contenidos diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Contenidosrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Resultado
El contenido ha sido agregado
Asignar una Plantilla HTML a la Paacutegina Web
Procedimiento
1 En la Paacutegina Web que se creoacute seleccionar la pestantildea ldquoPlantillasrdquo dar clic sobre el
botoacuten ldquoAgregar de listardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 20
2 Se mostraraacute el listado de Plantillas dar clic sobre la plantilla que se creoacute y dar un
clic sobre ldquoAgregar seleccionadosrdquo
3 Se mostraraacute la plantilla seleccionada dar clic en el check box de ldquoActivordquo
Consideraciones Importantes Las Paacuteginas Web descendientes de la principal heredaraacuten la plantilla dependiendo la herencia asignada Si una Paacutegina Web no tiene asignada una plantilla y se requiere visualizar desde el Web se generara un error 404
Resultado
De esta manera hemos asignado a la Paacutegina Web la Plantilla que se creoacute para poder visualizarla seleccionar la Paacutegina Web en el acordeoacuten de propiedades se mostrara el identificador de la ldquopaacuteginardquo como un link dar clic y mostraraacute la Paacutegina en la pestantildea de ldquoVista Previardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 21
Referencia Para maacutes informacioacuten del procedimiento de asignar Plantilla a Pagina Web diriacutejase al manual ldquoCreacioacuten y Administracioacuten de Plantillas para Presentacioacuten de Paacuteginas Webrdquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Menuacute (Componente de Estrategia)
Procedimiento
1 En ldquoCatalogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo dar clic
para que se muestren los componentes dar clic derecho sobre ldquoMenuacuterdquo el cual
mostrara un menuacute desplegable dar clic sobre ldquoAgregar Subtipo de Recursordquo
2 Se mostraraacute una ventana emergente donde se llenaran los campos de ldquoTiacutetulordquo e
ldquoIdentificadorrdquo dar clic sobre el botoacuten ldquoGuardarrdquo
3 ldquoAgregado de Subtipo de Recursordquo dar clic derecho mostraraacute un menuacute
desplegable dar clic sobre ldquoAgregar Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 22
4 Se mostraraacute una ventana emergente donde se definiraacute el campo con de ldquoTitulordquo
dar clic en el botoacuten de ldquoGuardarrdquo
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
5 Se mostraraacute la informacion del Recurso seleccionar el check box de ldquoActivordquo
6 Dar clic en el botoacuten deldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 23
Resultado
Se mostraraacute el Recurso ya activado
Agregar un Menuacute (Componente de Estrategia) a la Plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar doble clic en la Plantilla que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 24
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes seleccionar el Subtipo de Recurso que se
creoacute dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 25
Resultado Se mostraraacute el tag del recurso agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Generar un Banner (Componentes de Estrategia)
Procedimiento
1 En el ldquoCataacutelogo de Estructurardquo seleccionar ldquoComponentes de Estrategiardquo Se
mostraraacuten todos los componentes seleccionar ldquoBannerrdquo dar clic derecho
mostraraacute un menuacute desplegable y dar clic sobre ldquoAgregar Subtipo de Recursordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 26
2 Se mostraraacute una ventana emergente se llenaran campos con el nombre del ldquoTiacutetulordquo y el ldquoIdentificadorrdquo automaacuteticamente se crea al introducir el Tiacutetulo
3 Seleccionar el Subtipo de Recurso dar clic derecho mostraraacute un menuacute desplegable dar clic sobre ldquoAgregar Recursordquo
4 Se mostraraacute una ventana emergente donde se llenara campo dar clic en el botoacuten de ldquoGuardarrdquo
5 En el ldquoCatalogo de Estructurardquo dar clic al Recurso ya creado mostraraacute la informacion del Banner
6 Seleccionar el check box deldquoActivordquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 27
7 Dar clic en el botoacuten de ldquoGuardarrdquo
8 Seleccionar la pestantildea de ldquoAdministrarrdquo
9 Seleccionar el botoacuten de ldquoElegirrdquo y seleccionar el Banner
10 Dar clic en el botoacuten de ldquoGuardarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 28
Resultado
Se mostraraacute la imagen del Recurso agregado (Banner)
Agregar Componentes de Estrategia (Banner) a la Plantilla
Nota Siga el mismo procedimiento para asignar el recurso de estrategia a la plantilla
Procedimiento
1 En el ldquoCatalogo de Estructurardquo dar clic en la Plantilla (Principal) que se creoacute
2 Seleccionar la pestantildea ldquoEditar Plantillardquo
3 Dar clic en el icono de ldquoEditar Plantillardquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 29
4 Dar clic sobre el icono ldquoRecursordquo
5 Se mostraraacute todos los componentes del Recurso seleccionar Subtipo del Recurso
que se creoacute
6 Dar clic en el botoacuten de ldquoAceptarrdquo
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 30
Resultado Se mostraraacute el tag del Banner agregado en el coacutedigo seleccionar el icono de Guardar
Referencia Para maacutes informacioacuten sobre los Componentes de Estrategia diriacutejase al manual ldquoAdministracioacuten y Publicacioacuten de Componentes de Estrategiardquo en la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Visualizacioacuten de Paacutegina Web en un Navegador
Procedimiento
Si se desea visualizar en otra pestantildea o en otra ventana del Navegador
1 Seleccionar la Paacutegina Web creada ldquopaginardquo dar clic en ldquoPropiedadesrdquo mostraraacute un acordeoacuten de Propiedades
2 Dar clic derecho sobre el identificador ldquopaginardquo y seleccione abrir en una nueva pestantildea o en otra ventana depende del navegador que se esteacute usando seraacuten las opciones
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales
Procedimiento para la creacioacuten de un sitio web
Fecha de Elaboracioacuten Enero del 2012 INFOTEC CONACYT FIDEICOMISO 31
Resultado La Paacutegina Web se visualizara en un navegador con los componentes agregados
Referencia Para maacutes informacioacuten sobre los manuales diriacutejase a la siguiente ruta httpwwwsemanticwebbuilderorgmxesswbManuales