Ink

Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & developers. - ink.sapo.pt

Uso

Accede al directorio (crealo de ser necesario) $HOME/www y crea el directorio ink01:

 alumno@servidor:~ $ cd $HOME/www
 alumno@servidor:~/www $ mkdir ink01
 alumno@servidor:~/www $ cd ink01

Accede a http://ink.sapo.pt, descarga el archivo en formato zip ofrecido y descomprimelo:
```
 alumno@servidor:~/www/ink01 $ unzip $HOME/Downloads/ink-3.1.10.zip
```
En este caso se ha descargado a Ink en su versión 3.1.10 (ink-3.1.10.zip) en el directorio $HOME/Downloads.

El archivo zip ofrecido por Ink cuenta con varios recursos para su uso: archivos de CSS, JavaScript, Web Fonts, etc. Lo anterior conlleva a que ya cuentan con una estructura sus directorio/archivos y será necesario restructurarlos:
```
 alumno@servidor:~/www/ink01 $ pwd && tree -L 2
 /home/alumno/www/ink01
 .
 └── ink-3.1.10
     ├── cookbook
     ├── css
     ├── fonts
     ├── icon.png
     ├── img
     ├── js
     └── presskit

 7 directories, 1 file
```

Restructura los archivos ofrecidos por Ink:

 alumno@servidor:~/www/ink01 $ mv ink-3.1.10/css .
 alumno@servidor:~/www/ink01 $ mv ink-3.1.10/fonts .
 alumno@servidor:~/www/ink01 $ mv ink-3.1.10/icon.png .
 alumno@servidor:~/www/ink01 $ mv ink-3.1.10/img .
 alumno@servidor:~/www/ink01 $ mv ink-3.1.10/js .

Corrige los permisos de los archivos/directorios:

 alumno@servidor:~/www/ink01 $ find . -type d -exec chmod 755 {} \;
 alumno@servidor:~/www/ink01 $ find . -type f -exec chmod 644 {} \;

Crea el archivo index.html con el siguiente contenido:

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>ink01</title>
     <meta name="description" content="">
     <meta name="author" content="">
     <meta name="HandheldFriendly" content="True">
     <meta name="MobileOptimized" content="320">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <link rel="shortcut icon" href="img/favicon.ico">
     <link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
     <link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png"> 
     <link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
     <link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">
     <link rel="apple-touch-startup-image" href="img/splash.320x460.png"
       media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
     <link rel="apple-touch-startup-image" href="img/splash.768x1004.png"
       media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
     <link rel="apple-touch-startup-image" href="img/splash.1024x748.png"
       media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
     <link rel="stylesheet" type="text/css" href="css/ink-flex.min.css">
     <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
     <!--[if lt IE 9 ]>
       <link rel="stylesheet" href="css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
     <![endif]-->
     <script type="text/javascript" src="js/modernizr.js"></script>
     <script type="text/javascript">
       Modernizr.load({
         test: Modernizr.flexbox,
         nope : 'css/ink-legacy.min.css'
       });
     </script>
     <script type="text/javascript" src="js/holder.js"></script>
     <script type="text/javascript" src="js/ink-all.min.js"></script>
     <script type="text/javascript" src="js/autoload.js"></script>
   </head>
   <body>
     <!--[if lte IE 9 ]>
     <div class="ink-alert basic" role="alert">
       <button class="ink-dismiss">&times;</button>
       <p>
         <strong>You are using an outdated Internet Explorer version.</strong>
         Please <a href="http://browsehappy.com/">upgrade to a modern browser</a> to improve your web experience.
       </p>
     </div>
     -->
     <!-- CONTENIDO -->
     <!-- /CONTENIDO -->
   </body>
 </html>

Notas:

El contenido de tu documento HTML, y que será visualizado por el usuario, quedará dentro de los comentarios CONTENIDO.
Si requieres modificar el aspecto visual o estilo de algún elemento HTML lo podrías llevar a cabo en el archivo css/main.css. Recuerda que tendrás que hacer uso de selectores de CSS.
El directorio ink-3.1.10 puede ser borrado.

Al terminar en el directorio $HOME/www/ink01 encontrarás la siguiente estructura:

alumno@servidor:~/www/ink01 $ pwd && tree
/home/alumno/www/ink01
.
├── css
├── fonts
├── icon.png
├── img
├── index.html
├── ink-3.1.10
└── js

5 directories, 2 files