Widget: o que é e para que serve¶

Um widget é um componente HTML5 que processa e exibe informação de forma dinâmica, podendo ser utilizado para praticamente qualquer propósito.

A título de exemplo, as aplicações mais comuns para o uso de widgets são:

Previsão meteorológica;
Cotação de moedas e bolsas de valores;
Resultados de loterias;
Tabelas de campeonatos esportivos;
Dentre muitas outras.

E por conta da arquitetura flexível que a DSME disponibiliza, cada widget pode ter sua própria configuração, permitindo uma personalização profunda na forma como a informação é apresentada.

Como os widgets são componentes baseados em padrões e tecnologias bem estabelecidas, é fácil criar novas experiências para entreter e informar seus usuários. A seguir você acompanha o que é necessário para criar seu primeiro widget.

Pré-requisitos¶

Bom, criar um novo widget é muito fácil. Como dito antes, widgets são componentes HTML, basicamente uma página HTML bem simples. Portanto para desenvolver um novo widget é necessário apenas ter conhecimento em:

HTML5
CSS3
Javascript

Seja excelente!

Um pré-requisito adicional seria se preocupar com a apresentação do seu widget. Construa um layout que seja bonito, que cause impacto e que impressione seus usuários!

Restrições¶

Um dos objetivos da DSME é entregar uma plataforma rica em recursos, dinâmica e ao mesmo tempo com valor atrativo. Para isto nós alinhamos alta tecnologia com hardware acessível, que pode ser adiquirido em larga escala sem sacrificar o bolso dos nossos clientes.

Por conta disto, existem algumas limitações que devem ser levadas em consideração. Para que a execução do widget seja a mais fluida possível é necessário seguir algumas regras:

Todas as animações devem ser feitas com CSS;
Não é possível utilizar vídeo;
O widget não deve consultar nenhuma URI externa durante sua execução;
Todos os arquivos devem estar em UTF-8.

Animações em Javascript

As animações em Javascript são muito mais "pesadas" do que as animações feitas com CSS, isto porque o Javascript não utiliza a aceleração de hardware disponível em nossos players. Por mais cômodo que possa ser utilizar bibliotecas como jQuery para fazer suas animações, prefira usar as propriedades transition, keyframes/animation e will-change do CSS.

Vídeos

O uso de vídeos em uma página HTML tem se mostrado bastante onerosa em termos de processamento, fazendo com que a execução do widget engasgue constantemente, o que resulta em uma experiência ruim para o usuário final.

Contudo, nós estamos trabalhando continuamente para adicionar suporte a novos recuros, e pretendemos permitir a execução de vídeo de forma satisfatória em widgets em um futuro próximo.

Estrutura básica¶

Um widget deve ter no mínimo os seguintes arquivos:

index.html — arquivo de entrada;
widget.json — arquivo com as definições do seu widget;
preview.png — imagem de pré-visualização.

Nota

Seu widget pode ter uma estrutura muito mais complexa do que esta. Só tome cuidado para não ser pesado demais, para que o player consiga carregá-lo e exibi-lo sem problemas.

`index.html`¶

É o arquivo que será carregado pelo nosso player para executar seu widget, portanto é chamado arquivo de entrada. Ele deve ser um HTML5 válido, e todos os demais arquivos devem ser relativos a ele.

Exemplo

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="DSME">
        <title>Meu Widget</title>
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <section class="widget">
            conteúdo do widget
        </section>
        <script src="js/widget.js"></script>
    </body>
</html>

`widget.json`¶

Este é o arquivo onde são definidos todos os aspectos do widget. Ele funciona como o package.json do Node.js, mas tem uma estrutura específica.

Exemplo

{
    "title" : "My widget",
    "name" : "mywidget",
    "description" : "Meu primeiro widget",
    "author" : "DSME <https://dsme.tv>",
    "version" : "1.0.0"
}

Você pode aprender mais sobre este arquivo na sua documentação.

`preview.png`¶

Esta é uma imagem que serve como ícone do widget. Sempre que o seu widget for apresentado em nossa plataforma, esta imagem será usada.

Nota

A imagem pode ser um .png ou .jpg.

Próximo passo¶

Agora que você já conhece o básico sobre os widgets, está na hora de criar o seu primeiro. Na próxima página você acompanhará um passo-a-passo completo para a criação de um widget que exibe a previsão meteorológica utilizando o módulo weather.