terça-feira, 14 de fevereiro de 2017

Conteúdo interativo em pacote HTML5



CONTEÚDO INTERATIVO NO PACOTE HTML5
Existe agora um pacote HTML5 que nos permite criar conteúdo interativo para incluir no nosso website, vídeo, apresentações, jogos, questionários e muito mais. Podemos utilizar um plugin ou simplesmente embeber o código para visualizar no navegador.

Pode ver o video ou seguir os passos seguintes:


1 – CRIAR UMA CONTA:


Acedemos ao site www.h5p.org e pressionamos no botão “Create free account”.



Inserimos os nossos dados pessoais, criamos uma password, inserimos o código captcha e pressionamos no botão “Create new account”.



Após o registo, acedemos ao email para verificar as instruções que foram enviadas.

                              

2 – ABRIR O EMAIL:

Acedemos ao email e podemos utilizar uma ferramenta de autor na primeira hiperligação “testdrive” para criar conteúdo interativo facilmente.


Aparece a ferramenta online onde nos permite escolher entre várias interações possíveis para criarmos.


Vamos criar um formulário com questões de verdadeiro e falso onde iremos inserir a pergunta, a resposta (verdadeiro ou falso), os comportamentos do questionário, os feedbacks para as respostas corretas e erradas e o texto que irá aparecer.





Após colocarmos todos os dados no questionário, pressionamos no final no botão “Save” e podemos testar de imediato o questionário criado.


No caso de estar tudo como pretendemos, podemos fazer o download do pacote criado ou copiar o código de iframe “Embed” para inserir na web.



CONCLUSÃO:
Com este pacote H5P podemos criar facilmente conteúdo interativo para inserir nos websites onde descarregamos o conteúdo e utilizamos um plugin que irá fazer a leitura para CMS ou através do código embebido “embeded” num iframe para utilizarmos nos mais diversos locais.

segunda-feira, 5 de dezembro de 2016

Novidades no HTML 5.1

NOVIDADES NO HTML 5.1:
Enquanto o HTML 5.1 ainda estava em desenvolvimento, o W3C já começou a trabalhar num rascunho do HTML 5.2, que deverá ser lançado no final de 2017. Entretanto, aqui está uma visão geral de alguns dos novos recursos interessantes e melhorias introduzidas para a versão 5.1.

1 – UM OLHAR SOBRE O HTML 5.1:

A divulgação do padrão de HTML5 à dois anos foi importante na comunidade do desenvolvimento web. Não só porque veio divulgar uma impressionante lista de novos recursos, mas também porque foi a primeira grande atualização para HTML desde que o HTML 4.01 foi lançado em 1999.
Felizmente, não tivemos que esperar muito tempo para a próxima atualização de HTML. Em outubro de 2015, o W3C começou a trabalhar no rascunho do HTML 5.1 com o objetivo de corrigir alguns dos problemas deixados em aberto no HTML5. Depois de muitas tentativas, alcançou o estado de "Recomendação de Candidato" em junho de 2016, "Recomendação Proposta" em setembro de 2016 e, finalmente, uma Recomendação do W3C em novembro de 2016. Aqueles que seguiram esse desenvolvimento provavelmente perceberam que era uma viagem acidentada. Muitos dos recursos iniciais do HTML 5.1 foram descartados devido ao design deficiente ou à falta de suporte do navegador.
Enquanto o HTML 5.1 ainda estava em desenvolvimento, o W3C já começou a trabalhar num rascunho do HTML 5.2, que deverá ser lançado no final de 2017. Entretanto, aqui está uma visão geral de alguns dos novos recursos interessantes e melhorias introduzidas em 5.1. O suporte para o navegador ainda não é suficiente para esses recursos, mas vamos encaminhá-lo para pelo menos alguns navegadores que podem ser usados ​​para testar cada exemplo.

2 – MENUS DE CONTEXTO COM ELEMENTOS “CONTEXT” E ”TOOLBAR”:

A nova versão introduziu dois elementos de menu: “context” e “toolbar”. O primeiro é utilizado para apresentar o contexto dos menus, utilizando o botão direito do rato, e o segundo para definir os componentes desse menu. Neste processo de desenvolvimento, a toolbar foi descartada mas o menu contexto ainda se mantém.
Ainda podemos utilizar a etiqueta “menu” para definir um ou vários elementos “menuitem” e depois vinculá-los a outro elemento utilizando o atributo “contextmenu”.

Cada “menuitem” pode ser de 3 tipos:
  • checkbox – permite selecionar e retirar a seleção a uma opção. 
  • command – permite excluir uma ação através de um clique. 
  • radio – permite selecionar uma opção de um grupo

