Como sair do zero e tornar-se um desenvolvedor Web

Código HTML

Um dúvida recorrente dos iniciantes é o que deve aprender, qual caminho seguir, o que fazer para transformar-se em um desenvolvedor Web. Para os mais adiantados e que já conhecem o básico html-css-javascript, existem cursos que abordam todas as técnicas para desenvolver sites e sistemas Web de qualidade. Aqui vou passar algumas dicas rápidas do caminho que deve ser trilhado e dos principais termos envolvidos.

A primeira coisa necessária é ter conhecimento em lógica de programação? Conhece? Se ainda não, é hora de correr atrás do "prejuízo" :D. Sim sem lógica de programação não tem desenvolvedor que se sustente. Aprendendo lógica, partimos para a tríade mais comum da Web: Html, CSS e JavaScript. Essas são as tecnologias de FrontEnd, ou Client-Side (Lado do Cliente) ou seja, as que rodam direto no seu navegador, responsáveis por desenhar e estilizar os elementos (html e css), e por adicionar comportamentos (javascript) como validação de formulários. Bom lugar pra aprender isso: W3 Schools.

Se você já conhece esses três, está na hora de conhecer as linguagens de Server-Side, ou Backend (Lado do Servidor), que são as que trabalham no servidor, manuseando e tratando dados, e provendo retornos para o Client-Side. Logo no meu início, quando estava "estagiando", eu tive contato com o PHP. Fiquei maravilhado com a capacidade de criar conteúdos dinâmicos, salvar dados no banco, e assim por diante. Era incrível perceber que finalmente eu poderia criar sistemas com funcionalidades reais, persistência de dados, e que realmente  resolviam os problemas dos clientes. Isso é fantástico e prazeroso! No curso PHP do Zero ao Profissional você tem a possibilidade de conhecer essa linguagem poderosa e flexível (nele você cria até um clone do Facebook o.O).

Ultimamente também tenho aprendido outras tecnologias de Server-Side, como o NodeJS, que traz a incrível possibilidade de utilizar JavaScript (sim, o mesmo JS que você aprendeu lá no FrontEnd), para desenvolver sua aplicação de Server-Side, com conexões ao banco, desenvolvimento de API's, etc. Enfim, são muitas tecnologias, e falar de todas aqui seria inviável. Por isso criei esse pequeno artigo pra dar um "Norte", e faço-me à disposição pra responder dúvidas pelo skype (tiagosilvapereira1) ou pelo meu e-mail: tiagosilvapereira3@gmail.com.

Abraços e muito sucesso!!!

Como criar um aplicativo sem saber programação nativa (Java, Swift ou Objective C)

Como criar um aplicativo pra Android e iOS sem saber Java, Swift ou ObjectiveC

Introdução

Existem diversas maneiras de desenvolver aplicações sem utilizar linguagens nativas. Nesse artigo vou citar especificamente o Apache Cordova e o framework Ionic 2 que roda sobre ele.

Top Empresas - App Híbrido

Princípio

Alguns anos atrás, a única forma de desenvolver aplicativos era utilizando as linguagens, bibliotecas e padrões nativos de cada plataforma. Desenvolvedores Android geralmente utilizam Java, e desenvolvedores iOS utilizam Swift (anteriormente utilizavam Objective C, até a Apple lançar o Swift no mercado, que traz diversas melhorias como facilidade de programação funcional, aumento de performance, diminuição na curva de aprendizado e assim por diante).

Em meados de 2008, surgiu o Phonegap. Basicamente, ele permitia que o desenvolvedor tivesse acesso à uma WebView, onde iria desenvolver todo o visual e lógica da aplicação utilizando HTML, CSS e JAVASCRIPT. O legal era que o Phonegap compilava uma aplicação nativa com a WebView, o que permite acesso aos recursos nativos do aparelho por intermédio de plugins, como Câmera, Vibração, Acelerômetros, Giroscópios, etc. 

