É Lógica, é facil: Codigos HTML

Nesta postagem, vou adicionar uma série de elementos para auxiliar os alunos na criação de sites deixando codigos e dicas de como criar menus, botões de redes sociais, etc.....

Redes sociais (facebook)

Para criar botões e elementos que remetem ao facebook (perfil ou pagina) semelhantes aos apresentdos na figura 1, voce deve visitar o site Facebook for Developers e acessar a documentação de plugin. No developers, alem das devvidas explicações sobre o assunto escolhido, o proprio site gera o codigo para voce incorporar ao seu site.

Figura 1. Curtir e seguir facebbok - Codigos gerados pelo facebook Developers.

Mapas do google maps

Assim como o facebook, o google tambem tem um pagina developer (clique aqui para acessar) que auxilia os desenvolvedores a criarem objetos que podem ser incorporados a um site. Na figura 2 temos um exemplo de um mapa que pode ser incorporado ao site site.

Figura 2. Mapa fornecedo pelo Googlemaps para incorporar ao seu site.

Dependendo da funcionalidade do mapa, voce pode criar-lo no prorprio google driver. Qualquer objeto criado no google driver tambem pode ser incorporado a um site, veja os exemplos desse blog onde as atividades de formulario são criadas no google forms.

Criação de menu

Para criar um menu com uma funcionalidade interessante, será preciso densenvolver o codigo em CSS e HTML. Como a função desse blog não é ensino de desenvolvimento WEB, irei deixar aqui o codigo que usei para criar o menu blog (Figura 3).

Figura 3. Menu criado com CSS\HTML - codigo abaixo

Para facilitar o entendimento, o codigo foi comentado e a parte do HTML simplificada, para modificar o codigo, basta verificar que cada "<li class='has-sub'>" representa uma lista do menu (ex. Arduino, Programação, etc) e que entre a opção "<ul>" e "</ul>" são os subitens do menu. Outra opção para criação de menus, é procurar algum maker que gere o padrão desejado ou acessar sites como menu maker...

#NavbarMenu {

background: #555;

color: #FFF;

font-size: 12px;

font-family: Arial, Tahoma, Verdana;

width: 100%;height: 35px;

font-weight: bold;margin: 0;padding: 0;

}

#NavbarMenuleft { width: 100%;float: left;margin: 0;padding: 0; }

#nav {margin: 0; padding: 0;}

#nav ul { float: left;list-style: none;margin: 0;padding: 0;}

#nav li { list-style: none;margin: 0;padding: 0;}

#nav li a, #nav li a:link, #nav li a:visited

{

color: #FFF; /*--edite cor do link--*/

display: block;

font-size: 16px;

font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;

margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;

}

#nav li a:hover, #nav li a:active

{

color: #FFF; /*--edite cor do link hover--*/

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

background-color: #9F0;

}

#nav li li a, #nav li li a:link, #nav li li a:visited

{

width: 150px;

color: #FFF; /*--cor do link--*/

font-size: 14px;

font-family: Georgia, Times New Roman;

font-weight: normal;

text-transform:capitalize;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #FFF;

border-left: 1px

solid #FFF;

border-right: 1px solid #FFF;

background-color: #555;

}

#nav li li a:hover, #nav li li a:active

{

color: #FFF; /*--cor do link--*/

padding: 7px 10px;

background-color: #FC6;

}

#nav li {float: left;padding: 0;}

#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:0;padding: 0;}

#nav li ul a {width: 140px;}

#nav li ul ul {margin: -32px 0 0 171px;}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhoverul, #nav li li li.sfhover ul {left: auto;}

#nav li:hover, #nav li.sfhover {position: static;}

</style>

<ul>

<li class='has-sub'><a href='url da pagina'>Arduino</a>

<ul>

<li><a href='https://goo.gl/juzF3w'><img src='https://goo.gl/ZWtEmJ'/> Simulador de programação Arduino</a></li>

<li class='has-sub'><a href=''><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> DataSheet +</a>

<ul>

<li><a href='https://goo.gl/kyaCQG' target='_blank'><img align='left' height='16' src='https://goo.gl/9NmdBi' width='16'/>ATmega328/P </a></li>

<li><a href=''>Em Breve</a></li>

</ul>

</li>

<li class='has-sub'><a href=''><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> Exercicio +</a>

<ul>

<li><a href='https://goo.gl/JT55A5' target='_blank'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/>Saida de dados - LED </a></li>

<li><a href='https://goo.gl/58RpOQ' target='_blank'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/>Utilizando Botões</a></li>

<li><a href=''>Em Breve</a></li>

</ul>

</li>

<li><a href='https://goo.gl/dzM5P9'><img src='https://goo.gl/08tJqU'/> Marcha Imperial</a></li>

</ul>

</li>

<li class='has-sub'><a href='url da pagina'>Banco de Dados</a>

<ul>

<li class='has-sub'><a href='url da pagina'>Software e instalações +</a>

<ul>

<li><a href='https://goo.gl/4bB5ei'><img src='https://goo.gl/ZWtEmJ'/>Software Brmodelo</a></li>

<li><a href='https://goo.gl/OJF0hU'><img src='https://goo.gl/ZWtEmJ'/>Instalando Oracle 11g</a></li>

<li><a href='https://goo.gl/LxqePF'><img src='https://goo.gl/ZWtEmJ'/>SQL Developer</a></li>

</ul>

</li>

<li class='has-sub'><a href='url da pagina'>Modelagem de Dados +</a>

