Aguarde...

26 de agosto de 2022

Como codificar um jogo da era dos anos 2000 com HTML/CSS e JavaScript

Como codificar um jogo da era dos anos 2000 com HTML/CSS e JavaScript

Em homenagem ao 11º aniversário da Codecademy, estamos olhando para os sites e softwares dos anos 2000 que influenciaram nossos fundadores a construir a Codecademy — e inspiraram uma geração a aprender a codificar.

ICYMI, para a celebração do 11º aniversário da Codecademy, estamos oferecendo um curso intensivo sobre a internet dos anos 2000 e prestando homenagem aos sites e softwares que definiram uma geração de tecnólogos.

Ao pensar nas tendências icônicas da Internet dos primeiros anos de vida, a mente da maioria das pessoas vai direto para o AIM e o Myspace . E embora esses sites tenham apresentado ideias inovadoras para a época, existem outros dois sites importantes que prepararam o terreno para plataformas como Facebook e YouTube: HOTorNOT e Facemash.

Continue lendo para saber como esses sites funcionavam e o rico legado que eles deixaram na World Wide Web. Em seguida, codifique seu próprio miniaplicativo dos anos 2000 chamado DOGorNOT (juramos que não é tão estranho quanto parece) usando HTML, CSS e JavaScript.

Uma breve história de HOTorNOT e Facemash

Em 2000, engenheiros de software no Vale do Silício codificaram um site chamado HOTorNOT , onde as pessoas podiam fazer upload de fotos de si mesmas e fazer com que estranhos classificassem sua “gostosura” em uma escala de 1 a 10. sozinho se tornando popular) hoje – mas na época, era amplamente considerado bom. O grande sucesso do HOTorNOT foi um momento crucial para a internet.

Lembre-se de que isso foi antes do Tinder e do Facebook existirem, então a ideia de compartilhar fotos e convidar a um diálogo – sobre a aparência de pessoas não famosas – era nova. “Tudo no HOTorNOT era sobre querer cultivar a ideia de uma web bidirecional, encontrar maneiras de conectar pessoas”, disse o cofundador James Hong ao Mashable em 2020. “Nós realmente nos vimos tentando construir o melhor roteador de pessoas”.

Outros programadores repetiram a premissa do HOTorNOT e tiveram sucesso. Em 2003, um estudante do segundo ano de Harvard chamado Mark Zuckerberg (já ouviu falar dele?) hackeou os servidores da escola e codificou um “ site de pegadinhas ” chamado Facemash, que apresentava duas fotos de estudantes e convidava os usuários a votar na foto mais atraente. O Facemash se tornaria o Facebook.

Até os cofundadores do YouTube creditaram ao HOTorNOT a ideia de uma plataforma de compartilhamento de vídeos. “Fiquei incrivelmente impressionado com o HOTorNOT, porque foi a primeira vez que alguém projetou um site onde qualquer pessoa poderia enviar conteúdo que todos pudessem visualizar”, disse o cofundador do YouTube Jawed Karim à TIME em 2006. “Esse foi um conceito novo porque até aquele momento, eram sempre as pessoas que possuíam o site que forneciam o conteúdo.”

Como codificar seu próprio aplicativo DOGorNOT

Se toda essa nostalgia da internet te faz sentir, temos um projeto de codificação divertido para você que envolve a construção de um jogo estilo HOTorNOT, DOGorNOT , usando HTML/CSS e JavaScript.

O mini aplicativo DOGorNOT é manso em comparação com seus antecessores. Para jogar, clique na foto que você acredita ser um cachorro (mais difícil do que parece!), e veja se você acertou.

Quer codificar seu próprio jogo inspirado em DOGorNOT? Primeiro, confira este espaço de trabalho para dar uma olhada no código que Jiwon Shin, Desenvolvedor de Currículo Sênior da Codecademy, usou para fazê-lo. Qualquer pessoa com um login gratuito do Codecademy pode acessar um IDE para experimentar a criação de aplicativos como este em espaços de trabalho .

Como codificar um jogo da era dos anos 2000 com HTML/CSS e JavaScript

Aqui estão as linguagens de programação e conceitos de codificação que Jiwon usou para criar o DOGorNOT, além de links para cursos que o guiarão pelas habilidades. Para aprender todas essas técnicas e entender como as linguagens interagem, confira nosso curso Construindo Sites Interativos em JavaScript . (E não desanime se você não entender o que tudo isso significa – nossos cursos são adequados para iniciantes!)

Postado em Blog
Escreva um comentário