sergio-campos @ 01:25

Sab, 16/04/11

Renders das animações

A qualidade e resolução são parâmetros definidos no campo “render settings” e o formato é um parâmetro definido no campo “output model settings”. Quanto à qualidade foi escolhida a opção “Best” e a resolução como “Full”. Pretende-se que as resoluções do vídeo sejam mantidas até à criação do ficheiro final.

 

Depois de criadas as composições no After Effects e feitas as animações, recorrendo às técnicas já especificadas na entrega do trabalho prático 3, surge uma etapa bastante relevante e crucial no processo de produção dos conteúdos para o documentário. Esta etapa refere-se ao render das animações utilizadas. O render está representado graficamente no esquema e surge após a criação das animações no AE.

 

Antes de fazer o render das animações é importante definir correctamente os parâmetros do mesmo, tendo-se como mais importantes os seguintes:qualidade;resolução;formato;tamanho;adequabilidade para web (upload).Este processo começa por definir quais as melhores definições, tanto em Render Settings como no Output Model, ou seja, a definição das opções de render e a escolha do formato final do ficheiro.

Quanto ao Render Settings, este já vem com as definições de “Best Quality” (melhor qualidade), na qual as dimensões do ficheiro final são as máximas, neste caso de 1920px por 1080px. Esta resolução é superior à da criação da composição, sendo os pixeis guardados na vertical os mesmos guardados na criação da composição, e os pixeis guardados na vertical multiplicados numa proporção de 1.33, sendo o resultado final o desejado 16:9. 
 

Imagem 12 - After Effects Render Settings

 

 

 

Este estudo materializou-se pela experimentação dos principais codecs utilizados e comparação de renders de trechos de filme de 5 segundos. Os codecs utilizados definiram-se como resultado de um levantamento feito em suportes bibliográficos dos codecs mais utilizados na produção audiovisual. 

Um dos elementos de suporte bibliográfico mais relevante foi disponibilizado pelo professor Jorge Ferraz, nomeadamente, uma apresentação que o professor usa como resurso na disciplina de MCMM, do 1º ano de Mestrado em Comunicação e Multimédia.

 

 

Note-se que é importante que os codecs existentes estejam adequados à sua existência para contexto web e em plataformas de publicação.

Os encoders são utilizados para comprimir ficheiros e para guardar em “containers” que representam as extensões e tipo de ficheiro (e.g. .mov - H264; .mp4 - MPEG-4).

 

Nota: No caso dos containers .mov e .mp4, caso o encoder seja o mesmo na compressão, o resultado final do vídeo, em termos de qualidade, será igual. Neste processo o que realmente é fulcral é a definição dos encoders a utilizar na compressão do vídeo tendo sempre presente o seguinte pensamento: melhor equilíbrio entre qualidade/tamanho.

 

É importante referir que existiram algumas dificuldades quanto à definição dos containers e encoders, devido à disposição dos mesmos no After Effects, de forma aleatória e sem esta divisão perceptível. Porém através de estudos sobre estas temáticas, conseguiu-se perceber as diferentes vertentes.

 

Testes realizados na plataforma de publicação YouTube

 

A plataforma de publicação Youtube permite upload de vídeos em alta definição, no entanto, para utilizadores comuns, existem algumas restrições:

 

  • Vídeo inferior a 2GB de tamanho;
  • Upload de vídeo num formato compatível com os que o Youtube suporta;
  • Vídeo com um tamanho inferior a 15 minutos.

 

Estas questões podem ser contornadas através do uso de contas “Director” ou então, para um tamanho e duração bastante superiores, utilizar a ferramenta “Advanced Video File Upload”, com recurso a Java.

 

Imagem 13 - Upload avançado de ficheiros

 

 

O Youtube permite o upload de ficheiros nos seguintes formatos:

  • WebM 
  • MPEG4, 3GPP e .MOV 
  • AVI
  • MPEGS
  • WMV
  • FLV

 

