¿Cómo funciona?

Uso Básico

Descargar el paquete de HTML, CSS y JavaScript de Portal Tipo compilado:

Descargar todos los paquetes de Portal Tipo (.zip 1.44 MB)

Luego de extraer el archivo zip se obtendrá la siguiente estructura de directorios:

portal-tipo/
├── dist/
│   ├── assets/
│   ├── css/
│   └── js/
├── formatos/
├── contenidos/
└── index.html

formatos/ incluye todas las páginas de formatos de contenido
contenidos/ incluye todas las páginas de contenidos mínimos
dist/ incluye los archivos base de CSS, JavaScript y un conjunto de íconos e imágenes (assets/)

Para crear sus propios estilos agregar a la raíz de su proyecto un nuevo archivo CSS.

Importante: Los archivos de la carpeta dist/ no deberían modificarse

Carpeta `dist/`

dist/
├── assets/
│   ├── icons/
│   ├── logo-uruguay.svg
│   └── logo-uruguay.png
├── css/
│   ├── portal-tipo.css
│   ├── portal-tipo.css.map
│   ├── portal-tipo.min.css
│   └── portal-tipo.min.css.map
└── js/
    ├── vendor/
    │   ├── jquery.min.js
    │   └── polyfills.js
    ├── portal-tipo.js
    └── portal-tipo.min.js

Los archivos portal-tipo.css y portal-tipo.js se incluyen también en su versión minificada
Es recomendable usar archivos minificados para reducir el tamaño y tiempos de carga
Se inlcuye jQuery v1.12.4 (última versión con compatibilidad para IE8)
js/vendor/polyfills.js contiene scripts que solucionan problemas de compatibilidad (con IE8 principalmente). Los scripts son los siguientes:
html5shiv: soporte de HTML5
REM-unit-polyfill: soporte de unidad rem
Respond: soporte de CSS3 media queries
Selectivizr: soporte de pseudo clases CSS3 y selectores de atributos

Estructura básica de HTML

<!DOCTYPE html>
<html class="no-js" lang="es">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Su Portal</title>

  <link rel="stylesheet" href="/dist/css/portal-tipo.css">
  <link rel="stylesheet" href="/css/custom.css">

  <link rel="shortcut icon" type="image/ico" href="/favicon.ico">

  <!--[if lt IE 9]>
    <script src="dist/js/vendor/polyfills.js"></script>
  <![endif]-->
</head>
<body>
  <a class="SkipLink" href="#contenido">Ir al contenido</a>

  <!-- contenido -->

  <script src="/dist/js/vendor/jquery.min.js"></script>
  <script src="/dist/js/portal-tipo.min.js"></script>
</body>
</html>

Uso avanzado

Se requiere Node.js para compilar el código fuente de Portal Tipo:

Se utiliza Sass, PostCSS para generar CSS y Assemble, Handlebars para generar las páginas HTML
El código fuente se encuentra en la carpeta src/ que luego genera la carpeta build/
Para realizar todas las tareas de compilación se utiliza Grunt.js

Desarollar

Descargar e instalar Node.js en su computadora.
Descargar los archivos fuente para Portales Institucionales
Moverse al directorio nuevo desde la línea de comandos e instalar dependencias escribiendo:
npm install
Para comenzar a desarrollar escribir:
grunt dev

Se abrirá una pestaña en su navegador con un servidor local https://localhost:1903/ y los cambios en los archivos se verán automáticamente reflejados.

Otros comandos de Grunt

`grunt dist`

Genera solamente la carpeta dist/.

`grunt build`

Compila CSS, minifica los archivos, compila las páginas HTML y genera todo el contenido del paquete de Portal Tipo disponible para descargar.

`grunt dev`

Realiza las mismas tareas que grunt build y además abre un servidor local