Reconstruir um site de 2004 em Flash para 2018

Em 1999, construí meu primeiro site usando o Web Studio 1.0. Web Studio foi uma interface gráfica do usuário. Foi possível criar um novo Página de destino e arraste e solte os elementos nele. Eu então configurei um domínio gratuito e hospedagem com geocidades e voila! Eu tinha um site. Avanço rápido para 2004, eu queria ir mais longe e assim, como muitos outros, parti para construir um site de banda.

• 12 perguntas comuns de javascript respondidas

Muito mudou desde então. Neste artigo, vou fazer uma viagem pela faixa de memória e recriar o mesmo site para a Web hoje.

Obtenha os arquivos para este tutorial.

Então vamos começar! Primeiro, geralmente todo novo projeto para mim começa com MKD seguido por G Init. Para aqueles de vocês que me conhecem, em algum momento, eu provavelmente mencionei DotFiles para você. DotFiles são arquivos que simplesmente começam com um ponto (demorei um tempo surpreendentemente longo para realmente fazer essa conexão!) E eles podem ser usados ​​para vários fins. Dois dos meus pontos favoritos são .aliasas e .funções. Deixe-me elaborar ...

Em Bash, é possível criar um novo diretório usando o comando mkdir e depois que você teria que alterar o CD de diretório para o diretório que acabou de criar. Usando o código que tenho no meu arquivo .functions, agora é possível executar o MKD. Isso não apenas criará o novo diretório, mas também terá sido alterado nesse diretório. Isso pode parecer overkill no início, mas eu amo essas vitórias de micro. Com o tempo, especialmente se executando esses comandos várias vezes ao dia, eles logo se somam a um monte de tempo economizado.

 # Crie um novo diretório e insira-o
função mkd () {
    mkdir -p "$ @" & amp; & amp; CD "$ _";
} 

O próximo comando, se você estiver familiarizado com o Git, é simplesmente o Git Init, que nos permitirá controlar a versão do projeto. Eu uso muito git, mesmo para listas de compras! Então, em vez de ter que digitar o Git toda vez, adicionando alias g = "git" a .aliases novamente é um bom poupador de tempo pequeno para mim.

Hoje em dia, há uma infinidade de diferentes estruturas e tecnologias. Para este projeto, quero manter as coisas simples. Eu vou usar HTML, CSS e, se necessário, uma pitada de JavaScript. Primeiro, vamos criar a marcação HTML básica. Mas espere! Vamos parar e pensar por um minuto.

Às vezes, os desenvolvedores, eu incluídos, podem ser super excitados com um projeto e querem ficar quebrando imediatamente e ir direto para o teclado para escrever código. No entanto, acho que isso geralmente não é a melhor abordagem. Eu amo ter uma visão geral em mente do projeto primeiro. Ao fazer isso e ter uma visão muito mais clara do projeto como um todo, acho que permite uma tomada de decisão muito melhor. Por exemplo, se eu mergulhei diretamente no código, eu poderia encontrar um problema que então teria que voltar e refatorar. Existem alguns resultados diferentes com essa abordagem. Primeiro, pode ser que eu tenha que excluir o código inteiramente e começar de novo; Em segundo lugar, se continuar nesta moda, posso acabar com "código de espaguete" dificultando o futuro para atualizar, depurar e resultar em perda de desempenho; Terceiro, às vezes, funciona bem e você acaba com o código melhor, mas tenderia a dizer que os primeiros e segundos resultados são muito mais comuns.

Este projeto é bastante pequeno; Tem algumas páginas: casa, notícias, shows, mídia, álbuns, links e partes comuns entre estas páginas: cabeçalho, navegação, conteúdo de tipografia, listas, imagens, vídeos. Quando construindo originalmente o local do Flash em 2004, as coisas eram muito mais simples em termos de testes. O site foi construído em flash, para flash em um computador desktop com um mouse e teclado. Hoje em dia, o uso móvel e de Internet de tablet é mais comum do que em um computador desktop, e essa tendência continua a subir.

