SuperMídia Widgets

Os widgets são arquivos containers (HTML, CSS, JS) que proporcionam diversos novos layouts e funcionalidades para a SuperMídia.

Nomeclatura: {Nome}_V1.0.smxwid
Diretório de armazenamento: Arquivos (Pasta SuperMidia\Widgets)

Widgets disponíveis

Crie um novo partir do nosso Template com o VS Code.

Nome	Download	Preview
Mega-Sena	v1.0
Lotofácil	v1.0
Timemania	v1.0
Quina	v1.0
Lotomania	v1.0
Dupla Sena	v1.0
Dia de Sorte	v1.0
Redes sociais	v1.0
Frase do dia	v1.0
Timer Pão	v2.4

Bibliotecas

Animações CSS
Helpers Js
Autofit JS

Limitações

• Atualmente só rodam no layout do centro (não das laterais, nem do rodapé)
• Evite utilizar muitas animações, pois em conjunto com outros conteúdos pode haver lag
• Evite utilizar muitos scripts, pois pode haver lag em alguns dispositivos

Referências

• Outros conteúdos SuperMídia
• CodePen

Entidades disponíveis

Message (TBR)

• Titulo
• Texto
• Imagem

Item (TBR)

• Nome
• Imagem
• Preco

Objetos disponíveis

• Model | Objeto utilizado pela supermídia, selecionado no servidor entre (Mensagem, Item e etc..)
• CurrentPass | Senha atual no dispositivo, utilizado normalmente nas chamadas de senhas
• Parameters | Parametros à serem enviados via comando, ex: TimerPão para enviar quantos segundos
• Barcode | Código de barras lido
• OfferModel | Modelo de ofertas, quando disponível em um item

Post (Rede social)

• Title
• Text
• Message
• Image
• Attachments (Coleção de anexos, podendo ser Imagem, Vídeo, Localização...)

Utilização das propriedades no HTML

• Pela sintaxe {{Propriedade}}
• Através do objeto Model por JS

Formatação do conteúdo (TBR)

• {{Propriedade:Formato}} ex: {{preco:n2}} = 10,00

Primeiros passos

• Utilize um editor apropriado para alterar o widget, recomendamos os seguintes editores:

Nome	Download
Visual Studio Code	Link
Notepad ++	Link
Sublime	Link

Dica! O template possui uma configuração padrão para ajudar a rodar a página web e ficar recarregando, automaticamente, a cada alteração. Por isso, se faz necessário instalar o Node.js, basta acessar o site e baixar a ultima versão disponível.

• Baixe o projeto SuperMidia.Widgets

• Extraia o conteúdo

• Copie o template e renomeie para o layout no qual deseja criar

Para atualização em tempo real da página

Existem dois métodos prontos para serem utilizados para atualizar, a página html, em tempo real. Escolha abaixo a opção que lhe atrai:

Instalação extensão Visual Studio Code (uma vez só)

• Abra o diretório do seu layout pelo Visual Studio Code e instale a extensão Live Server.

• Basta executar o Live Server (botão "Go Live") para a página html ficar atualizando automaticamente a cada salvamento.

Instalação por projeto (método de instalação para cada projeto)

• Entre na pasta do seu novo layout e selecione a barra de navegação

• Digite cmd e tecle enter

Dica! Também pode ser executado o prompt de comando e navegar até a pasta do layout através do comando CD c:\\Diretorio...

• Digite o comando npm install e tecle Enter, esse comando só se faz necessário primeira vez para instalar os utilitarios que vão auxiliar na criação dos widgets

Importante! É necessário ter instalado o Node.js, conforme informado no inicio deste tutorial

• Após a instalação dos pacotes, digite o comando npm start (esse comando inicia a página web e fica recarregando à cada alteração)

• Agora as alterações já são percebidas em tempo real, toda vez que o documento for salvo

Dica! Utilize o comando Ctrl + S após fazer as alterações, assim você as percebera imediatamente na tela.

Boas práticas

• Opte por separar formatações e scripts em arquivos .css e .js;
• Caso use ferramentas externas como Jquery baixe o arquivo .js e referencie localmente no layout, assim ele continuará a funcionar mesmo offline;
• Utilize ao máximo o poder das variáveis, ao invés de funções js para informações do modelo, elas são carregadas antes de o layout ser exibido na tela, assim nenhum delay será percebido na transição dos layouts;
• Use estilizações por classes, estilos escritos diretamente nos elementos HTML são mais dificeis de dar manutenção no futuro;