Além disso, um dos maiores ganhos é o fato de ser possível escrever o código apenas uma vez, e compilar para diversas plataformas como Android, Windows, iOS e outros com poucas ou até mesmo nenhuma alteração.

Logo em seguida, em 2009, a Apple liberou o desenvolvimento de aplicações com Phonegap. Desenvolvedores Web, que geralmente possuem bastante conhecimento de HTML, CSS e JAVASCRIPT começaram a utilizar essa tecnologia para desenvolvimento de aplicações, que são denominadas "Aplicações Híbridas", por serem um misto de tecnologia Web e tecnologia nativa.

O projeto fez grande sucesso e em 2011 foi comprado pela adobe, e liberado sob a licença Apache, como o nome de Apache Cordova. O nome PhoneGap foi reservado pela Adobe para o seu serviço de build na nuvem, que permite compilar para o iOS, por exemplo, sem a necessidade de um Mac.

É mais lento? Perco performance? Compensa?

Após o surgimento das aplicações híbridas, surgiram diversos movimentos de crítica em relação à performance, pelo fato de não ser nativo, etc. No princípio as diferenças de performance eram notáveis, principalmente pelos Smartphones da época serem mais primitivos.

Hoje, oito anos depois, muita coisa melhorou: tanto a tecnologia do Apache Cordova, que é exaustivamente melhorada e atualizada, quanto os aparelhos que rodam aplicações híbridas de maneira que as diferenças tornam-se imperceptíveis.

É claro que existem áreas como Games, 3D, etc em que a preferência recai sobre o nativo. Cada caso deve ser analisado. Fato é que apesar de trazer diversos benefícios, é uma tecnologia que deve ser muito bem aplicada, assim como qualquer outra, pra trazer ótimos resultados.

Ou seja, não abandone o nativo. Analise. É uma aplicação crítica, que demanda performance ferrenha, animações incríveis, etc? Vá de nativo. É uma aplicação mais simples, com lista de dados baixados do servidor, perfis, etc? O Híbrido resolve com certeza. Algumas aplicações híbridas famosas: Instagram, Twitter. A primeira versão do Uber eu lembro que era híbrido também, mas não sei informar se as novas versões ainda são.

Ionic 2

O Ionic foi lançado em 2013, e rapidamente tornou-se um dos frameworks mais utilizados no mundo do desenvolvimento híbrido. Ele compila o aplicativo utilizando o Cordova, mas poupa o tempo do desenvolvedor trazendo diversas funcionalidades prontas, plugins e desenvolvimento sólido.

A primeira versão do Ionic utilizava o AngularJS 1, um Framework Javascript muito utilizado por desenvolvedores Web, que facilita muito o desenvolvimento SPA (aplicações de página única). O único problema do AngularJS 1 é que possui alguns problemas de performance que prejudicam o desenvolvimento para aparelhos menos potentes.

Recentemente (2016) foi lançado o AngularJS 2, e o Ionic 2 foi idealizado utilizando essa nova versão do framework, trazendo vantagens de performance, programação com TypeScript, compatibilidade com as últimas versões do JavaScript, visual com as últimas técnicas de design, e passou a suportar 3 plataformas: Android, Windows e iOS.

Como isso funciona?

É bem simples. Você vai programar o seu aplicativo usando os recursos do Ionic, que utiliza tecnologias web: HTML, CSS e JavaScript (AngularJS). Se precisar de algum recurso nativo, como a câmera, é só utilizar um plugin (existem os oficiais do Ionic e muitos outros de desenvolvedores independentes).

No final, o Ionic vai utilizar o Apache Cordova para compilar para cada uma das plataformas específicas.

Tiago, você já desenvolveu aplicações híbridas?

Sim, já desenvolvi, vou deixar aqui dois exemplos:

Dia na História
Top Empresas

Como podem ver são aplicações com recursos interessantes como: Localização GPS, Mapas, Login de Usuário, etc.

Quero saber mais sobre isso. Posso falar contigo?

Cooom certezaa!! Me add no skype: tiagosilvapereira1 e no email tiagosilvapereira3@gmail.com e vamos bater altos papos sobre programação. 

