17/08/2019

Construindo o site (um making-off)



Desde a noite desta sexta, 16, está no ar meu site de fotos & vídeos! Oficialmente foi a partir das 20h19 que ficou disponível o conteúdo no link https://fabiogomesfotocinema.com.br/ (mas na hora anterior eu já estava realizando diversos testes para garantir que tudo funcionasse a contento, então talvez você tenha conseguido ver alguma coisa antes do horário oficial). Acima, você vê o aspecto do cabeçalho do site nessa noite inaugural.  

E aqui ao lado, vê o primeiro "esboço" registrado do site, em imagem do dia 19 de julho. Pois é, fiz o site basicamente em um mês - para ser mais exato, dos primeiros movimentos para o site, em 18 de julho, até sua publicação efetiva, se passaram 28 dias. E (até posso dizer, curiosamente) em momento algum eu duvidei de minha capacidade de fazê-lo (e só me dei conta disto ontem, já horas após ele estar bonitinho no ar).

Mas que motivos eu teria para duvidar? Basicamente, seriam dois:

1. A última vez que eu montei um site tinha sido ali por 2009 - há 10 anos, portanto. Foi o site de um músico brasileiro então vivendo na Europa. Na época não cheguei a assiná-lo (ou seja, pedi para meu nome não constar no site como o responsável por ele). Mesmo assim, uma outra artista brasileira (já não recordo de que área) entrou em contato comigo porque a produtora do músico informou à artista que eu fizera o site. A "proposta" da artista era de que eu fizesse um site para ela sem cobrar, aliás ela me "pagaria" com divulgação - correndo eu então o sério risco de vir a fazer outros sites gratuitos... Antes disso, em 2008, fiz o site de uma fotógrafa, pelo qual fui creditado (em tempo: fui pago pelo site do músico e da fotógrafa). Nenhuma destas duas páginas se encontra mais no ar. Aliás, nem os sites que fiz para mim - o Brasileirinho, lançado em 2002, saiu do ar em 2016; já o Jornalismo Cultural, de 2005, foi descontinuado agora no dia 8 (por coincidência, ambos duraram 14 anos). Mesmo que os sites estivessem no ar, eu já não os atualizava há um bom tempo, então a rigor há 10 anos eu não mexia pra valer em HTML.

2. Eu temia que o novo site não fosse amigável para celulares. Explico: meus antigos sites foram projetados numa época em que acessar a internet era algo feito em casa, a partir de um computador desktop, com conexão discada (sim!! risos). Inclusive o Brasileirinho saiu do ar em 2016 já sem página de fotos (explico: ali por 2002, era raro você ter fotos em todas as publicações de um site, havia um certo padrão de haver uma página só para fotos, em função da dificuldade de acesso. O visitante já sabia que aquela página era mais pesada e demoraria para carregar). O Jornalismo Cultural também tinha raros artigos com fotos, e nem lembro mais se chegou a ter uma página específica para elas. Vídeo então só se disseminou pelos sites em geral apenas após o advento do YouTube, antes o que se dizia era que além de subir o vídeo (um arquivo naturalmente pesado) você precisaria construir o player dele utilizando flash (só ler a respeito já servia para te desestimular de ao menos iniciar a tarefa). Ao longo da última década, porém, a conexão padrão passou a ser a banda larga e o dispositivo preferencial de acesso à rede se tornou o celular. Então se eu não temi não conseguir fazer o site, confesso que tinha grande receio de o resultado não "conversar" a contento com o celular.

A decisão por fazer o site foi algo repentina. Leitores mais atentos deste blog podem ter ficados perplexos com a seguinte sequência:


  • Em 11.7, eu encerrei a republicação do artigo de 2016 Os blogs poderão voltar a ser mais relevantes que as redes sociais? com um making-off onde dizia "A dúvida exposta no último parágrafo já não me acomete. Recentemente, descartei em definitivo a ideia de criar um site sobre meu trabalho de Fotografia & Cinema. O principal motivo? Não vejo o que eu poderia publicar num site que eu não possa postar num blog." A dúvida, no caso, seria esta: "Pra concluir: por muito tempo ouvi a pergunta, geralmente a propósito do Som do Norte: "Ah, seu blog é tão legal, por que você não o transforma num site?" " 

Emile Brown Abdon


