¡Conviértase en una página de inicio personalizada y minimalista !: 10 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

¿Ha tenido que cambiar a un trabajo mayoritariamente remoto desde que COVID-19 se convirtió en algo? ¡Mismo!

Trabajar desde casa con nuestras computadoras y a través de Internet a menudo significa que tenemos que realizar un seguimiento de muchos sitios web para el trabajo, la escuela o incluso … ¡por diversión!

Los marcadores no siempre están a la altura de la tarea, así que, ¿qué tal si hacemos una página de inicio personalizada para usted, con todos los enlaces que necesita y que se abre en su navegador web cada vez que lo necesita?

Esto es lo que necesitará:

• Una computadora (la nuestra tiene Windows, pero cualquier computadora moderna servirá).
• Una conexión a Internet.
• Una nueva instalación del editor de texto Notepad ++.

Cuando esté listo, comencemos a usar nuestra propia plantilla de página de inicio… ¡O a crear la suya propia desde cero!

Paso 1: cree una página de inicio O descargue nuestra plantilla personalizada

En este punto tienes dos opciones:

1. Descargue nuestra plantilla personalizada (las instrucciones siguen un poco más adelante en este paso) o,
2. Siga esta guía básica de la página de inicio; lo guiará a través de los componentes básicos de una página de inicio simple paso a paso, ¡y esa es la guía que seguimos para crear esta página de inicio personalizada!

¿Por qué recomendar un tutorial… en un tutorial? Nuestro trabajo como facilitadores de MakerSpace no es solo mostrarle cómo hacer las cosas: también lo conecta con la cultura y los recursos de MakerSpace disponibles. Esta guía es uno de los lugares donde muchos diseñadores de páginas de inicio comienzan, ¡así que tenía sentido compartirla contigo!

Si tiene tiempo, continúe con la opción n. ° 2, pero si no lo tiene, ¡siempre puede consultar la guía básica de la página de inicio más adelante! Para este tutorial, asumiremos que está descargando nuestra plantilla personalizada. Para descargarlo:

1. Abra nuestro repositorio DIY_startpage en Github.
2. Haga clic en el gran botón verde Código para abrir un menú desplegable.
3. Haga clic en Descargar ZIP para descargar todos los archivos del proyecto.
4. Extraiga todos los archivos del archivo ZIP que acaba de descargar en la ubicación que elija.

GitHub es un sitio web donde programadores y diseñadores de todo el mundo comparten su código y creaciones con otros: también te permite colaborar con otros en proyectos de todo tipo. En resumen, ¡es una gran herramienta que todo creador debería conocer!

Ahora inicie el navegador de su elección: me gusta mucho Firefox, pero nuestra plantilla debería funcionar en casi cualquier navegador web reciente, así que siéntase libre de usar Edge, Chrome o Safari.

Finalmente, abra el archivo "DIY_startpage.html" en su navegador Y en Notepad ++, ¡y comencemos a personalizarlo!

Paso 2: ¡Enumere sus favoritos

Tener una página de inicio es genial. Tener una página de inicio útil es aún mejor y ahora mismo, ¡la nuestra parece un poco vacía!

¿Cuáles son las cosas que revisa con regularidad y de las que necesita realizar un seguimiento? ¿Qué webcomics lees por la mañana? ¿Qué sitio web de noticias te gusta consultar? Estas son las cosas que deberían aterrizar en su página de inicio.

Para este tutorial, solo usaré algunos de mis favoritos. Advertencia de spoiler, ¡muchos enlaces de la biblioteca! Pero también algunos de mis Creadores favoritos en busca de inspiración y algunos de mis entretenimientos favoritos. ¡Puede encontrar todos estos elementos a continuación con un enlace, como ejemplo!

Noticias y lectura

• Periódicos digitales
• Libros digitales
• Revistas digitales

Aprendiendo

• Escuelas W3C
• Udemy
• Idiomas del mango

Música

• Escuchar local
• Explosión de canciones
• Radios de música Jamendo

Cultura Maker

