segunda-feira, 17 de abril de 2017

Trilha TDC4Women - The Developers Conference Floripa 2017


Ver um projeto tão incrível virar realidade me deixa muito, muito feliz mesmo! :D
"Por que há tão poucas mulheres em TI?"
Já tem um bom tempo que me pergunto isso, e hoje considero um dos principais motivos o fato das mulheres não conhecerem as áreas de tecnologias. Comigo mesma também foi assim: eu estava mega indecisa, não sabia qual faculdade fazer, e o que eu acabei fazendo? Administração, porque menina faz Administração. Certo? Errado! Menina faz qualquer coisa, qualquer faculdade, qualquer área, menina faz o que ela quiser fazer. Certo? Certo!

E foi pra isso que o TDC4Women foi criado: para inspirar mais mulheres a seguir carreira em áreas de tecnologia da informação. A indústria de TI irá se beneficiar muito de trazer cada vez mais mulheres para a tecnologia, isso é fato.

A ideia da trilha é mostrar tudo que uma mulher pode fazer em TI, com palestras sobre o que é a programação, o que é uma maker, as carreiras nem tão técnicas, o que é Design e UX, teste de software e dicas para acelerar a carreira.

Público Alvo

O publico alvo serão mulheres que querem aprender sobre tecnologia, que estão iniciando sua carreira ou em transição de área. E não será necessário ter nenhum conhecimento prévio.

Coordenação


A Coordenação desta trilha incrível estará contando comigo e minha amiga Jeliel Mendes. Nós duas estamos trabalhando muito para garantir que tudo saia perfeito neste dia, pois queremos assegurar uma ótima experiencia para estas mulheres que irão aprender sobre tecnologia.

Inscrições

As inscrições são gratuitas e já estão disponíveis no site oficial do The Developers Conference.

Quando? Onde? 

O The Developers Conference ocorrerá de 03 à 06 de Maio de 2017, e a Trilha TDC4Women será na Sexta-feira, 5 de Maio das 13:30 às 18:30h no CentroSul (Av. Governador Gustavo Richard, 850 - Centro - Florianópolis/SC).



terça-feira, 21 de fevereiro de 2017

GIT: Crie um repositório no GitHub e compartilhe seu código na web


GIT é um sistema de controle de versão de arquivos. Com ele várias pessoas podem contribuir no desenvolvimento do código de um mesmo projeto, sem o risco daquelas alterações serem sobrescritas.

O GitHub nos oferece muitas funcionalidades extras aplicadas ao GIT, com ele você pode hospedar seu projeto gratuitamente na web, desde que ele esteja em modo publico. Quase todos os projetos open source estão no GitHub, e você também pode colaborar enviando códigos e correções e informando bugs.


Instalando o GIT

Faça o download indicado para seu software no site oficial do GIT clicando aqui

Para conferir se o download foi concluído com sucesso, digite o seguinte comando no prompt de comando:

$ git

Se tudo estiver ok, o resultado será este:


Criando uma conta no Git Hub

Se você ainda não possui uma conta no Git Hub já está mais do que na hora de criar uma! Então vamos lá...

Acesse o site do Git Hub clicando aqui  e, logo na pagina inicial, já estará a opção para criar uma nova conta. Escolha seu 'username', preencha os campos solicitados e conclua o cadastro.


Criando um novo repositório

Após já está logado no site do Git Hub, na pagina inicial, vá até o canto superior direito, clique no ícone "+" e selecione a opção "new repository".


Para este novo repositório, você precisará preencher os seguintes campos:
  • Nome do repositório
  • Descrição do repositório (opcional)
  • Escolher a privacidade, que pode ser publica (gratuita)  ou privada (paga)
  • Adicionar um arquivo README (opcional)
  • Adicionar um arquivo .gitignore, usado para ignorar arquivos e/ou pastas dentro do projeto que não devem ser publicados, como dependências, arquivos compilados, arquivos temporários, etc. (opcional)
  • Adicionar uma licença, mais informações clicando aqui. (opcional)
Depois é só clicar no botão "Create repository" e pronto!




Vinculando seu projeto ao repositório da web

