Gua para uso de la plantilla web

Portal web de la Universidad Nacional de Colombia

1 / 11
Gua para uso de la plantilla del nuevo portal web de la UN
A continuacin se incluye una lista de los pasos que se detallarn en la presente gua.
1 Descargar la plantilla institucional 3
2 Ttulo del sitio o pgina web 3
3 Etiqueta BASE 3
4 Congurar la direccin URL 3
5 Congurar accesos directos 4
6 Congurar redes sociales 5
7 Congurar la imagen de fondo del men 6
8 Congurar la miga de pan 6
9 Congurar el men principal 7
10 Conguracin de servicios 8
11 Agregar direccin, telfonos y/o extensin 9
12 Agregar correo electrnico y crditos 9
13 Establecer hora de actualizacin 10
A manera de gua visual, tambin se incluye una captura de pantalla de la pgina inicial de la universidad,
junto con indicadores que sealan las reas que se modicarn. Tenga en cuenta que en esta gua visual no
se incluyen todos los parmetros, la lista completa se encuentra en la lista de la parte superior. Puede hacer
click en los textos de esta imagen para ir a la seccin correspondiente.
2 / 11
Gua para uso de la plantilla del nuevo portal web de la UN
4: Congurar la direccin URL
5: Congurar accesos directos
9: Congurar el men principal
6: Congurar redes sociales
10: Conguracin de servicios
7: Congurar la imagen de fondo del men
11: Agregar direccin, telfonos y/o extensin
12: Agregar correo electrnico y crditos
13: Establecer hora de actualizacin
3 / 11 Aspectos iniciales
Gua para uso de la plantilla del nuevo portal web de la UN
Aspectos iniciales
Debe tener en cuenta estos pasos para preparar la plantilla que utilizar para elaborar su sitio web. De esta
manera, su sitio web podr integrarse coherentemente dentro de la nueva estructura de las plantillas para el
portal web de la Universidad Nacional de Colombia.
Paso1. (Descargar la
plantilla institucional)
Ingrese a la pgina web http://www.plantillasweb.unal.edu.co/, e ingrese su
nombre de usuario y contrasea de la universidad. Una vez registrado, descargue la
plantilla que desea y descomprima el archivo que ha descargado en la ubicacin que
elija para empezar a trabajar. Abra el archivo index.html con el editor de cdigo de su
preferencia.
Paso2. (Ttulo del si-
tio o pgina web)
Cambie el ttulo de la pgina al de la pgina o sitio web que crear, siguiendo la
estructura de ttulos para la web de la UN. Reemplace Ttulo de la pgina o sitio web
(el texto marcado en color en el siguiente recuadro) en el cdigo HTML de su archivo
index.html.
<title>Ttulo de la pagina o sitio web: Universidad Nacional de
Colombia</title>
Paso3. (Etiqueta BA-
SE)
Modique la direccin URL base de su sitio web en el cdigo HTML de la plantilla. La
etiqueta base especica la direccin URL base para todas las URL relativas dentro de su
sitio o pgina web. De nuevo, en el siguiente recuadro se muestra este texto en color.
<base href="url del sitio web">
Paso4. (Congurar la
direccin URL)
Congure la pgina para que su manejador de contenidos (CMS) muestre la direccin
de su sitio web en la seccin destinada para ello (el <div> de clase site-url). Este texto
debe servir como enlace a su sitio web, por lo que debe encerrarse en una etiqueta a:
<div class="site-url">
<div class="icon"></div>
<a href="url del sitio web">url del sitio web</a>
</div>
En caso de que su manejador de contenidos no pueda realizar esta funcin, deber
editar este campo en el cdigo HTML.
4 / 11 Aspectos iniciales
Gua para uso de la plantilla del nuevo portal web de la UN
Paso5. (Congurar ac-
cesos directos)
Se denominan accesos directos a los enlaces a las pginas por tipo de usuario ubicadas
en la barra superior hacia la derecha, junto a los enlaces a redes sociales. Si administra
un sitio web de una sede, debe dejar estos enlaces dentro de la plantilla para su sitio
web. De lo contrario, puede eliminar estos accesos (si el sitio web que administra no
tiene pginas o sub-sitios web dedicados a perles de usuario) o modicarlos, segn
corresponda.
Para eliminarlos, localice dentro del cdigo HTML la etiqueta <nav> que tiene como
clases collapse y navbar-collapse, y brrela junto con su contenido (marcada en el
siguiente ejemplo de cdigo con el asterisco de color rojo):
<header id="unalTop">
<div class="firstMenu">
<div class="navbar-default">
<nav class="collapse navbar-collapse">*
<ul class="nav navbar-nav">
<!-- ...tems de los accesos directos... -->
</ul>
</nav>
</div>
</div>
</header>
Los tems de estos menes se componen de etiquetas <li>, que contienen enlaces
<a>. Cada <li> est identicado con una clase:
<ul class="nav navbar-nav">
<li class="item_Aspirantes"></li>
<li class="item_Estudiantes"></li>
<li class="item_Egresados"></li>
<li class="item_Docentes"></li>
<li class="item_Administrativos"></li>
</ul>
Puede personalizar cada tem para que apunte a la direccin que especique (un
espacio en su sitio web dedicado a un perl de usuario). Por ejemplo, para el caso de
Estudiantes:
<ul class="nav navbar-nav">
<li class="item_Estudiantes">
<a target="_top" href="Direccin URL de la pgina o sub-sitio
web">Estudiantes</a>
</li>
</ul>
5 / 11 Aspectos iniciales
Gua para uso de la plantilla del nuevo portal web de la UN
Paso6. (Congurar re-
des sociales)
Si su sitio web tiene uno o ms perles en redes sociales, puede incluirlos como parte
del encabezado de la pgina (en la esquina superior izquierda). De no ser as, puede
omitir este paso.
Se ha establecido que esta rea puede incluir mximo tres (3) enlaces, con el propsito
de mantener la maquetacin de la pgina a travs de todas las resoluciones de pantalla.
Dentro de la etiqueta <header>, localice una lista <ul> que tiene nombre de clase
socialLinks:
<header id="unalTop">
<div class="buscador contentSearch"></div>
<ul class="socialLinks">
<!-- ...Enlaces a redes sociales... -->
</ul>
</div>
</header>
All encontrar ejemplos para enlaces a cuentas de Facebook, Twitter y RSS. Puede
modicarlos en los campos indicados, o incluir las redes que desee (sin exceder el
lmite de tres enlaces a redes sociales). Por ejemplo, para incluir un enlace a Twitter:
<ul class="socialLinks">
<li>
<a class="twitter" title="Ttulo de la cuenta" target="_blank"
href="https://twitter.com/Cuenta_de_Twitter"></a>
</li>
</ul>
Para Facebook, dispone de una estructura similar:
<ul class="socialLinks">
<li>
<a class="facebook" title="Ttulo de la cuenta" target="_blank"
href="http://www.facebook.com/Cuenta_de_Facebook"></a>
</li>
</ul>
De igual manera, para un canal de suscripcin RSS existe la misma estructura:
6 / 11 Aspectos iniciales
Gua para uso de la plantilla del nuevo portal web de la UN
<ul class="socialLinks">
<li>
<a class="rss" title="Ttulo del canal RSS" target="_blank"
href="Direccin del canal o feed RSS"></a>
</li>
</ul>
Tenga en cuenta que si el sitio web que administra no tiene ninguna cuenta en redes
sociales, debe dejar los enlaces que se incluyen en la plantilla, pues son las cuentas
nacionales ociales de la universidad.
Paso7. (Congurar la
imagen de fondo del me-
n)
Dentro de la plantilla suministrada encontrar una imagen de fondo del men principal
de la pgina, que puede personalizar. sta imagen se encuentra contenida en un div
que tiene como nombre de clase home-image:
<body class="row-offcanvas row-offcanvas-right">
<div class="home-image">
<img width="2000" height="80" border="0" alt="" src="Ruta a la
imagen"></img>
</div>
</body>
La imagen suministrada tiene como nombre de archivo img_demo.jpg, que si desea
puede reemplazar por su propia imagen; o bien, reemplazar la ruta en el documento
HTML por otra ubicacin. En ambos casos, dicha imagen debe estar en formato JPG y
debe pesar menos de 100 kB. Como dimensiones mnimas, debe medir 1250 pixeles de
largo por 50 pixeles de alto; sus dimensiones siempre deben conservar una relacin
de 25:1.
Paso8. (Congurar la
miga de pan)
Congure la pgina para que su manejador de contenidos (CMS) integre un sistema
de miga de pan (el que le indica al usuario la ruta en la que se encuentra dentro del
rbol de navegacin), que en el cdigo se encuentra en el <div> que tiene como clase
breadcrumb-class.
7 / 11 Aspectos iniciales
Gua para uso de la plantilla del nuevo portal web de la UN
<div class="breadcrumb-class">
Est en:
<a title="Inicio" target="_self" href="http://unal.edu.co/"></a>
/
<a title="Seccin" target="_self" href="Direccin de la
seccin">Seccin</a>
/
<b>Pgina"</b>
</div>
Asegrese de no modicar el enlace de la pgina inicial de la universidad, ni los parme-
tros target="_self" de los enlaces. Tambin, verique que la miga de pan que integre
utilice los estilos que se suministran con la plantilla institucional. Si no administra su
sitio web con un manejador de contenidos, debe editar las rutas de la miga de pan en
su cdigo HTML.
Paso9. (Congurar el
men principal)
Dentro de la etiqueta <header> (con id unalTop) se encuentra un <div> identicado
con la clase navbar-, que contiene el men principal:
<header id="unalTop">
<div class="navigation">
<div class="navbar-">
<!-- ...tems del men... -->
</div>
</div>
</header>
All puede agregar los tems que desee para el men de su sitio web (los identicados
con clase btn-group). Si desea, puede remover el men La Universidad; el men Se-
des debe estar incluido en todas las pginas web y se considera parte de la plantilla
institucional, por tanto no debe ser borrado.
Para integrar su men principal dentro del men de la plantilla puede guiarse por la
siguiente estructura, que corresponde a un tem del men que contiene un subtem:
8 / 11 Aspectos iniciales
Gua para uso de la plantilla del nuevo portal web de la UN
<div class="navbar-">
<div class="btn-group">
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Ttulo del men
</div>
<span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a target="_self" href="Direccin a la que apuntar el tem del
men">Ttulo del tem del men</a>
</li>
</ul>
</div>
</div>
Si desea, puede desplazar el tem de men Sedes a la derecha mediante la hoja de
estilos CSS de su sitio web, para que el margen derecho de este tem quede alineado
con la barra de bsqueda. Un ejemplo de esta adaptacin lo puede ver en el sitio web
rendiciondecuentas.unal.edu.co.
Paso10. (Congura-
cin de servicios)
Para agregar servicios en el men lateral, ubique el <div> con id services dentro del
cdigo HTML. All encontrar una lista <ul>, cuyos nodos <li> corresponden a los
tems del men de servicios.
<div id="services">
<ul>
<li>
<img width="32" height="32" alt="">Ruta al cono del servicio</img>
<a target="_top" href="">Nombre del servicio</a>
</li>
</ul>
</div>
Los tems <li> que estn ubicados all hacen parte de la plantilla institucional, y no
deben ser eliminados o modicados. Si desea agregar ms servicios, puede ubicarlos
debajo del ltimo nodo <li> de esa lista.
Si necesita un cono nuevo para su servicio, puede disearlo en base a la retcula que
se otorga junto con la plantilla, teniendo en cuenta la lnea grca que se ha planteado
para la iconografa. Asegrese de no modicar el tamao o posicin del mismo dentro
del cdigo.
En cuanto a la etiqueta <a> (el enlace al servicio), no debera modicar el parmetro
target="_top". No utilice nombres largos para los nombres de los servicios.
9 / 11 Datos de la pgina
Gua para uso de la plantilla del nuevo portal web de la UN
Datos de la pgina
Los campos para datos de contacto de su sitio web se encuentran en el pie de pgina de la plantilla, en la
seccin ubicada en el medio (entre la columna de0 enlaces institucionales y la de los enlaces estatales y de
Agencia de Noticias). Los datos de esta seccin debe sustituirlos por sus datos (direccin, correo electrnico
y extensin telefnica, en caso de tenerla) para que los visitantes de su pgina web puedan comunicarse en
caso de requerirlo.
Paso11. (Agregar di-
reccin, telfonos y/o ex-
tensin)
Localice un <p> con clase bodytext anidado en algunos <div> dentro de la etiqueta
del pie de pgina, <footer>.
<footer>
<div class="row">
<div class="col-md-4 footer-info col-lg-4 col-sm-4 col-xs-12">
<div id="c30" class="csc-frame csc-frame-indent">
<p class="bodytext">
<!-- ...Datos de contacto de su pgina web... -->
</p>
</div>
</div>
</div>
</footer>
Dentro de ese nodo <p> encontrar la siguiente estructura. Recuerde que los textos
en color son los que debe editar, en concreto la direccin, nombre del edicio u ocina,
ciudad, el indicativo de ciudad para el nmero telefnico (por ejemplo 1 para Bogot,
2 para Cali, 4 para Medelln, etctera); el numero telefnico en s y, en caso de haber,
el nmero o nmeros de extensin telefnica.
<p class="bodytext">
<b>Contacto pgina web:<br></br></b>
Direccin
<br></br>
Edificio - Oficina
<br></br>
Ciudad, Colombia
<br></br>
(+57 Indicativo de ciudad)Telfono ext. Extensin
</p>
Paso12. (Agregar co-
rreo electrnico y cr-
ditos)
Dentro del mismo <div> etiquetado con las clases col-md-4, footer-info. col-lg-4,
col-sm-4 y col-xs-12, existe otro <div> con clases csc-frame y csc-frame-indent,
10 / 11 Datos de la pgina
Gua para uso de la plantilla del nuevo portal web de la UN
pero sin id. ste tambin contiene un <p> con clase bodytext, que contiene los enlaces
al correo electrnico del webmaster y el de la pgina de crditos.
<footer>
<div class="row">
<div class="col-md-4 footer-info col-lg-4 col-sm-4 col-xs-12">
<div class="csc-frame csc-frame-indent">
<p class="bodytext">
<!-- ...Correo del webmaster y pgina de crditos... -->
</p>
</div>
</div>
</div>
</footer>
All existe la siguiente estructura HTML. La pgina de crditos puede crearla y disearla
usted mismo, y enlazarla al texto indicado aqu.
<p class="bodytext">
Copyright Ao
<br></br>
Algunos derechos reservados.
<br></br>
<a class="mail" title="Ttulo del enlace" href="mailto:Direccin del
correo electrnico">Direccin del correo electrnico</a>
<br></br>
<a class="internal-link" target="_blank" title="Acerca de la web de Su
sitio web" href="Direccin de su pgina de crditos">Acerca de este sitio
web</a>
</p>
Paso 13. (Establecer
hora de actualizacin)
El ltimo paso es establecer la fecha y hora de la ltima actualizacin de su sitio
web. Para ello, ubique el mismo <div> de clases csc-frame y csc-frame-indent que
contena los elementos que edit en el paso 12 (Agregar correo electrnico y crdi-
tos). ste div tambin contiene un rea dispuesta para la fecha y hora de la ltima
actualizacin, una etiqueta p contenida en un div con id c145 y de clase csc-default:
<div class="csc-frame csc-frame-indent">
<div id="c145" class="csc-default">
<p>
<!-- ...Fecha y hora de actualizacin... -->
<p>
</p>
</div>
11 / 11 Datos de la pgina
Gua para uso de la plantilla del nuevo portal web de la UN
Congure su manejador de contenidos (o CMS) para que incluya la fecha y hora de la
ltima actualizacin de su sitio web en este espacio.