onivaldo rosa - padrões tecnológicos

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