Para tornar isso uma experiência melhor para quem vê o site, vou levar algumas coisas em conta no início do projeto e usar uma primeira estratégia móvel. Para fazer isso, e novamente, antes de escrever qualquer código, vou sair uma boa caneta e papel. Primeiro, escrevo o sitemap; Ao fazer isso, há algumas áreas-chave que acho que pode ser melhorada. Por exemplo, meu site original consistia em diferentes páginas para cada um dos álbuns da banda. No momento em que eles tinham três álbuns e tão bem encaixados na navegação. Agora eles têm muito mais e potencialmente mais para vir, então já em minha mente eu estou pensando em maneiras de tornar o site mais prova futuro (um oldie, mas um goodie é dan cederholm Design da Web Bulletproof. ).

Agora eu tenho uma ideia aproximada na minha cabeça do sitemap e páginas, a próxima é para criar alguns wireframes low-fi. Da experiência anterior construindo muitos locais responsivos, o celular vem com desafios de design interessantes, ou seja, como criar uma navegação, mas ainda permite que as pessoas vejam o conteúdo principal do site. Eu vou ir junto com o resultado que todos crescemos para amar / ódio: a abordagem do menu hambúrguer. No entanto, vou adicionar um pouco de torção. Os trabalhos de arte originais usavam pássaros, então em vez do ícone do menu de hambúrguer padrão, eu vou usar obras de arte do pássaro que irá ativar o menu e abrir e fechar suas asas como uma maneira de indicar se o menu está ativo ou não.

As coisas em minha mente agora estão começando a tomar forma, com uma ideia de como as pessoas poderão navegar pelo site. Agora vou pensar em como as próprias páginas podem parecer. Começando com a página inicial, é bastante simples, com conteúdo de tipografia. Em seguida, notícias - novamente conteúdo de tipografia, potencialmente imagens e, em seguida, algum tipo de navegação para visualizar posts mais antigos. Gigs - uma lista de próximos gigs com links para comprar ingressos. Para mídia, olhando para o site anterior, eu tinha "imagens" e "vídeos" como duas seções diferentes, mas aqui acho que há espaço para melhorias e consolidar como "mídia". Álbuns, Ah, Sim Álbuns - Agora é aqui que fazer esse tipo de coisa compensa. Você vê, a página de álbuns tem tipografia e uma imagem, e precisará de algum tipo de navegação para visualizar mensagens mais antigas. Soa familiar? Parece muito como a mesma estrutura que a página de notícias! Ter este nível superior Visão geral, posso olhar e pensar em coisas mais granulares, componentes, alguns poderiam até dizer Design atômico nível, se você está familiarizado com o trabalho de Brad Frost.

Agora, tenho uma ideia de como o site vai funcionar em dispositivos menores e elementos reutilizáveis, é hora de repetir o processo com dispositivos maiores. Como o site é bastante simples, e com os wireframes já criados para celular, vejo os dispositivos maiores sendo bastante semelhantes - além de agora temos algum quarto extra, para que possamos ampliar as áreas de conteúdo e também incluir uma navegação lateral.

A navegação lateral é o bit do site que a partir do deslocamento estou mais animado. Tomando a inspiração na arte original da banda, eu construí a navegação como uma silhueta de árvore com folhas. Cada folha era um botão ligado a uma página diferente do site. Além disso, como você rolou e pairou longe da folha, a folha animaria, caindo no chão. Flash foi ótimo nisso; foi chamado de tweening. Você pode definir um elemento em um quadro-chave na interface na linha do tempo, criar outro quadro-chave ao longo da linha do tempo e adicionar um caminho para o elemento seguir. Tomando as coisas um pouco mais, variando os caminhos, duração e velocidade das folhas caindo, acabei com algo que eu estava muito satisfeito com.