Após o repositório já ter sido criado, copie o endereço do repositório no Git Hub clicando no botão conforme indicado na imagem abaixo.


Abra o prompt de comando do seu computador, navegue até a pasta onde está o seu projeto que você deseja compartilhar na web e digite os seguintes comandos:

$ git init - Para criar o repositório GIT.
$ git add . - O ponto "." significa adicionar tudo, ou se preferir, você também pode adicionar item por item, escolhendo apenas os arquivos que deseja adicionar.
$ git commit -m "texto da mensagem" - Para adicionar uma mensagem ao commit.
$ git remote add origin https://github.com/tatianeaguirres/teste.git - Para vincular a pasta do seu projeto ao repositório na web. É aqui que você deve colar o endereço copiado anteriormente.
$ git push -u origin master - Este comando envia seu projeto para o repositório na web.


Pronto! Agora é só atualizar a página web do seu repositório que o projeto já estará lá :)


segunda-feira, 13 de fevereiro de 2017

Jasmine: Testes Automatizados em JavaScript - Por onde começar?


  • Porque Testar?

Testar software é fundamental nos dias de hoje. O teste garante a qualidade do sistema e previne os bugs, evitando muita dor de cabeça. Lembra daquele ditado "É melhor previnir do que remediar"? É isso aí. 

Se você entregar um produto para o cliente final sem testar, e ele mesmo encontrar os bugs, pode ter certeza que você terá um cliente insatisfeito. E talvez até um ex-cliente.

  • Porque Testes Automatizados?

Porque testar manualmente quando se pode escrever testes em um código que rodará em segundos? Testes automatizados vieram para facilitar a vida de nós desenvolvedores, e não o contrário. E, em um cenário onde precisa-se fazer centenas de testes em diversos dispositivos, o teste automatizado é sempre a melhor opção.

  • Porque Jasmine?

JavaScript é uma linguagem que tem crescido muito no mercado, afinal, ela roda em qualquer browser e possui tipagem dinâmica. E o framework Jasmine nos permite criar testes automatizados de forma simples e rápida com Ruby, Phyton ou JavaScript.

  • Por onde começar?

Configuração da maquina

Antes de começar você precisa ter o NodeJS instalado na sua maquina. Instale a versão recomendada clicando aqui. Faça o download e execute.


Instalando Jasmine

Há duas formas de instalar o Jasmine: [1] via linha de comando / prompt ou [2] via download .zip pelo site.

[1] Para instalar o Jasmine via linha de comando / prompt (utilizando npm) use o seguinte comando:

$ npm install jasmine

Para inicializar Jasmine no projeto:

$ jasmine init

E para rodar os testes utilize somente:

$ jasmine

[2] Para efetuar o download do .zip da ultima release clique aqui. Depois é só extrair tudo e terá o mesmo resultado.


Entendendo a estrutura das pastas

Para os exemplos abaixo, instalei o Jasmine via download do .zip pelo site.


Lib: é onde fica a biblioteca do Jasmine.
Spec: é onde ficará os arquivos .js com o código de testes automatizados.
Src: é onde ficará todo o código-fonte da aplicação.
SpecRunner.html: Caso você tenha feito o download do Jasmine via .zip pelo site, ele já virá com esta estrutura de pastas com arquivos de exemplo. O SpecRunner.html serve para rodar e visualizar o resultado dos testes no navegador.


Escrevendo os testes

Para escrever os testes seguimos um padrão bem simples e fácil de memorizar, mesmo não tendo muito conhecimento em inglês.

Em meu exemplo, temos diversos testes para um sistema de consultas médicas.

Na pasta src, tenho uma função para criar uma nova "Pessoa" que recebe como parâmetros nome, idade, peso, altura.



Ainda na pasta src, também há uma função para criar uma nova "Consulta" que recebe como parâmetros o paciente, procedimentos, particular, retorno, data. É aí que entra as regras de negócio:

  • o raio-x custa R$ 55,00
  • o gesso custa R$ 32,00
  • a consulta padrão custa R$ 25,00
  • a consulta particular custa R$ 50,00


Como saber se o sistema está funcionando corretamente? Testando? Então vamos lá...