Para os testes realizados foi utilizado um trecho de vídeo captado pelo grupo, numa sessão de focus group, com a duração de 4s.

 

Output Model: Quicktime

Render Settings: Best Quality

 

Imagem 14 - Cálculos para o tamanho de vídeo com quicktime

 

Imagem 15 - Print Screen de exemplo da qualidade em Quicktime

 

 

Output Model: Codec H264

Render Settings: Best Quality

Imagem 16 - Cálculos para o tamanho de vídeo com H264

Imagem 17 - Print Screen de exemplo da qualidade em H264

Algoritmo complexo de compressão o que resulta num maior uso da capacidade de processamento das máquinas onde estão a ser feitos os renders. A maior dificuldade tem a ver com a existência de dispositivos de leitura do encoder H264.

 

 

Output Model: Codec MPEG-4

 

Render Settings: Best Quality

Imagem 18 - Cálculos para o tamanho de vídeo com MPEG-4

Imagem 19 - Print Screen de exemplo da qualidade em MPEG-4

 

 

 

Sendo o encoder H264 um novo formato para o standard encoder MPEG-4, este será o formato mais estável e com melhor equilíbrio qualidade/tamanho, sendo adequado no contexto de web streaming.

 

Output Model: Codec FLV

Render Settings: Best Quality

Imagem 20 - Cálculos para o tamanho de vídeo com FLV

 

Imagem 21 - Print Screen de exemplo da qualidade em FLV

 

Output Model: Codec F4V

Render Settings: Best Quality

Imagem 22 - Cálculos para o tamanho de vídeo com F4V

Imagem 23 - Print Screen de exemplo da qualidade em F4V

 

Os encoders FLV e F4V são utilizados para vídeos que irão ser publicadao em players Flash, como o Adobe Flash Player. Oitente por cento dos vídeos em plataformas online de todo o planeta são vistos com recurso à tecnologia Adobe Flash.

 

Além dos renders efectuados é vital especificar, visto que o documentário vai ser publicado através do Youtube, as melhores soluções a nível técnico para esta plataforma de publicação.

 

Imagem 24 - Retirado dos slides utilizados na apresentação PowerPoint “Publicação e Divulgação em plataformas digitais – encoders & containers”, Mestrado em Comunicação e Multimédia, do Professor Jorge Ferraz 

 

Tendo em consideração a tabela de comparação dos tipos de media suportados pelo Youtube e os requisitos definidos à priori quanto à resolução do documentário a disponibilizar e qualidade de video e audio conseguiu-se chegar a uma especificação concreta.

Como pode ser observado na tabela, para uma resolução de 1080p tem-se:

 

  • Container: MP4;
  • Encoding: video – MPEG-4 AVC (H.264); áudio – ACC > é o formato mais adequado para produtos multimédia na Internet;
  • Aspect ratio: 16:9;
  • Max Resolution:1920px por 1080px;
  • Audio Channels: 2 stereo;
  • Sampling Rate: 44100.

 

 3. Especificação gráfica da plataforma

A grelha da plataforma web Eurágora é composta por 6 colunas de 145px com guteiras de 17px. Estes valores foram estudados e calibrados por forma a conseguir que a grelha tivesse de largura 960px.

Este valor permite que o site se mantenha inalterado independentemente do browser onde é visualizado ( cuja largura dos borders pode variar ) e contempla também o espaço ocupado pela scrollbar.

 

Em termos verticais a unidade modular definida foram 15px, que corresponde ao valor de altura de linha dos textos dos comentários (conteúdos mais activos).

 

 

 

Grelha 1 - Cinzentos web

 

Na página Home temos um caso excepcional de utilização de outra unidade modular vertical para o texto da descrição do projecto, que irá ficar ao lado do vídeo. Aqui foi usada a unidade 10px, também devido à altura da linha do texto, uma vez que se pretendia ter um texto mais pequeno do que o usado na área dos comentários.

 

 

