Torne-se uma página inicial personalizada e minimalista !: 10 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:34

Você teve que mudar para o trabalho principalmente remoto desde que o COVID-19 se tornou um negócio? Mesmo!

Trabalhar em casa com nossos computadores e pela Internet muitas vezes significa que temos que manter o controle de muitos sites para o trabalho, para a escola ou mesmo … para nos divertir!

Os favoritos nem sempre estão à altura da tarefa, então que tal criarmos uma página inicial personalizada sob medida para você, com todos os links de que você precisa, e que seja aberta em seu navegador da Web sempre que você precisar?

Aqui está o que você precisa:

• Um computador (o nosso está executando o Windows, mas qualquer computador moderno serve).
• Uma conexão com a Internet.
• Uma nova instalação do editor de texto Notepad ++.

Quando estiver pronto, vamos começar a usar nosso próprio modelo de página inicial … Ou criar o seu próprio do zero!

Etapa 1: Crie uma página inicial OU baixe nosso modelo personalizado

Neste ponto, você tem duas opções:

1. Baixe nosso modelo personalizado (as instruções seguem um pouco mais adiante nesta etapa) ou,
2. Siga este guia básico da página inicial; ele o guiará pelos blocos de construção de uma página inicial simples, passo a passo - e esse é o guia que seguimos para construir esta página inicial personalizada!

Por que recomendar um tutorial … em um tutorial? Nosso trabalho como facilitadores MakerSpace não é apenas para mostrar a você como fazer as coisas: é também para conectá-lo à cultura Maker e aos recursos disponíveis lá fora. Este guia é um dos lugares onde muitos designers da página inicial começam, então fez sentido compartilhá-lo com você!

Se você tiver tempo, vá em frente com a opção nº 2, mas se não tiver, você pode sempre consultar o guia básico da página inicial mais tarde! Para este tutorial, vamos presumir que você está baixando nosso modelo personalizado! Para fazer o download:

1. Abra nosso repositório DIY_startpage no Github.
2. Clique no grande botão verde do código para abrir um menu suspenso.
3. Clique em Download ZIP para baixar todos os arquivos do projeto.
4. Extraia todos os arquivos do arquivo ZIP que você acabou de baixar para um local de sua escolha.

GitHub é um site onde programadores e designers de todo o mundo compartilham seus códigos e criações com outras pessoas: ele também permite que você colabore com outras pessoas em projetos de todos os tipos. Resumindo, é uma ótima ferramenta que todo Criador deve conhecer!

Agora inicie o navegador de sua escolha: Eu realmente gosto do Firefox, mas nosso modelo deve funcionar em praticamente qualquer navegador da Web recente, então sinta-se à vontade para usar o Edge, Chrome ou Safari!

Finalmente, abra o arquivo "DIY_startpage.html" no seu navegador E no Notepad ++, e vamos começar a personalizá-lo!

Etapa 2: Liste seus favoritos

Ter uma página inicial é ótimo. Ter uma página inicial útil é ainda melhor e agora, a nossa parece um pouco vazia!

Quais são as coisas que você verifica regularmente e precisa controlar? Que webcomics você lê de manhã? Qual site de notícias você gosta de verificar? Essas são as coisas que devem chegar à sua página inicial.

Para este tutorial, usarei apenas alguns dos meus favoritos. Aviso de spoiler, muitos links da biblioteca! Mas também alguns dos meus Makers favoritos para me inspirar e um pouco do meu entretenimento favorito. Você pode encontrar todos esses itens abaixo com um link, como exemplo!

Notícias e Leitura

• Jornais Digitais
• Livros Digitais
• Revistas digitais

Aprendendo

• Escolas W3C
• Udemy
• Mango Languages

Música

• Ouça local
• Song Exploder
• Jamendo Music Radios

Cultura Maker

• Core77
• Lumecluster
• Malapropismos

Eu escolhi três dos meus favoritos para cada categoria, mas você deve ser capaz de escolher mais ou menos do que isso sem problemas - o layout da sua página inicial se ajustará ao número ou aos recursos automaticamente!

Depois de ter todos os seus favoritos listados, vamos colocá-los de lado por um minuto e trabalhar para tornar nosso modelo de página inicial genérico um pouco mais personalizado.

Etapa 3: personalize sua fonte

Inicie o Notepad ++, clique em Arquivo> Abrir para abrir seu arquivo "DIY_startpage.html". O que você está vendo parece muito diferente da página do seu navegador, não é? É o código da sua página, e os navegadores interpretam esse código para torná-lo um pouco mais amigável para os olhos e fazer todas as coisas que precisamos fazer.

O código para nosso projeto de página inicial é escrito em duas linguagens relacionadas: HTML e CSS. O HTML é geralmente responsável pelo conteúdo de uma página, e o CSS é responsável pela aparência de uma página.

Procure esta primeira seção para personalizar sua página inicial:

