Utilizando Netbeans 8.1 nos Projetos ( HTML5 / BootStrap / PHP / JS / JavaScript / Xamp...*)


Olá neste post vou estar configurando o ambiente para usar o IDE NetBeans para criação dos projetos para Sites e Sistemas, fazer um breve teste com o Xamp - Inicializando o Apache e criando a primeira página Html5.

Vamos lá.

    Um dos motivos que me fez usar o NetBeans é a organização e simplicidade com grande capacidade para atender a maior parte do conteúdo. Porém não será dispensado o uso de ferrementas e editores e outras IDEs  como o Sublime / Note ++ / Eclipse/ Xamp /  Android Studio /  Emulador Geny_Motion e Adobe Dreamweaver, Fireworks, Flash,  PhotoShop.

Para Fazer Download do NetBeans 8.1 ou mais Atualizado.
Site Oficial Netbeans : Baixar
Netbeans 8.1 : Baixar

Imagen Exemplo

   Eu fiz o download full(Tudo), suporte completo a SDK/ JavaSe/Fx/EE/ME - Html5/javaScript / PHP / C.C++ / e servidores embutidos.

Site Oficial Xamp - Download Xamp
Após feita a instalação, fiz também já o download e instalação do Xamp (para facilitar e muito). Estou usando o Win 7 - para funcionar o Xamp no win 7 é necessário atualização SP1.


Os motivo de usar o Xamp é que ele já vem com o Apache (Servidor), Mysql (Banco de Dados ) e tem fácil instalação.

Ao abrir painel de controle do Xamp, Start o Apache. (Se não startar falta algo!!! - porta esta bloqueada !!! restrição de Admin, Atualização pacote netframework )

Imagem Exemplo. Quando esta funcionando corretamente ele fica com fundo verde como na imagem.



 ( Para localizar a pasta onde fica os arquivos, acesse o Explorer - Localizar agora a pasta htdocs - pode salvar todo seu conteúdo em outra pasta ou simplesmente apagar tudo que esta dentro dela. )

Agora vamos abrir o NetBeans,
 Vamos em Arquivo - Criar novo Projeto. Na lista de Categorias vou escolher HTML5/JavaScript.
Escolher Projeto - Aplicação Html5/Js.

Seguindo a criação do projeto, Nomear o projeto, na escolha da pasta do projeto vamos indicar a pasta do Xamp / htdocs onde será salvo nossos arquivos no servidor.






 Vá em próximo - (Modelo de Site) - por enquanto escolhemos a opção - Nenhum Modelo de Site. Novamente seguimos com o próximo, agora desmarque todas as opções de ferramentas, (package/bower/gruntfile/gulpfile.) agora podemos finalizar.

Temos agora a primeira página na nossa IDE. para testarmos podemos ir pelo atalho de execução do NetBenas (Shift-F6) ou ir na seta verde acima na barra de tarefas.

  <!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

Podemos também verificar a estrutura e visualizar na pasta htdocs dentro do Xamp. (Observar  a Configuração feita automática pelo Netbeans).

Para fazer o teste com o servidor escreva localhost na barra de navegação do seu browser será exibido, como esta na imagem abaixo.  Ao clicar na pasta (Nesse exemplo aulaTeste), podemos ver a mesma estrutura já vista no explorer, já a página index.html esta dentro de public_html. Podemos agora fazer mais testes - copiar um index.html diretamente na htdocs abrir o browser e escrever localhost - teve ser apresentado a página diretamente, no caso das pastas nesse diretório é um sub-diretorio na busca do browser podemos apenas adicionar após a uma barra '/ '     


Podemos agora começar nosso desenvolvimento.  Bons estudos.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Botões Bootstrap Exemplos.

Imagem
Exemplo de Botões no Bootstrap! Exemplo se uso de botões no bootstrap, segue abaixo código fonte: <div class="container ">        <div class="page-header">         <h1>Botões Bootstrap</h1>  </div><!-- page reader Cabeçalho da Página -->                 <div class="row">           <div class="col-sm-6">                       <h3>Botões Padrão</h3>             <a href="#" class="btn btn-default">Botão link</a>             <input type="submit" class="btn btn-default" value="Botão">             <button class="btn btn-default">Botão Button</button>         </div>       ...
Leia mais

Conhecendo JavaScript - Eventos

Imagem
Eventos Os eventos são ações realizadas pelo usuário que são capturadas dentro do navegador, no JavaScript podemos captura-las como por exemplo o comportamento do movimento do mouse, um clique de uma tecla do teclado, até mesmo quando o usuário redimensiona a tela do browser, o carregamento da página, esses eventos possibilitam disparar ações. Os eventos trabalham em conjunto com as funções vista no ultimo estudo, caso não tenha se lembre volte no post e leia novamente. Eventos     Eventos do Mouse Os principais eventos de captura do mouse no browser são: ONCLICK - Acionado no clique do mouse. ONDBLCLICK - Acionado no clique duplo do mouse ONMOUSEDOWN - Acionado no clique do mouse(soltando ou não o botão) ONMOUSEOVER - Acionado quando cursor do mouse sobrepõe o elemento da página. ONMOUSEOUT   - Acionado quando o cursor do mouse sai da área de uma elemento da página. Para podermos começar precisamos de um elemento na página, para podemos visua...
Leia mais

Conhecendo JavaScript - HTML DOM

Imagem
DOM DOM ou (Document Object Model), é uma API multiplataforma que permite o acesso aos elementos que fazem parte da página utilizando o JavaScript.  Lembrando da estrutura da pagina html, nos temos as tags que geram os hipertextos, que encapsulam outras tags filhas e os textos,imagens...etc. Toda essa estrutura pode se imaginar como uma arvore onde ela é renderizada pela navegador e mostrada na tela, os elementos dessa arvore são chamados de nos ou NODE(inglês) ,segue ilustração da arvore. Sempre seguindo uma herarquia nota que a estrutura é simples para leitura de onde esta os elementos dentro da arvore  HTML. Com o Dom podemos fazer alteração diretamente ao elemento através de um evento, alterar uma cor,  esconder ou exibir uma tabela , acionar um evento com mouse sobre uma imagem e alterar brilho da imagem, tem muitas aplicações dinamicas possiveis. Para que isso funcione precisamos manipular os elementos (Node) no HTML,  como visto acima nessa arvor...
Leia mais