Grelha 2 - Cinzentos Homepage


Ao fazermos planificação em browser, verificamos que a quebra de página que o utilizador encontra logo ao iniciar a sua visita na plataforma, pode facilmente remete-lo para fazer scroll para baixo e continuar a ver os conteúdos, uma vez que tanto na Home como nas páginas de conteúdos a zona da quebra corresponde sempre à zona de comentários e os comentários ficaram sempre a meio, indicando que mais conteúdo se encontrará ao “baixar” da página.

 

 

Grelha 3 - Páginas em contexto browser

 

 

Na imagem anterior é possível verificar o nível máximo de indentação permitida nos comentários encadeados para que ao inserir um vídeo do youtube, a grelha não seja deformada. Assim sendo são permitidos 6 níveis de indentação

 

Com a construção da grelha de raiz, facilitou-se assim o processo de criação dos layouts das páginas com base nas grelhas de cinzentos, tornado a plataforma a nível visual muito mais consistente. 

 

 

 

 

Grelha 4 - Evolução grelha web

 

 

Grelha 5 -   Evolução grelha Homepage

 

 

Tipografia

 

Relativamente à tipografia a utilizar, como está referido e fundamentado no manual de identidade da marca, na plataforma Web serão usadas 2 fontes: Verdana e Trebuchet MS.

Devido aos seus diversos usos na plataforma é necessário especificar qual a fonte, tamanho, cor e altura de linha a usar para que esta possa também ser coerente.

 

 

Tipografia Homepage

 

Menu:

Verdana, 10px, caixa alta, #9c9b9b

 

Titulo da  descrição do projecto:

 Trebuchet MS, 25px, #ffffff

 

Corpo de texto da descrição do projecto: 

Verdana, 12px, #ffffff, altura da linha: 20px

 

Mensagem (Teaser):

Verdana, 24px, #333333

 

Titulo:

Trebuchet MS, 17px, #dddddd

 

Informações da publicação: 

Altura da linha:15px

“Posted”, “by”: Trebuchet MS, 10px, #888888

“APR 14, 2011”, “ADMIN”: Verdana, 10px, caixa alta, #aaaaaa

 

Corpo de texto do comentário:

Verdana 10px, altura da linha:15px

Como está presente nas imagens da plataforma a caixa de inserção de comentários permite que o utilizador formate o seu texto: negrito, itálico e sublinhado bem como o seu alinhamento: esquerda, direita e ao centro.

 

Texto dos botões de submissão de comentário

Verdana, 13px, #ffffff, alinhado ao centro do botão.

 

Titulo footer:

Trebuchet MS, 22px, #dddddd

 

Texto footer:

Trebuchet MS, 12px, #ffffff 

 

Texto Copyright:

Trebuchet MS, 10px, #888888;

 

 

Tipografia página conteúdo

 

Titulo da página (teaser)

Verdana 24px, #ffffff, alinhado ao centro da caixa

 

Caminho da página:

Trebuchet MS, 10px, #888888 caixa alta

 

Corpo de texto:

Verdana, 20px, #000000, altura da linha 30px

 

 

As escolhas tipografias acima descritas tiveram por base a cuidada selecção de fontes para que fossem usadas apenas fontes de sistema, disponíveis tanto em PC como MAC, para que todos os utilizadores visualizassem a plataforma de igual modo.

Todos estas escolhas tipográficas, não foram somente criadas no Photoshop, mas a sua leitura e desempenho foi também validado em HTML, suporte final de visualização das mesmas. 

 

Manual de Identidade

 

 

 

4. Especificação técnica da plataforma

Arquitectura de rede

 

Esquema 1 - Arquitectura de rede

 

O esquema representa as ligações e fluxos de informação presentes na interacção com a plataforma web Eurágora.

O esquema está subdividido por forma a representar separadamente os processos que ocorrem no client-side dos que ocorrem no server-side. No que diz respeito ao client-side, estão representados os processos de conexão entre o utilizador (regular e administrador) e o servidor da plataforma, através de um router, sendo que este é indispensável para a conexão à Internet. 

