UP | HOME |

Creación de una página de inicio para un servidor web

Creación de una página de inicio para un servidor web

Cuando un navegador de internet accede a un sitio web aparece la página de inicio del dominio por defecto.

Diseño de una página de inicio: más pixeles de información que de decoración
Visual explanations, Edward Tufte

Si se comparte una carpeta a través de apache se visualiza todo el contenido de la misma, salvo que exista un fichero index.html o index.php en dicho directorio. Este comportamiento se modifica mediante DirectoryIndex de /etc/apache2/apache2.conf.

El centón de un enano consta de un índice que se actualiza automáticamente a medida que se añaden artículos. Sigue las recomendaciones de Edward Tufte, que reproducimos a continuación.

Encuentre un diseño convencional con un buen diseño, que incluya abundante información de un vistazo. No sea original sino obtenga una página funcional. Dedique la mayor superficie de la pantalla a informar al usuario, no a logotipos, cargos administrativos o asuntos secundarios. Promueva su información, no su institución. Muestre en la página de inicio al menos doscientos enlaces, tal como hacen numerosos portales de internet. Por ejemplo el Arts & Letters Daily cuenta con seiscientos enlaces en una misma pantalla. […] Evite las representaciones en tres dimensiones de material que no sea en realidad de tres dimensiones. A menudo inunda la pantalla esa representación, en vez de la información. Además esa representación puede confundir la navegación.

Sugiere que en el visor ha de haber más pixeles de información que de decoración.

El código de la sección siguiente detalla un ejemplo de fichero index.html creado desde cero. Incluye un código de verificación del buscador de google con codificación utf-8 y ajuste al tamaño de la pantalla donde se visualice (pantalla grande, chica o diminuta). Añade los formatos css para una visualización amena e incluye una opción de búsqueda con DuckDuckGo.

Para evitar la correspondencia no deseada existen diversas formas de presentar el correo electrónico. En el código inferior se ha codificado el correo electrónico siguiendo estas indicaciones y estas otras para escribir al estilo Leonardo da Vinci. Sin embargo, al final se ha optado por evitar la inclusión de código ejecutable tipo Javascript. La visualización actual del fichero se muestra aquí.

Código

<html>
  <head>
    <meta name="google-site-verification" content="947pNu0OUyWWS2YjiffY1g244mfJgrPyCkJwChRcBSc" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' type='text/css' href='centon/css/htmlize.css' />
    <link rel='stylesheet' type='text/css' href='centon/css/readtheorg.css' />
    <title>Página personal de Emilio Torres Manzanera</title>
  </head>
  <body>
    <main id="content">
      <h1>Contenidos</h1>
      <p><a href="centon/index.html">El centón de un enano</a>, un centón digital divulgativo sobre Estadística, Emacs, LaTeX, R y vicisitudes vitales orientado a Iberoamérica. </p>
    </main>
    <footer id="postamble" class="status">
      <form method='get' id='ddgSearch' action='https://duckduckgo.com/'>
        <input type='hidden' name='sites' value='torres.epv.uniovi.es'/>
        <input type='hidden' name='k7' value='#ffffff'/>
        <input type='hidden' name='k8' value='#222222'/>
        <input type='hidden' name='k9' value='#00278e'/>
        <input type='hidden' name='kx' value='#20692b'/>
        <input type='hidden' name='kj' value='#fafafa'/>
        <input type='hidden' name='kt' value='p'/>
        <input type='hidden' name='kl' value='es-es'/>
        <input type='text' name='q' placeholder='Rebusque en este servidor.' aria-label='Search torres.epv.uniovi.es on DuckDuckGo'/>
        <button type='submit' style='visibility: hidden'>Search</button>
      </form>
      <address>
        Emilio Torres Manzanera.<br>
        <style type="text/css"> span.ltrText {unicode-bidi: bidi-override; direction: rtl}</style>
        <span class="ltrText">se.ivoinu@onanenuednotnecle</span>.<br>
        <a href="http://unimode.grupos.uniovi.es/">Modelización de la Incertidumbre y la Imprecisión en Teoría de la Decisión</a>.<br>
        Parcialmente financiado por PGC2018-098623-B-I00.<br>
        Universidad de Oviedo.<br>
      </address>
    </footer>
  </body>
</html>