Um exemplo de menu contexto com item, a funcionar no Firefox, mas não funciona no Chrome.

                                         

3 – ELEMENTOS “DETAILS” E “SUMMARY”:

Os novos elementos “details” e “summary” implementam a capacidade de mostrar e ocultar um bloco de informações adicionais clicando em um elemento. Isso é algo que muitas vezes é feito através de JavaScript que agora pode ser feito usando o elemento “details” com um elemento “summary” dentro dele. Clicar no summary altera a visibilidade do restante conteúdo do elemento details.


Este exemplo funciona no Chrome e Firefox:


4 – MAIS ELEMENTOS DE INPUT:

Os dois primeiros permitem-lhe selecionar uma semana ou um mês. No Chrome, ambos são visualizados como um calendário suspenso que permite que selecione um determinado mês do ano ou uma semana. Quando acede aos valores de JavaScript, irá receber uma sequência de caracteres semelhante à seguinte: "2016-W43" para a entrada da semana e "2016-10" para a entrada do mês.


Inicialmente, os rascunhos de 5.1 introduziram duas entradas de data e hora - datetime e datetime-local. A diferença era que datetime-local sempre selecionava o tempo no fuso horário do utilizador, enquanto a entrada de data/hora também permitia selecionar um fuso horário diferente. Durante o desenvolvimento, o tipo de data e hora foi descartado e agora resta apenas o local de data e hora. A entrada datetime-local consiste em duas partes - a data, que pode ser selecionada de maneira semelhante à semana ou monthinput, e a parte do tempo, que pode ser digitada separadamente.


Funciona no Chrome mas não funciona no Firefox:

 

5 – IMAGENS RESPONSIVAS:


O HTML 5.1 inclui vários novos recursos para implementar imagens responsivas sem o uso de CSS.



O atributo de imagem srcset 

O atributo srcset permite listar várias fontes alternativas de imagem que variam consoante a densidade de pixels. Isso permite que o navegador escolha uma imagem da qualidade apropriada para o dispositivo do utilizador (determinada pela sua própria densidade de pixels, nível de zoom ou velocidade da rede). Por exemplo, você pode querer fornecer uma imagem de menor resolução para utilizadores com telefones pequenos em redes móveis mais lentas.

O atributo srcset aceita uma lista de imagens separada por vírgulas cada uma com seu próprio modificador x, que descreve a proporção de pixels (quantidade de pixels físicos em um pixel CSS) mais apropriada para cada imagem. Um exemplo simples será:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x,
  images/high-res.jpg 2x,

  images/ultra-high-res.jpg 3x"  >

Nesse caso, se a proporção de pixel dos utilizadores for igual a 1, a imagem de baixa resolução será exibida, para 2, serão exibidos valores de alta resolução e para 3 e acima, será escolhida a ultra-alta resolução.

Como alternativa, você pode optar por exibir imagens de diferentes tamanhos em vez de diferentes proporções de pixels. Isso pode ser feito usando o modificador w:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w,
  images/high-res.jpg 1000w,
  images/ultra-high-res.jpg 1400w"  >

Neste caso, a imagem de baixa resolução é definida como sendo de 600px de largura, de alta resolução para ser de 1000px e ultra-alta de 1400px.


O atributo sizes

Você pode querer exibir imagens de forma diferente, dependendo do tamanho de tela do utilizador. Por exemplo, você pode mostrar uma série de imagens dispostas em duas colunas para telas de largura e dispostas em apenas uma para telas mais estreitas. Isso pode ser obtido usando o atributo sizes. Ele permite que você traduza a largura da tela para o espaço alocado para uma imagem e, em seguida, escolher a imagem apropriada usando o atributo srcset. Aqui está um exemplo:

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw"
  srcset="images/low-res.jpg 600w,
  images/high-res.jpg 1000w,
  images/ultra-high-res.jpg 1400w"   >

O atributo sizes define a largura da imagem como 50% da largura da tela quando a largura da tela for maior que 40em ou 100% da largura quando menor ou igual a 40em.

O elemento picture

Se não for suficiente alterar o tamanho das imagens para cada tela e precisar de ter a capacidade de mostrar imagens completamente diferentes, então pode usar o elemento de imagem. Ele permite que você defina imagens com várias fontes para diferentes tamanhos de tela, envolvendo seu “img” com um elemento “picture” e especificando vários elementos filho “source”. O elemento “source” então age como a fonte de URLs para carregar as imagens.

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x,
    images/small/ultra-high-res.jpg 3x " >
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x,
    images/large/ultra-high-res.jpg 3x " >

  <img src="images/large/low-res.jpg">

</picture>

 

6 – VALIDAR FORMULÁRIOS COM “form.reportValidity()”:

HTML5 define o método form.checkValidity() que permite verificar as entradas de um formulário contra os validadores definidos e retorna um valor booleano como resultado. O novo reportValidity() é muito semelhante - ele também permite validar um formulário e recuperar o resultado, mas também relata os erros diretamente para o utilizador no navegador.

A entrada "Primeiro nome" deve ser marcada com um erro, uma vez que é obrigatório mas encontra-se vazio. Ao trabalhar como esperado, parece assim:

7 – ECRÃ TOTAL PARA FRAMES:

O novo atributo booleano allowfullscreen para Frames permite que você controle se seu conteúdo que irá ser apresentado em tela cheia usando o método requestFullscreen ().

8 – CORREÇÃO ORTOGRÁFICA COM “element.forceSpellCheck()”:

Este novo método element.forceSpellCheck () permite que você acione a verificação ortográfica em elementos de texto. Este é também o primeiro recurso desta lista que ainda não está disponível em nenhum dos navegadores. Potencialmente, isso poderia ser usado para realizar verificação ortográfica em elementos que não foram editados diretamente pelo utilizador.

CONCLUSÃO:
Com estas novas alterações, será possível criar menus de contexto e detalhes sem utilizar JS. Os novos elementos de input e correção ortográfica são um bom melhoramento mas parece-me que as alterações mais importantes serão as imagens responsivas e a validação dos formulários.

quarta-feira, 9 de novembro de 2016

Criar luzes no 3D Studio Max

COMO CRIAR LUZES NO 3D STUDIO MAX?
Vamos aprender a inserir 6 luzes standard e fotométricas. Com as luzes fotométricas iremos descarregar de um website um tipo de luz e instalar no programa para utilizar na cena.

O objeto final ficará com este aspeto:



1 – TARGET SPOT / FREE SPOT:

No painel Create, selecionamos a 3ª opção para as luzes e escolhemos a luz Target Spot.
Esta luz tem uma forma cónica com uma origem e um alvo. Pressionamos em cima da vista para criar a origem e arrastamos para criar o alvo.
Com a luz selecionada na origem, vamos verificar as propriedades no lado direito.
1.    General Parameters : Parâmetros gerais onde podemos ligar e desligar a luz.
2.    Shadows : Permite incluir ou desligar as sombras. Na combo box temos várias opções sobre a categoria das sombras.
Intensity/Color/Attenuation
1.    Multiplier: Regula a intensidade da luz. Valor por defeito é de 1,0.
2.    Decay: Regula a gradação da sombra tornando-a mais vincada ou suave.
Spotlight Parameters
É utilizado para controlar a dispersão da luz. Pode ter o formato de circulo ou retângulo.
1.    Hotspot: Raio interno da luz onde será visualizada a 100% de intensidade.
2.    Falloff: Raio externo da luz onde será visualizada com menos intensidade.
Shadow Parameters
Permite alterar a cor e densidade das sombras.
A luz Free Spot funciona com os mesmos parâmetros que a Target Spot.
A grande diferença entre estes tipos de luzes é que a Free Spot não possui o alvo, dessa forma quando colocamos a luz na vista esta aparecer na vertical. É utilizada para simular os faróis dos automóveis.

2 – TARGET DIRECT / FREE DIRECT:

A Target Direct utiliza os mesmo parâmetros que a Target Spot. A grande diferença é que a Target Direct utiliza uma forma de cilindro em vez da forma cónica.
Assim os raios são paralelos como vemos na luz natural. Também podemos utilizar este tipo de luzes para simular um holofote.
A luz Free Direct utiliza os mesmos parâmetros que a Target Direct com a pequena diferença de não utilizar o alvo.

3 – OMNI / SKYLIGHT:

Omni deriva de omnipresente. Como o nome indica, é um ponto de luz no espaço que espalha a sua luz em todas as direções.
Esta luz permite escala onde podemos alterar a forma para espalhar a luz em outras direções.
A Skylight é a simulação da luz natural em todas as direções.
Esta luz permite simular as sombras e objetos com bastante detalhe, no entanto o tempo de renderização é muito superior a qualquer outra luz.
As duas últimas luzes são utilizadas com o motor de renderização do Mental Ray.

4 – LUZES FOTOMÉTRICAS:

Estas luzes são mais complexas e podemos descarregar diferentes tipos de luzes para utilizar nesta opção. Vamos aceder ao website www.eclipselightinginc.com e descarregar as luzes que pretendermos na aba Download.
Depois de descarregar e guardar os ficheiros das luzes numa pasta, acedemos ao programa e escolhemos o tipo de luzes Photometric.
Inserimos a luz na vista e acedemos aos parâmetros gerais. Na opção Light Distribution escolhemos a Photometric Web.
Inserimos a luz na vista e acedemos aos parâmetros gerais. Na opção Light Distribution escolhemos a Photometric Web. Aparecem por baixo novas opções de Distribution. Pressionamos no botão “Choose Photometric File” e selecionamos o ficheiro a incluir e pressionamos Open.
Assim importamos as luzes descarregadas da web para dentro do programa. Agora será verificar os parâmetros consoante a luz e configurar dependendo do cenário.

CONCLUSÃO:
As luzes standard são simples de trabalhar em que os 6 tipos existentes resumem-se a 3 tipos com algumas diferenças relevantes. As luzes fotométricas são luzes mais complexas apenas utilizadas em situações especiais. A maioria das luzes que trabalhamos podemos utilizar apenas as standard.


Criar website no Adobe Muse

COMO CRIAR UM WEBSITE NO MUSE CC?
O website final ficará com este aspeto:
Vamos criar um website responsivo sem utilizar código. Iremos utilizar pontos de quebra para definir o tamanho dos diferentes ecrãs e a forma como o conteúdo é apresentado.


O projeto final ficará com este aspeto para mobile:

1 – CRIAR O PLANO DO WEBSITE:

Abrimos o Arquivo | Novo site e definimos as opções utilizando o Largura de Fluidez e colocamos a largura máxima da página para os 1200 px.
Estamos no modo planejar e vamos criar 2 novas páginas pressionando no sinal +.


2 – CRIAR PÁGINAS-MESTRE:

Entramos no modo de Design da página-mestre e vamos carregar os conteúdos.
nos Estilos de gráfico e Estilos de parágrafo para ficarem ativos no painel.
Copiar e colar o link http://adobe.ly/28J7zoO no navegador para aceder e salvar na biblioteca da Creative Cloud. É necessário ter um adobe ID para salvar.
Abrimos os painéis Estilo de Parágrafo e de Gráfico e na Biblioteca CC arrastamos o”_pidgeon_styles” para o palco.
Podemos verificar que os painéis de Estilo de Parágrafo e de Gráfico encontram-se preenchidos com os estilos que importámos da biblioteca.

3 – CRIAR RODAPÉ:

Criamos um retângulo preto no rodapé e ajustamos a largura ao do navegador.
Pesquisamos na biblioteca por “footer” e arrastamos os 4 gráficos para o palco.

Nos logos social media vamos colocar o estado rollover.

4 – CRIAR CABEÇALHO:

Desenhar um retângulo laranja e com uma pesquisa na biblioteca por “header”, adicionamos o logo e o botão.
Copiamos o item de menu no rodapé e colamos no cabeçalho. Para eliminar o link de “contatos” no cabeçalho vamos a Planejar e pressionamos em cima da página com o Ctrl e escolhemos a opção de Excluir página a partir dos menus.
Criamos o link no botão para direcionar para a página de contatos.

5 – ADICIONAR ELEMENTOS RESPONSIVOS À MASTER PAGE:

Para colocarmos os elementos da página mestre de forma responsiva vamos adicionar o Pino para os localizar e ajustar as larguras de cada objeto.

Agora vamos adicionar os pontos de quebra para ajustar o layout para visualização tablet. O site tem tamanho máximo de 1200px mas quando se reduz o tamanho da largura devemos reajustar os elementos. Adicionamos um ponto de quebra nos 950px pressionando no sinal +.

                          


Para mobile inserimos um ponto de quebra nos 480px, escondemos e alteramos os elementos para adicionarmos o menu hamburger “mobile_menu”.
O menu acordeão escondemos nos outros pontos de quebra para apenas aparecer no layout mobile.
Alteramos as camadas e movemos os objetos para as camadas correspondentes de forma a organizar o projeto.

6 – FAZER A HOME PAGE E ADICIONAR BREAKPOINT NO CONTEÚDO:

Com a camada “conteúdo” selecionada acedemos às bibliotecas CC e vamos pesquisar por “page” e inserimos a home_page.

Transportamos os pontos de quebra da página-mestre para a página de conteúdos e ajustamos os elementos.
                         


Para além de arranjar os elementos podemos aumentar o tamanho do texto para o layout de mobile.

7 – PUBLICAR O WEBSITE:

No final podemos carregar diretamente o site para um alojamento externo, publicar no Catalyst ou exportar tudo como HTML.  


CONCLUSÃO:
Podemos facilmente criar ou modificar um website responsivo neste programa. A facilidade de utilização por ser intuitivo facilita a inserção dos conteúdos até à publicação. Outra vantagem, é a utilização das bibliotecas que organizam os conteúdos desenvolvidos em outros programas.