<ul>

<li><a href='https://goo.gl/802rA6'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> 1ª Atividade DER</a></li>

<li><a href='http://goo.gl/T9onHE'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> 2ª Atividade DER</a></li>

<li><a href='https://goo.gl/lQF9Pd'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> Exercício Introdução a modelo lógico</a></li>

<li><a href='https://goo.gl/EcBA6n'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> Exercício de Derivação de modelos</a></li>

<li><a href='https://goo.gl/ZYNwdx'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> Exercício de Derivação de modelos II</a></li>

</ul>

</li>

<li class='has-sub'><a href='url da pagina'>Desenvolvimento em Banco de Dados Oracle +</a>

<ul>

<li><a href='https://goo.gl/9WviTW'><img align='left' height='16' src='https://goo.gl/9NmdBi' width='16'/> Gerando TXT com SPOOL</a></li>

<li><a href='https://goo.gl/e3dFqV'><img align='left' height='16' src='https://goo.gl/9NmdBi' width='16'/> Criação de Tabelas</a></li>

<li><a href='https://goo.gl/IdFrsL'><img align='left' height='16' src='https://goo.gl/9NmdBi' width='16'/> Default- Atribuindo valores padrão</a></li>

<li><a href='https://goo.gl/48y25Z'><img align='left' height='16' src='https://goo.gl/9NmdBi' width='16'/> Alteração de Tabelas</a></li>

<li><a href='https://goo.gl/kfs06h'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> 1ª Questionario de Banco de dados</a></li>

<li><a href='https://goo.gl/T3ul7J'><img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> 1ª Atvidade de Banco de dados</a></li>

<li><a href='http://goo.gl/FISphv'> <img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> Atvidade de Constraints</a></li>

<li><a href='https://goo.gl/3QoePy'> <img align='left' height='18' src='https://goo.gl/VDYa8q' width='18'/> 1ª Criação de Bando de dados</a></li>

<li><a href='https://goo.gl/OLWTx9'><img align='left' height='16' src='https://goo.gl/9NmdBi' width='16'/> Operador de concatenação</a></li>

<li><a href='https://goo.gl/6ifHiH'>Script para aula de DML</a></li>

</ul>

</li>

<li class='has-sub'><a href='url da pagina'>Artigos +</a>

<ul>

<li><a href='https://drive.google.com/open?id=0B53RVp4lD2iXOWN0UG1VZDNvejQ' target='_blank'><img align='left' height='18' src='https://goo.gl/9NmdBi' width='18'/>Mineração de Dados - Conceitos e Aplicaçõe</a></li>

<li><a href='https://drive.google.com/open?id=0B53RVp4lD2iXZXFKRDhuWldfRFE' target='_blank'><img align='left' height='18' src='https://goo.gl/9NmdBi' width='18'/> Sistemas de Apoio a Decisão - Dataminig</a></li>

</ul>

</li>

</ul>

</li>

<li class='has-sub'><a href='url da pagina'>Curiosidades</a>

<ul>

<li class='has-sub'><a href='url da pagina'><> Trabalhos Orientados +</a>

<ul>

<li><a href='http://tcc.breathmobi.com.br/'><img align='left' height='16' src='https://goo.gl/9NmdBi'/>Breathmobi</a></li>

<li><a href='http://movegoapp.com.br/'><img align='left' height='16' src='https://goo.gl/9NmdBi'/>MOVEGO</a></li>

</ul>

</li>

<li class='has-sub'><a href=''><img align='left' height='16' src='https://goo.gl/9NmdBi'/> Sites e arquivos históricos +</a>

<ul>

<li><a href='https://goo.gl/qCb3m8'><img align='left' height='16' src='https://goo.gl/9NmdBi'/>Primeiro site da WEB</a></li>

<li><a href='url ' target='_blank'><img align='left' height='16' src='https://goo.gl/9NmdBi'/>Anuncio do Apple I</a></li>

</ul>

</li>

<li><a href='http://goo.gl/wm9gsa'> <img align='left' height='16' src='https://goo.gl/9NmdBi'/> Recomendações boa leitura</a></li>

<li><a href='https://goo.gl/rc8INB'><img src='https://goo.gl/08tJqU'/> Isaac Asimov</a></li>

<li><a href='https://goo.gl/Cd2Awp'><img src='https://goo.gl/08tJqU'/> Aprender inteligência - Prof. Pier</a></li>

<li><a href='https://goo.gl/UP82Cp'><img src='https://goo.gl/08tJqU'/> Funcionamento do computador </a></li>

<li><a href='https://goo.gl/9bAht6'><img src='https://goo.gl/08tJqU'/> Evolução da informática</a></li>

<li><a href='https://goo.gl/52fUVK'><img src='https://goo.gl/08tJqU'/> Diferença entre entender e saber</a></li>

<li><a href='https://goo.gl/JppdJy'><img src='https://goo.gl/08tJqU'/> IoT - Internet das coisas</a></li>

<li><a href='https://goo.gl/RyqH0f'><img src='https://goo.gl/08tJqU'/> Futuro da realizda aumentada</a></li>

</ul>

</li>

</ul>

</div>

Se voce usar esse código em algum projeto seu, não esqueça de referenciar o nosso blog e se possivel recomendar nossas postagens....

Não esqueça de curtir nossa pagina no facebook no link abaixo:

É Lógica, é facil

Codigos HTML - Exemplos

Nenhum comentário:

Postar um comentário