onivaldo rosa - padrões tecnológicos
TRANSCRIPT
![Page 1: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/1.jpg)
Padrões TecnológicosRecursos Educacionais
Onivaldo Rosa JuniorEngenheiro de Software
![Page 2: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/2.jpg)
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
![Page 3: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/3.jpg)
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.
![Page 4: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/4.jpg)
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
![Page 5: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/5.jpg)
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
![Page 6: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/6.jpg)
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
![Page 7: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/7.jpg)
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
![Page 8: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/8.jpg)
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
![Page 9: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/9.jpg)
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
![Page 10: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/10.jpg)
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
![Page 11: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/11.jpg)
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;
}
![Page 12: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/12.jpg)
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
![Page 13: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/13.jpg)
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
![Page 14: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/14.jpg)
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
![Page 15: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/15.jpg)
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
![Page 16: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/16.jpg)
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
![Page 17: Onivaldo Rosa - Padrões tecnológicos](https://reader034.vdocuments.mx/reader034/viewer/2022051516/55c8c5afbb61ebda1c8b477c/html5/thumbnails/17.jpg)
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