Recapitulando: os testes devem ficar na pasta spec.
  • Testando o Paciente


Describe: É a descrição e pode ser usada mais de uma vez, como titulo e sub-titulo
It: Informa o que será testado
Criamos um novo Paciente para o teste
Expect: Esperamos que o calculo do imc do Paciente tatiane recém criado (...)
toEqual: (...) seja igual ao valor "20.202020202020204"

Voltando lá na pasta src onde temos a função Paciente, sabemos que o calculo do imc é "peso / (altura * altura)". Então basta fazer o calculo com o peso e altura do paciente, e, após, adicionar o resultado entre as () após o .toEqual.


Se você estiver utilizando o SpecRunner.html para rodar e visualizar os testes, o resultado será este acima.

Obs: Não esqueça de referenciar os arquivos .js se for utilizar o SpecRunner.html! 


  • Testando a Consulta


Describe: "Consulta" como titulo geral dos testes.
Criamos a variável tatiane.
beforeEach: como um paciente será necessário em todos os testes, utilizamos o beforeEach para criar este paciente e, assim, podemos utilizar o mesmo paciente em todos os testes, sem a necessidade de ficar criando um para cada teste.
Describe: Descrição do teste.
It: Informa o que será testado, neste caso o sistema não deve cobrar nada, pois se trata de um retorno.
Criamos uma nova Consulta, recebendo como parâmetros (paciente, procedimentos, particular, retorno) o paciente recém criado tatiane, tipo de procedimento em branco, particular como verdadeiro e retorno como verdadeiro.
Expect: Esperamos que o preço da consulta (...)
toEqual: (...) sejá igual à R$ 0,00, já que se trata de um retorno.


Para rodar os testes via prompt de comando, basta utilizar o comando $ jasmine

Obs: Quando for rodar os testes via linha de comando, deve-se utilizar "require" para referenciar os arquivos .js necessários para o teste. Veja exemplo no meu GitHub clicando aqui.


Código de exemplo no GitHub

Os códigos utilizados como exemplo neste post estão todos no meu GitHub. Acesse clicando na imagem abaixo:

 Código de exemplo no GitHub


Duvidas? Criticas? Sugestões? Mande uma mensagem! Abraços.

segunda-feira, 6 de fevereiro de 2017

A primeira palestra a gente nunca esquece


Minha primeira palestra veio de brinde com a Coordenação da Trilha Mobile do The Developers Conference Porto Alegre 2016. Foi meio inesperado, mas no fim das contas foi muito bom. Eu e meu amigo Marcio Brufatto - que também coordenou comigo a Trilha Mobile - tivemos que substituir um palestrante que não pode ir ao evento. Afinal, imprevistos sempre acontecem e temos que estar preparados para lidar da melhor forma possível. E então decidimos nós mesmos dar esta palestra!

Deu um friozinho na barriga, tive pouco tempo para planejar e colocar tudo em pratica, mas no fim ocorreu tudo bem. E acho que foi até bom, se não estaria até hoje adiando a primeira palestra! 😂

A Trilha Mobile do TDC POA 2016 foi um sucesso: esgotou super rápido e tivemos excelentes palestras. E, se você quiser, pode conferir todas elas no site do TDC clicando aqui.
Dicas?
Como planejei tudo? Como montei os slides? Como escolhi os tópicos da palestra? Não foi tão dificil assim. Separei alguns topicos com dicas abaixo. E sinta-se a vontade para entrar em contato comigo caso você tenha alguma duvida ou queira alguma ajuda no assunto, estou sempre disposta a ajudar e compartilhar o que sei! ;)
Planejamento
Objetivo: Antes de tudo sempre temos que definir um objetivo, ou um produto, de qualquer forma, é muito mais fácil definir o "como" depois que já temos o nosso "o que". Ex: Minha palestra era sobre Ionic 2, e eu queria falar sobre o que mudou do Ionic 1 para a versão 2. Esse era o meu "o que". Para chegar no "como" precisei colocar no papel tudo o que veio a cabeça sobre o assunto, e então selecionar o que julguei relevante para o momento.

