Conteúdos Off-Line e para Dispositivos Móveis

Transcrição

1 Conteúdos Off-Line e para Dispositivos Móveis

2 HTML 5 Possibilidade de separação do recursos em três camadas: Informação, Formatação e Comportamento A camada de informação possui um conjunto rico e adequado para formatar semanticamente a informação desejada, ou seja, permite uma perfeita organização da informação a ser passada ao usuário. A camada de formatação, está cada vez mais robusta, permitindo que uma informação seja formatada de maneiras muito criativas para diversas condições de visualização/interação. Fortemente pautada nas novas especificações de folhas de estilo como o CSS 3 e no uso de fontes tipográficas abertas. A camada de comportamento é extremamente flexível, já que é fortemente baseada na utilização de javascript que neste momento já possui inúmeras bibliotecas construídas pela comunidade, com diversos fins.

3 Estudo no manejo de ofertas utilizando pacote padrão UNA-SUS de conteúdo em HTML5 (PPU).

4 01 O pacote deve ser organizado primariamente em pastas com nomes sugestivos, exemplo: imagens, scripts, fontes (tipográficas), estilos, vídeos, bibliotecas (libs), em inglês ou português de modo a facilitar o reconhecimento rápido do que foi utilizado no recurso.

5 02 A utilização de subpastas é fortemente sugerida para organizar o conteúdo, por exemplo a pasta bibliotecas, ao se utilizar bibliotecas de terceiros, ou mesmos diversas bibliotecas próprias, utilizar uma subpasta para cada biblioteca, de forma a ficar clara a dependência.

6 03 O pacote deve estar todo contido em uma pasta (com subpastas, vide item 1 e 2), todas as dependências devem estar contidas neste pacote, ou seja, todos os recursos utilizados, mesmo que de terceiros (neste caso o item utilizado deve permitir sua redistribuição no pacote). Isso inclui tudo mesmo até mesmo as fontes tipográficas utilizadas. O Pacote só pode ter referências externas de material que seja terciário/ou complementar ao bom uso do recurso, ou seja, em caso de uso off-line, estes recursos não podem fazer falta.

7 04 O pacote deve possuir na pasta principal um arquivo de inicialização, ou seja, um arquivo de referência para acesso ao recurso, por padrão deve-se utilizar o nome de index.html (notação já tradicional).

8 05 O pacote pode possuir um arquivo info_pt_br.txt, com informações básicas sobre o pacote e sua utilização, restrições etc. Para informações em outros idiomas utilizar o mesmo padrão de nomes: Exemplo: info_en.txt, info_fr.txt, info_es.txt.

9 06 Para oferta em diversas condições, sugerimos que o pacote contenha uma subpasta da raiz, chamada thumbnails, onde deverão ser colocadas imagens para uso em divulgação do pacote, com nomenclatura própria a ser seguida facilitando processamento automático, na falta deste será utilizado uma imagem padrão com o logo da UNA- SUS

10 06 a. Imagem em formato PNG, com possibilidade de uso de transparência, com pixels entre 128 e 512, para a menor dimensão, exemplos: i. thumbnailt_169.png (imagem com relação de aspecto de 16:9) transparente. ii. thumbnail_169.png (imagem com relação de aspecto de 16:9) não transparente. iii. thumbnailt_43.png (imagem com relação de aspecto de 4:3) transparente. iv. thumbnailt_11_tr.png (imagem com relação de aspecto de 1:1, quadrada) transparente. b. Imagem em formato SVG, vetorial, exemplos: i. thumbnail_169.svg (imagem com relação de aspecto de 16:9) ii. thumbnail_43.svg (imagem com relação de aspecto de 4:3) iii. thumbnail_11.svg (imagem com relação de aspecto de 1:1)

11 07 Todos os arquivos textuais devem ser desenvolvidos utilizando codificação UTF-8 permitindo uma padronização e futura internacionalização quando da tradução de determinado recurso.

12 08 Não utilizar, formatos proprietários de imagens, áudios ou vídeos, sem que seja oferecida uma alternativa em formato aberto. De preferência a utilização de um conjunto de recursos, que possam ser visualizados em uma gama grande de dispositivos/visualizadores, para isso acompanhe a evolução das especificações HTML5.

13 09 Deve-se utilizar técnicas de persistência de dados, utilizando LocalStorage, de modo a permitir que diversas formas de oferta de conteúdo possam interagir com esta especificação no quesito persistência de dados (Usada por exemplo para a manutenção do progresso do usuário dentro deum conteúdo interativo).

14 10 Deve-se utilizar uma padronização nos nomes do vídeos e áudios de modo a ficar claro a disponibilização de múltiplas fontes de um mesmo conteúdo, exemplo, se temos um vídeo com a entrevista do senhor José, em vários formatos e definições 1. video_entrevista_jose_1080p.mp4 (formato mp4 em alta definição, 1080 pixels progressivo) 2. video_entrevista_jose_1080p.ogg (formato ogg em alta definição, 1080 pixels progressivo) 3. video_entrevista_jose_720p.mp4 (formato mp4 em definição padrão, 720 pixels progressivo) 4. video_entrevista_jose_1080i.ogg (formato ogg em alta definição, 1080 pixels interlaçado)

15 11 Não utilizar, plug-ins proprietários.

16 12 Recomenda-se a leitura atenta das especificações da W3C, que inclui vários tópicos não normativos mas que são de grande valia para a construção de conteúdos de qualidade.

17 13 Recomenda-se a utilização de um design mais neutro que permita a reutilização do recurso em várias condições.

18 14 Com uma gama cada vez maior e diversificada de dispositivos e resoluções de tela, deve-se utilizar técnicas para deixar o recurso responsivo para garantir o funcionamento do recurso em diferentes dispositivos. Indique sempre no arquivo de informações as condições de resposta de seu recurso.

19 15 Os pacotes desenvolvidos devem ser depositados no ARES Acervo de Recursos Educacionais em Saúde, da UNA-SUS. De modo que teremos além do pacote todo um conjunto de informações de catalogação do mesmo. Para isso a pasta do recurso deve ser compactada em formato ZIP, sendo o arquivo resultante renomeado para <nomedopacote>.ppu, ou seja, ter a extensão ppu, para indicar se tratar de um pacote padrão UNA-SUS.

20 Experiência de usuário e design de interface

21 Adequação da interface da Federação de Autenticação UNA-SUS para visualização e uso em dispositivos móveis. Navegador desktop Tablet Smartphone

22 Responsividade do pacote

23 Responsividade do pacote

24 Projeto PO3E UNA-SUS, plataforma de oferta de oportunidades educacionais online UNA-SUS. Navegador web Iframe PO3E Web Autenticação Federativa PPU Aplicação Servidor PO3E

25 Pacote PPU exemplo, rodando sob a plataforma PO3E (Destaque para a barra superior com informação do usuário conectado

26 Tela mostrando testes de captura de dados pela plataforma web PO3E

27 Tela mostrando testes de captura de dados pela plataforma web PO3E

28 Estrato exemplo, de log de capturas no servidor PO3E

29 Estante UNA-SUS

30

31