Respondendo então a pergunta do título, há atualmente duas alternativas seguras: os Status do Whatsapp (...) ou então você postar conteúdo adulto em seu próprio site. Em seu site, você não estará sujeito às regras e restrições que os donos das redes sociais impõem para quem delas queira fazer uso. Inclusive estou revendo minha posição, expressa aqui no blog no dia 11.7, de descartar a criação de um site voltado para meu trabalho em Fotografia. Aguardem!

Mas talvez não tenha havido perplexidade, já que a decisão anunciada era coerente com o exposto no texto citado. Enfim, o caso é que já no dia seguinte parti para a produção do site. 

Editor e referências 

O primeiro passo (geralmente este é o segundo passo, ver OBS ao final do texto) foi escolher um editor de HTML - para quem não sabe, HTML é a linguagem usada para elaborar um site, e é fundamental ter um programa para editá-la. Escolhi o NVU (baixe aqui a versão grátis para Windows), que eu já usava para eventuais edições nos blogs. Cheguei a considerar usar um outro programa, porém ele utiliza php, com que eu nunca trabalhei, salvo casos pontuais (sabe aquelas páginas de sites onde você manda uma mensagem e na resposta aparece o seu nome, como se fosse alguém falando com você? Elas usam php). Achei que voltar a mexer com HTML depois de 10 anos já era desafio suficiente; claro que se a única opção para o site fosse usar php eu encararia o desafio, mas também já sabia que dificilmente não existiriam alternativas. 

Com o NVU, e também páginas dos antigos sites Jornalismo Cultural (que, como ainda estava no ar, eu acessava diretamente no HD virtual do meu provedor) e Brasileirinho (há páginas antigas disponíveis no Wayback Machine), fui montando o site, que se você for ver bem é bastante simples. A página inicial apresenta minha biografia, informações de contato, formulário para agendamento de ensaios e acesso direto a vários ensaios e vídeos, além dos links para as galerias completas. Também no momento há uma área de Destaque, que pode aparecer ou não (ali pode ir, por exemplo, meu roteiro de viagens). A inspiração dessa estrutura básica de apresentar o máximo possível em uma só página eu busquei no antigo site da cantora Anitta; sua página era assim ali por 2015, quando eu procurei referências para fazer o site de uma artista, o que acabou não acontecendo. Atualmente, porém, o site da Anitta não adota mais este formato. Segui pesquisando e vi que o site da cantora Alcione segue a linha que eu tinha em mente (em linhas gerais, já que ele usa php e eu não - risos). Outra referência buscada em 2015 e que se mantém como naquela época é o site do poeta Vinicius de Moraes. Mas referência quer dizer exatamente isto, ver como outros programadores fizeram e pensar em como eu posso fazer para tornar a apresentação do meu conteúdo funcional e agradável.

No site do Vinicius, naturalmente, há muito texto - tanto das poesias e crônicas quanto as letras das músicas. Mas eu descartei ter área de texto no site, vou seguir postando textos no blog e o site fica reservado para a divulgação organizada do meu material fotográfico e audiovisual. A ideia é usar o melhor de cada ferramenta. Um dos motivos que me levou a na prática abandonar o site Brasileirinho ali por 2009 foi justamente a imensa quantidade de texto que o site já reunia, e as ferramentas de pesquisa da época não estavam mais dando conta; lembro de pessoas dizendo que não encontravam no site o texto que buscavam.

Publicando vídeos

Enfim, tendo a página inicial esboçada e descartando a publicação de textos em profusão, só restava equacionar a publicação das fotos e dos vídeos. Comecei por estes, até por saber que boa parte de como eu decidisse publicar os vídeos serviria também para as fotos. Mas aí eu me impus um desafio - como poderia eu ter vídeos no site sem depender do YouTube? O recente artigo sobre censura nas redes sociais teve como consequências a vontade de criar meu site e o desejo de não depender justamente destas redes censoras para fazer meu trabalho chegar até você. 

Fui pesquisar então alternativas para a publicação de vídeo e em seguida me deparei com este artigo do site WikiHow com quatro formas de publicação (a primeira, para espanto de ninguém, é o YouTube - risos). A quarta forma, utilizando hiperlink, foi justamente a que mais me agradou, por não exigir nenhum código complexo nem recorrer a site externo - e principalmente por funcionar a contento tanto no notebook quanto no celular. Inclusive fiz um teste e vi que o mesmo mecanismo funciona às mil maravilhas também para áudios (abrindo um caminho para usos futuros, já que, pelo tema do site ser eminentemente visual, não haveria agora áudios a postar).

