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.