Pesquisa: A pesquisa também é muito importante. Como o Ionic 2 ainda estava em Beta, pesquisei muito sobre o assunto: artigos, cursos online, conteúdos de palestras, posts, etc.
Criação dos Slides
Na hora de criar os slides eu parti do principio de que as pessoas que iriam assisti-la talvez não soubessem nada sobre o assunto. E isso é importante, pois sempre terão pessoas que estão começando e que tem vergonha de falar quando não conhecem determinado assunto. Por isso é sempre valido explicar e/ou recapitular para o que serve do que perguntar à plateia se todos já estão à par do assunto.

Consegui organizar todas as informações de forma prática com a seguinte estrutura:

  • Titulo da palestra
  • Contatos do palestrante (sem muito jaba)
  • Explicação sobre o que é
  • Conteúdo principal da palestra (no caso, as mudanças do Ionic 1 para o 2)
  • Dicas de instalação e utilização
  • Demonstração do código

Pude notar que o pessoal se interessou muito pelas dicas (de plugins, funcionalidades novas, cursos, etc.) e pela demonstração código, onde realmente surgiram as duvidas.
Divulgação do Código e Slides
Facilite a vida de todos e já adicione nos seus slides o link do GitHub com os códigos de exemplo e o link dos slides no slideshare. Com certeza muito mais pessoas vão conseguir acessar este conteúdo.

Falando nisso...

Segue abaixo também os slides da minha palestra sobre Ionic 2 e o link do GitHub com o código de exemplo:




Foi tudo muito mais simples do que imaginei. O mais importante de tudo é ter humildade e sempre ser sincero sobre tudo. Todos que estão participando de eventos de TI estão ali para aprender e compartilhar conhecimento, e não é diferente com os palestrantes. Sempre há o que aprender, o mais importante de tudo é dar o primeiro passo.

Que a força esteja com vocês! Abraços.



sexta-feira, 27 de janeiro de 2017

Como as Metodologias Ágeis nos ajudaram no planejamento do nosso casamento

O que venho compartilhar aqui hoje é como usei nosso conhecimento (meu e de meu - agora - marido) em metodologias ágeis para planejar, organizar e executar o nosso sonho. Com os passos certos conseguimos fazer tudo o que queríamos e muito mais.

Objetivo
Nossa Visão de Negocio

O objetivo é fundamental, primeiro precisa-se decidir onde se quer chegar para só então definir o como. E nós sabíamos bem o que queríamos. Uma coisa apenas:
  1. Casar sem dívidas pós casamento.
Levantamento de Requisitos
Criação e priorização do nosso Product Backlog.

Do que precisaríamos para fazer um casamento? Quanto tempo levaríamos para juntar toda a grana necessária? Como saber o que é mais importante?

No inicio tudo parece muito difícil e complicado, mas não é. A primeira coisa que fizemos foi botar no papel tudo o que nos veio a cabeça - tudo o que achávamos que um casamento precisa ter. Saiu de tudo: local, som, fotos, bolo, decoração, tequileiros, e até flores azuis (hahaha). Depois organizamos estas informações por grau de importância, ex: não poderíamos fazer um casamento sem local, mas sem flores azuis rola tranquilamente.

Orçamento 
Passo Econômico, ou seja, precisávamos ter um valor base de tudo que imaginamos no nosso Product Backlog.

Depois de já ter todos os requisitos prontos, começamos a fazer os orçamentos. Foram milhares de ligações, muitas horas perdidas e alguns desentendimentos com fornecedores mal educados.

E foi aí que descobrimos a regra número 1 dos orçamentos: nunca diga que se trata de um casamento! Há fornecedores que usam, inclusive, duas tabelas de valores, com preços mais caros para casamento. Diga que é um aniversário. (hahaha)

Planejamento da Release (com as Sprints)

Agora já sabíamos quanto custava o casamento certo? O próximo passo foi planejar como faríamos este pagamento.

Fizemos o seguinte calculo:
(valor total do casamento) ➗ (valor que conseguíamos pagar por mês) = (numero de meses necessários)
Depois de fazer esta conta já sabíamos quanto tempo levaríamos para pagar tudo, e então marcamos a data do casamento para um ano á frente, e parcelamos todos os gastos durante este ano. Também criamos alguns marcos dos serviços que precisávamos fechar primeiro ao longo de um período (Release).

