HTML¶

Como você já deve ter lido antes:

Citação

...widgets são componentes HTML, basicamente uma página HTML bem simples.

Pois bem, vamos lá.

index.html

<!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>{name} - Pervisão Meteorológica</title>
        <link href="css/html5reset.css" type="text/css" rel="stylesheet">
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body class="widget">
        <div class="clouds">
            <img src="media/clouds/1.png" alt="">
            <img src="media/clouds/2.png" alt="">
            <img src="media/clouds/3.png" alt="">
        </div>
        <section class="main">
            <div></div>
            <aside></aside>
        </section>
        <script src="js/widget.js"></script>
    </body>
</html>

O HTML só tem um pré-requisito: ele deve ter um elemento raiz, que no nosso exemplo é o próprio body.

Notou o uso da variável {name} na linha 8? Esta variável será substituída durante a compilação pelo valor que o usuário configurou no DSME Manager. Na prática isto não terá efeito algum durante a execução do widget no DSME Player. Nós só colocamos aqui para mostrar que você pode usar variáveis diretamente no HTML.

Próximo passo¶

Realmente foi bem simples, não? Agora que nós já terminamos com o HTML, vamos ver o CSS.