Mas agora não estamos usando o Flash, então como fazemos isso? Muitas vezes vou pular para Codepen ou JS Bin. Para aqueles de vocês que não estão cientes, o Codepen e o JS Bin são serviços on-line que permitem codificar rapidamente e salvar. Eu tendem a ver Codepen como mais design de design e Js Bin mais javascript focado. Para este projeto, vou usar o Codepen para criar a navegação na árvore por algumas razões. Primeiro, quero começar a construir a versão principal principal do site e, de fato, fazendo isso, se as coisas fossem críticas do tempo, eu poderia acabar com um MVP. Embora haja aprimoramentos no site que puder ser feito adicionando a navegação e animação de folhas agradáveis, isso levará mais tempo para produzir. Uma vantagem de trabalhar em codepen para a navegação de árvores significa que é isolado do site principal e base de código. Se as coisas se tornarem complicadas, consigo economizar onde estou, continue com o site principal construir e depois voltar para a navegação. Às vezes acho que em ir longe de um problema, ou mesmo dormir nele, meu subconsciente pode continuar pensando nisso. Então, ao retornar ao problema, uma solução se apresenta.

Svgs! Eu amo svgs. Anteriormente no Flash, tirei os ativos da folha no Illustrator. Surpreendentemente, ainda tive um CD de trabalho com o trabalho artístico original e foi capaz de abri-lo. Hoje em dia eu uso esboço e fiz um ótimo trabalho de abrir o arquivo. Agora tenho os ativos da folha prontos para serem exportados como SVGs. Por que o SVGS? Há muitas razões. Se fôssemos usar um JPG, ou GIF em um dispositivo de retina, também teríamos que fornecer maiores ativos, caso contrário, eles pareceriam desfocados. Além disso, com SVGs, podemos usar CSS. Isso é ótimo e nos permite simplesmente alterar a cor do SVG usando um pouco de CSS em vez de ter que criar outro ativo de imagem. Isso significa que é mais fácil manter, e como um bônus também é mais performático. Se você não está familiarizado com o SVG, eu recomendo ler sobre eles e o incrível trabalho do meu bom amigo, Sara soueidan. .

Com os ativos da árvore e da folha agora no lugar, a última coisa para adicionar é a animação. Existem algumas abordagens que eu poderia levar com isso. Um seria para permanecer fiel ao caminho do flash original que fiz. Isso significaria replicar os caminhos e usar o SVG e, em seguida, potencialmente ainda mais o SVG trabalhar com caminhos e animatemotion. Eu gosto bastante dessa ideia de um ponto de vista nostálgico, mas CSS veio muito ao longo dos anos, e agora nos transformamos e traduzimos à nossa disposição, então isso poderia ser outra abordagem. Tomando as coisas um passo adiante, poderíamos até adicionar algum javascript que randomaria as folhas caindo.

Ambas as opções soam boas, mas estou balançando para a rota LED de mais CSS. Aqui está outro benefício de usar codepen, posso ir rapidamente e experimentar uma abordagem. Se acontecer que é mais complicado do que eu originalmente pensei, ou não parece certo, posso tentar outra abordagem com pouco tempo desperdiçado. Na verdade, isso acabou por ser uma ótima ideia! Eu ainda estou olhando para opções para isso - por favor, consulte o projeto no GitHub para o resultado final.

Com a navegação na árvore agora classificada, voltei para a primeira abordagem móvel, construindo a navegação. Se você está familiarizado com o Sass, você provavelmente já encontrou variáveis. Mas você sabia que as variáveis ​​agora estão disponíveis no CSS? Eles têm Suporte de navegador bastante decente No Chrome, Borda, Safari e Samsung Internet também! Como estou tentando manter o CSS básico e evitar a necessidade de quaisquer dependências extras, esta é uma ótima notícia. Então, como poderíamos implementar isso? No topo da folha de estilo, declaro minhas variáveis:

: raiz {
  --GREY: #ccc;
  --red: # fb0f0c;
  - Grid-size: 10px;
} 

Agora que eles são declarados, posso chamá-los, então, por exemplo, definir a cor do fundo do corpo seria assim:

 corpo {
  Fundo: var (- cinza);
} 

Tomando este passo adiante e para ajudar com o alinhamento de grade, espaço em branco, ritmo vertical, você pode ter notado que também defini uma variável de tamanho de grade. Variáveis ​​funcionam extremamente bem com o Calc e que parece um pouco algo assim:

 // variável padrão sendo usada, saídas 10px.