E o melhor de tudo: quando chegou o casamento já estava tudo quitado!

Escolha dos fornecedores

O que aprendi que deve-se levar em conta:
  1. Qualidade - Você tem que conhecer o produto antes de qualquer coisa: se for comida ou bebida peça uma degustação, se for produto peça para ver o portfólio, se for serviço peça para ver videos e/ou fotos. O que não pode fazer é comprar sem saber o que se está comprando. 
  2. Indicações e referencias - Sempre busque referencias de clientes anteriores. Páginas do Facebook são ótimas para pesquisar.
  3. Preço justo - Importante: preço justo não é necessariamente o preço mais barato. E sim o preço adequado para o nível da qualidade.
  4. Reunião presencial - Para tirar todas as duvidas, conhecer o produto e o fornecedor.
  5. Fazer contrato - Tem que ter contrato. E quando digo contrato é contrato de papel, e não de boca à boca. É ele quem garante os seus direitos, quem determina o que você está comprando e o quanto será pago pelo mesmo. 
No Manifesto Ágil nós temos o seguinte valor: Colaboração com o Cliente mais que Negociação de Contratos. Nós sabemos que colaborar com o cliente é extremamente necessário, mas a negociação de contratos aqui tem um peso maior.

Gerenciamento do tempo

O nosso planejamento nos rendeu uma lista de tarefas que parecia infinita, e como lembrar de tudo? Foi então que fizemos o nosso quadro kanban, divido em três colunas:
  1. ToDo: O que tinha para ser feito, organizado por ordem de prioridade (no topo do quadro os mais importantes)
  2. Doing: O que está sendo feito
  3. Done: Tudo o que já está concluído. 
Assim foi o andamento das nossas Sprints. Não colocamos WIP nem medimos Cycle ou Lead Time, mas somente a iniciativa de ter uma Gestão Visual nos facilitou muito na organização e gestão das tarefas.

Uma foto publicada por Tatiane Aguirres Nogueira 🎀 (@tatianeaguirres) em

Desta forma não esquecemos de nada: fizemos todos os pagamentos em dia, fomos em todas as reuniões, concluímos todas as tarefas no prazo. Foi praticamente um milagre! (hehehe)

Conclusão

Planejar não é nem um pouco difícil, não mesmo. O problema mesmo está na execução do negócio. E no fim das contas todos os problemas sempre são relacionados à pessoas (comportamento). Lidar com pessoas nunca é uma tarefa fácil, em qualquer cenário, o que precisamos mesmo é sempre manter a calma e tentar resolver tudo da melhor forma possível, temos que ser profissionais nestas horas. Afinal, ninguém gosta de ser mal-tratado não é mesmo?

Vale referenciar que os 5 (cinco) desafios de uma equipe (The Five Dysfunctions of a Team) funciona muito bem também entre a relação cliente-fornecedor.

Um feedback negativo: Todas as tarefas que delegamos à terceiros deram errado, e já entendemos o porque: as pessoas não tem a nossa pressa e não dão o mesmo grau de importância que nós damos a algumas coisas, e acabam postergando suas tarefas, aquele famoso: ahhh, amanhã eu faço, e quando chega na hora não dá tempo. Dica: Não seja essa pessoa. Seja um bom profissional, é disso que o mundo está precisando. Uma solução? Iremos continuar delegando tarefas sim, mas com um acompanhamento maior, afinal, conversa é sempre a solução pra tudo.

Nosso "Projeto Casamento" deu muito certo, apesar de ter dado muito trabalho, o resultado foi maravilhoso! Atingimos nosso objetivo (casamos sem dividas) e conseguimos até fazer a viagem de lua de mel dos nossos sonhos. 

Espero que este post lhe inspire a usar a agilidade à seu favor como nós fizemos! Abraços.


quarta-feira, 25 de janeiro de 2017

Voltando a realidade...

Objetivamente falando, peço desculpas pela ausência!