Bom é isso aí pessoal. Mais uma carta na manga. Sabe aquele restaurante que te pediu um App de cardápio? Que tal criar ele muito mais rápido, pra várias plataformas e ganhar uma grana legal? É pra se pensar né?

Abraços!!

Links das Tecnologias
Ionic Framework
Ionic 2
Apache Cordova

Como limpar o cache sem prejudicar sua aplicação

Recentemente desenvolvi uma aplicação que depende muito do cache para funcionar bem. O Rapid Mockup, um software para desenvolvimento de mockups em 3D, que roda diretamente no navegador. Lancei o Beta 1, rodou tudo bonito.

Imagem do Rapid Mockup

Aí chegou a vez de lançar o Beta 2, e surge um problema: como as pessoas vão receber as atualizações se a maior parte da aplicação fica em cache? Fui estudar as alternativas:

Limpeza total do cache

Sempre que abrir a aplicação, limpar todo o cache realizando um location.reload(true), o que força a página a ser carregada diretamente do servidor. 
Essa alternativa eu simplesmente descartei por ser inviável. Isso representava baixar toda a aplicação do servidor sempre que o usuária  acessasse. O Rapid Mockup é uma aplicação pesada, e mesmo que fosse mais leve, não poderia correr o risco de desperdiçar os benefícios do cache, que permitem carregar a aplicação de maneira muito rápida.

Tempo de Expiração

Configurar um tempo de expiração curto para o cache dos meus recursos no servidor.
Essa é uma boa alternativa, em partes. Eu poderia colocar um tempo de expiração de uma semana, por exemplo, e após uma semana, sempre atualizar a minha aplicação. Mas isso forçaria a recarga completa da aplicação toda semana, e muitas vezes, eu alterei apenas um arquivo pequeno. Além disso, se fiz um update, quero que os usuários tenham acesso agora, e não daqui dois, cinco, sete dias. 

Utilizando "Query Params"

Utilizar versionamento usando um "query param". Ex: <script src="./scripts/script.js?v=1.2">
Essa opção funciona, é um pequeno "hack" utilizado para resolver essa questão. O parâmetro na frente do script ("v=1.2") é apenas uma forma de modificar a URL de carregamento, e que faz com que o arquivo seja carregado novamente. No entanto, alguns proxies como o Squid não funcionam com essa opção, fazendo com que o script seja sempre recarregado, mesmo que não tenhamos modificado o parâmetro.

Versionamento no nome do arquivo

Utilizar versionamento no nome do arquivo. Ex: <script src="./scripts/script-1.2.js">
Essa é a melhor opção, pois também funciona com proxies como o Squid e outros. No entanto, tem um preço à se pagar por isso: o controle de diversos arquivos no seu sistema de versão.

Bom, depois de pesquisar e ler alguns artigos como este, acabei me decidindo por utilizar a quarta opção, versionando os arquivos separadamente. Não é a mais simples e intuitiva, mas é a que funciona melhor. E qualidade é o que desejamos entregar, não?

Se você souber de uma solução melhor, ou tiver alguma carta na manga, por favor comente abaixo. Afinal, estou aqui pra aprender e trocar experiências.

Sucesso e Abraços!!!

Dicas pra lançar um Software rentável

Uma das coisas que percebi após vários tombos é que, lançar um produto baseado em achismos é quase sempre um "fracasso". Coloquei em aspas porque existem exceções. Mas são raras. Pra criar novos produtos, existe jeito certo e errado. Após alguns fracassos, estou firmemente convicto disso.

Pouco tempo atrás, tive a "brilhante" ideia de lançar um aplicativo que mostrasse os postos de combustível mais próximos e o preço do combustível atualizado. Uai, mas isso já não existe? Sim, mas minha ideia principal era que os próprios postos atualizassem os preços, sendo assim, eles sempre estariam atualizados e tal. O principal problema é que não fui falar com donos de postos antes de desenvolver.

Imagem do Enche o Tanque, meu "brilhante" aplicativo