No server-side podem distinguir-se as funcionalidades, respectivos plug-ins instalados, ligações externas e base de dados. De entre as funcionalidades identificam-se a partilha de conteúdos (share content), login através da conta de Facebook ® (login with facebook), classificar vídeo (rate video), submissão de vídeo (através de upload directo – easy comment upload - ou colando o URL do vídeo do Youtube ou Vimeo – embedded video with link), pesquisa e edição de perfil, sendo que estes dois últimos não dependem de nenhum plug-in.

Cada funcionalidade tem uma ligação independente ao respectivo plug-in, sendo que este último pode ter acesso a um elemento externo – por exemplo os plug-ins de login através de Facebook ® que se liga, a partir do servidor da plataforma, ao servidor do próprio Facebook ®. Outro caso que se enquadra nesta perspectiva é o das legendas automáticas do Youtube ®, sendo que estas legendas são geradas em tempo real através do acesso ao serviço de tradução do Google ®.

 

 

 Inserir comentário

 

 

 Esquema 2 - Fluxograma inserção de comentário

 

Na acção de inserir um comentário na plataforma, o utilizador começa por redigir o comentário no formulário de inserção do mesmo, após escrever pode optar se quer inserir um ficheiro para enriquecer o seu comentário ou não.

Caso não o faça, submete o comentário que será gravado na BD e ficará à espera de aprovação por parte do administrador, que pode valida-lo e assim este passar a constar na plataforma, como pode não o aprovar caso não cumpra as mínimas regras de bom senso e assim o eliminará.

 

Inversamente se o utilizador decidir inserir um ficheiro, tem 2 hipóteses: pode colar o URL do vídeo de sites repositórios de vídeo como o Youtube ou o vimeo ou pode fazer upload de um ficheiro que tem no seu computador para a plataforma.

 

Se optar por colocar o URL do vídeo, após essa colocação submete o comentário, que por sua vez activará um plugin (Oembed for comments) que fará o embed automaticamente do vídeo no comentário. Após essa actuação do plugin a informação é gravada na BD e ficará a aguardar a aprovação do administrador. Como referido anteriormente, se o administrador aprovar o comentário este passa a figurar na plataforma, caso o reprove este é eliminado.

 

O outro método enunciado era o upload de um ficheiro local. Existe no formulário de inserção de comentários um campo que permite seleccionar o ficheiro pretendido para fazer upload. Convém mencionar que tanto este campo de inserção como o próprio upload do ficheiro são efectuados através de um plugin (easy comment upload).

Após  submissão do comentário este é gravado na BD e ficará a aguardar a aprovação do administrador que efectuará o processo já descrito em cima.

 

Todos os comentários carecem de aprovação por parte do administrador para que assim exista algum tipo de controlo sobre as publicações a serem inseridas, para que os parâmetros de qualidade da plataforma e do projecto não se desvaneçam. 

 

Login

 

 

Esquema 3 - Fluxograma login 

 

Representa o processo de login, quer através do sistema interno do sistema, quer através do sistema externo do Facebook ®. O processo externo de login através do Facebook ® não é processado no servidor da plataforma.

 

Assim que o utilizador tenta fazer login na plataforma Wordpress ® tem duas opções: registar-se ou, caso já o tenha feio anteriormente, inserir os respectivos dados de utilizador. Se o utilizador optar pelo registo, é-lhe apresentado um formulário que deve preencher para completar o registo com sucesso. Assim que este registo seja validado, o utilizador está autorizado a entrar na plataforma. O acesso à plataforma é feito através da inserção de um par utilizador/palavra-passe.

 

 

 

 

 

Mapa de navegação 

 

 



Blog do projecto do 3º ano de NTC no âmbito da UC de Projecto.
Pesquisar
 
Ligações
diigo library
Arquivos
blogs SAPO