2016 foi um ano extremamente corrido e louco: minha vida pessoal roubou todo meu tempo e acabei não me dedicando à tudo que realmente gosto de fazer, como programar e blogar...

Mas 2016 também foi um dos anos mais felizes da minha vida, aconteceram muitas coisas incríveis!

Recebi um convite mega especial em Janeiro de 2016: meu amigo Márcio Bruffato convidou-me para participar da coordenação do GUMobile-RS! Fizemos alguns eventos muito legais juntos durante o ano, e, se você quiser, também pode acessar o conteúdo destes eventos clicando aqui.

Também recebi outro convite muito especial para participar da Coordenação da Trilha Mobile no The Developers Conference 2016 edição Porto Alegre. Participar da Coordenação do #TheDevConf foi inesquecível. Conheci muita gente legal, fiz amigos e compartilhei e aprendi muita coisa. A Trilha Mobile foi uma das primeiras e esgotar e foi sucesso total! E todo o conteúdo das palestras você também pode acessar clicando aqui.

E, por ultimo, mas não menos importante, o real motivo por 2016 ter sido um ano em que não tive tempo para nada: no dia 26 de Novembro eu me casei, de véu, grinalda e tudo o mais como manda o figurino, incluindo muita metodologia agil no planejamento! hehehe

Agora, para 2017, já estou voltando a realidade, mas com muita saudade da viagem de lua de mel, estou me organizando melhor e conseguindo mais tempo para colocar tudo em pratica!

Feliz Ano Novo à todos!
Bora aprender mais e compartilhar conhecimento! \o/


domingo, 31 de janeiro de 2016

Customizando Ionic 1 com Sass


O Ionic possui diversas cores para dar vida ao nosso app, e elas podem ser utilizadas em quase tudo, como em ícones, botões, headers, footers, menus, etc, através de classes no html.

Ao criar um aplicativo do tipo “tabs” ou “sidemenu”, ele já vem com a cor padrão “stable”, que é um cinza bem clarinho. E se você quiser trocar ela por outra cor padrão do Ionic é muito fácil, é só substituir a classe “stable” no html pela de outra cor. Seguem as cores disponíveis do Ionic:


E se nenhuma destas cores for a ideal para o seu projeto a solução é bem simples: Usar Sass. Esta é, com certeza, a maneira mais fácil e rápida de estilizar o app com a cor de sua preferência.

E é bem simples mesmo: crie o aplicativo (mais informações sobre como criar um app com Ionic no post anterior clicando aqui), use o prompt de comando para navegar até a pasta do projeto e utilize o seguinte comando para configurar o Sass:

$ ionic setup sass

Agora é só abrir o aplicativo no editor de texto de sua preferência (eu uso o Sublime Text) e abrir o código “ionic.app.scss” da pasta “scss” (veja a imagem abaixo).



Agora, para alterar a cor você precisa copiar a linha correspondente a cor que está sendo utilizada no seu app (no caso da minha demonstração é a cor padrão “stable”) e colar ela abaixo do “*/”, alterando a cor do código. Eu utilizei a cor #FF69B4 no exemplo, que é um rosa pink.


Caso você tenha duvidas quanto ao código das cores, você pode dar uma olhada nesta página, que possui uma tabela de cores bem completa.
  
O resultado será este:



Espero que este post tenha lhe ajudado, bons estudos e até a próxima! ;)


sexta-feira, 20 de novembro de 2015

Criando um Aplicativo com Ionic 1


  • O que é?

 O Ionic é um framework front-end open source que utiliza o poder do HTML5 e do AngularJS para desenvolvimento de aplicativos híbridos para dispositivos móveis.

  • Por que utilizar Ionic?


  1. Desenvolvimento rápido e fácil.
  2. Funciona na maioria dos dispositivos móveis atuais.
  3. Design simples, objetivo e funcional.
  4. Possui componentes populares, como o Cordova e AngularJS.
  5. O CSS é gerado a partir do SASS e foi projetado para ser sobrescrito, sendo fácil para personalizar.
  6. Não possui dependência do jQuery.
  7. Pode-se utilizar as ferramentas do desenvolvedor do navegador, como o debug.


  • Pré condições:

  1. HTML, CSS e JavaScript.
  2. AngularJS.


  • Instalando o Ionic


