Ir al contenido Ir al menú de navegación

## ¿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

1. Descargar e instalar Node.js en su computadora.

2. Descargar los archivos fuente para Portales Institucionales

3. Moverse al directorio nuevo desde la línea de comandos e instalar dependencias escribiendo:
   `npm install`

4. Para comenzar a desarrollar escribir:
   `grunt dev`

Se abrirá una pestaña en su navegador con un servidor local http://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