Tutorial Angular.js – Criando um sistema de notícias (Introdução)
Há muito tempo não escrevo artigos técnicos para nosso blog. Longe de ser por falta de vontade, a dinâmica do empreendedorismo muitas vezes nos força a fazer muito mais o que é preciso ser feito do que apenas o que te da prazer.
Como criar um formulário com o Contact form 7 (plugin wordpress)
O Contact form 7 é um plugin gratuito para WordPress que possibilita criar formulários de contato de uma maneira muito simples e funcional, ele conta com diversas opções que lhe permite criar campos dos mais variáveis tipos como “text”, “email”, “tel”, “menu suspenso” entre muitos outros. O plugin permite criar um e-mail automático (auto responder) para cada formulário, além de aceitar html, css e o framework bootstrap para customizar os seus formulários além de muitas outras funcionalidades. Nesse tutorial iremos aprender a: criar um formulário estilizado; configurar e-mails automático (auto responder) para o remetente; Configurar mensagens e redirect após cadastro; configurar SMTP do e-mail; e fazer com que após clicar em enviar o usuário seja redirecionado para uma página de “Obrigado pelo contato”. Instalando o plugin A primeira coisa a ser feita é instalar o plugin no seu wordpress, acesse o link de download (Baixar plugin Contact Form 7) ou se preferir acesse o menu “Plugin” em seu wordpress, clique em “adicionar novo” e pesquise por Contact form 7, agora é só instalar e ativar o plugin. Adicionando um novo formulário Com o plugin instalado basta parar o mouse em cima da opção “Form contato” localizada no menu principal do WP e clicar na opção “Adicionar novo”. Tela principal CF7 Bem vindo a tela principal do Contact form 7, a imagem a seguir explica um pouco sobre as opções principais do plugin. Está gostando deste turorial? Que tal se cadastrar em nossa newsletter para receber mais tutoriais relevantes sobre wordpress em seu e-mail. Agora que você já conhece um pouco das configurações gerais do Contact form 7, vamos definir os nomes e tipos de cada campo que irão compor o nosso formulário. O form conterá seis campos que serão: “Nome” (tipo texto); “E-mail” (tipo email); “Telefone” (tipo tel); “Estado” (tipo menu suspenso); “Assunto” (tipo texto); e “Mensagem” (tipo textarea). Apague todo o conteúdo do formulário padrão deixando apenas o botão de enviar [submit “enviar”]. Vamos começar criando os títulos de cada campo. 1 – Criando seu formulário do zero Para criar os títulos, basta um inserir “label” para cada campo da seguinte forma. <label>Nome</label> <label>E-mail</label> <label>Telefone</label> <label>Estado</label> <label>Assunto</label> <label>Mensagem</label> Depois de definir os títulos é hora de definir o tipo de cada campo. Para isso basta você escolher o tipo de cada campo na lista de tipo de campos. Para deixar o tutorial mais simples, vamos configurar apenas o nome do campo e se ele será obrigatório ou não. É muito importante definir os tipos corretos para campo pois assim o próprio plugin insere algumas validações como por exemplo se o email não conter @ ou . (ponto) quando o usuário enviar o formulário irá aparecer uma mensagem informando que o campo não foi preenchido corretamente. Os campos nome, email, telefone, assunto e mensagem seguirão a mesma formatação. Fica a seu critério definir quais campos serão obrigatórios ou não. O campo Estado que será do tipo “lista suspensa” terá a seguinte formatação: Depois dos campos inseridos, a sua tela de configuração de formulário estará parecida com a da imagem abaixo. *Lembrando que os campos com um asterisco * informam para o Contact form 7 que esse campo é obrigatório. Caso ele fique me branco, uma mensagem é exibida para o usuário. Para melhor identificação do usuário insira um * na frente do título de cada campo obrigatório. Primeira parte concluída! Clique em salvar e depois na aba “Mail”. 2 – Configurando os e-mails de resposta automática A segunda parte do tutorial consiste em configurar o e-mail, a forma como o formulário será mostrado para o destinatário e criar um e-mail automático para ser enviado ao remetente confirmando que o e-mail foi enviado com sucesso. Para deixar o tutorial mais real eu irei utilizar o meu e-mail para mostrar como funciona o recebimento do e-mail. Sinta-se a vontade para me enviar um e-mail caso tenha alguma dúvida, terei o maior prazer em ajudar. A imagem abaixo mostra a função dos quatro primeiros campos de configurações do e-mail que será entregue para o destinatário. Agora vamos configurar o corpo do e-mail que será entregue ao destinatário. A imagem a seguir mostra um exemplo de layout: Muito bem, o e-mail que será enviado para o destinatário já está configurado. Chegou a hora de configurar a resposta automática que será enviada para o e-mail do usuário. Marque a opção Mail (2) e vamos começar a terceira etapa do tutorial. A imagem a seguir mostra um exemplo de como configurar uma resposta automática com o Contact form 7. Lembre-se marcar a opção “Usar tipo de conteúdo HTML”. Clique em salvar. Caso apareça a mensagem “Este endereço de email não pertence ao mesmo domínio do site”, ignore-a. 3 – Configurando a aba mensagens e redirect pós cadastro (atualizado) Clique na aba “Mensagens”. Nessa aba você pode substituir as mensagens que vem por padrão, por mensagens personalizadas. Não vou aprofundar nessa parte porque é bem intuitiva. Segue imagem: Clique na aba configurações gerais e vamos configurar para onde o usuário será levado assim que ele enviar o contato, eu irei direcionar para a página inicial da Agência Nano Incub. Insira o seguinte comando: on_sent_ok: “location = ‘https://php81.nanolab.com.br/cliente/nanoincubv4’;” *Atenção* O método acima não funciona mais para redirect! Por isso você vai ter que utilizar o seguinte método: <script> document.addEventListener(‘wpcf7mailsent’, function (event) { location = ‘//php81.nanolab.com.br/cliente/nanoincubv4/’; }, false); </script> Insira o comando acima dentro do seu formulário, localizado na primeira aba do plugin. Insira um titulo para o seu formulário e clique em salvar. 4 – Configurações de SMTP Configurações de e-mail realizadas, agora vamos configurar o SMTP do e-mail que irá receber o formulário de contato, para facilitar o processo instale o plugin – Easy WP-SMTP. Link para download Easy WP-SMTP – https://br.wordpress.org/plugins/easy-wp-smtp/ Ou se preferir faça o download, instale e ative diretamente do wordpress. Plugin instalado? Então vamos continuar =D Pare o mouse na opção “Configurações” no menu principal do WordPress e clique em Easy-wp-smtp O painel principal do plugin será exibido, vamos inserir as configurações de smtp. Vamos
PhoneGap tutorial – Iniciando um projeto (completo)
Neste tutorial de PhoneGap/cordova será apresentado o Framework PhoneGap com todas as instruções para a preparação de seu ambiente para o desenvolvimento utilizando as tecnologias HTML, CSS, e JavaScript. O objetivo é ensinar a configurar um ambiente para iniciar um projeto PhoneGap. E depois que você estiver dominando o Phonegap, indico que leia também o tutorial introdutório sobre Ionic que o Maurílio criou. Este artigo se resume em: O que é PhoneGap. Como instalar Android SKD Como instalar Ant Apache Como instalar Node.js Como instalar PhoneGap Rodando um projeto Demo. Para a execução deste tutorial de Phonegap você precisará de de algumas ferramentas:um editor de código, um Browser moderno (Chrome/Firefox/etc) e um bom conhecimento em HTML, CSS e Javascript. O que é PhoneGap? Já pensou o trabalho que seria ter que criar um aplicativo e disponibilizar para todas as plataformas, seja elas Android, IOS, Windows Phone, etc.? Teríamos que aprender como cada plataforma trabalha, sem contar que teríamos que desenvolver o mesmo para cada plataforma, só de imaginar o trabalho que seria dá até um frio na barriga. E se existisse uma maneira de desenvolver um único aplicativo e que rodasse em todas as plataformas? Pois bem, esse é um dos motivos pelo qual o PhoneGap vem crescendo a cada dia. O PhoneGap (também conhecido como Cordova) é um framework voltado para o desenvolvimento de aplicações para dispositivos móveis que permite desenvolver aplicações utilizando as tecnologias Javascript, HTML5, CSS3. Ele é multiplataforma e da suporte a alguns recursos bastante importante , tais como: Accelerometer, camera, compass, contacts, geolocation, notification (alert / sound / vibration, storage, media e network). A tabela abaixo mostra a compatibilidade dos recursos para cada plataforma. Uma das vantagens do Phonegap é que por se tratar de um web app, você poderá testar seu app diretamente no seu browser, sem precisar compilar o projeto e emular em uma AVD ou rodar diretamente no seu celular a cada alteração feita. Aprenda a instalar o Ionic também Para ampliar ainda mais seus estudos, nosso programador front-end Maurílio Novais criou um novo tutorial sobre Ionic. Leia agora! Leia o tutorial de Ionic Instalando um ambiente para rodar o Phonegap (Android SKD) Para que possamos dar inicio a um projeto, primeiro precisamos ter um ambiente para o desenvolvimento. O primeiro passo é realizar o download do SDK do Android no site: http://developer.android.com/sdk/index.html. Após fazer download, faça a instalação do mesmo. Depois de realizar a instalação, procure pelo SDK Manager na pasta onde realizou a instalação do SDK Android e realize as atualizações necessárias. Instalando Ant Apache Para que possamos desenvolver para Android é preciso ter o Apache Ant instalado. O Apache Ant é uma ferramenta utilizada para automatizar a construção de software. Ela é escrita na linguagem Java e foi desenvolvida inicialmente para ser utilizada em projetos desta linguagem. A ferramenta Ant é um projeto da Apache Software Foundation. É um software livre, licenciado sob a licença Apache. Primeiro baixe a distribuição binária do Apache Ant no site: http://ant.apache.org/bindownload.cgi Depois descompacte o Apache Ant em qualquer lugar, no meu caso descompactei na raiz do disco D. Está gostando deste artigo? Coloque seu e-mail abaixo e fique atualizado com nossas novidades. CADASTRE EM NOSSA LISTA DE PROGRAMADORES [mailmunch-form id=”610647″] Configurando Variáveis de Ambiente Feita a instalação e a atualização do Android SDK e a instalação do Apache Ant. É necessário configurar as variáveis de ambiente. Vá em Propriedades do Sistema -> Aba Avançado -> Váriáveis de Ambiente -> Em Váriáveis do Sistema Ou Tecle Tecla Windows + Pause Break > Configurações Avançadas do sistema > Variáveis de Ambiente Crie uma variável chamada ANDROID_HOME e em seu valor informe a pasta no qual o SDK foi instalado. Depois crie uma variável chamada ANT_HOME e em seu valor informe a pasta no qual o Apache Ant foi instalado. Agora procure pela variável PATH e clique em editar Em seu valor adicione a seguinte string:%ANT_HOME%bin;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools; Até aqui já temos um ambiente pronto para desenvolver um app para android, agora iremos instalar as ferramentas necessárias para utilizar o PhoneGap. Instalando Node.js Faça download do Node.js no site: http://nodejs.org/download/ Depois faça a instalação do mesmo. Para verificar se a instalação foi feita corretamente abra Prompt de comando e digite : node –v Deverá aparece a versão do nodejs instalado em sua maquina conforme mostra a figura a seguir; Criando um projeto PhoneGap Agora estamos chegando na parte mais interessante do tutorial, logo abaixo iremos iniciar um projeto de PhoneGap! Com o Node.js instalado corretamente em sua maquina, abra o Prompt de comando e digite o comando para instalar o Cordova CLI: – npm install –g cordova Vá para um diretório onde você irá armazenar seus projetos. Por exemplo: – cd ~/Projetos Crie um projeto chamado “helloword”: – cordova create helloword br.yourname.helloword Helloword Entre na pasta do projeto criado: – cd helloword Adicione a plataforma que você queira desenvolver. No nosso caso será para a plataforma Android. – cordova platforms add android Agora iremos adicionar alguns plugins básicos para o nosso projeto, ainda na pasta do projeto digite: – cordova plugin add org.apache.cordova.device – cordova plugin add org.apache.cordova.console Verifique a estrutura do projeto criado, na pasta plugins devem conter duas pastas, uma para cada plugin instalado anteriormente e na pasta platforms a pasta android referente à plataforma instalada. Rodando o projeto Pronto agora nosso projeto de PhoneGap já pode ser rodado, para que possamos rodar esse projeto conecte um dispositivo Android em seu computador usando um cabo USB, entre na pasta platforms e digite: – cordova run android Mas caso você queira rodar seu app em um emulador Android, digite: – cordova emulate android E se você achar mais prático testar em seu próprio browser, vá na pasta www de seu projeto e abra o arquivo index.php no navegador de sua escolha. Há alguns emuladores de dispositivos móveis que rodam em alguns browsers modernos que nos permite utilizar recursos como Accelerometer, compass, etc. Um deles é o Ripple Emulate do Chrome, ele ainda está na fase Beta mas oferece bastante recursos, facilitando assim a nossa
