Portales Institucionales

Direccin General de Educacin Superior Tecnolgica

Jos Antonio Ortiz Corona Luis Alberto Lpez Gonz lez

Introduccin
En la actualidad, el uso de internet se ha hecho fundamental no solo para informarnos y comunicarnos, sino tambin para realizar un trmite o servicio de manera sencilla y en menor tiempo. De esta manera, los sitios web se convierten en el rostro digital de cada institucin, siendo un canal efectivo y estratgico tanto de comunicacin externa e interna.

or esta razn, la siguiente presentacin busca orientar a los !nstitutos "ecnolgicos #ue conforman a la $ubsecretar%a de Educacin $uperior sobre la imagen institucional #ue dicta la $ecretar%a de Educacin &blica, con la finalidad de lograr la unidad y la homologacin de sus sitios 'eb.

(abe se)alar #ue las siguientes instrucciones son dictadas por residencia de la *ep&blica en con+unto con la $ecretar%a de Educacin &blica, los linea!ientos o"iciales a#n no $an sido e!itidos%

Contenido
,. (olores -. "ipograf%a .. lantilla

/ondo.
Encabezado hotoslider (ontenido
(omponentes

ie de pgina
*edes $ociales /ooter

0. "emas generales

Colores

&% Colores

$on cuatro los colores institucionales #ue marca la Presidencia de la 'epublica1

De ahora en adelante los llamaremos colores institucionales de la residencia de la *epublica.

&% Colores (opcionales)

*+u sucede con los colores representati,os de los Institutos Tecnolgicos*espuesta1 2ctualmente 3octubre, -4,.5 se tiene autorizado el uso del color representativo de la institucin en los siguientes lugares de la plantilla1 6ogo del "ecnolgico. 7ombre del "ecnolgico. (olor de fondo de la barra del men& superior.

Tipogra".a

/% Tipogra".a
Soberana Titular% Esta fuente se encabezados, titulares, men&s y banners. emplea en

Soberana Sans% 6a "ipograf%a $ans comprende varios estilos, light, regular, blac8 y ultra. 9 son utilizados en los contenidos del sitio en general. Es recomendado emplear la variante regular, ya #ue se adecua para la legibilidad, no obstante, no hay normatividad #ue impida aplicar otra variante. 0 Adobe Caslon Pro y Tra1an se estn descontinuando.

/% Tipogra".a

-. "ipograf%a

-. "ipograf%a
@font-face ($$.: Es una regla ($$ #ue le permite descargar una fuente concreta de su ser,idor para hacer una pgina web si el usuario no tiene esa fuente instalada. Esto significa #ue los dise2adores 3eb ya no tendrn #ue cumplir con un determinado con+unto de fuentes web ;web safe< de #ue el usuario ha pre=instalado en su computadora.

-. "ipograf%a

*C!o "unciona 6o primero #ue haremos en nuestra ho+a de estilos es crear una declaracin #ue defina la fuente #ue vamos a utilizar1
?font=face @ font=family1 $oberana $ansA src1 url3BfontsB $oberana$ans=*egular.otf5 format3CopentypeD5A font=weight1 normalA E

$i la fuente en vez de ser "rue"ype 3.ttf5 fuera >pen"ype 3.otf5, pondr%amos ;opentype< en vez de ;truetype<

-. "ipograf%a
2hora #ue ya hemos definido la fuente podremos utilizarla como cual#uier otra fuente en nuestra ho+a de estilos1

body @ 12pt 16px 1em 100% bac8ground1 FfafafaA color1 F-/-/-/A font1 ,em G$oberana $ansG, (alibri, sans= serifA E

-. "ipograf%a
&% El proble!a legal.

Considerar
Internet E4plorer

/% El proble!a de la co!patibilidad. ?font=face es slo compatible con $afari, (hrome, /irefox y >pera.
"rue"ype o >pen"ype para $afari, (hrome, >pera o /irefox y otro E>" para Hicrosoft Explorer.

5"ont6"ace lo soporta Internet E4plorer desde su ,ersin 7

E!bedded Open T8pe (%eot)

-. "ipograf%a
?font=face @ font=family1D$oberana $ansDA BI ara !nternet Explorer IB src1 url 3JB fonts B $oberana$ans=*egular.eotJ5A BI:: ara el resto de navegadores IB src1 url 3GBfontsB $oberana$ans=*egular.otfG5 format3GopentypeG5A font=weight1 normalA font=style1 normalA E

E1e!plo donde se inclu8en las "uentes9

?charset Gutf=KGA ?font=face @ font=family1 C$oberana "itularDA src1 url3BfontsB$oberana"itular=*egular. eot5A src1 url3BfontsB$oberana"itular=*egular.otf5.format3GopentypeG5A font=weight1 normalA E ?font=face @ font=family1 C$oberana "itular LoldDA src1 url3BfontsB$oberana"itular=*egular. eot5A src1 url3BfontsB$oberana"itular=Lold.otf5 .format3GopentypeG5A font=weight1 normalA E ?font=face @ font=family1 C$oberana $ansDA src1 url3BfontsB$oberana$ans=*egular.eot5A src1 url3BfontsB$oberana$ans=*egular.otf5 .format3GopentypeG5A font=weight1 normalA E ?font=face @ font=family1 C$oberana $ans !talicDA src1 url3BfontsB$oberana$ans=!talic.eot5A src1 url3BfontsB$oberana$ans=!talic.otf5 .format3GopentypeG5A font=weight1 normalA E ?font=face @ font=family1 C$oberana $ans LoldDA src1 url3BfontsB$oberana$ans=Lold.eot5A src1 url3BfontsB$oberana$ans=Lold.otf5 .format3GopentypeG5A font=weight1 normalA E

CO:;E'TIDO'ES DE <=E:TES O:LI:E

/ont $#uirrel converter

ermite subir un archivo en un formato y descargar un archivo zip con la fuente en diferentes formatos incluyendo woff, eot, ttf y svg.

Online <ont Con,erter

afm bin cff dfont otf pfa pfb pfm ps pt. suit svg t0- tfm ttc ttf woff

'e"erencia del uso de la regla 5"ont6"ace

>?C CSS? 3or@ing dra"t

Mn excelente documento del '.( = royecto de especificacin de ? font=

Aozilla (<ire"o4 ) blog

>eb"onts%in"o

"ontsBuirrel%co!

Culletproo" 5"ont6"ace s8nta4

Plantilla

?% Plantilla
<ondo El color de "ondo autorizado para los portales institucionales es un gris !u8 claroD cu8o ,alor $e4adeci!al es9

E<A<A<A
:o se puede usar ning#n otro color o i!agen de "ondo%

?% Plantilla
Encabezado
E1e!plo del Portal de la Presidencia de la 'epublica

Logo Presidencia

Cabezal

Aen# superior

?% Plantilla
Encabezado
E1e!plo del Portal de la Secretar.a de Educacin P#blica

Logo SEP

Cabezal

Aen# superior

?% Plantilla
Logo SEP

Encabezado (colores institucionales)

E1e!plo de un Instituto Tecnolgico <ederal

:o!bre IT

Cabezal

Aen#

Logo DGEST Logo

?% Plantilla
Logo SEP

Encabezado (colores representati,os)

institucionales

:o!bre IT

Cabezal

Aen#

Logo DGEST Logo

?% Plantilla

Encabezado (colores institucionales)

E1e!plo de un Instituto Tecnolgico Descentralizado

Logo Estado :o!bre IT Logo SEP Cabez al

Aen#

Logo Logo DGEST ITS<CP

?% Plantilla

Tipogra".a para el encabezado

Soberana Titular &G pts

Soberana Sans 'egular (!a8#sculas) &/ pts

Soberana Titular

?% Plantilla
Ta!a2os

Alto total9 &GI p4

Cabezal Alto9 ?J p4 Aen#9 Alto9 7I p4

Anc$o total9 HGI p4

Logos al GIK ?% Plantilla Ta!a2os Sello :acional de Logo SEP alto Anc$o /JI Alto GI p4 p4

Separador9 Anc$o

Logos 8 no!bre9

?% Plantilla
<or!a

Logos en la !is!a l.nea

Si el no!bre del tecnolgico es !u8 largo para el espacioD pasar a partir de la con1uncin LdeM a la segunda l.nea

A 4i!o N ele!entos en el

?% Plantilla
Cabezal

Noogle

Nob.m 'ecursos9 x O%a $E ropio Luscad or del (H$

Aen# del cabezal

Cuscador

?% Plantilla
Aen# del cabezal
Presidencia SEP Institutos Tecnolgicos (propuesta) !nicio !nstitutos "ecnolgicos Hapa del sitio (ontacto Luscador I PPPPPPPP>trosPPPPPPP P English lug in Directorio *$$ I obligatorio

English (ontacto Directorio

!nicio lug in *ecomienda este ortal Hapa del $itio *$$ English

?% Plantilla
Aen# Superior

El !en# lo de"inir cada Tecnolgico con base en sus necesidades

?% Plantilla

Aen# Superior con sub!en# desplegable

Degradado de E<A<A<A a EAEADC?

?% Plantilla

P gina Inicial LPortadaM

encabezado F p$otoslider F contenido F pie de p gina

P$otoslider

?% Plantilla

Obligato rio en p gina inicial

?% Plantilla
P$otoslider
Con base en la gu.a b sica 3eb los contenidos Bue se pueden colocar en el co!ponente son9 7otas principales, convocatorias, eventos, comunicados relevantes, entre otrosA con el fin #ue sobresalgan dentro del sitio.

Contenido (Presidencia de la 'epublica)

?% Plantilla
Presidencia A dos colu!nas

Contenido (SEP)

?% Plantilla

?% Plantilla
Contenido
*+u co!ponentes se pueden usar en el contenidoLos co!ponentes autorizados son9 &% Co!ponente de noticia

. . . .

T.tulo en Soberana Titular 8 ro1o institucional Pre,ie3 de noticia en Soberana SansD en gris obscuro Cintillo con "ec$a co!o se !uestra LEE' AOS en Soberana Sans (!a8#sculas)D estilo co!o se !uestra%

?% Plantilla
Contenido
/% Canner !dular9 /GJ4&?I p4 (! 4i!o)

. <uente Soberana Sans 'egular . Encabezado en !a8#sculas 8 !in#sculas . Palabra cla,e en !a8#sculas . Degradado co!prendido en el rango del gris claro 8 el E<A<A<A

?% Plantilla
Contenido
?% Agenda9 /GJ4&?I p4 (! 4i!o)

?% Plantilla
Contenido
7% Canner deslizable

. T.tulos en Soberana Titular . Te4tos en Soberana Sans . El ta!a2o se adecua al dise2o del Portal (deber se usa) E1e!% &IIK / de ? colu!nas resaltar si

?% Plantilla
Contenido
J% Carrusel

&IIK

A.ni!o P ele!entos para Bue "uncione la &7J4/&I p4 barra de

?% Plantilla
Contenido
J% Carrusel (e"ectos)

onAouseO,er Transparencia en negro

&J p4

NJ p4

?% Plantilla
Al P.e de p gina

Aen# in"erior Cop8rig$t A,iso de Pri,acidad <ooter

?% Plantilla
Aen# in"erior

El !en# lo de"inir cada Tecnolgico

?% Plantilla
Logo de la SEP

<ooter (obligatorio)

L.neas

Adulo Social en color gris

Do!icilio 8

?% Plantilla
Aen# in"erior

//I p4 NI p4

<aceboo@ 8 T3itter obligatorio (icono de

?% Plantilla

Otras p ginas con contenido

Encabezado F contenido F pie de p gina

:ota con contenido a dos colu!nas (blog) Presidencia

Contenido a dos colu!nas F !en# derec$o SEP

Te!as generales

Plantilla
'eco!endaciones en el QTAL RQTAL (,alidado con las $erra!ientas de la >?C )

QRD>("9 E html ML6!( G=BB'.(BBD"D ST"H6 ,.4 "ransitionalBBE7G Ghttp1BBwww.w..orgB"*Bxhtml,BD"DBxhtml,=transitional.dtdGU Qhtml xmlnsVGhttp1BBwww.w..orgB,WWWBxhtmlG xml1langVGes=mxG langVGes=mxG U

QTALJ QRdoctype htmlU

Plantilla
'eco!endaciones en el QTAL ST$eadU V
Qmeta nameV;authorG contentV;< BU Qmeta nameVGdescriptionG contentVG< BU Qmeta nameVG8eywordsG contentV;< BU Qlin8 relVGshortcut iconG mediaVGallG typeVGimageBx=iconG < BU V hrefV;favicon.ico

ST$eadU

=so de I!age Sprites

Es una coleccin de imgenes colocadas en una simple imagen1 Mna pgina web con muchas imgenes puede tardar mucho tiempo en cargarse y genera m&ltiples peticiones al servidor. Msando sprites imagen se reducir el n&mero de peticiones al servidor y ahorrar ancho de banda.

I!age Sprites

($$ more=lin8 @ bac@ground9 url(Wi!gTsprites%pngW) no6repeatX color1 FffffffA display1 bloc8A font1 ,,pxB-Wpx serifA height1 .XpxA text=align1 centerA text=transform1 uppercaseA E .more=lin8 @ 3idt$9 &&Gp4X E .more=lin8 @ bac@ground6position9 67&?p4 6N&p4X T"H6 Qa hrefVGFG classVGmore=lin8GUOer galer%aQBaU

bac@ground6position9 67&?p4 6N&p4X

Qerra!ientas para realizar sprites

P$otoslider
E1e!plo del Portal de la Presidencia de la 'ep#blica
Desplazamiento Torizontal "%tulo de la !magen

E1e!plos de P$otoslider

css6tric@s

Casic 1+uer8 Slider

'esponsi,eSlides%1s ,&%J7

Qerra!ientas para la a8uda en el dise2o de la p gina

lugin de 7avegadores
Hozilla

(hrome

'esponsi,e >eb Design (Dise2o 3eb adaptati,o)

Es cuando el dise)o de la pgina web ;responde< o se adapta a las dimensiones de la pantalla en la #ue se est mostrando. Mn sitio web desarrollado con esta tcnica mide la altura y la anchura del rea, y a+usta el dise)o de la pgina para adaptase al rea de visualizacin apropiadamente.

Algunas ,enta1as
,. (orrecta visualizacin en cual#uier dispositivo. -. 2gradable navegacin para el usuario. .. reparado para el futuro. 0. /avorese el posicionamiento en buscadores.

Co!pro!iso para todos

El primero de enero de -4,0 es la fecha l%mite para la implementacin de la identidad grfica del Nobierno de la *epublica.

G'ACIAS

Yos 2ntonio antonio.ortiz?itcelaya.edu.mx 6uis 2lberto 6pez Nonzlez luislao?itcelaya.edu.mx

>rtiz

(orona