html {

alinhar-itens: centro; cor: # 313131; display: flex; fonte: 22px "Courier New", Courier, monoespaçada; altura: 100%; justificar-conteúdo: centro; margem: 0; }

Esta seção de nossa página inicial enfoca a aparência geral dos itens em nossa página. A linha:

fonte: 22px "Courier New", Courier, monoespaçada;

é especificamente sobre a fonte que estamos usando na página inicial e tem dois parâmetros que definem a aparência do texto em sua página: tamanho e família da fonte.

• tamanho - Isso é o que "22px" é. O tamanho do seu texto na tela é definido em "px", abreviação de pixels.
• família de fontes - é onde listamos as fontes que gostaríamos de usar. Normalmente é uma boa ideia listar vários, desde a fonte que você realmente deseja usar até a família mais genérica. Essas fontes dependem do navegador que você está usando, portanto, se a mais específica não estiver disponível, o navegador tentará a próxima e assim por diante.

A página CSS Web Safe Fonts da w3schools tem uma grande lista de combinações de fontes que parecem ótimas, mantêm o estilo que você está procurando e funcionam na maioria dos navegadores modernos.

Por exemplo, você pode substituir:

"Courier New", Courier, monoespaço;

com:

"Palatino Linotype", "Book Antiqua", Palatino, serif;

ou:

"Comic Sans MS", cursivo, sem serifa;

Salve seu arquivo e atualize a página em seu navegador para ver as mudanças! Não gostou? Sem problemas! Brinque com as CSS Web Safe Fonts até encontrar uma combinação de sua preferência.

Etapa 4: personalize sua citação de título

Procure esta seção em seu arquivo HTML:

Esta é a sua página inicial! Aproveitar

Escolha uma cotação de que goste e substitua o código! Para mim, eu escolhi

Mais uma vez para a violação

O layout da sua página inicial deve se adaptar rapidamente para corresponder à sua cotação assim que você recarregar a página no seu navegador: no Firefox, isso significa pressionar CTRL + R no teclado ou clicar no ícone Atualizar. Escolha uma citação de que goste agora (ou escolha algo mais tarde!) E vamos começar a personalizar as seções de sua página inicial!

Etapa 5: personalize suas seções

Agora que você encontrou uma combinação de fontes de que gosta e tem uma ótima citação para inspirá-lo, vamos continuar e personalizar suas seções.

Se você baixou nossa página inicial do Github, você tem 6 seções disponíveis para personalizar: o guia original tem apenas 4, mas como mais e mais aspectos de nossas vidas estão online recentemente, eu fui em frente e adicionei mais para o caso.

Encontre a primeira seção e digite o que precisamos. Como um lembrete, minha primeira seção é "Notícias e Leitura":

Com seu arquivo ainda aberto no Notepad ++, encontre a seguinte linha de código:

Seção 1

e substitua-o pela categoria da lista que você acha que usará mais.

Uma vez que muitos de nós estamos acostumados a começar a ler documentos do canto superior esquerdo, é para onde seus olhos podem ir naturalmente - então, aproveite isso e mantenha nosso ponto de partida mais importante lá! Mas se você vem de uma cultura com uma direção de leitura diferente, ou se você apenas trabalha de forma diferente, personalize isso para você. Afinal, é a sua página inicial: você sabe o que é melhor para você!

Um título de seção para baixo, cinco para ir! Procure a linha de código que diz:

Seção 2

Altere-o e, em seguida, continue procurando os títulos das seções e alterando-os até chegar ao final da lista. Se você não estiver usando todas as seções, deixe-as como estão! Faremos uma pequena limpeza no final deste tutorial também.

Quando terminar de personalizar as seções, salve as alterações no Notepad ++ e recarregue a página no navegador. Todos os títulos das seções devem estar aparecendo onde você os colocou: agora podemos personalizar os links em cada seção!

Etapa 6: personalize seus links

Personalizar os links em cada seção é um pouco mais complicado, mas certamente não muito mais difícil!

Desta vez, não estamos apenas mudando o nome dos links, também mudamos o que você pode fazer com eles! Cada item em cada seção se tornará clicável, um link para um site diferente. Bônus, você também pode decidir se deseja abrir em uma nova janela ou não!

Primeiro, procure uma linha semelhante a:

link_one_name

Selecione aquele bit "link_one_name" e substitua-o pelo seu próprio texto. Por exemplo, o primeiro link na primeira seção com base na minha lista da etapa X é "Jornais Digitais", então obtemos:

Jornais Digitais

A seguir, vamos trabalhar na customização do link! Substitua o bit "link.one" pelo seu primeiro link. Para mim, esse será o link para nossos jornais digitais, então será parecido com:

Jornais Digitais

Salve seu trabalho no editor de texto e recarregue a página em seu navegador

Agora você deve conseguir clicar no primeiro link que personalizou. Se não funcionou, tudo bem! Comece de novo ou refaça seus passos até que o link seja aberto quando você clicar nele.

Depois de fazer seu primeiro link funcionar … Bem, tudo o que você precisa fazer é repetir essas etapas para cada link em cada seção, até personalizar todos os nomes e links em sua página inicial! Porém, há apenas um problema: quando você clica em um link, é provável que sua página inicial desapareça quando o novo link for aberto na mesma guia ou janela.

Não é muito conveniente … Então, que tal mudar a forma como os links são abertos? Vamos usar nosso primeiro link como exemplo! Você provavelmente se lembra de que dizemos ao seu navegador para abrir um link quando você clica nele:

Jornais Digitais

Mas adivinhe - é também onde decidimos como o link será aberto! Altere para:

Jornais Digitais

Agora salve seu trabalho e recarregue a página em seu navegador: o link será aberto em uma nova guia quando você clicar nele! Dessa forma, você pode manter sua página inicial aberta para quando precisar.

Etapa 7: adicione uma imagem à sua página inicial

Agora que todos os nossos links estão configurados, é hora de decorar nossa página inicial! Este modelo tem espaço para uma imagem personalizada no lado direito da tela. Agora, de volta ao Notepad ++, procure esta linha:

todo o caminho no final do modelo. Escolha uma imagem de sua preferência, mova-a para a mesma pasta do arquivo da página inicial e substitua "library_picture.jpg" pelo nome do arquivo da sua imagem. Por exemplo, se o nome do meu arquivo for "your_picture.jpg", a linha será:

Salve suas alterações e, mais uma vez, recarregue a página inicial em seu navegador.

Como o código da sua página inicial e seus arquivos de imagem estão na mesma pasta, a imagem deve carregar automaticamente quando você atualizar a página. Caso contrário, verifique o nome do seu arquivo - geralmente é aí que eu entendi errado!

Os papéis de parede do smartphone são ótimos para esse projeto. Em geral, qualquer imagem vertical (ou como as pessoas elegantes dizem "imagem com orientação de retrato" com uma proporção de 16: 9) para esse assunto! Mas o layout da nossa página inicial irá se adaptar, não importa o que você jogue nela.

Se sua imagem aparecer, parabéns, você está praticamente pronto!

Etapa 8: Limpando um pouco

Se você tiver seções extras que não esteja usando nesse momento, sinta-se à vontade para excluí-las! Por exemplo, digamos que você não esteja usando a Seção 6. Encontre:

• Seção 6
• Item 1
• Item 2
• Item 3

Selecione e exclua essas linhas, salve seu arquivo e atualize-o em seu navegador para ter certeza de que tudo foi removido.

Esta é geralmente a etapa em que eu quebro tudo porque vou muito rápido, então se algo de repente não funcionar, lembre-se: respire fundo e desfaça o que você acabou de fazer com a combinação de teclas CTRL + Z em seu teclado!

Etapa 9: Tornando-a uma página inicial real

Agora que a página inicial abre todos os links que queremos e tem a aparência que queremos, é hora de abri-la quando você iniciar o navegador!

Nesse ponto, gosto de manter tudo longe da área de trabalho dos meus computadores, recortando e colando minha pasta de página inicial na pasta Documentos do Windows. Então, se você terminou de trabalhar em sua página inicial, faça isso!

Em seguida: provavelmente seu navegador abre com seu mecanismo de pesquisa favorito ou talvez até mesmo uma página em branco.

Você pode encontrar instruções para personalizar o Firefox, bem como outros navegadores abaixo:

• Instruções do Firefox
• Instruções do Google Chrome
• Instruções do Safari
• Instruções do Microsoft Edge

Quando terminar de seguir as instruções do seu navegador, feche-o e abra-o novamente. Se sua página inicial aparecer enquanto seu navegador está iniciando, você conseguiu!

Caso contrário, repita as instruções do seu navegador e certifique-se de que não esqueceu nada. Pior ainda, reinicie o computador depois de salvar todo o seu trabalho. 9 em cada 10 vezes, isso resolve tudo!

Etapa 10: Tudo pronto! E gostaria de saber mais?

Parabéns por terminar sua página inicial! Pode não parecer muito, mas você acabou de aprender a codificar um dos blocos de construção mais importantes de um site da maneira que eu fiz … Há cerca de 20 anos!

Se você gostou e gostaria de aprender mais sobre as páginas iniciais, é uma grande toca de coelho a seguir! Aqui está uma pequena seleção para ajudá-lo em sua jornada na página inicial:

• Você tentou o guia básico da página inicial? Boas notícias, há mais de onde veio! Verifique os outros guias em / stpg / para obter mais inspiração e recursos avançados!
• Verifique o catálogo da Biblioteca do Condado de Johnson para livros em HTML e CSS - e com seu cartão de biblioteca ou cartão eletrônico você também tem acesso aos e-books!
• Seu cartão de biblioteca também dá acesso à Udemy, e também tem algumas aulas muito completas sobre HTML, CSS e web design.

Se você está super orgulhoso de sua criação, por que não captura uma captura de tela e compartilha conosco no Twitter ou Instagram com a hashtag #jocomakes? Ficamos sempre felizes em ver o que nossos clientes fazem!