padding-top: var (- tamanho de grade);

// Adicionando calc a multiplicar a unidade variável por 2, saídas 20px.
Padding-Bottom: Calc (var (var (- tamanho de grade) * 2); 

Com os estilos de navegação móvel completos, vamos resolver a funcionalidade para esconder e mostrá-lo. Para o botão de alternância, aplicaremos uma tag de rótulo e, na marca NAV, adicionaremos uma entrada:

& lt; Cabeçalho Classe = "Header" & GT;
  & lt; h1 class = "header_title" & gt; site de banda & lt; / h1 & gt;
  & lt; h2 class = "header_currentpage" & gt; home & lt; / h2 & gt;
  & lt; etiqueta para = "mobilenav_toggle" class = "mobilenav_toggle" & gt; toggle & lt; / etiqueta & gt;
& lt; / header & gt;

& lt; nav class = "mobilenav" & gt;
  & lt; input type = "caixa de seleção" ID = "mobilenav_toggle" Botão "& gt;
  & lt; ul class = "mobilenav_list" & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a classe = "mobilenav_listitemlink" href = "#" & gt; home & lt; / a & gt; / lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a classe = "mobilenav_listitemlink" href = "#" & gt; about & lt; / a & gt; / lt; / lt; / lt; / lt; / lt; / lt; / lt; / lt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; portfolio & lt; / a & gt; & lt; / lt; / lt; / lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a classe = "mobilenav_listitemlink" href = "#" & gt; news & lt; / a & gt; / lt; / lt; / lt; / lt; / lt; / lt; / lt; / lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; uma classe = "mobilenav_listitemlink" href = "#" & gt; contato & lt; / a & gt; & lt; / lt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Usando o seguinte CSS, podemos mostrar e ocultar o menu de navegação; Porque nós queremos o rótulo no cabeçalho, podemos usar ~ aka til ou (u + 007e) por isso funciona enquanto não está sendo imediatamente sucedido pelo primeiro elemento.

 #Mobilenav_Toggle [Type = Checkbox] {
  Mostrar nenhum;
}

#mobilenav_toggle [Type = Checkbox]: Marcado ~ .mobilenav_list {
  Exibir: bloco;
} 

Com a navegação móvel completa, é hora de implementar alguns web design responsivo . Adicionando no conteúdo principal para o site, usando a visualização responsiva nas ferramentas de desenvolvedor do Chrome, eu sou capaz de aumentar a largura da viewport até que eu sinto que há espaço suficiente para segurar adequadamente a navegação de árvores. Isso acaba sendo em 600px e, para isso, podemos usar uma consulta de mídia:

 .treenav {
  Mostrar nenhum;
}

@media tela e (largura mínima: 600px) {
  .treenav {
    Exibir: bloco;
  }
} 

Quase lá! Finalmente para a navegação na árvore para se sentar ao lado da área de conteúdo principal, vou fazer uso de flexbox:

 .container {
  Exibir: flex;
}

.treenav {
  Mostrar nenhum;
  largura mínima: 140px;
} 

Agora a navegação na árvore ocupa 100% de altura, com o conteúdo fazendo o mesmo e sentado à direita. Isso significa que não importa quanto tempo o conteúdo se torne, ele nunca fluirá debaixo da navegação na árvore. Se você gostaria de saber mais sobre Flexbox, eu recomendaria verificar flexbox.io. pelo único e único wes bos. Há muito que pode fazer!

Isso é tudo que tenho tempo para no momento, mas ainda há muitas coisas que poderíamos fazer para tornar este projeto ainda melhor. Se você tiver alguma dúvida, ou gostou do artigo, por favor diga olá no Twitter ou através de. meu site ou me envie uma solicitação de tração no GitHub!

Este artigo foi originalmente publicado em questão 304 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 304 aqui ou Inscreva-se aqui .

Artigos relacionados:

• 5 dicas para CSS super rápidos
• Animar svg com javascript
• Entendendo a propriedade de exibição CSS