La pagina de inicio del navegador es lo primero que vemos cuando decidimos navegar la web, para muchos la elección del sitio o herramienta que aparece primero en ese momento, es importante porqué nos da una sensación de organización. Todos tenemos hábitos de navegación que usualmente repetimos día tras día, es ideal entonces que nuestro punto de partida nos apunte directamente a los sitios que más visitamos. Un sitio muy popular para usar como pagina de inicio, era iGoogle, pero últimamente Google nos tiene acostumbrados a eliminar sus servicios sin preocuparse por las molestias de los usuarios. iGoogle va a cerrar en menos de 15 días, obligando a sus usuarios a buscar alternativas.
Una opción bastante interesante, es la de usar una pagina de inicio personalizada creada por alguien más y añadirle algunos toques personales. No necesitas ser un programador para realizar cambios, sino tener solo algunas ideas básicas de que lineas de código editar, para cambiar un color, una imagen o insertar un enlace.
En este tutorial, vamos a descargar una pagina de inicio personalizada escrita en HTML5, CSS3 y JavaScript, y vamos a aplicar algunos cambios muy básicos para ajustarla a nuestras necesidades y gustos. Esto no es un curso de programación, y está muy lejos de serlo. Es solo un pequeño tutorial que los intentará guiar por los pasos de edición más sencillos a la hora de querer editar una de estas páginas.
Para poder editar archivos HTML o CSS vamos a necesitar un editor de texto especial que nos sirva para escribir código. Les recomiendo usar Brackets, ó cualquiera de esta lista.
La pagina que vamos a usar para este ejemplo se llama Awesome startpage, es completamente compatible con Firefox, Chrome y Safari. Tiene un diseño muy bonito, y podemos añadir hasta 9 enlaces a nuestros sitios web favoritos y asignarles atajos de teclado.
Al descargarla tendremos un archivo .Zip, lo descomprimimos y dentro hay una carpeta con 3 elementos: un archivo index.html, una imagen de nombre bg.jpg, y una carpeta de nombre resources que lleva contiene los archivos CSS y JavaScript.
Insertar enlaces
Usamos nuestro editor de texto para abrir el archivo index.html y ubicamos la linea 157, donde tenemos la lista de sitios que podemos modificar. La primera linea contiene un sitio de ejemplo, las demás están comentadas (cuando una linea de código está comentada, quiere decir que el navegador no va a leer ni interpretar el código dentro del comentario) y no tienen nombre ni enlaces asignados.
Para añadir nuestros enlaces debemos eliminar los caracteres <!-- del principio de la linea y --> del final, los cuales cumplen la función de encerrar el código en un comentario.
Modificamos las lineas para que pasen de esto:
<li id="link1"><a href="#"><span>1</span>untitled</a></li>
A esto:
<li id="link1"><a href="http://tusitioweb.com"><span>1</span>Nombre para el sitio</a></li>
Ejemplo:
<li id="link1"><a href="http://bitelia.com"><span>1</span>Bitelia</a></li>
Asignar atajos de teclado
El archivo HTML contiene un script para asignarles atajos de teclado a cada enlace, que van del numero 1 al 9. Para poder activar los atajos de teclado debemos editar las lineas del script y añadir los sitios web manualmente.
Ubicamos la linea 132 y modificamos los valores de los sitios que queremos tengan atajos de teclado:
var hotlink1 = 'http://bitelia.com';
Recuerda remover los dos // que están delante del código, ya que también cumplen la función de comentar el texto. Guarda el trabajo una vez listo, y puedes abrir tu archivo index.html con el navegador para probar los cambios.
Cambiar el fondo, tipografía y colores
Si queremos editar el fondo, los colores y las tipografías de la pagina necesitamos abrir el archivo s.css que se encuentra dentro de la carpeta resources.
Ubicamos la linea 65 con el selector body, aquí podemos reemplazar la imagen de fondo por la de nuestra elección siempre que la guardemos en la carpeta resources tan solo reemplazando la linea:
background: white url(../bg.jpg) fixed no-repeat center center;
Por:
background: white url(../nombre de tu imagen.jpg) fixed no-repeat center center;
Si no queremos editar directamente el código, podemos reemplazar la imagen bg.jpg que se encuentra en la carpeta por la de nuestra elección, solo necesita tener el mismo nombre y la misma extensión.
Los siguientes selectores: font y color indican el tamaño en pixeles, la familia de la tipografía y el color del texto de los enlaces. El color puedes reemplazarlo por cualquier valor hexadecimal siempre que añadas un # antes del numero.
Luego solo te queda definir la ruta de tu ordenador en la cual se encuentra el archivo index.html, como la pagina de inicio de tu navegador.