Impasse nas páginas de fotos

Estruturada a seção de vídeos, faltava então a de fotos, que eu sabia ser a que mais atenção requer. Primeiro, dada a própria natureza do site, ou seja apresentar o meu trabalho como fotógrafo. Um trabalho que já é bastante amplo e cuja tendência é aumentar. Claro que há a expectativa de os vídeos também irem aumentando, mas podemos pensar no crescimento destes como aritmético e no das fotos como geométrico ou exponencial. Então a forma de publicar as fotos deveria ser bastante prática para mim e facilmente acessável pelo público, e ainda levar em consideração que o volume de fotos estará sempre aumentando.

Voltei a pesquisar e localizei duas ideias no site W3Bai: uma de galeria usando CSS e a outra, uma galeria responsiva (que se ajusta à largura da tela onde é exibida), ambas dispensando a criação de miniaturas, uma das coisas mais trabalhosas relativa à publicação de página de fotos.

Cheguei a montar algumas páginas de ensaios como galeria responsiva, mas algo não me agradava de todo. Para a página não pesar muito, eu teria que limitar a quantidade de fotos em no máximo 20 por página. Fora isso, eu não conseguia ter muito controle sobre o aspecto final (para isso, teria que ficar às vezes horas reposicionando as fotos a partir do código HTML e ir testando até chegar a um resultado satisfatório). Enfim, embora tenha chegado a utilizar essa solução em uma página que entrou na versão final do site (o ensaio Sensual, com Emile Brown Abdon, com apenas três fotos), não me parecia o ideal.

Paralelo a isso, eu queria ter alguma forma de animação com fotos no site. Lembrei que na página inicial do Brasileirinho havia uma função de javascript que fazia charges se alternarem, através de uma janela de iframe. Cheguei a localizar um código para iframe no site CriarSites e consegui criar uma alternância de imagens combinando informações de diversas fontes (motivo pelo qual não tenho um link específico para citar aqui). Nos testes no meu notebook o código funcionou tão bem que cogitei trocar a apresentação dos ensaios da já citada galeria responsiva para essa animação via iframe. Porém as pessoas a quem enviei o link não conseguiram abrir - ou conseguiam, mas só viam uma foto parada. Fui me informar em fóruns da internet e fiquei sabendo que o iframe é um recurso quase em extinção, justamente por não funcionar a contento em boa parte dos navegadores atuais. Acabei criando apenas uma animação com artes divulgando meu trabalho em si (com ditos como "Minha vida é fotografar a sua" e "Quer ficar bem na foto? Me chame"), que fica rodando no pé da página inicial, onde não há problema se você consegue ver as artes se alternando ou apenas uma arte parada.

Enfim, eu estava num certo impasse: tinha uma solução relativamente funcional para apresentar as fotos, embora com limite de imagens por página, e não conseguia levar a ideia de animação para as páginas de fotos. E creio não ser muito difícil entender a diferença entre você fazer o que imaginou e ter que se contentar com o que conseguiu fazer.






A solução estava na minha frente o tempo todo

Foi aí que me dei conta de que eu podia resolver tudo isto de uma forma muito simples, e que inclusive eu já utilizava! SIM! Desde julho de 2016, eu publiquei diversos ensaios no blog e no YouTube (e, posteriormente, no IGTV) editados em vídeo no Windows Movie Maker. E hoje eu me dei conta de que nunca contei como comecei a fazer isto.

Em 16.6.16, o músico e produtor Félix Robatto estreou em Belém a festa semanal Lambateria, no bar Fiteiro (o evento depois passaria por diversos locais). Nesse dia, foi apresentada uma  exposição de trabalhos do fotógrafo Thiago Araújo (falecido aos 28 anos em 11.7.15), no formato de vídeo; cada foto ficava em exibição por 5 segundos. Não estive na festa (na ocasião me encontrava em Maceió), mas tive acesso ao vídeo através das redes sociais e considerei uma excelente forma de apresentação de material fotográfico, passando então a utilizar esta ideia para meus ensaios, apenas alterando a permanência de imagem em tela para 4 segundos, que me pareceu o ideal.


  • Observação: a bem da verdade, eu já fizera ao menos um vídeo nesse estilo antes da Lambateria. Foi um vídeo com fotos da dançarina Letícia Paixão, em 2014. Mas foi só depois que vi a homenagem a Thiago Araújo que passei a sistematicamente produzir vídeos nesse estilo. 