• Core77
• Lumecluster
• Melapropismos

Elegí tres de mis favoritos para cada categoría, pero debería poder elegir más o menos sin problemas: ¡el diseño de su página de inicio se ajustará automáticamente al número o los recursos!

Una vez que tenga todos sus favoritos en la lista, dejémoslos a un lado por un minuto y trabajemos en hacer que nuestra plantilla de página de inicio genérica sea un poco más para usted.

Paso 3: personaliza tu fuente

Inicie Notepad ++, haga clic en Archivo> Abrir para abrir su archivo "DIY_startpage.html". Lo que estás viendo es muy diferente a la página de tu navegador, ¿no es así? Es el código de su página, y los navegadores interpretan ese código para que se vea un poco más agradable a la vista y haga todas las cosas que necesitamos que haga.

El código de nuestro proyecto de página de inicio está escrito en dos lenguajes relacionados: HTML y CSS. HTML suele estar a cargo del contenido de una página y CSS a cargo del aspecto de una página.

Busque esta primera sección para personalizar su página de inicio:

html {

alinear-elementos: centro; color: # 313131; pantalla: flex; fuente: 22px "Courier New", Courier, monoespacio; altura: 100%; justificar-contenido: centro; margen: 0; }

Esta sección de nuestra página de inicio se centra en el aspecto general de los elementos de nuestra página. La línea:

fuente: 22px "Courier New", Courier, monoespacio;

se trata específicamente de la fuente que estamos usando en la página de inicio y tiene dos parámetros que definen cómo se verá el texto en su página: tamaño y familia de fuentes.

• tamaño - Eso es lo que es "22px". El tamaño de su texto en la pantalla se define en "px", abreviatura de píxeles.
• familia de fuentes: ahí es donde enumeramos las fuentes que nos gustaría usar. Por lo general, es una buena idea enumerar varios, desde la fuente que realmente desea usar hasta la familia más genérica. Estas fuentes dependen del navegador que esté utilizando, por lo que si el más particular no está disponible, el navegador probará el siguiente y así sucesivamente.

La página CSS Web Safe Fonts de w3schools tiene una gran lista de combinaciones de fuentes que se ven geniales, conservan el estilo que está buscando y funcionarán en la mayoría de los navegadores modernos.

Por ejemplo, puede reemplazar:

"Courier New", Courier, monoespacio;

con:

"Linotipo Palatino", "Libro Antiqua", Palatino, serif;

o:

"Comic Sans MS", cursiva, sans-serif;

Guarde su archivo y actualice la página en su navegador para ver los cambios. ¿No te gusta? ¡No hay problema! Juegue con las fuentes web seguras de CSS hasta que encuentre una combinación que le guste.

Paso 4: ¡Personaliza tu cotización de título

Busque esta sección en su archivo HTML:

¡Esta es tu página de inicio! ¡Disfrutar

¡Elija una cotización que le guste y reemplace el código! Por mi cuenta, elegí

¡Una vez más en la brecha

El diseño de su página de inicio debe adaptarse sobre la marcha para que coincida con su cotización tan pronto como vuelva a cargar la página en su navegador: en Firefox, eso significa presionar CTRL + R en su teclado, o hacer clic en el ícono Recargar. Elija una cotización que le guste ahora (¡o elija algo más tarde!) Y ¡manos a la obra para personalizar las secciones de su página de inicio!

Paso 5: personalice sus secciones

Ahora que ha encontrado una combinación de fuentes que le gusta y tiene una gran cita para inspirarlo, continuemos y personalicemos sus secciones.

Si descargó nuestra página de inicio de Github, tiene 6 secciones disponibles para personalizar: la guía original solo tiene 4, pero como cada vez más aspectos de nuestras vidas se han movido en línea recientemente, seguí adelante y agregué más por si acaso.

Busque la primera sección y escriba lo que necesitemos. Como recordatorio, mi primera sección es "Noticias y lectura":

Con su archivo aún abierto en Notepad ++, busque la siguiente línea de código:

Sección 1

y reemplácelo con la categoría de su lista que cree que usará más.

Dado que muchos de nosotros estamos acostumbrados a comenzar a leer documentos desde la parte superior izquierda, ahí es donde sus ojos podrían ir naturalmente, ¡así que aproveche eso y mantenga nuestro punto de referencia más importante allí! Pero si vienes de una cultura con una dirección de lectura diferente, o si simplemente trabajas de manera diferente, personaliza esto para ti. Después de todo, es tu página de inicio: ¡sabes qué es lo mejor para ti!

Un título de sección hacia abajo, ¡faltan cinco! Busque la línea de código que dice:

Sección 2

Cámbielo, luego siga buscando los títulos de las secciones y cambiándolos hasta que llegue al final de su lista. Si no está utilizando todas las secciones, ¡déjelas así! También haremos una pequeña limpieza al final de este tutorial.

Una vez que haya terminado de personalizar las secciones, simplemente guarde sus cambios en Notepad ++ y vuelva a cargar la página en su navegador. Todos los títulos de las secciones deberían aparecer donde los coloques: ¡ahora podemos personalizar los enlaces en cada sección!

Paso 6: personalice sus enlaces

Personalizar los enlaces en cada sección es un poco más complicado, ¡pero ciertamente no mucho más difícil!

Esta vez no solo cambiaremos el nombre de los enlaces, ¡también cambiaremos lo que puede hacer con ellos! Se podrá hacer clic en cada elemento de cada sección, enlace a un sitio web diferente. Bonificación, ¡también puedes decidir si quieres que se abra en una nueva ventana o no!

Primero, busque una línea que se parezca a:

link_one_name

Seleccione ese bit "link_one_name" y reemplácelo con su propio texto. Por ejemplo, el primer enlace en la primera sección basado en mi lista del paso X es "Periódicos digitales", por lo que obtenemos:

Periódicos digitales

A continuación, ¡trabajemos para personalizar el enlace! Reemplace el bit "link.one" con su primer enlace. Para mí, ese será el enlace a nuestros periódicos digitales, por lo que se verá así:

Periódicos digitales

Guarde su trabajo en el editor de texto y vuelva a cargar la página en su navegador

Ahora debería poder hacer clic en el primer enlace que personalizó. Si no lo hizo, ¡está bien! Comience de nuevo o vuelva sobre sus pasos hasta que el enlace se abra cuando haga clic en él.

Una vez que su primer enlace funcione … Bueno, todo lo que necesita hacer es repetir estos pasos para cada enlace en cada sección, ¡hasta que haya personalizado todos los nombres y enlaces en su página de inicio! Sin embargo, solo hay un inconveniente: es probable que cuando haces clic en un enlace, tu página de inicio simplemente desaparezca cuando el nuevo enlace se abre en la misma pestaña o ventana.

No es muy conveniente … Entonces, ¿qué tal cambiar la forma en que se abren los enlaces? ¡Usemos nuestro primer enlace como ejemplo! Probablemente recuerde que aquí le decimos a su navegador que abra un enlace cuando haga clic en él:

Periódicos digitales

Pero adivina qué, ¡ahí es también donde decidimos cómo se abrirá el enlace! Cámbielo a:

Periódicos digitales

Ahora guarde su trabajo y vuelva a cargar la página en su navegador: ¡el enlace ahora se abrirá en una nueva pestaña cuando haga clic en él! De esa manera, puede mantener su página de inicio abierta para cuando la necesite.

Paso 7: agregue una imagen a su página de inicio

Ahora que todos nuestros enlaces están configurados, ¡es hora de decorar nuestra página de inicio! Esta plantilla tiene espacio para una imagen personalizada en el lado derecho de la pantalla. Ahora de vuelta en Notepad ++, busque esta línea:

todo el camino al final de la plantilla. Elija una imagen que le guste, muévala a la misma carpeta que su archivo de página de inicio y reemplace "library_picture.jpg" con el nombre de archivo de su imagen. Por ejemplo, si el nombre de mi archivo es "your_picture.jpg", la línea se convierte en:

Guarde sus cambios y, una vez más, vuelva a cargar la página de inicio en su navegador.

Dado que el código de su página de inicio y sus archivos de imagen están en la misma carpeta, la imagen debería cargarse automáticamente cuando actualice la página. Si no fue así, verifique el nombre de su archivo, ¡ahí es donde generalmente me equivoco!

Los fondos de pantalla de teléfonos inteligentes son ideales para ese proyecto. En general, cualquier imagen vertical (o como la gente elegante dice "imagen de orientación vertical" con una proporción de 16: 9). Pero el diseño de nuestra página de inicio se adaptará sin importar lo que le eches.

Si aparece tu foto, felicidades, ¡ya casi terminaste!

Paso 8: Limpiar un poco

Si tiene secciones adicionales que no está utilizando en ese momento, ¡no dude en eliminarlas! Por ejemplo, supongamos que no está utilizando la Sección 6. Busque:

• Sección 6
• Objeto 1
• Elemento 2
• Ítem 3

Seleccione y elimine estas líneas, guarde su archivo y actualice el archivo en su navegador para asegurarse de que todo haya desaparecido.

Este es generalmente el paso en el que rompo todo porque voy demasiado rápido, así que si algo de repente no funciona, recuerde: respire hondo y deshaga lo que acaba de hacer con la combinación de teclas CTRL + Z en su teclado.

Paso 9: convertirlo en una página de inicio real

Ahora que la página de inicio abre todos los enlaces que queremos y tiene el aspecto que queremos, es hora de abrirla cuando inicie su navegador.

En ese momento, me gusta mantener todo alejado del escritorio de mi computadora cortando y pegando la carpeta de mi página de inicio en la carpeta Documentos de Windows. Entonces, si ha terminado de trabajar en su página de inicio, ¡hágalo!

Siguiente: lo más probable es que su navegador se abra con su motor de búsqueda favorito, o tal vez incluso con una página en blanco.

Puede encontrar instrucciones para personalizar Firefox y otros navegadores a continuación:

• Instrucciones de Firefox
• Instrucciones de Google Chrome
• Instrucciones de Safari
• Instrucciones de Microsoft Edge

Una vez que haya terminado de seguir las instrucciones de su navegador, ciérrelo y vuelva a abrirlo. Si su página de inicio aparece cuando se inicia su navegador, ¡lo logró!

Si no fue así, revise las instrucciones de su navegador nuevamente y asegúrese de que no se haya perdido nada. Lo peor llega a lo peor, luego reinicie su computadora después de guardar todo su trabajo. ¡9 de cada 10 veces, eso lo resuelve todo!

Paso 10: ¡Todo listo! Y, ¿le gustaría saber más?

¡Felicitaciones por terminar su página de inicio! Puede que no parezca mucho, pero acabas de aprender a codificar uno de los bloques de construcción más importantes de un sitio web de la forma en que lo hice … ¡Hace unos 20 años!

Si te gustó esto y te gustaría aprender más sobre las páginas de inicio, ¡es un profundo agujero de conejo a seguir! Aquí hay una pequeña selección para ayudarlo en su viaje a la página de inicio:

• ¿Probó la guía básica de la página de inicio? Buenas noticias, ¡hay más de donde viene! ¡Consulte las otras guías de / stpg / para obtener más inspiración y funciones avanzadas!
• Consulte el catálogo de la biblioteca del condado de Johnson para obtener libros sobre HTML y CSS, ¡y con su tarjeta de biblioteca o tarjeta electrónica también tiene acceso a libros electrónicos!
• Tu tarjeta de la biblioteca también te da acceso a Udemy, y también tiene algunas clases muy completas sobre HTML, CSS y diseño web.

Si estás muy orgulloso de tu creación, ¿por qué no haces una captura de pantalla y la compartes con nosotros a través de Twitter o Instagram con el hashtag #jocomakes? ¡Siempre estamos felices de ver lo que se les ocurre a nuestros clientes!