É Lógica, é facil: Ajuda

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:

O Oracle SQL Developer é uma IDE (Integrated Development Environment-Ambiente de desenvolvimento) com uma GUI (Graphical User Interface - Interface gráfica) que facilita a utilização do SQL tanto por desenvolvedores quanto administradores de BD. Através dessa GUI o usuário poderá executar instruções do DDL (Data Definition Language), DML (Data Manipulation Language), DCL (Data Definition Language) e DTC (Transaction Control Language). Quem quiser instalar a IDE em casa, clique aqui e acesse o site da ORACLE para fazer o DOWNLOAD. O software é gratuito sendo necessário somente realizar um cadastro para realizar o Download.

Nesta postagem usaremos o SQL Developer para executar um script facilitando assim o aprendizado de comandos de Manipulação de Dado (DML). Em geral o Oracle Developer pode ser encontrado na pasta "Oracle/desenvolvimento de aplicações" do menu iniciar do windows conforme indicado na figura 1.

(Não esquecer de executar o serviço antes de usar o developer).

Figura 1. SQL Developer - IDE desenvolvida para facilitar a programação do BD.

Ao acessar o SQL Developer, o usuário irá se deparar com uma tela semelhante a imagem da figura 2. Na mesma figura (2), dentre os diversos elementos e opções disponíveis no SQL Developer, iremos destacar 2 áreas:

A área de trabalho (Worksheet) - onde o usuário poderá digitar os comando usados no SQLplus ou criar/colar scripts.

Saída do script - onde o usuário poderá verificar se o resultado do comando/script que foi executado no worksheet.

Figura 2. Apresentação do SQL Developer

Figura 3. Exemplo de utilização do Workshop e saída do script.

Em destaque na figura 3 podemos visualizar uma barra de propriedades onde encontrar elementos que permitem executar o script após a digitação. O botão que possibilita a execução do script é o segundo botão da barra de propriedades que está em destaque na figura 4.

Figura 4. Ícone de execução de script no Sql Developer.

Com base nessas informações, agora você pode desenvolver uma sequencia de rotinas e executar através do Developer sempre precisar utilizar a interface do SQLplus. Com o Developer, alem de poder guardar suas instruções em um arquivo (por exemplo um TXT), será possível corrigir eventuais erros de maneira rápida e fácil....
Quem quiser executar um script pronto, acesse nossa postagem "Script para aula de introdução a DML " clicando aqui e faça o teste!!!!!!

Dificuldades para instalar o Developer no Windows 10??

Clique aqui e veja como solucionar o problema!!!!

É Lógica, é facil

Codigos HTML - Exemplos

Questionário de circuitos lógicos e Expressões Booleanas

SQL Developer - Criação de Scripts