Mostrando postagens com marcador Download. Mostrar todas as postagens
Mostrando postagens com marcador Download. Mostrar todas as postagens

Codigos HTML - Exemplos

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...


<!-- Codigo em CSS com as configurações do menu-->
<style type="text/css">
#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>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>


<!-- Menu do blog que deve ser incorporado ao codigo-->
<div id='cssmenu'>
<ul>

<!-- logo-->
   <li class='active'><a href='http://elogicaefacil.blogspot.com.br/'><span>
<img align='botton' height='20' src='https://goo.gl/kQYo0J' width='50'/></span></a></li>
<!-- Opção Arduino-->

<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='https://goo.gl/qtJOrr' target='_blank'><img align='left' height='18' src='https://goo.gl/9NmdBi' width='16'/>LM35</a></li>
        <li><a href=''>Em Breve</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>
   <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>

<!-- Opção Banco de dados-->
<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>

<!-- Opção - CURIOSIDADES--> 

<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/GlnNUl'><img src='https://goo.gl/08tJqU'/> Big Data -O que é</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:



Instalando e utilizando Oracle Database Express Edition 11g

Ola pessoal, esse post serve para auxiliar os inciantes em Banco de dados a instalar o Oracle Database Express Edition 11g. O primeiro passo para realizar a instalação é acessar o site da Oracle clicando aqui e realizar um cadastro em "Sign in Register" conforme indicado pela seta na figura 1. Realizado o cadastro, você poderá realizar seus downloads diretamente no site da Oracle de maneira simples e gratuita.
Figura 1. Tela inicial do site da Oracle - Indicação de onde deve ser realizado o cadastro de usuário.
A Oracle disponibiliza diversas ferramentas para seus associados fazerem download, dentre elas, o database Oracle 11g. Para realizar o download do database você deve estar logado em sua conta Oracle e procurar a opção downloads (um pouco obvio). No menu que será aberto em downloads selecione o opção "Oracle Database 11g Express Edition" conforme indicado na figura 2.
Figura 2. Após logar em sua conta Oracle, acesse as opções de download.
Quando você acessar a tela de download do Oracle 11g, você deverá aceitar o termo de licença conforme indicado com a seta na figura 3 e escolher a opção de download correspondente ao seu sistema operacional. Após selecionar o arquivo correspondente ao seus sistema operacional, um download será iniciado automaticamente. Após a conclusão do download, acesse o arquivo baixado e inicie a instalação do database.
Figura 3. Aceite o termo de licença e inicie a instalação do database.
A instalação do database não tem segredo, é um processo de clicar em ok e next assim como a grande maiorias das instalações. O único ponto que você deverá ficar atento é quando o sistema solicitar que você digite uma senha para o Banco de dados (figura 4), digite e confirme uma senha e não esqueça essa senha, pois ela servirá para você se conectar ao banco de dados quando for programar....
Figura 4. Não esqueça a senha digitada aqui em hipótese alguma
Instalação concluída, você perceberá que o Oracle criou 3 novas ícones no menu inciar do Windows conforme mostrada na figura 5. Para começar a programar seu banco de dados, você deve clicar nas ícone "Start Database" para inciar os serviços do banco de dados. Após iniciar os serviços, você deve clicar na ícone "Executar linhas de comando SQL".
Figura 5. Após a instalação, três componentes serão instalados no seu computador: Start Database, Executar linhas de comando SQL e Stop Database.
Quando você iniciar o console de linha de comandos, será necessário dizer a qual base dados você quer se conectar. Quando instalamos o banco de dados, a configuração padrão instala a base de dados como system, logo para se conectar e começar a utilizar o Oracle você deverá digitar:

SQL> connect system

Se tudo correr como deve ser, após pressionar a tecla ENTER, o SQL irá solicitar uma senha conforme mostrado na figura 6. A senha que deverá ser digitada aqui é a mesma digitada durante a instalação (Figura 4). Após digitar a senha, uma mensagem será mostrada indicando que você está conectado a base de dados(Figura 7), agora é só começar a programar...
Figura 6. Conectando a base de dados do Oracle.
Figura 7. Após digitar a senha e a mensagem conectado aparecer, o BD está pronto para uso
Duvidas, envie uma mensagem ou acesse nossa fanpage. 



DER com BRmodelo

Com frequência os alunos me perguntam sobre softwares que facilitem o desenvolvimento de Diagramas Entidade Relacionamento -DER (Diagrama da figura 1). Pensando nesse publico decidi escrever essa postagem sobre o software BRmodelo.
Figura 1. Exemplo de DER feito no software BRmodelo.

Apesar da possibilidade de utilizar diversos software para fazer os diagramas (inclusive o Power point), o Brmodelo é um software dedicado ao desenvolvimento de DER o que facilita muito o trabalho. Para fazer o download do software, basta clicar aqui e acesse o site que disponibiliza o software. Se tudo funcionar direito você conseguirá executar o programa mostrado na figura 2.
Figura 2. Tela do Brmodelo - Software para desenvolvimento de DER.
Apesar do software ser bem intuitivo, irei destacar três funcionalidades para auxiliar os iniciantes. O primeiro ponto que irei destacar é a possibilidade de desenvolver tanto modelos Conceituais (DER's) assim como modelos Lógicos. As opções de criação de modelos mudam em razão da opção escolhida. A figura 3 mostra onde estão as ícones onde será possível o tipo do modelo que será desenvolvido.
Figura 3. Opções de desenvolvimento - Modelo Conceitual (C) e Modelo Lógico  (L).
Agora que já sabemos como criar modelos lógicos ou conceituais, vamos conhecer a barra de ferramentas do software. Nesta barra de ferramentas localizada no lado esquerdo conforme destacado na figura 4 é possível escolher os principais elementos do DER e adiciona-los ao diagrama com um clique. Com pouco conhecimento em desenvolvimento de DER é possível identificar todos elementos usados na modelagem presentes na Barra de ferramentas. Também na figura 4 é possível identificar uma seta vermelha que aponta para a ícone "ligar objetos". Este item é responsável ligar os diagramas escolhidos para o projeto.
Figura 4. Barra de  ferramentas do Brmodelos-  Destaque para ligar objetos
Finalizando a apresentação do software, vamos falar sobre a barra de propriedades mostrado da figura 5. Esta barra que fica localizada no canto direito superior do site conforme destaca o quadrado vermelho na figura 5, serve para mudar propriedades como nome, tamanho e observações dos objetos que compõe nosso diagrama. Quando deseja-se mudar alguma propriedade basta clicar no elemento do diagrama e alterar ou digitar a nova propriedade. Ainda na figura 5 é possível ver um exemplo do uso das propriedades onde na primeira parte da figura estamos alterando os valores da cardinalidade do relacionamento.
Figura 5. Barra de propriedades - Alterações do elementos da DER.
Aconselha-se salvar os modelos criados no Brmodelo em XML. Devido a problemas apresentado em algumas versões, ao salvar o projeto em outro formato não é possível reeditar o projeto.

SQL Developer - Criação de Scripts

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 DOWNLOADO 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!!!!!!