Exercícios sobre html e folhas de estilo
No site https://www.w3schools.com/ você
encontrará excelentes tutoriais sobre tudo relacionado com html e de onde pode tirar
exemplos para resolver os problemas a seguir.
Se quiser ganhar tempo, você precisará unicamente desses dois links da w3schools:
http://www.w3schools.com/css/css3_buttons.asp
https://www.w3schools.com/jsref/event_onclick.asp
Você deverá fazer pelo menos os exercícios 1 e 6 a seguir
1. Escreva uma página html contendo no cabeçalho <head> estilos para visualizar
um botão azul e um botão vermelho conforme aparecem no arquivo
form2.html que faz parte do sketch do servidor web
"lamp_control_progmem" visto em aula.
Você precisará dos seguintes atributos para os botões:
color, width, height, background-color,font-size, font-weight, border-style, border-radius;
Teste o seu exemplo no navegador colocando como url:
file:///path-da-pagina/nome-da-pagina.html.
2. Acrescente ao seu arquivo html tratadores dos eventos de clicar num ou
noutro botão. Ao clicar no botão azul a mensagem deve ser do tipo:
"Você enviou comando para ligar o led"
e ao clicar no botão vermelho: "Você enviou comando para desligar o led".
Para isto use as dicas do documento citado antes:
https://www.w3schools.com/jsref/event_onclick.asp
3. Modifique a nova página html colocando agora os estilos num arquivo,
(no diretório da página html), com o nome, digamos,"estilos.css"
e inclua no cabeçalho <head> apenas a linha:
<link rel="stylesheet" href="estilos.css">
4.No seu homedir crie o diretório "public_html" e copie para ele a sua folha de
estilos. Exiba-a no navegador com a url:
http://www.students.ic.unicamp.br/~seulogin/estilos.css
5. Faça uma cópia da sua página html e nela substitua o elemento
"<linkrel..." por:
<link rel="stylesheet" type="text/css" href="http://www.students.ic.unicamp.br/~seulogin/estilos.css"
Teste a página no seu navegador da mesma forma que nos exercícios acima.
6. Finalmente altere o sketch do "lamp_control_progmem" para usar os estilos
do item 1 acima e/ou do item 5, lembrando que agora os scripts para tratar os
eventos de clicar um ou outro botão são os mesmos do sketch original com a
sugestão vista em aula (acrescentar no final do string s uma das duas mensagens
<h3>O led foi desligado</h3> ou
<h3>O led foi ligado</h3>.
Acrescente ao seu sketch uma verificação do estado do led lendo o seu valor
através do comando: digitalRead(output_pin), no caso D0.
7. A necessidade de loop fechado em operações de controle:
suponha a que o objetivo do "lamp_control_progmem" seja físicamente ligar/desligar
uma ou mais lâmpadas de segurança da sua casa. Como se certificar de que a lâmpada
foi físicamente, digamos, ligada? Embora você possa verificar que o comando
foi realmente executado pelo esp8266 como feito no item 6 acima,
a lâmpada pode estar queimada (ou o relé que a deveria ligar não funciona).
Uma solução para isto é usar um sensor de luminosidade que mediria a
luminosidade próxima à lâmpada.