Coloquei a mão na massa e, 2 meses depois, o aplicativo estava pronto. Lindo, funcionava que era uma beleza, só faltavam os clientes. Aí eu fui pra rua, fazer o que eu deveria ter feito antes de iniciar o desenvolvimento do aplicativo. Fui atrás dos clientes.

E semanas depois, passando de posto em posto de combustível, não consegui nenhum cliente. Falei com donos de postos de combustível, e para a maioria deles, o melhor seria ter um App próprio, com recursos de fidelização de clientes. Pelo menos descobri o modelo de negócios. Mas já tinha perdido 2 meses em serviço, muito código, muita coisa feita. 

É claro que teve o aprendizado, aprendi trabalhar com Geolocalização, Mapas, e outras coisas interessantes. Mas eu poderia ter aprendido tudo isso construindo o produto certo.

Então, a minha principal dica é: Antes mesmo de colocar a mão no código, ou de criar seu produto, crie um Canvas do Modelo de Negócio (Business Model Canvas). O SEBRAE tem uma ótima ferramenta pra isso: https://www.sebraecanvas.com

Depois, converse com os futuros clientes. Entenda o problema ou necessidade deles, verifique se sua solução se encaixa. Vá melhorando seu Busines Model Canvas pra entender o modelo de negócio. Confesso que estou aprendendo à utilizar isso e é incrível como, ao conversar com o futuro cliente, você entende justamente o que ele precisa.

De repente, você chega com 10 hipóteses, e apenas uma delas é tudo que o cliente precisa. Aí ele te dá mais uma ideia, e pronto. Ao invés de 10 funcionalidades, você desenvolve apenas duas, e pronto.

É isso. O melhor é não se afobar, achar que sua ideia é a "matadora", a maior invenção da humanidade depois da roda. Calma. Pode não ser o momento certo pra sua ideia. Ou de repente, as pessoas precisam dela, mas com alguns ajustes. Não tem como adivinhar se o cliente vai gostar das suas hipóteses. Tem que conversar.

E conversando, você descobre coisas importantes. Descobre que ao invés do público 18-35 anos, ela pode ser voltada para 20-45 anos. Público feminino? De repente tem homens que também queiram utilizar seu produto. E assim por diante.

Para aprender mais sobre isso, tem um ótimo curso na Endeavor, intitulado Como Construir a Empresa Certa para os Clientes Certos. O curso é totalmente gratuito e de qualidade, ensinando todos os passos para a criação e lançamento de um produto, como conduzir entrevistas, avaliar o mercado e muito mais.

Parafraseando Augusto Cury: "Uma pessoa inteligente aprende com os seus erros, uma pessoa sábia aprende com os erros dos outros."

Bora lançar software rentáveis? Fui... Pra rua falar com prováveis clientes!! :D

Responsividade: Projetando para Desktop, Tablets e Smartphones

O que é Responsividade?

Sabe aquele site que você entra pelo celular, e tem que ficar dando "zoom" pra ver as letras e imagens? Além disso, os itens do site parecem perdidos na tela, e é no mínimo chato visualizar os itens e informações. Esses são sites "não-responsivos".

Com a grande popularização de dispositivos móveis, a necessidade de criar sites e aplicações web que se adaptam à qualquer tela cresceu exponencialmente. Pra esse tipo de site, criou-se o termo layout responsivo.

Alguns anos atrás, era comum a criação de dois sites. Um para ser utilizado no computador, e outro pra ser utilizado no celular. Funcionava, mas era pouco prático e dinâmico, além de acarretar outras responsabilidades e problemas, como realizar checagem de dispositivos, redirecionar a página, etc.

Hoje, utilizando técnicas de HTML + CSS, é possível criar sites totalmente responsivos, que se adaptam aos mais variados dispositivos sem nenhum problema.


1. Exemplo de Site que se adapta aos dispositivos

O que devo saber pra criar sites responsivos?