Então bastava seguir fazendo os vídeos com as fotos no Movie Maker ou no app DuRecorder e publicar no site usando hiperlink, com uma grande vantagem: em vez de ter que subir para o HD virtual do site todas as fotos que serão vistas, eu subo apenas o vídeo, o que reduz em cerca de 80% o espaço utilizado no HD. Dito de outra forma: no espaço que um único ensaio ocuparia da forma "tradicional", eu consigo ter agora cinco ensaios! Além de ficar mais leve, o método se adequou perfeitamente à exibição via celular, eliminando aquela grande preocupação que eu tinha a esse respeito. Atualização 24.11.20: desde outubro eu vinha tendo problemas com o Movie Maker, de modo que agora em novembro acabei optando por criar vídeos a partir do próprio visualizador de Fotos do Windows 10. Você abre a foto, clica na parte superior esquerda em "Adicionar a" e depois em 'Novo vídeo com música' (mas pode ser sem música - risos). Dá um nome ao vídeo e clica em 'Criar vídeo'.

Solucionado esse impasse, o restante foi só organizar as páginas de navegação entre as diversas coleções de fotos e vídeos, e linkar tudo entre si. Para organizar a exibição das miniaturas nas diversas páginas, usei o código de tabelas que encontrei nesta página do CLEM-UFBA (Departamento de Composição, Literatura, e Estruturação Musical da Escola de Música da Universidade Federal da Bahia).

Preparar pra decolar

Um ponto importante desta reta final foi a criação de páginas específicas para cada ensaio ou vídeo, facilitando o compartilhamento do material por parte das modelos ou mesmo dos visitantes. Eu estava mais ou menos nesse ponto quando, na noite de 1.8, a tela do meu notebook ameaçou se soltar. O equipamento esteve na assistência até o dia 14 (com um breve retorno à casa de 9 a 12.8) e, quando de fato pude voltar a trabalhar no dia 15, bastaram quatro horas para concluir tudo. Eram cerca de 14h30 da quinta. (Obs: não excluo esses 14, ou 11 dias se considerar que estive com o notebook em casa em parte do período, por entender que mesmo sem conseguir trabalhar no código eu seguia pensando na confecção do site e planejando o que faria a seguir. Seria irreal dizer que fiz o site em 14 dias)

Precisei porém aguardar até a noite desta sexta, 16, para publicar o site, porque ocorreu uma manutenção do data center utilizado pelo meu provedor, que fica em Miami (EUA). Havia o risco de, publicando antes, o site ficar indisponível por alguns períodos. Para quem como eu já havia aguardado 28 dias, o que eram mais algumas horinhas né?


  • Agradeço à modelo Larissa Nayane e à estudante Tamires Lima que me auxiliaram grandemente durante a fase de testes do site, acessando e comentando o andamento dos trabalhos. Foram elas que me alertaram, por exemplo, que o uso de iframes não estava produzindo o resultado esperado (ficava aparecendo só a foto parada). Sem o apoio de Larissa e Tamires, talvez eu levasse mais tempo para concluir o site, ou mesmo não atingisse o resultado esperado. Às duas, meus mais sinceros agradecimentos!
***


  • OBS 28.8.19: Na verdade, faltou falar do primeiro passo para ter um site, que é registrar o domínio. Muitas empresas vão lhe oferecer este serviço, mas recomendo que você faça isso por conta própria no site Registro.br. Você começa criando uma conta no site e aí pesquisa se o domínio (ou seja, o endereço que as pessoas irão digitar para acessar seu site) está disponível. Estando tudo ok, você registra o domínio, pelo qual irá pagar uma anuidade de R$ 40,00. Em seguida, você terá que escolher uma empresa para hospedar seu site (eu trabalho com a EuroTI Host - veja aqui os planos que ela oferece, a partir de R$ 3,99/mês). Em resumo, se você optar pelo plano mais básico (e, lógico, se ele servir para seu site!), você pode ter seu site a partir de R$ 87,88/ano. 



2 comentários:

Unknown disse...

Sucesso amigo, você merece👏👏

Fabio Gomes disse...

Agradeço a visita, o comentário, o incentivo sempre!