onivaldo rosa - padrões tecnológicos
TRANSCRIPT
Padrões TecnológicosRecursos Educacionais
Onivaldo Rosa JuniorEngenheiro de Software
unasus.gov.br 2
Web e dispositivos móveis
• Padrões HTML, CSS e Acessibilidade são a
base para o desenvolvimento de páginas Web
• Novidades em HTML5, CSS3, SVG e outras
tecnologias correlatas
• Debates sobre como tornar páginas acessíveis
para pessoas com deficiências (WCAG), sobre
internacionalização, e também adequadas para
dispositivos móveis.
• Utilização massiva de javascript
Tecnologia base
Fonte da ilustração: http://www.applicationcraft.com
Fonte da ilustração: http://www.w3c.br
unasus.gov.br 3
Recurso educacional multiuso
Desafio de conciliar a produção do recursos educacional de modo a permitir seu
uso em dispositivos diversos, incluindo o uso on-line/off-line.
Dividir para conquistar
Informação
Formatação 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.
unasus.gov.br 4’
Adaptação do conteúdo para mídias
O Design Responsivo é uma técnicas
que visa programar a formatação e
comportamento de um recursos de
forma que os elementos que o
compõem se adaptem
automaticamente ao dispositivo no
qual ele está sendo visualizado.
O conceito deve ser expandido para
considerar questões de otimização da
informação, buscando inclusive formas
alternativas de apresentação.
Responsividade
Fonte das ilustrações:UNA-SUS
unasus.gov.br 5
Formatos e técnicas
Formatos:
• H264 com áudio AAC (.mp4)
• WebM com áudio WebM (.webm)
Tamanhos:
• 360p
• 480p
• 720p
Nomenclatura de arquivo:
• NOME_VIDEO_360p.mp4
• NOME_VIDEO_720p.webm
Vídeos
Players:
• HTML5 nativo
• Javascript
Javascript permite o controle do vídeo
O padrão define o elemento <track> que
permite adicionar trilha de legenda,
índice de capítulos etc.
Padrão vtt para descrição da trilha
unasus.gov.br 6
Formatos e técnicasÁudios
Formato:
• MP3
Nomenclatura de arquivo:
• NOME_AUDIO.mp3
Players:
• HTML5 nativo
• Javascript
Javascript permite o controle do áudio
unasus.gov.br 7
Formatos e técnicas
• JPG/ JPG Progressivo
• PNG
• GIF (animado)
• Utilização conforme o uso, JPG bom
para fotos, PNG bom para itens de
interface, GIF bom para pequenas
animações
• HTML5 introduziu uma tag CANVAS
que permite a geração e
manipulação de imagens,
permitindo uma gama enorme de
aplicações gráficas.
Imagens
Fonte da ilustração: https://playcanvas.com
unasus.gov.br 8
Formatos e técnicas
• SVG
• WebGL
Imagens vetoriais e 3D
Fonte da ilustração: https://zygotebody.com
Fonte da ilustração: https://css-tricks.com/using-svg
SVG e WEBGL, permites manipulação
via javascript para animação
unasus.gov.br 9
Formatos e técnicas
Fontes Tipográficas
No caso de webfont, obrigatoriamente deverá estar no formato WOFF que é suportado pelos navegadores modernos.
As famílias recomendadas são:
Família 1: Helvetica Neue, Helvetica, Arial, sans-serif
Família 2: PT Sans, Helvetica, Arial, sans-serif
Família 3: Lato, Trebuchet MS, Arial, sans-serif
Para que a fonte seja disponível off-line, os arquivos devem acompanhar o pacote HTML5 de seu conteúdo.
Textos
Fonte da ilustração: http://www.google.com/fonts
unasus.gov.br 10
Formatos e técnicas
Conteúdos auxiliares
em texto:
Recomendação de uso de
PDF e HTML, não utilizar
textos e arquivos
complementares em
formatos proprietários.
Textos
Fonte da ilustração: SE/UNA-SUS
unasus.gov.br 11
Formatos e técnicas
• Javascript
• CSS
• Não utilizar plug-ins ou bibliotecas
proprietárias
• Não utilizar FLASH!!!!
• Diversas bibliotecas (exemplos):
• Move.js
• Velocity.js
• Collie
Animações e efeitos
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
unasus.gov.br 12
Padronizando e Formatando
• Existem vários frameworks que auxiliam a padronização e aceleram a criação de conteúdos
• Exemplo: Bootstrap
• Auxilia uso de grades, responsividade, formulários, botões etc...
Resoluções base para responsividade:
• Extra small devices <768px
• Small devices Tablets >= 768px
• Medium devices >= 992px
• Large devices Desktops >= 1200px
Frameworks
Fonte da ilustração: http://globocom.github.io/bootstrap/examples/fluid.html
unasus.gov.br 13
Recursos educacionais multiuso
• Como padronizar um Recurso Educacional complexo e multimídia, otimizando
sua utilização, distribuição, capacidade de visualização e reutilização, e ao
mesmo tempo permitir mecanismos de avaliação de uso????
• O padrão PPU que esta sendo desenvolvido e testado pela SE/UNA-SUS,
busca estas respostas, e utiliza fortemente os princípios já apresentados em
relação a HTML5.
• Objetivos principais:
− Recurso educacional auto contido capaz de ser armazenado em acervos (ARES)
− Conter metadados que permitam a geração automatizada de pacotes derivados para
uso especifico, exemplo, dispositivos móveis, mesmo em modo off-line
− Mecanismos simples e objetivos de rastreio e analise de uso do recurso
Padrão de empacotamento UNA-SUS
unasus.gov.br
NAVEGADOR - USUÁRIO
PLAYER PPU
NAVEGADOR - USUÁRIO
14
InterfacesPadrão de empacotamento UNA-SUS
PPU hospedado em
servidor
Inicialmente, o PPU poderia rodar direto em um navegador sem servidor,
mas com as novas diretrizes de segurança isso ficou problemático.
Firefox ainda permite esta utilização.
PPU hospedado
em servidor
unasus.gov.br
APP UNA-SUS DISPOSITIVO MÓVEL
PLAYER PPU
15
InterfacesPadrão de empacotamento UNA-SUS
Inicialmente, o PPU poderia rodar direto em um navegador sem servidor,
mas com as novas diretrizes de segurança isso ficou problemático.
Firefox ainda permite esta utilização.
PPU local
unasus.gov.br
APP DISP MÓVEL
16
InterfacesPadrão de empacotamento UNA-SUS
PPU local
PLAYER PPU
PPU Servidor
S
E
R
V
I
D
O
R
unasus.gov.br 17
Interface WEB ou APPPadrão de empacotamento UNA-SUS
PPU
HTML5
API PPU
DESCRITOR JSON
PPU
PLAYER
WEB
APP
MÓVEL
OU
DESKTOPpermite uso
off-line
Autenticação do Usuário deverá ser sempre compatível
com o padrão UNA-SUS
MOODLE
OU
OUTRO
LMS
LTI
UNA-SUS
SERVER
MOBILEAutenticação
Sincronização
Situação 1
Situação 2