A princípio, deve saber CSS, utilizando os media-queries, que são comandos que delimitam determinadas funcionalidades de acordo com o tamanho da tela. Em outras palavras, as media-queries informam quando determinado comportamento será aplicado dependendo do tamanho da tela do dispositivo.

Exemplos:

/* Aqui especifiquei que a cor da letra do parágrafo é preto, caso não caia nas
condições abaixo */
p {color: black;}

/* Caso esteja em um tablet por exemplo, com largura mínima 768, a cor é vermelho */
@media screen and (min-width: 768px) {
  p {color: red;}
}

/* Em um monitor, a cor seria amarelo */
@media screen and (min-width: 992px) {
  a {color: yellow;}

}

Ao incluir o CSS acima no seu HTML, e acessá-lo em um computador, por exemplo, a cor do texto seria amarelo. Ao acessar no tablet, seria vermelho, e assim por diante. Ou seja, o CSS nos permite especificar comportamentos diferenciados.

Mas são muitas telas e não quero fazer isso na mão

Antes de tudo, gostaria de deixar uma pequena orientação aqui: Antes de partir para o uso de algum framework CSS que facilite tudo isso, aprenda certinho como funcionam as media-queries. Elas serão úteis em várias ocasiões e, nem sempre você precisará de um framework.

Mas, voltando ao assunto, existem sim frameworks CSS que trabalham a parte da responsividade e muitas outras coisas, facilitando a vida do Desenvolvedor. Geralmente trabalham com sistema de Grid, dividindo a tela em linhas e colunas, o que facilita ainda mais o trabalho com responsividade.

Caso já tenha conhecimento de CSS, vale a pena dar uma olhada em alguns desses frameworks e aprender a utilizá-los, pois eles podem sempre agilizar suas tarefas:

Frameworks

Boostrap - O mais conhecido e utilizado atualmente, desenvolvido pelo Twitter

Foundation - Outro Framework muito conhecido e completo

TopCoat - Framework voltado para aplicações Web

Mini-Frameworks - Muito adequados para projetos onde você deseja depender o mínimo de Frameworks, utilizando apenas características básicas como Grids. Seguem alguns:

MinCSS - Possui apenas 995 bytes!! Legal né?

PureCSS - Framework leve e minimalista, para aplicações e sites rápidos. Muito bonito.

Furtive - Outro bem pequeno, menos de 4Kb

Considerações Finais

É isso aí pessoal!! Espero que tenham gostado. Se você está começando agora no desenvolvimento de sites, estude bastante CSS voltado para esta questão de responsividade.

Em breve estarei lançando um post com mais explicações sobre responsividade, provavelmente com a criação de uma pequena página utilizando CSS com Media-Queries e depois, criando a mesma página com algum framework. Fiquem no aguardo. 

E boa sorte nos estudos!! Sucesso. :D

Bem vindo à este Blog

Seja bem vindo ao meu blog!!

Olá, querido visitante! Seja bem vindo ao meu blog sobre tecnologia, linguagens de programação, desenvolvimento Web e muuitas dicas sobre tecnologia.

Aqui eu desejo passar o pouquinho que sei e adquiri na minha jornada profissional, ajudando o pessoal que está começando à se posicionar nessa longa caminhada da área de TI.

Bom, primeira, deixa eu me apresentar. Meu nome é Tiago Silva Pereira Rodrigues. Extenso não? Vamos ficar só com Tiago Rodrigues :D Tenho 22 anos, sou desenvolvedor Web e Mobile, trabalho com programação desde quando eu tinha mais ou menos 15 anos de idade.

Comecei desenvolvendo Jogos 3D com C++ e OpenGL. E aos poucos fui adquirindo conhecimento. Tenho muito que aprender, e o maior intuito desse blog é aprender com você, leitor!

Com o tempo, após a faculdade de Análise de Sistemas, passei à me interessar por desenvolvimento Web e Mobile, Startups, Empreendedorismo, etc.

Espero prover um conteúdo de qualidade aqui, útil pra todos que tenham desejo de crescer na nossa área.

Obrigado e Aproveite!!