Primeiramente, você precisa ter o NodeJS instalado no seu computador. Clique aqui para acessar o site para download e siga os passos padrões para instalação conforme seu sistema operacional.

Após instalar o NodeJS, utilize o prompt de comando para instalar o Cordova e o Ionic.

$ npm install -g cordova ionic


  • Criando um aplicativo


O Ionic já possui modelos prontos de aplicativos para você utilizar, como, por exemplo, com menu lateral ou com abas. Ou ainda, se você preferir, também pode optar por começar com um aplicativo em branco. Exemplos:


Vou escolher o modelo com abas para exemplificar:

Digite no seu prompt de comando: $ ionic start myApp tabs

Sendo "myApp" o nome do aplicativo e "tabs" o modelo escolhido, poderia ser "blank" ou "sidemenu" também.

Pronto, seu aplicativo já está criado. Agora você pode acessar os scripts na pasta "myApp'.


  • Visualizando o Aplicativo no Navegador

Você pode utilizar seu navegador para acompanhar as modificações enquanto desenvolve seu aplicativo. Utilize novamente o prompt de comando:

$ cd myApp

$ ionic serve --lab


O resultado da visualização será esta:


  • Componentes do Ionic (CSS Components)

O Ionic possui diversos componentes customizáveis para você utilizar, como botões, menus, listas, ícones, formulários, etc. E o mais bacana é que o Ionic te fornece tudo pronto, é só copiar o código e colar no seu HTML. Clique aqui para acessar estes componentes.




  • Conclusão


Neste post aprendemos o que é Ionic Framework, como instalá-lo e como criar um aplicativo. Em breve mais posts sobre o Ionic.

Até o próximo post!



domingo, 25 de outubro de 2015

AngularJS - Por onde começar?


  • O que é AngularJS?


AngularJS é um framework que liga seu HTML (views) com objetos JavaScript (models). Esta poderosa ferramenta para desenvolvimento WEB é mantida pelo Google, e seu objetivo é facilitar o desenvolvimento e fazer com que a programação Front-End seja mais robusta.

  • Por onde começar?


O vídeo a seguir, feito pelo meu colega na NTConsult, Jean Robert Alves, é uma excelente introdução para quem ainda não conhece AngularJS. Ele explica de forma bem clara por onde começar e descomplica o que parece um bicho de sete cabeças – mas não é! Hehehe


  • Onde praticar?


A Code School possui um curso online gratuito (em inglês), ele possui 6 níveis e ensina desde o básico para quem está realmente começando.  Para acessar o curso clique aqui.


Bons estudos!

sábado, 17 de outubro de 2015

Onde aprender gratuitamente sobre CSS, HTML e JavaScript



Para quem, assim como eu, está iniciando na área de Web, seguem algumas dicas de sites com conteúdos teóricos e práticos, que ensinam desde o básico sobre HTML, CSS e JavaScript.


É um guia criado pela comunidade brasileira de desenvolvimento web com conteúdo teórico básico de qualidade.


A Caelum disponibiliza gratuitamente a apostila do curso de HTML, CSS e JavaScript deles. Com esta apostila você aprende desde os conceitos básicos de HTML, CSS e JavaScript até desenvolver um site completo para um e-commerce de moda chamado Mirror Fashion. Ela também ensina boas práticas como performance e design responsivo, e frameworks modernos como jQuery e Bootstrap.

Veja todas as apostilas da Caelum abertas ao publico clicando aqui.


A Codecademy possui cursos online gratuitos das linguagens mais populares, como HTML e CSS, JavaScript, jQuery,PHP, Phyton e Ruby. O mais bacana é que, além destes cursos básicos, também há cursos mais avançados que te ensinam como fazer websites e aplicações.


Todos as formas de aprendizado que citei acima são gratuitas, ou seja, não há mais desculpas; O mais importante para quem está iniciando na área de web é ter muita vontade de aprender e não parar de estudar nunca: estar atualizado é fundamental.

Divulguem estes canais o máximo possível para que todos possam aprender com qualidade.