it-management


Olá, Perfil !!!

Os princípios KISS, YAGNI e DRY são fundamentais para ajudar os desenvolvedores a criar código limpo, eficiente e fácil de manter.

O princípio **KISS** sugere que a solução mais simples é frequentemente a melhor. Isso significa que os desenvolvedores devem buscar manter as coisas simples e diretas sempre que possível, evitando a complexidade desnecessária que pode dificultar a manutenção e o entendimento do código.

O princípio **YAGNI**, por sua vez, incentiva a criação apenas das funcionalidades necessárias no momento presente. Isso evita a criação de recursos que podem nunca ser utilizados, economizando tempo e recursos valiosos.

Já o princípio **DRY** sugere que as informações no código devem ser armazenadas em um único local e que cada parte do código deve ter uma única fonte de verdade. Isso evita a duplicação de código e a inconsistência de informações, facilitando a manutenção e evolução do código ao longo do tempo.

## KISS - Keep it simple, stupid

O princípio KISS ("Keep It Simple, Stupid", ou "Mantenha Simples, Estúpido") é um princípio de design que prega que a solução mais simples costuma ser a melhor. Ele pode ser aplicado em diversas áreas, desde a criação de produtos até a programação de computadores e gestão de projetos.

O princípio KISS parte da ideia de que a simplicidade é a chave para soluções eficazes e eficientes. Soluções complexas são difíceis de entender, implementar e manter, enquanto soluções simples são mais fáceis de entender e utilizar.

No entanto, é importante ressaltar que simplicidade não significa simplismo ou superficialidade. Uma solução simples pode ser elegante, robusta e sofisticada, desde que não seja acrescida de elementos desnecessários que possam prejudicar sua eficácia e eficiência.

Em síntese, o princípio KISS prega que devemos manter as soluções o mais simples possível, eliminando tudo que for desnecessário e mantendo apenas as funcionalidades essenciais. Dessa forma, é possível criar soluções eficazes, eficientes e de qualidade.

```javascript
// Exemplo não KISS
function calculateAverage(numberList) {
  let total = 0
  for (let i = 0; i < numberList.length; i++) {
    total += numberList[i]
  }
  return total / numberList.length
}

// Exemplo KISS
function calculateAverage(numberList) {
  const sum = numberList.reduce((total, num) => total + num)
  return sum / numberList.length
}
```

A função `calculateAverage` foi simplificada usando o método `reduce()` em vez de usar um `for` para somar os elementos da lista. Isso torna o código mais simples e fácil de entender.

## YAGNI - You Aren't Gonna Need It

O princípio YAGNI ("Você Não Vai Precisar Disso") é uma filosofia que preconiza que não devemos adicionar funcionalidades que não são estritamente necessárias no momento presente. O objetivo é evitar a complexidade desnecessária e o desperdício de tempo e recursos na criação de recursos que podem nunca ser utilizados.

Seguindo o princípio YAGNI, os desenvolvedores devem se concentrar nas funcionalidades essenciais e evitar adicionar recursos adicionais que podem ser úteis no futuro, mas que não são necessários no momento. Esses recursos extras podem incluir código redundante, bibliotecas desnecessárias ou recursos de interface de usuário que não são críticos para a funcionalidade principal.

```javascript
// Exemplo não YAGNI
function calculateAverage(numbersList) {
  if (numbersList.length > 0) {
    let total = 0
    for (let i = 0; i < numbersList.length; i++) {
      total += numbersList[i]
    }
    return total / numbersList.length
  } else {
    return 0
  }
}

// Exemplo YAGNI
function calculateAverage(numbersList) {
  if (numbersList.length > 0) {
    const sum = numbersList.reduce((total, num) => total + num)
    return sum / numbersList.length
  }
  return 0
}
```

A função `calculateAverage` foi simplificada, removendo o código desnecessário que tratava o caso em que a lista de números estivesse vazia. Isso reduz a complexidade e torna o código mais fácil de ler.

## DRY - Don't repeat yourself

O princípio DRY ("Don't Repeat Yourself", ou "Não Se Repita") é um princípio que sugere que as informações no código devem ser armazenadas em um único local e que cada parte do código deve ter uma única fonte de verdade. O objetivo do princípio DRY é reduzir a duplicação de código e evitar a inconsistência de informações, o que pode levar a problemas de manutenção e a bugs no software.

Seguindo o princípio, os desenvolvedores devem evitar copiar e colar código sem modificá-lo. Em vez disso, eles devem criar funções, classes ou bibliotecas reutilizáveis em todo o código. Isso torna o código mais fácil de manter e atualizar, já que as mudanças precisam ser feitas em apenas um lugar. Adicionalmente, ao evitar a duplicação de código, o tamanho do código é reduzido, tornando-o mais fácil de ler e entender.

```javascript
// Exemplo não DRY
function sum(a, b) {
  console.log(`A soma de ${a} e ${b} é ${a + b}`)
}

function subtract(a, b) {
  console.log(`A subtração de ${a} e ${b} é ${a - b}`)
}

function multiply(a, b) {
  console.log(`A multiplicação de ${a} e ${b} é ${a * b}`)
}

function divide(a, b) {
  console.log(`A divisão de ${a} e ${b} é ${a / b}`)
}

// Exemplo DRY
function operate(a, b, operator) {
  let result
  switch (operator) {
    case '+':
      result = sum(a, b)
      break
    case '-':
      result = subtract(a, b)
      break
    case '*':
      result = multiply(a, b)
      break
    case '/':
      result = divide(a, b)
      break
    default:
      console.log('Operador inválido')
      return
  }
  console.log(`O resultado da operação ${operator} entre ${a} e ${b} é ${result}`)
}
```

A função `operate` foi criada para evitar a duplicação de código que estava presente nas funções de `sum`, `subtract`, `multiply` e `divide`. Ao passar um operador para a função `operate`, é possível realizar qualquer uma dessas operações.

## Conclusão

Esses princípios são fundamentais para ajudar os desenvolvedores a escrever código mais legível, organizado e compreensível, o que resulta em software mais eficiente e fácil de manter ao longo do tempo. Quando aplicados corretamente, esses princípios podem melhorar significativamente a qualidade do código e reduzir a incidência de bugs e problemas de manutenção. Além disso, um código claro e limpo também facilita a colaboração entre os membros da equipe e pode tornar a introdução de novos desenvolvedores ao projeto muito mais fácil.

## Referências

- [SOLID, KISS, DRY, YAGNI: Desvendando esses princípios de código](https://awari.com.br/solid-kiss-dry-yagni/?utm_source=blog)
- [Princípios YAGNI, KISS e DRY](https://www.linkedin.com/pulse/princ%C3%ADpios-yagni-kiss-e-dry-emerson-romano/?originalSubdomain=pt)
- [Princípios Dry, KISS e YAGNI](https://www.linkedin.com/pulse/princ%C3%ADpios-dry-kiss-e-yagni-jeftar-mascarenhas/?originalSubdomain=pt)
- [O que são os princípios DRY, KISS e YAGNI?](https://pt.stackoverflow.com/questions/23052/o-que-s%C3%A3o-os-princ%C3%ADpios-dry-kiss-e-yagni)
- [KISS, YAGNI, DRY – three principles that every developer should know about](https://www.boldare.com/blog/kiss-yagni-dry-principles/)
- [What are YAGNI, DRY and KISS principles in software development?](https://www.educative.io/answers/what-are-yagni-dry-and-kiss-principles-in-software-development)
- [DRY, KISS, YAGNI | Code/Drops #27 - video](https://www.youtube.com/watch?v=5yJ_cAUrpQc)
- [Software Design Principles (Basics) | DRY, YAGNI, KISS, etc](https://workat.tech/machine-coding/tutorial/software-design-principles-dry-yagni-eytrxfhz1fla)
- [O que são os princípios DRY, KISS e YAGNI](https://blog.caioaugusto.dev/blog/principios-dry-kiss-yagni)


Princípios KISS, YAGNI e DRY


Olá, Perfil !!!

Vamos explorar os princípios SOLID e como eles podem ser aplicados em JavaScript para criar código mais limpo, modular e fácil de manter.

Os princípios SOLID são diretrizes de programação que podem ser utilizadas para desenvolver sistemas mais robustos e flexíveis. Neste artigo, apresentaremos exemplos práticos de como aplicar esses princípios no contexto do JavaScript.

Ao seguir esses princípios, você poderá criar um código mais escalável e fácil de manter. Se você busca desenvolver código de alta qualidade em JavaScript, este artigo é uma leitura valiosa para você.

## Princípios

- **Princípio da Responsabilidade Única (SRP):** Uma classe ou função deve ter apenas uma responsabilidade para manter o código mais flexível e fácil de manter.
- **Princípio Aberto/Fechado (OCP):** Uma classe deve estar aberta para extensão, mas fechada para modificação, tornando o código mais modular e menos propenso a erros.
- **Princípio da Substituição de Liskov (LSP):** Uma classe derivada deve poder ser usada no lugar de sua classe base sem afetar a correção do programa, garantindo consistência e reutilização do código.
- **Princípio da Segregação de Interface (ISP):** Um cliente não deve ser forçado a depender de métodos que não usa, mantendo o código mais modular e fácil de manter.
- **Princípio da Inversão de Dependência (DIP):** Módulos de alto nível não devem depender de módulos de baixo nível, em vez disso, ambos devem depender de abstrações, o que torna o código mais flexível e fácil de testar.

### Responsabilidade única (SRP)

Ao aplicar o princípio da Responsabilidade Única (SRP) em JavaScript, podemos criar um código mais modular, coeso e fácil de manter. Ao seguir esse princípio, garantimos que cada parte do código tenha uma única responsabilidade bem definida, o que aumenta a legibilidade e a qualidade do código. Isso torna a manutenção do código mais simples e reduz a possibilidade de efeitos colaterais indesejados. O SRP ajuda a evitar o acoplamento excessivo entre diferentes partes do sistema, facilitando o reuso e a atualização do código. Em resumo, a aplicação do SRP ajuda a criar um código mais organizado e eficiente.

```javascript
class TasksList {
  constructor() {
    this.tasks = []
  }

  addTask(task) {
    this.tasks.push(task)
  }

  removeTask(task) {
    const index = this.tasks.indexOf(task)
    if (index !== -1) {
      this.tasks.splice(index, 1)
    }
  }

  completeTask(task) {
    task.concluida = true
  }
}
```

No exemplo, a classe `TasksList` possui apenas uma responsabilidade, que é gerenciar as tarefas adicionadas a uma lista. A classe contém métodos específicos para adicionar, remover e marcar uma tarefa como concluída, garantindo que cada método tenha uma única responsabilidade bem definida. Essa abordagem torna a classe mais fácil de entender e manter, reduzindo a complexidade e tornando-a mais modular. Ao seguir o princípio da Responsabilidade Única, tornamos nosso código mais coeso e aumentamos a sua qualidade, evitando que a classe se torne excessivamente grande e difícil de entender.

### Aberto/Fechado (OCP)

Ao aplicar o princípio Aberto/Fechado (OCP) em JavaScript, podemos criar um código mais reutilizável e flexível. Ao seguir esse princípio, permitimos que as classes sejam estendidas sem precisar serem modificadas, tornando a manutenção do código mais fácil. Isso ajuda a garantir a qualidade e escalabilidade do código. A extensão de classes também ajuda a evitar a duplicação de código e promove a reutilização de código existente, tornando o desenvolvimento mais eficiente. Em resumo, ao aplicar o OCP, tornamos nosso código mais modular, extensível e fácil de manter, o que resulta em um código mais robusto e de alta qualidade.

```javascript
class Animal {
  constructor(name) {
    this.name = name
  }

  makeSound() {
    console.log(`${this.name} faz um som.`)
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name)
  }

  makeSound() {
    console.log(`${this.name} late.`)
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name)
  }

  makeSound() {
    console.log(`${this.name} mia.`)
  }
}

class Cow extends Animal {
  constructor(name) {
    super(name)
  }
}

class AnimalSoundMaker {
  constructor(animals) {
    this.animals = animals
  }

  makeSounds() {
    this.animals.forEach((animal) => animal.makeSound())
  }
}
```

A classe Animal é fechada para modificação, mas aberta para extensão. As classes `Dog`, `Cat` e `Cow` estendem a classe `Animal` e adicionam seus próprios sons. A classe `AnimalSoundMaker` recebe uma lista de animais e chama o método `makeSound` de cada animal. Esta classe não precisa ser modificada se um novo animal for adicionado, desde que o animal implemente o método `makeSound`.

### Substituição de Liskov (LSP)

Suponha que você tenha uma classe `Car` que define um carro genérico e uma subclasse `ElectricCar` que herda da classe `Car`. Ambas as classes têm um método `drive()` que controla a movimentação do carro correspondente.

De acordo com o princípio de substituição de Liskov, a subclasse `ElectricCar` deve ser substituível pela classe `Car` sem afetar a lógica. Isso significa que qualquer método que espera uma instância da classe `Car` deve poder trabalhar corretamente com uma instância da subclasse `ElectricCar`.

No entanto, se a implementação do método `drive()` na subclasse `ElectricCar` for diferente da implementação na classe `Car`, isso pode violar o princípio de substituição de Liskov.

A classe `Car` tenha a seguinte implementação do método `drive()`:

```javascript
class Car {
  constructor() {
    this.speed = 0
  }

  drive(speed) {
    this.speed = speed
    console.log(`Car is driving at ${this.speed} km/h`)
  }
}
```

E a subclasse `ElectricCar` tenha a seguinte implementação do método `drive()`:

```javascript
class ElectricCar extends Car {
  constructor() {
    super()
  }

  drive(speed) {
    if (speed > 100) {
      console.log('Electric car cannot drive that fast')
    } else {
      super.drive(speed)
    }
  }
}
```

Nesse caso, se um método espera uma instância da classe `Car` e recebe uma instância da subclasse `ElectricCar`, o controle de movimentação do carro pode ser incorreto, violando o princípio de substituição de Liskov.

Para corrigir isso, a implementação do método `drive()` na subclasse `ElectricCar` deve ser consistente com a implementação na classe `Car`. Por exemplo, a implementação na subclasse `ElectricCar` poderia ser a seguinte:

```javascript
class ElectricCar extends Car {
  constructor() {
    super()
  }

  drive(speed) {
    super.drive(Math.min(speed, 100))
  }
}
```

Nesse caso, a subclasse `ElectricCar` ainda controla a movimentação do carro, mas de uma forma consistente com a implementação na classe `Car`. Se a velocidade solicitada for maior do que 100 km/h, a subclasse `ElectricCar` ajusta automaticamente a velocidade para 100 km/h, em vez de emitir uma mensagem de erro.

### Segregação de interface (ISP)

Se você estiver trabalhando em um e-commerce que envolve um módulo de carrinho de compras, um módulo de processamento de pagamento e um módulo de gerenciamento de estoque. Em vez de cada módulo depender diretamente dos outros, você pode definir interfaces que descrevem as operações que cada módulo oferece e que devem ser chamadas pelos outros módulos.

```javascript
interface ShoppingCart {
  addItem(item: Item): void;
  removeItem(item: Item): void;
  getItems(): Item[];
  clear(): void;
}
```

A interface para o módulo de processamento de pagamento pode ser assim:

```javascript
interface PaymentProcessor {
  authorizePayment(payment: Payment): boolean;
  capturePayment(payment: Payment): boolean;
  voidPayment(payment: Payment): boolean;
}
```

E a interface para o módulo de gerenciamento de estoque pode ser assim:

```javascript
interface InventoryManager {
  getStock(item: Item): number;
  reserveStock(item: Item, quantity: number): boolean;
  releaseStock(item: Item, quantity: number): boolean;
}
```

Dessa forma, cada módulo só precisa conhecer as interfaces que ele depende e pode se comunicar com outros módulos por meio dessas interfaces. Isso permite que cada módulo seja desenvolvido e testado de forma independente e facilita a manutenção e evolução do sistema como um todo.

### Inversão de Dependência (DIP)

Vamos supor que você está trabalhando em um sistema de vendas online que tem um módulo de pagamento que utiliza um serviço externo para processar os pagamentos. Nesse caso, você pode criar uma classe `PaymentService` que depende diretamente do serviço externo:

```javascript
class PaymentService {
  constructor() {
    this.paymentGateway = new PaymentGateway()
  }

  processPayment(order) {
    // chama o serviço externo para processar o pagamento
    this.paymentGateway.processPayment(order.total, order.customerInfo)
  }
}
```

Essa implementação viola o princípio de inversão de dependência (DIP) porque a classe `PaymentService` depende diretamente de uma implementação concreta do serviço externo, o que torna o código inflexível e difícil de manter.

Para corrigir isso, você pode inverter a dependência e criar uma interface `PaymentGatewayInterface` que a classe `PaymentService` irá depender. Essa interface pode conter apenas os métodos que a classe `PaymentService` utiliza:

```javascript
class PaymentService {
  constructor(paymentGateway) {
    this.paymentGateway = paymentGateway
  }

  processPayment(order) {
    // chama o método `processPayment` da interface `PaymentGatewayInterface`
    this.paymentGateway.processPayment(order.total, order.customerInfo)
  }
}
```

Nesse caso, a classe `PaymentService` agora depende de uma interface `PaymentGatewayInterface` ao invés de depender diretamente da implementação concreta do serviço externo. Isso permite que você mude o serviço externo no futuro sem ter que alterar o código da classe `PaymentService`. Para mudar o serviço externo, você só precisa criar uma nova classe que implementa a interface `PaymentGatewayInterface`:

```javascript
class PaypalGateway implements PaymentGatewayInterface {
  processPayment(amount, customerInfo) {
    // chama a API do Paypal para processar o pagamento
    // ...
  }
}

const paypalGateway = new PaypalGateway()
const paymentService = new PaymentService(paypalGateway)
```

Dessa forma, você pode alternar entre diferentes serviços externos de pagamento sem ter que alterar o código da classe `PaymentService`. Isso é uma aplicação do princípio de inversão de dependência, que prega que as dependências devem ser abstratas e depender de interfaces ao invés de depender de implementações específicas.

## Conclusão

Seguir os **princípios SOLID** é fundamental para criar um código de alta qualidade e fácil de manter, que pode ser estendido e modificado com facilidade. Ao aplicar esses princípios em sua programação, você pode melhorar a eficiência e a escalabilidade do seu código, o que consequentemente leva a um aumento na qualidade e produtividade do seu trabalho. Além disso, seguir os princípios pode ajudá-lo a evitar a duplicação de código, a reduzir a complexidade do seu código e a torná-lo mais modular, o que ajuda a facilitar a manutenção do código a longo prazo. Em resumo, ao aplicar os **princípios SOLID** em sua programação, você está investindo na qualidade do seu código e no sucesso do seu projeto.

## Referências

- [SOLID Principles: The Software Developer's Framework to Robust & Maintainable Code [with Examples]](https://khalilstemmler.com/articles/solid-principles/solid-typescript/)
- [S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript](https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa)
- [Understanding SOLID Principles in JavaScript](https://hackernoon.com/understanding-solid-principles-in-javascript-w1cx3yrv)
- [Understanding SOLID Principles in JavaScript - Video](https://www.youtube.com/watch?app=desktop&v=m2GCb-x8e5s)
- [5 SOLID principles with JavaScript. How to make your code SOLID](https://dev.to/denisveleaev/5-solid-principles-with-javascript-how-to-make-your-code-solid-1kl5)
- [SOLID principles: Single responsibility in JavaScript frameworks](https://blog.logrocket.com/solid-principles-single-responsibility-in-javascript-frameworks/)
- [How to Implement the SOLID Principle in JavaScript?](https://javascript.plainenglish.io/solid-principle-in-javascript-part-1-4f67d8f9a31f)


Pincípios SOLID com Javascript


Domain Driven Design é uma filosofia de desenvolvimento lançada por Erick Evans. O DDD é composto por um conjunto de padrões para a construção de aplicações corporativas a partir do modelo de domínio.

Com DDD, estamos de olho nos modelos de um domínio com problema. A persistência, interfaces de usuário e outras coisas de mensagens pode vir mais tarde, é o domínio que precisa ser entendido, porque essa é a parte do sistema que está sendo construído que distingue negócios da sua empresa de seus concorrentes.

Quando digo modelo não se refere a um diagrama ou conjunto de diagramas. Os diagramas são úteis, mas eles não são o modelo, apenas diferentes visões do modelo. O modelo é o conjunto de conceitos selecionados para serem implementados em um software, representado no código e qualquer outro artefato de software utilizado para construir o sistema entregue. Em outras palavras, o código é o modelo. Editores de texto fornecem uma maneira de trabalhar com este modelo, embora modernas ferramentas forneçam a abundância de outras visualizações também (diagramas de classe UML e etc).

O DDD define quatro camadas principais, sendo elas:

- **User Interface:** Responsável por apresentar informações ao usuário e interpretar os comandos do usuário.
- **Application:** Esta camada coordena a atividade das aplicações. Ele não contém qualquer lógica de negócios. Não guarda o estado de objetos de negócios, mas ele pode armazenar o estado de um progresso das tarefas do aplicativo.
- **Domain:** Esta camada contém informações sobre o domínio do negócio. O estado de objetos de negócios é realizado aqui. Persistência dos objetos de negócios e, possivelmente, seu estado é delegado à camada de infra-estrutura.
- **Infrastructure:** Esta camada atua como uma biblioteca de suporte em todas as outras camadas. Fornece a comunicação entre as camadas, implementa persistência para objetos de negócios, contém bibliotecas de suporte para a camada de interface do usuário e etc.

## Conclusão

O DDD não é a solução para todos os problemas de todas as camadas de um sistema. Seu foco é na modelagem das entidades principais de negócio usando a linguagem adequada daquele domínio para facilitar a manutenção, extensão e entendimento.


Começando com Domain Driven Design


Behavior Driven Development (BDD) é uma técnica de desenvolvimento ágil de software que incentiva a colaboração entre desenvolvedores, QA e os participantes não técnicos ou de negócios em um projeto de software. Ele foi originalmente nomeado em 2003 por Dan North como uma resposta ao Test Driven Development (TDD), incluindo o teste de aceitação ou práticas de desenvolvimento de teste do cliente impulsionado como encontrados em programação extrema. Ela tem evoluído ao longo dos últimos anos.

De fato, um dos maiores benefícios do BDD é que une os interesses das empresas com requisitos técnicos, através da utilização de um vocabulário comum simplificado para descrever o comportamento do sistema que reduz o risco de comunicação entre os membros da equipe com diferentes formações.

Além de implementar uma linguagem comum, o BDD incluí:

- Um conjunto de ferramentas de software especializados;
- Um foco sobre as histórias de usuários, também conhecidos como cenários e situações, que delineiam claramente os comportamentos que contribuem com sucesso para os resultados do negócio.
- Uma mentalidade de fora para dentro que se aplica as técnicas em um nível maior de abstração: testando a intenção do sistema inteiro versus apenas o funcionamento de um único trecho de código.

A característica mais importante de BDD é que os métodos de teste em uma classe recebem nomes expressivos que descrevem claramente para o que os mesmos foram feitos.
Esta notação ajuda a manter em mente que há várias razões pelas quais o teste pode falhar, incluindo problemas no sistema, ou um erro no caso de teste em si.
Os casos de teste ou histórias de usuários próprios também seguem um formato de texto muito simples, que consiste em um título e várias frases que descrevem o que acontece em cada cenário incluído na história.

## Conclusão

O BDD tem um impacto significativo sobre a entrega do projeto, uma vez que incentiva as equipes de desenvolvimento para tornarem mais voltadas para o negócio e lidar mais facilmente com os seus colegas de trabalho ou parceiros externos.

Pode ser facilmente integrado dentro de equipes de Scrum. Como tal, BDD é um excelente método que pode ser usado para resolver problemas de comunicação em um projeto, e priorizar o atraso de modo que é mais em sintonia com os interesses comerciais do cliente.


Começando com Behavior Driven Development


Test Driven Development (TDD) é uma técnica de desenvolvimento de software que se baseia em um ciclo curto de repetições:

1. Ler e entender os requisitos para uma determinada funcionalidade.
2. Desenvolver um conjunto de testes que verificam o recurso. Todos os testes estão vermelhos, devido à ausência da funcionalidade.
3. Desenvolve a função até que todos os testes fiquem verdes.
4. Refatora o código.

Kent Beck, considerado o criador da técnica, declarou em 2003 que TDD encoraja o desenho de código simples e inspira confiança. Desenvolvimento guiado por testes é relacionado a conceitos de programação de Extreme Programming, iniciado em 1999, mas recentemente tem-se criado maior interesse pela mesma em função de seus próprios ideais. Através do TDD, programadores podem aplicar o conceito de melhorar e depurar código legado desenvolvido a partir de técnicas antigas.

TDD exige uma maneira diferente de pensar, de modo a fim de começar TDD você precisa esquecer a maneira como você desenvolveu código antes. Este processo é muito difícil. E é ainda mais difícil se você não sabe como escrever testes unitários.

Vantagens importantes:

- Melhor compreensão de um recurso que você implementou.
- Indicadores sólidos da funcionalidade.
- Código coberto com testes e menos chances de ser corrompido por correções ou novos recursos.

O custo destas vantagens é bastante elevado. Inconvenientes relacionados com a mudança para um novo modo de desenvolvimento e o tempo que você gasta para o desenvolvimento de cada novo recurso. O preço da qualidade.

## Conclusão

Testes são muitos importantes por motivos de qualidade e menos riscos para a sua aplicação. Mas não é um pensamento que irá dominar do dia para a noite. O caminho é bem árduo, mas é importante iniciar esse trajeto. O desenvolvedor ganha, o projeto ganha e o cliente com uma qualidade maior.


Começando com Test Driven Development


Se está familiariazado(a) com a metodologia ágil, já deve conhecer o Scrum. Scrum é um framework para desenvolver e manter produtos complexos. Criado em 1993, por Jeff Sutherland, o processo foi formalizado para a indústria mundial de software no primeiro artigo sobre Scrum, publicado na conferência OOPSLA 1995(hoje chamada SPLASH), por Ken Schwaber.

O nome Scrum é uma analogia a um estudo conduzido em 1986 por Takeuchi e Nonaka, publicado na Harvard Business Review. No estudo, compararam equipes de alto desempenho e multi funcionais com a formação "scrum" existente nas equipes de Rugby em que todo o time está junto em um objetivo. Se a formação for quebrada, o time todo perde. Se atingem o objetivo, a equipe toda é responsável pelo sucesso.

De 1995, para cá, o Scrum deixou de ser um método e passou a ser um framework. Pois, ele apenas indica o que deve ser feito e emprega vários processos ou técnicas.

## O time

### O Product Owner

O Product Owner é a pessoa que define os itens que compõem o Product Backlog e os prioriza nas Sprint Planning Meetings.

O Scrum Team olha para o Product Backlog priorizado, seleciona os itens mais prioritários e se compromete a entregá-los ao final de um Sprint (iteração). Estes itens transformam-se no Sprint Backlog.

A equipe se compromete a executar um conjunto de atividades no Sprint e o Product Owner se compromete a não trazer novos requisitos para a equipe durante o Sprint. Requisitos podem mudar (e mudanças são encorajadas), mas apenas fora do Sprint. Uma vez que a equipe comece a trabalhar em um Sprint, ela permanece concentrada no objetivo traçado para o Sprint e novos requisitos não são aceitos.

### O Scrum Team

O Scrum Team é a equipe de desenvolvimento. Nela, não existe necessariamente uma divisão funcional através de papéis tradicionais, tais como programador, designer, analista de testes ou arquiteto. Todos no projeto trabalham juntos para completar o conjunto de trabalho com o qual se comprometeram conjuntamente para um Sprint.

Um Scrum Team típico tem de 6 a 10 pessoas, embora haja relatos de projetos Scrum com equipes maiores. A principal abordagem para trabalhar com equipes grandes no Scrum é usando o conceito de "Scrum of Scrums". Cada Scrum Team trabalha normalmente, mas cada equipe também contribui com uma pessoa que deverá freqüentar o Scrum of Scrums Meeting para coordenar o trabalho de múltiplas equipes Scrum. Esses encontros são análogos aos Daily Scrums, mas não acontecem necessariamente todos os dias. Fazer essa reunião duas ou três vezes por semana tende a ser suficiente na maioria das organizações.

### O Scrum Master

O Scrum Master procura assegurar que a equipe respeite e siga os valores e as práticas do Scrum. Ele também protege a equipe assegurando que ela não se comprometa excessivamente com relação àquilo que é capaz de realizar durante um Sprint.

O Scrum Master atua como facilitador do Daily Scrum e torna-se responsável por remover quaisquer obstáculos que sejam levantados pela equipe durante essas reuniões.

O papel de Scrum Master é tipicamente exercido por um gerente de projeto ou um líder técnico, mas em princípio pode ser qualquer pessoa da equipe.

## Eventos

### Sprint

No Scrum, os projetos são divididos em ciclos (tipicamente mensais) chamados de Sprints. O Sprint representa um tempo definido dentro do qual um conjunto de atividades deve ser executado. Metodologias ágeis de desenvolvimento de software são iterativas, ou seja, o trabalho é dividido em iterações, que no Scrum são chamadas de Sprints e geralmente duram de 2 a 4 semanas.

### Sprint Planning Meeting

O Sprint Planning Meeting é uma reunião na qual estão presentes o Product Owner, o Scrum Master e todo o Scrum Team, bem como qualquer pessoa interessada que esteja representando a gerência ou o cliente.

Durante o Sprint Planning Meeting, o Product Owner descreve as funcionalidades de maior prioridade para a equipe. A equipe faz perguntas durante a reunião de modo que seja capaz de quebrar as funcionalidades em tarefas técnicas, após a reunião. Essas tarefas irão dar origem ao Sprint Backlog.

O Product Owner não precisa descrever todos os itens que estão no Product Backlog. Dependendo do tamanho do Product Backlog e da velocidade da equipe, pode ser suficiente descrever apenas os itens de maior prioridade, deixando a discussão dos itens de menor prioridade para o próximo Sprint Planning Meeting.

Coletivamente, o Scrum Team e o Product Owner definem um objetivo para o Sprint, que é uma breve descrição daquilo que se tentará alcançar no Sprint. O sucesso do Sprint será avaliado mais adiante no Sprint Review Meeting em relação ao objetivo traçado para o Sprint.

Depois do Sprint Planning Meeting, a equipe Scrum se encontra separadamente para conversar sobre o que eles escutaram e decidir quanto eles podem se comprometer a fazer no Sprint que será iniciado. Em alguns casos, haverá negociação com o Product Owner, mas será sempre responsabilidade da equipe determinar o quanto ela será capaz de se comprometer a fazer.

### Daily Scrum

A cada dia do Sprint a equipe faz uma reunião diária, chamada Daily Scrum. Ela tem como objetivo disseminar conhecimento sobre o que foi feito no dia anterior, identificar impedimentos e priorizar o trabalho a ser realizado no dia que se inicia.

Os Daily Scrums normalmente são realizadas no mesmo lugar, na mesma hora do dia. Idealmente são realizados na parte da manhã, para ajudar a estabelecer as prioridades do novo dia de trabalho.

Todos os membros da equipe devem participar do Daily Scrum. Outras pessoas também podem estar presentes, mas só poderão escutar. Isso torna os Daily Scrums uma excelente forma para uma equipe disseminar informações sobre o estado do projeto.

O Daily Scrum não deve ser usado como uma reunião para resolução de problemas. Questões levantadas devem ser levadas para fora da reunião e normalmente tratadas por um grupo menor de pessoas que tenham a ver diretamente com o problema ou possam contribuir para solucioná-lo. Durante o Daily Scrum, cada membro da equipe provê respostas para cada uma destas três perguntas:

    O que você fez ontem?
    O que você fará hoje?
    Há algum impedimento no seu caminho?

Concentrando-se no que cada pessoa fez ontem e no que ela irá fazer hoje, a equipe ganha uma excelente compreensão sobre que trabalho foi feito e que trabalho ainda precisa ser feito. O Daily Scrum não é uma reunião de status report na qual um chefe fica coletando informações sobre quem está atrasado. Ao invés disso, é uma reunião na qual membros da equipe assumem compromissos perante os demais.

Os impedimentos identificados no Daily Scrum devem ser tratados pelo Scrum Master o mais rapidamente possível.

### Sprint Review Meeting

Ao final de cada Sprint é feito um Sprint Review Meeting. Durante esta reunião, o Scrum Team mostra o que foi alcançado durante o Sprint. Tipicamente, isso tem o formato de um demo das novas funcionalidades.

Os participantes do Sprint Review tipicamente incluem o Product Owner, o Scrum Team, o Scrum Master, gerência, clientes e engenheiros de outros projetos.

Durante o Sprint Review, o projeto é avaliado em relação aos objetivos do Sprint, determinados durante o Sprint Planning Meeting. Idealmente, a equipe completou cada um dos itens do Product Backlog trazidos para fazer parte do Sprint, mas o importante mesmo é que a equipe atinja o objetivo geral do Sprint.

### Sprint Retrospective

O Sprint Retrospective ocorre ao final de um Sprint e serve para identificar o que funcionou bem, o que pode ser melhorado e que ações serão tomadas para melhorar.

### Burn Down Chart

O Burndown é um simples gráfico, com dois eixos X e Y, baseado nas atividades que não ultrapassem um dia de trabalho. O eixo X indica o número de tarefas existentes no Sprint e o eixo Y os dias que representam o tamanho do Sprint.

## Artefatos

### Product Backlog

O Product Backlog é uma lista contendo todas as funcionalidades desejadas para um produto. O conteúdo desta lista é definido pelo Product Owner. O Product Backlog não precisa estar completo no início de um projeto. Pode-se começar com tudo aquilo que é mais óbvio em um primeiro momento. Com o tempo, o Product Backlog cresce e muda à medida que se aprende mais sobre o produto e seus usuários.

Durante o Sprint Planning Meeting, o Product Owner prioriza os itens do Product Backlog e os descreve para a equipe. A equipe então determina que itens será capaz de completar durante a Sprint que está por começar. Tais itens são, então, transferidos do Product Backlog para o Sprint Backlog. Ao fazer isso, a equipe quebra cada item do Product Backlog em uma ou mais tarefas do Sprint Backlog. Isso ajuda a dividir o trabalho entre os membros da equipe. Podem fazer parte do Product Backlog tarefas técnicas ou atividades diretamente relacionadas às funcionalidades solicitadas.

### Sprint Backlog

O Sprint Backlog é uma lista de tarefas que o Scrum Team se compromete a fazer em um Sprint. Os itens do Sprint Backlog são extraídos do Product Backlog, pela equipe, com base nas prioridades definidas pelo Product Owner e a percepção da equipe sobre o tempo que será necessário para completar as várias funcionalidades.

Cabe a equipe determinar a quantidade de itens do Product Backlog que serão trazidos para o Sprint Backlog, já que é ela quem irá se comprometer a implementá-los.

Durante um Sprint, o Scrum Master mantém o Sprint Backlog atualizando-o para refletir que tarefas são completadas e quanto tempo a equipe acredita que será necessário para completar aquelas que ainda não estão prontas. A estimativa do trabalho que ainda resta a ser feito no Sprint é calculada diariamente e colocada em um gráfico, resultando em um Sprint Burndown Chart.

## Conclusão

Mesmo sendo possível implementar apenas partes do Scrum, não será Scrum, se não for aplicado em sua totalidade. Seja adepto das metodologias ágeis e vale a pena conhecer mais sobre o Scrum.


Começando com SCRUM


A UML(Unified Modelling Language) é a linguagem para modelagem de dados orientado a objetos, para a especificação, construção, visualização e documentação de um software em desenvolvimento. Se formou na junção de 3 mentes responsáveis por métodos de modelagem orientada a objeto: [Grady Booch](https://twitter.com/grady_booch), James Rumbaugh e [Ivar Jacobson](https://twitter.com/ivarjacobson). A linguagem UML foi adotada em 1997 pela [OMG (Object Management Group)](http://www.omg.org/spec/), que define e ratifica padrões na área de Orientação a Objetos.

O desejo da criação da UML, começou em outubro de 1994, com Booch e Rumbaugh na Rational Software Corporation, que foi adquirida pela IBM em 20 de fevereiro de 2003. Em outubro de 1995, unificaram os métodos Booch e OMT, tendo o seu primeiro esboço da versão 0.8 do Unified Process (Processo Unificado). Um pouco mais tarde com a associando de Jacobson, em junho de 1996, a versão 0.9 da UML, foi lançada com a incorporação do método OOSE.

- **_Booch – Grady Booch_** - Booch definiu a noção de que um sistema é analisado a partir de um número de visões, onde cada visão é descrita por um número de modelos e diagramas. O Método de Booch trazia uma simbologia complexa de ser desenhada a mão, continha também o processo pelo qual sistemas são analisados por macro e micro visões.
- **_OMT(Object Modelling Technique) – James Rumbaugh_** - A técnica de Modelagem de Objetos é especialmente voltado para o teste dos modelos, baseado nas especificações da análise de requisitos do sistema. O modelo total do sistema baseado no método OMT é composto pela junção dos modelos de objetos, funcional e use-cases.
- **_OOSE(Object-Oriented Software Engineering) – Ivar Jacobson_** - O método é a visão de Jacobson de um método orientado a objetos. Baseado na utilização de use-cases, que definem os requisitos iniciais do sistema, vistos por um ator externo.

## Conceito da orientação a objetos

Para utilizar a UML, é necessário conhecer o conceito da orientação a objetos e entender sobre: objetos, classes,
abstração, encapsulamento, herança, comunicação com mensagens, métodos de organização e polimorfismo.

- **_Objetos_** - É um substantivo que pode ser abstrato ou real, sobre o qual armazenamos dados e operações que manipulam os
  dados, como uma pessoa, um carro e etc.
- **_Classes_** - É uma coleção de objetos que podem ser descritos com os mesmos atributos e as mesmas operações
- **_Abstração_** - Focaliza a visão externa de um objeto, separando - a em comportamento, descrito pela interface dos métodos da classe e implementação, composta pelas variáveis de instancia e corpo dos métodos.
- **_Encapsulamento_** - Esconde dos usuários de um objeto, os detalhes da implementação interna. Os usuários compreendem quais operações podem ser solicitadas de um objeto, mas não conhecem os detalhes de como a operação é executada.
- **_Herança_** - É o mecanismo de compartilhamento automático de métodos e dados entre classes, subclasses.
- **_Polimorfismo_** - Permite que o programa trate uniformemente objetos que pertencem a classe diferentes, isto é, o programa envia a mesma mensagem a objetos de diferentes classe resultando um comportamento diferente. Existem alguns tipos de Polimorfismo: paramétrico, de inclusão, por `overloading` e por coerção.
  - **_Paramétrico_** - quando uma função funciona uniformemente sobre uma gama de tipos.
  - **_De inclusão_** - através do mecanismo de herança de objeto pode pertencer a um número infinito de classes, aplicação do princípio de substituição.
  - **_Por overloading_** - mesmo nome de variável utilizado para denotar diferentes funções. É o contexto que decide que função utilizar.
  - **_Por coerção_** - operação semântica é utilizada para converter argumento para tipo necessário.

## Diagramas

Apenas vou listar os tipos de diagramas, que aos poucos irei criando um artigo para cada diagrama. :)

### Diagramas de Estrutura (estático)

- Diagrama de Classe
- Diagrama de Objeto
- Diagrama de Pacotes
- Diagrama de Componentes
- Diagrama de Implantação
- Diagrama de Estrutura Composta
- Diagrama de Perfis

### Diagramas de Comportamento(dinâmico)

- Diagrama de Caso de Uso
- Diagrama de Atividade
- Diagrama de Máquina de Estados
- Diagramas de Interação
  - Diagrama de Sequência
  - Diagrama de Comunicação
  - Diagrama de Tempo
  - Diagrama de Interação Geral

## Versões da UML

A versão atual é a UML 2.5.

- **_1.1_** - OMG (Object Management Group – 1997)
- [**_1.3_** - Março de 2000](http://www.omg.org/spec/UML/1.3/)
- [**_1.4_** - Setembro de 2001](http://www.omg.org/spec/UML/1.4/)
- [**_1.5_** - Março de 2003](http://www.omg.org/spec/UML/1.5/)
- [**_2.0_** - Julho de 2005](http://www.omg.org/spec/UML/2.0/)
- [**_2.1.1_** - Agosto de 2007](http://www.omg.org/spec/UML/2.1.1/)
- [**_2.1.2_** - Novembro de 2007](http://www.omg.org/spec/UML/2.1.2/)
- [**_2.2_** - Fevereiro de 2009](http://www.omg.org/spec/UML/2.2/)
- [**_2.3_** - Maio de 2010](http://www.omg.org/spec/UML/2.3/)
- [**_2.4_** - Março de 2011](http://www.omg.org/spec/UML/2.4/)
- [**_2.4.1_** - Agosto de 2011](http://www.omg.org/spec/UML/2.4.1/)
- [**_2.5_** - Junho de 2015](http://www.omg.org/spec/UML/2.5)

## Conclusão

Essa foi uma rápida introdução a UML. Terá uma série de artigos, explicando sobre cada diagrama e mais atualizações sobre o assunto.


Começando com UML


## Por que é necessário se ter um método ágil para o desenvolvimento de software?

Com o método tradicional conhecido como `Cascata` (Waterfall), se tem um processo de levantamento bem detalhado no início do projeto, junto ao cliente. Assim, muitas das vezes se tem o projeto com o escopo fechado. Logo de ínicio, precisamos saber de tudo que o cliente precisa e aí encontramos o problema em que o cliente pode não saber o que quer, sem ter amostras para que possa ter uma visão mais clara.

Mesmo que o cliente ainda não saiba o que quer, terá uma equipe de analistas que faria o levantamento dos requisitos, depois passando pelas equipes de design, modelagem e depois de um longo processo chegaria na equipe de programação. Muitas das vezes, o pensamento das equipes por onde se passou o projeto, não estão com a mesma linha de raciocínio.

Depois de um longo processo, por fim se chega na parte de testes, onde o prazo já está apertado ou inexistente. Provocando uma possível queda na qualidade do projeto e não dando oportunidade para correções dentro do prazo.

Com o cliente só tendo acesso ao projeto no final do mesmo, é gigantesca a possibilidade de haver o : "- Não foi isso que eu pedi.". E temos um sério problema.

Nas metodologias ágeis temos os mesmos processos, mas ao invés de fases extensas, temos ciclos com duração bem mais reduzidas. A cada ciclo, o cliente já poderá acompanhar o acréscimo da funcionalidade no produto, podendo dar `feedbacks` para as equipes.

## Manifesto Ágil

Em 2001, foi criado o manifesto ágil com a assinatura de especialistas em processos de desenvolvimento de software representando entre outros, os métodos Scrum e Extreme Programming (XP).

> "Estamos descobrindo maneiras melhores de desenvolver software, fazendo-o nós mesmos e ajudando outros a fazerem o mesmo. Através deste trabalho, passamos a valorizar:
>
> Indivíduos e interação entre eles mais que processos e ferramentas.
> Software em funcionamento mais que documentação abrangente
> Colaboração com o cliente mais que negociação de contratos
> Responder a mudanças mais que seguir um plano
>
> Ou seja, mesmo havendo valor nos itens à direita,
> valorizamos mais os itens à esquerda."
> <cite>
>
> - [Manifesto ágil](http://www.manifestoagil.com.br/) > </cite>

Aqui você pode conferir os [Princípios por trás do manifesto ágil](http://www.manifestoagil.com.br/principios.html).

Existem várias abordagens para as metodologias ágeis, dependendo da sua necessidade, você poderá estar usando o `Scrum`, `XP`, `Kanban` ou outros como ferramenta.

## Vantagens para o cliente

> - Foco e maximização do ROI (Retorno do Investimento) e do Valor de Negócio;
> - Entregas do produto + rápida, freqüentes e regulares;
> - Aceleração do Time-to-market o que se traduz em ganho de competitividade;
> - Maximização do Value-to-Makert;Foco no que é prioritário e traz mais valor para o usuário, o que se traduz em ganho de usabilidade;
> - Transparência e visibilidade do status do projeto;
> - Flexibilidade para mudanças de requisitos e prioridades além de maior agilidade na tomada de decisões;
> - Melhoria da Qualidade do produto final;
> - Produtividade;
> - Redução dos riscos e das indesejáveis surpresas.
>   <cite>
> - [O que são essas tais de metodologias Ágeis?](https://www.ibm.com/developerworks/community/blogs/rationalbrasil/entry/mas_o_que_s_c3_a3o_essas_tais_de_metodologias__c3_a1geis?lang=en) > </cite>

## Vantagens para o gestor e a equipe

> - Escopo e objetivos claros e priorizados;
> - Equipes auto-gerenciáveis, maior autonomia, disciplina e regularidade;
> - Maximização do comprometimento;
> - Melhoria na comunicação. A comunicação intensa com o cliente e a gestão de suas expectativas são parte do processo;
> - Inspeção e Adaptação constantes do processo em busca da melhoria contínua e a redução dos desperdícios;
> - Antecipação dos problemas e maior agilidade na tomada de ações.
>   <cite>
> - [O que são essas tais de metodologias Ágeis?](https://www.ibm.com/developerworks/community/blogs/rationalbrasil/entry/mas_o_que_s_c3_a3o_essas_tais_de_metodologias__c3_a1geis?lang=en) > </cite>

## Conclusão

O mais importante é colocar o projeto em primeiro lugar e avaliar o que é melhor para o mesmo. Se o projeto tem requisitos estáveis e previsíveis, o método tradicional se encaixa bem. Os requisitos sendo instáveis e o projeto estando em constantes mudanças, a metodologia ágil resolve e organiza esse fluxo que precisa de uma atenção em curto prazo.


Começando com a metodologia ágil


A lógica está presente em algo que você faz. Na lógica de programação, não é muito diferente. Tudo que se propõe a programar, você deve se basear em um raciocínio lógico no planejamento. Então, o foco é ter em mente o desenvolvimento da forma racional, buscando soluções para um problema. É um requisito básico para quem quer ser um programador, saber sobre lógica. Copiar e colar, não é programar. É necessário saber o que está fazendo e ter um raciocínio do que está sendo feito para solucionar um problema.

Na lógica de programação, uma coisa muito importante é a teoria da programação, que será a base para você programar, independente da linguagem.

O que será muito visto é a criação de algoritmos. Que é uma sequência de passos, para se executar uma tarefa.

> Um algoritmo é uma sequência finita de instruções bem definidas e não ambíguas, cada uma das quais devendo ser executadas mecânica ou eletronicamente em um período de tempo finito e com uma quantidade de esforço finita.
> <cite>
>
> - [Wikipédia](https://pt.wikipedia.org/wiki/Algoritmo) > </cite>

## O que é preciso para programar?

Quando precisamos desenvolvedor algo, partimos de 2 premissas: Saber o que precisa ser feito e como.

A lógica entra na primeira etapa. Exemplo:

Temos a tarefa de chupar uma bala. Precisamos saber como será feito. Entramos com a lógica, na elaboração do algoritmo.

- 1 - Colocar a mão no bolso;
- 2 - Pegar a bala;
- 3 - Desembrulhar o papel;
- 4 - Colocar a bala na boca;
- 5 - Chupar a bala;
- 6 - Jogar fora o papel;

Com a primeira etapa concluída, passamos para a etapa de como fazer. Assim, só será preciso escolher a linguagem que será utilizada. Que depende do seu conhecimento de uma linguagem e estudo da mesma. A parte do planejamento sendo bem pensado, evitar retrabalho e falhas quando a tarefa for executada pelo seu programa.

## Algoritmos

As formas mais conhecidas da representação de algoritmos, são:

- 1 - Descrição Narrativa
- 2 - Fluxograma
- 3 - Pseudocódigo ou linguagem estruturada

### Descrição Narrativa

É a linguagem normal que usamos no dia a dia e os passos como devem ser, como foi mostrado acima na tarefa "chupar uma bala".

### Fluxograma

É representado por formas geométricas, onde cada forma tem um significado e expressa uma ação, instrução ou comando.

![Fluxograma](/assets/tecnologia/artigos/fluxograma.svg)

### Pseudocódigo ou linguagem estruturada

É a que chega mais próximo de uma linguagem de programação. Utilizando: comandos de entrada e saída, variáveis, constantes, expressões, blocos e ações a serem realizadas.

Para essa etapa, você pode usar o [VisualG](http://www.apoioinformatica.inf.br/produtos/visualg). Na faculdade, usava o [Dev C++](http://sourceforge.net/projects/orwelldevcpp/), mas acredito que o VisualG é mais interessante, por não ser necessário conhecer uma linguagem.

Para quem usa o Linux, uma alternativa se não quiser usar o **_Wine_**, é o [G-Portugol](http://sourceforge.net/projects/gpt.berlios/).

Outras sugestões:

- [Portugol Studio](http://lite.acad.univali.br/portugol/) - Win
- [Potigol](https://github.com/potigol/Potigol) - Win / Linux

> O VisuAlg é um programa que edita, interpreta e executa algoritmos com uma linguagem próxima do portuguêsestruturado como um programa normal de computador. É um programa de livre uso e distribuição, empregado no ensino de programação em várias escolas e universidades no Brasil e no exterior.
> <cite>
>
> - [VisualG](http://www.apoioinformatica.inf.br/produtos/visualg) > </cite>

Exemplo com o VisualG:

```
algoritmo "exemplo"
// Função : Média
// Autor :  Hemerson Vianna
// Data : 26/08/2015

// Seção de Declarações
var nota1, nota2, media : real

inicio
	escreva("Digite a primeira nota:")
	leia(nota1)

	escreva("Digite a segunda nota:")
	leia(nota2)

	limpatela

	media <- (nota1+nota2)/2

	escreval("A média é:",media)
fimalgoritmo
```

## Conclusão

A lógica da programação é muito importante, para se ter um planejamento mais detalhado e assim, evitando falhas durante a execução dos passos.

Um algoritmo tem que partir do princípio que poderá ser compreendido por qualquer pessoa. Com isso, é necessário que ele seja feito de forma clara e no caso do **_pseudocódigo_**, com comentários e identação para fácil compreensão.


Começando com a lógica de programação


Quando se trata de front-end, temos muitas bibliotecas e frameworks no mercado. Temos 3 frameworks/bobliotecas(React, Angular e Vue), cuja a comunidade vem crescendo e se fortalecendo nos últimos anos. Dos 3, tive menos contato com o **VueJS**, que é o tema desse artigo.

Por traz da criação do framework, temos [Evan You](https://twitter.com/youyuxi), que iniciou o projeto quando estava trabalhando na empresa **Google**, em 2013. Acredito que a primeira coisa que vem à sua cabeça, é o **AngularJS**. Pois bem, ele usou bastante o **AngularJS** e estava entre os engenheiros da **Google**, na época do **AngularJS** 1.x.

Em seu antigo blog, ele escreveu um artigo com uma [reintrodução ao VueJS](https://blog.evanyou.me/2015/10/25/vuejs-re-introduction/), em 2015. Nesse artigo, ele buscava explicar os motivos para ser usar e estudar mais sobre o **VueJS**, sendo que nessa época, já haviam várias opções de bibliotecas e frameworks. Ele também postou o artigo no [medium](https://medium.com/@youyuxi/vue-js-a-re-introduction-ed159414a1be).

Agora vamos voltar um pouquinho e seguir a cronologia.

## Releases

O **VueJS** foi lançado em fevereiro de 2014, com o release **Animatrix**. A versão **v2.6.0**, foi lançada em fevereiro deste ano e no momento temos a versão **v2.6.10**, que foi lançada em 20 de março. Particularmente, gosto muito da consistência dos releases do **VueJS**.

Irei até pesquisar sobre o intervalo que teve em 2018, mas já olhando o repositório, a preocupação foi apenas com as versões de correção(PATCH) do **v2.5.0**. Por alto e sem muito conhecimento da rotina de manutenção do framework, me parece bem sólido o lançamento das versões com novas funcionalidades(MINOR).

Basicamente, se tem o processo de lançamento, foco nas correções e logo após o estudo com as versões beta para um próximo release. (Processo bem óbvio, mas é bonito de se ver)

Acho bem interessante a trajetória do framework, em relação a questão de releases e ver que a versão **2.x.x** (MAJOR), está sendo sustentada desde 2016. Traz uma segurança. :)

Até o momento, temos os seguintes releases:

- 08/12/2013 - [v0.6.0: VueJS](https://github.com/vuejs/vue/releases/tag/v0.6.0)
- 08/12/2013 - [v0.7.0](https://github.com/vuejs/vue/releases/tag/v0.7.0)
- 08/12/2013 - [v0.8.0](https://github.com/vuejs/vue/releases/tag/v0.8.0)
- 25/02/2014 - [v.0.9.0: Animatrix](https://github.com/vuejs/vue/releases/tag/v0.9.0) `Lançamento do VueJS`
- 23/03/2014 - [v0.10.0: Blade Runner](https://github.com/vuejs/vue/releases/tag/v0.10.0)
- 07/11/2014 - [v0.11.0: Cowboy Bebop](https://github.com/vuejs/vue/releases/tag/v0.11.0)
- 12/06/2015 - [v0.12.0: Dragon Ball](https://github.com/vuejs/vue/releases/tag/v0.12.0)
- 25/10/2015 - [v1.0.0: Evangelion](https://github.com/vuejs/vue/releases/tag/v1.0.0)
- 30/09/2016 - [v2.0.0: Ghost in the Shell](https://github.com/vuejs/vue/releases/tag/v2.0.0)
- 22/11/2016 - [v2.1.0: Hunter X Hunter](https://github.com/vuejs/vue/releases/tag/v2.1.0)
- 26/02/2017 - [v2.2.0: Initial D](https://github.com/vuejs/vue/releases/tag/v2.2.0)
- 27/04/2017 - [v2.3.0: JoJo's Bizarre Adventure](https://github.com/vuejs/vue/releases/tag/v2.3.0)
- 13/07/2017 - [v2.4.0: Kill la Kill](https://github.com/vuejs/vue/releases/tag/v2.4.0)
- 13/10/2017 - [v2.5.0: Level E](https://github.com/vuejs/vue/releases/tag/v2.5.0)
- 04/02/2019 - [v2.6.0: Macross](https://github.com/vuejs/vue/releases/tag/v2.6.0)

No blog atual do **Evan You**, temos o destaque para as versões:

- [Vue 2.0 is Here!](https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.vh9f94s2m)
- [Vue 2.5 released](https://medium.com/the-vue-point/vue-2-5-released-14bd65bf030b)
- [Vue 2.6 released](https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e)

## Sobre o framework

o **Vue** deperta o meu interesse devido a alguns pontos que já estou acostumado com o **React**:

- utiliza a abordagem de DOM virtual.
- provê componentes visuais reativos e combináveis.
- mantêm o foco na biblioteca principal, com preocupações como roteamento e gerenciamento de estado global tratadas por bibliotecas companheiras.
- entre outras vantagens que podem ser vistas nesse [comparativo](https://br.vuejs.org/v2/guide/comparison.html#React)

### Mais algumas vantagens

**Simplicidade** <br>
A idéia básica por trás do desenvolvimento com Vue é obter bons resultados com o mínimo de esforço possível. Ter o armazenamento de todos os códigos de um componente, como **HTML**, **CSS** e **JavaScript**, em um único arquivo.

**Integração** <br>
Os desenvolvedores podem integrar o Vue a outras estruturas, como o React, permitindo que eles personalizem o projeto de acordo com seus respectivos requisitos.

**Fácil aprendizado** <br>
De acordo com vários especialistas, o Vue não requer uma grande curva de aprendizado, o que é benéfico para novos desenvolvedores. Requer apenas que os desenvolvedores conheçam os fundamentos de JavaScript, HTML e CSS, que é diferente de outras bibliotecas/frameworks, onde linguagens de programação adicionais são necessárias para codificação avançada.

**Documentação** <br>
Documentação extensa e detalhada que torna rápido e fácil de aprender. Ele permite que um desenvolvedor inexperiente, com apenas um conhecimento básico de HTML e JavaScript, desenvolva um aplicativo.

**Flexibilidade** <br>
O framework Vue não é opinativo, você pode projetar a estrutura do aplicativo do jeito que você quer que seja.

**Suporte ao TypeScript** <br>
O Vue tem um suporte nativo para o TypeScript.

**Vue CLI 3** <br>
Interface gráfica, suporte a plug-ins, prototipagem instantânea e uma configuração muito fácil do Webpack.

**Devtools no navegador** <br>
Permitindo que os desenvolvedores verifiquem o estado atual do Vuex, componentes, views, alterem manualmente dados específicos ou até mesmo analisem mais profundamente os eventos.

### Algumas desvantagens

**Falta de suporte para grandes projetos** <br>
A equipe de desenvolvimento do **Vue** é pequena, o que significa que o framework precisará de algum tempo para obter suporte corporativo. Desde de 2018, o desenvolvimento do framework não está atrelado ao interesse das empresas. Sendo assim, mudanças na estrutura existente dependem principalmente do feedback dos membros da comunidade.

**Falta de Plugins** <br>
O **Vue** ainda não tem o amplo apoio de seus colegas frameworks, já que não é tão popular quanto **React** ou **Angular**. Existem muito mais recursos para o **React** do que o **Vue**.

**Muita flexibilidade pode ser problemática** <br>
Às vezes, a flexibilidade pode causar alguns problemas para os desenvolvedores. Mas a variedade de opções do **Vue** pode se tornar um fardo quando implementada em projetos maiores que envolvem muitos desenvolvedores.

O pensamento final é que o **VueJS** tem poucas desvantagens em comparação com outros frameworks. Como tem que ser, a questão é fazer uma análise completa do que a tecnologia pode oferecer e o que o seu projeto precisa.

## Aplicações Móveis

Se fosse para o **React**, a resposta seria rápida. Para o **Vue**, se tem 2 opções:

- [Native Script](https://docs.nativescript.org/vuejs/nativescript-vuejs) - NativeScript é um framework open source para construção de aplicativos móveis nativos usando JavaScript. Também é possivel saber mais com essa [documentação do NativeScript-Vue](https://nativescript-vue.org/pt-br/docs/introduction/).
- [Weex](https://weex.apache.org/guide/use-vue-in-weex.html) - é um projeto criado pelo gigante chinês do comércio eletrônico, Alibaba. Com ele é possível produzir aplicações para web (html5), Android e iOS a partir da mesma base de código.

## Ferramentas

### CLI

Temos o CLI (command line interface) do **VueJS**, para criar a estrutura básica com o framework.

```
npm install -g @vue/cli
# ou
yarn global add @vue/cli
```

Tem a [documentação](https://cli.vuejs.org/) completa que você pode conferir. Também pode ter acesso à organização com os [templates](https://github.com/vuejs-templates).

### Loader

Com o **Vue Loader**, você pode criar componentes do **Vue**, no formato SFC (Vue Single-File Component). Que seria um arquivo `*.vue`, que usa a sintaxe semelhante ao do HTML para descrever um componente do Vue. Cada arquivo é composto por três tipos de blocos de linguagem: `<template>`, `<script>` e `<style>`, e blocos personalizados opcionalmente adicionais. Exemplo:

```
<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
```

Confere a [documentação](https://vue-loader.vuejs.org/) completa para saber mais.

### Devtools

Estou muito acostumando a debugar em alguns navegadores com **React**, mas com o **Vue** também é possível. Dá uma olhada no [projeto](https://github.com/vuejs/vue-devtools).

## Bibliotecas oficiais

### Vue router

Para a questão de roteamento com o **Vue**, você precisa do **Vue Router**. Ele se integra ao núcleo do **Vue** para facilitar a criação de uma SPA e tem as seguintes características:

- Mapeamento de rota/visualização aninhada
- Configuração de roteador modular baseada em componente
- Parâmetros de rota, de consulta, wildcard (curinga, ex: "\*")
- Efeitos de transição de **views** ativados pelo sistema de transição do Vue
- Controle de navegação refinado
- Links com classes CSS ativas automáticas
- Modo de histórico HTML5 ou modo hash, com fallback automático no IE9
- Comportamento de rolagem personalizável

Veja mais na [documentação](http://router.vuejs.org/) oficial.

### Vuex

O **Vue** tem essa biblioteca, que tamém é um padrão de gerenciamento de estado para as aplicações com o framework. Ele centraliza o armazenamento de todos os componentes de uma aplicação, contendo regras com o intuito de garantir que o estado só possa ser modificado de maneira previsível.

Essa biblioteca merece um artigo só sobre o assunto, mas por enquanto pode dar uma olhada na [documentação](http://vuex.vuejs.org/) oficial.

### Vue Server Renderer

Faz um bom tempo que o desenvolvedor front-end, tem se preocupado não apenas com o lado do cliente. A preocupação com SEO, performance, consumo de CPU e outros assuntos que o lado do servidor resolve melhor, tem sido os motivos para o **NodeJS**, ser a plataforma da esperança.

Renderizar pelo lado do servidor, cada vez mais se mostra uma coisa primordial no desenvolvimento front-end. Assim, nos dias de hoje, temos um aumento na designação de desemvolvedor full-stack. Pra quem é da época do **Web designer** e **Web master**, como eu, não liga muito para rótulos.

O fato é que as camadas no desenvolvimento de uma aplicaçao tem ficado cada vez mais próximas na questão da mão de obra. A [documentação](https://ssr.vuejs.org/) oficial dessa biblioteca está disponível para você saber mais sobre usar o **Vue**, no lado do servidor.

## Considerações finais

Depois de muitas estratégias de estudo, agora busco ter alguns padrões para estudar sobre alguma tecnologia. Com a combinação de artigos e repositórios no github, tento consolidar o conhecimento.

No caso do **VueJS**, tenho o repositório [Knowledge VueJS](https://github.com/org-victorinox/knowledge-vuejs), onde guardo os links de artigos, videos e projetos sobre o assunto. Também tem o repositório [Prime VueJS](https://github.com/org-victorinox/prime-vuejs), onde testo uma estrutura SPA básica com o framework.

Nessa estratégia de conhecimento sobre o framework, falta mais um repositório utilizando mais recursos SPA (Single Page Application) e SSR (Server Side Rendering). Quando o mesmo estiver pronto, atualizo esse artigo.

Nos próximos artigos sobre **Vue**, vamos conhecer mais sobre o framework e levantar mais questões para a sua utilização e comparativo com outros frameworks/bibliotecas do mercado. Enquanto isso, você pode conferir a [documentação](https://br.vuejs.org/) oficial.


Começando com Vue

front-end


Nos últimos 8 anos, os sistemas de grid CSS vem ganhando destaque pela atenção que o layout responsivo tem recebido. E estou estimando esse tempo, com base na data de lançamento do twitter boostrap (19 de agosto de 2011). Essa seria a minha referência, em relação ao início forte de discussões sobre boas práticas para layout responsivo, frameworks e bibliotecas para esse fim.

## Sistema de grid

O sistema de grid é uma estrutura que permite o alinhamento de elementos da página com base em colunas e linhas sequenciadas.

O formato com 12 colunas tem sido o mais utilizado, por causa da flexibilidade proporcionada e por ser capaz de dividir o layout uniformemente. Na divisão por 2, 3 e 4, temos uma serie de modulações disponíveis (2x6 , 3x4) e várias outras combinações.

O número de colunas pode variar dependendo do projeto. Quanto maior o número de colunas, (por exemplo, 16 ou 24) maior a quantidade de possibilidades para divisão.

[960 Grid System](https://960.gs/), considerado o rei do **grid** por muitos anos, tem a seguinte estrutura:

- Largura total de 960px.
- 12 colunas
  - Largura de 60px em cada coluna.
  - Cada coluna tem 10px de margem esquerda e direita. Sendo 20px de espaço entre as colunas.
  - A área total do conteúdo é de 940px.
- 16 colunas
  - largura de 40px em cada coluna.
  - Cada coluna tem 10px de margem esquerda e direita. Sendo 20px de espaço entre as colunas.
  - A área total do conteúdo é de 940px.
- 24 colunas
  - largura de 30px em cada coluna.
  - Cada coluna tem 5px de margem esquerda e direita. Sendo 10px de espaço entre as colunas.
  - A área total do conteúdo é de 950px.

Uma das principais razões para a popularidade do **960 Grid** com os designers é a sua flexibilidade. Os designers podem usar uma ampla gama de colunas, com o número máximo de 24.

Funcionou muito bem no começo e ainda funciona até hoje, porque a maioria dos projetos tem o tamanho de fonte definido em 12px. De uns anos para cá, que a maioria dos layouts estão sendo definidos com tamanho de fonte de 13px ou superior.

Como o tamanho da fonte aumentou, é necessário aumentar a área de conteúdo e ajustar o espaço entre as colunas. Com a evolução das boas práticas na experiência do usuário e uma variedade de novos dispositivos, o sistema de grid foi ganhando uma infinidade de variações. Ex: O **Bootstrap**, acima de 960px, usa a largura de 1140px para área de conteúdo no tamanho **wide**.

Sendo encontrado com facilidade na internet, os sistemas mais comuns. Lembrando que o projeto terá uma necessidade e o sistema poderá ser livremente customizado.

## Levando o layout CSS ao próximo nível

Quem já trabalha com layout CSS, há muitos anos, já deve ter visto muito `float: *`, `display: table`, `display: inline-block`, para montar uma grade na estrutura ou em um simples menu. Desde 2015, o suporte dos navegadores mais relevantes para o **Flexbox**, tem sido excelente. O **CSS Grid**, tem sido bem recebido pelo navegadores, desde 2017. É claro que não considero o **IE**, para falar de suporte as novas tecnologias, mas o suporte a esse layout que tem feito muitos desenvolvedores felizes, já passa de 90%. Agora, vamos falar mais sobre essa flexibilidade que temos no **CSS**.

O **Flexbox**, foi projetado como um modelo de layout **unidimensional** e método que pode oferecer distribuição de espaço entre itens numa interface e capacidade de alinhamento. Ele também pode ser usado para trabalhar elementos de forma **bidimensional**, mas o flexbox opera melhor quando trabalhado com os itens em apenas uma dimensão, ou seja, em coluna ou linha.

Já o **CSS Grid**, tem o modelo **bidimensional**, que controla ao mesmo tempo as colunas e linhas. Você pode indicar o ponto em que um elemento começa e acaba dentro da sua grid, o que proporciona muita flexibilidade.

**CSS Grid** é principalmente definido no elemento pai. No **flexbox**, fora o básico, a maior parte do layout é aplicado nos elementos filhos.

O intuito do artigo, não é me aprofundar muito em cada assunto sobre como montar a sua grade, e sim, apenas apresentar os sistemas e ferramentas para o mesmo. O mais importante é deixar claro que um não substitui o outro. Podem ser usado tranquilamente juntos e em próximo artigos, darei mais exemplos dessa combinação.

Abaixo podemos brincar, conhecer e praticar com **Flexbox** e **CSS Grid**.

- [Flexbox Froggy](https://flexboxfroggy.com/)
- [CSS Grid Garden](https://cssgridgarden.com/)

## Bibliotecas

Fiz um compilado das ferramentas que podem nos ajudar e inspirar no desenvolvimento e montagem da grade para os nossos projetos.

### Pré-processadores e CSS

#### Flexbox

- **Flexbox Grid** - [http://flexboxgrid.com/](http://flexboxgrid.com/)
- **Bootstrap Grid** - [https://getbootstrap.com/docs/4.0/layout/grid/](https://getbootstrap.com/docs/4.0/layout/grid/)
- **Bulma** - [https://bulma.io/](https://bulma.io/)
- **Waffle Grid** - [https://lucasgruwez.github.io/waffle-grid](https://lucasgruwez.github.io/waffle-grid)
- **Basscss** - [https://basscss.com/](https://basscss.com/)
- **Pure** - [https://purecss.io/grids/](https://purecss.io/grids/)
- **Milligram** - [https://milligram.io/grids.html](https://milligram.io/grids.html)
- **GRD** - [https://github.com/1000ch/grd](https://github.com/1000ch/grd)
- **Gridlex** - [https://github.com/devlint/gridlex](https://github.com/devlint/gridlex)
- **Gridly** - [https://github.com/IonicaBizau/gridly](https://github.com/IonicaBizau/gridly)
- **Blueprint CSS** - [https://blueprintcss.dev/](https://blueprintcss.dev/)
- **Structure** - [https://github.com/kenwheeler/structure](https://github.com/kenwheeler/structure)
- **Picnic CSS** - [https://github.com/franciscop/picnic](https://github.com/franciscop/picnic)

#### CSS Grid

- **CSS grid 12 column layout** - [https://github.com/erikmonjas/css-grid-12-column-layout](https://github.com/erikmonjas/css-grid-12-column-layout)
- **Griddy.css** - [https://github.com/balapa/griddy.css](https://github.com/balapa/griddy.css)

#### Outros sistemas

- **Semantic UI** - [https://semantic-ui.com/collections/grid.html](https://semantic-ui.com/collections/grid.html)
- **csswizardry-grids** - [https://github.com/csswizardry/csswizardry-grids](https://github.com/csswizardry/csswizardry-grids)
- **Jeet Grid** - [https://github.com/mojotech/jeet](https://github.com/mojotech/jeet)
- **Lost Grid** - [https://github.com/peterramsing/lost](https://github.com/peterramsing/lost)
- **Toast** - [https://github.com/daneden/Toast](https://github.com/daneden/Toast)
- **Neat** - [https://github.com/thoughtbot/neat](https://github.com/thoughtbot/neat)
- **Msdotcom/WinJS Grid Framework** - [https://github.com/winjs/grid/](https://github.com/winjs/grid/)
- **Skeleton** - [https://github.com/dhg/Skeleton](https://github.com/dhg/Skeleton)
- **Crow** - [https://github.com/kkortes/crow](https://github.com/kkortes/crow)
- **Simple Grid** - [https://github.com/zachacole/Simple-Grid](https://github.com/zachacole/Simple-Grid)
- **Pills** - [http://arkpod.in/pills/](http://arkpod.in/pills/)
- **Spacegrid** - [https://github.com/JonathanSpeek/spacegrid](https://github.com/JonathanSpeek/spacegrid)

### Angular, React e Vue

- **Angular UI Grid** - [http://ui-grid.info/](http://ui-grid.info/)
- **React Material-UI Grid** - [https://material-ui.com/components/grid/](https://material-ui.com/components/grid/)
- **React Grid Layout** - [https://github.com/STRML/react-grid-layout](https://github.com/STRML/react-grid-layout)
- **Rebass Grid** - [https://rebassjs.org/grid/](https://rebassjs.org/grid/)

### JavaScript

- **Muuri** - [https://github.com/haltu/muuri](https://github.com/haltu/muuri)
- **Masonry** - [https://github.com/desandro/masonry](https://github.com/desandro/masonry)

### Design/UX/UI

- **KK UI Store's - Grid System Library** - [https://grid.kkuistore.com/](https://grid.kkuistore.com/)

### Bônus

Como bônus, deixo uma biblioteca que posibilita a utilização de 3 sistemas de grid (flexbox, CSS Grid e Flexbox Masonry Grid. Escrito em SCSS e disponível em SCSS e CSS.

- [CSS Grid Library](https://github.com/CodyReeves/css-grid-system-library)

## Considerações finais

Montar uma grade no projeto sempre gerou dúvidas entre leigos, designers e desenvolvedores front-end. Citei o **960 GS**, por ser um exemplo de que esse assunto precisou de um **norte** para quem não tinha muita experiência ou estipular um padrão.

A única coisa certa, é que temos uma evolução e maior suporte em relação ao assunto de **layout CSS** na última década. Vale o estudo na parte de elaboração do projeto, quanto ao melhor sistema que deixará o desenvolvimento do mesmo mais flexivel e de acordo com a área de interface e desenvolvimento.

Na minha opinião, antes de qualquer coisa relacionada ao desenvolvimento web, é necessário definir quais são os navegadores que o seu projeto dará suporte. Assim, diminuindo as preocupações na fase de desenvolvimento e é claro, quando o produto estiver em produção.


UI Grid - Sistemas e bibliotecas


Karma é uma ferramenta que gera um servidor Web que executa o código de teste para cada um dos navegadores conectados.
O quão é necessário se criar testes para um desenvolvedor? Muito necessário.
O KarmaJS está aqui para simplificar isso.

> Things should be simple. We believe in testing and so we want to make it as simple as possible.
>
> The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative.
> <cite> -- KarmaJS
>
> - [KarmaJS](http://karma-runner.github.io) > </cite>

## Instalação

Precisamos primeiramente ter o NodeJS e NPM, instalados.

Podendo ser baixado, aqui: [NodeJS com NPM](https://nodejs.org/en/download/)

Agora que já temos o NodeJS e NPM, instalados. Temos que instalar o `KarmaJS` via terminal:

```
npm install -g karma-cli
```

Para instalar o `KarmaJS` e os plugins no projeto. Basta ter o `package.json` e executar os comandos:

```
npm install karma --save-dev
```

Para ter o karma como dependência de desenvolvimento.

```
npm install karma-jasmine karma-chrome-launcher --save-dev
```

Como exemplo, acima estaremos instalando os plugins para o `jasmine` e o lançador do `chrome`.

## Configuração

Agora que temos o `KarmaJS` e os plugins instalados, precisamos ir para a parte de configuração.

Para gerar o arquivo de configuração do `Karma`, precisamos do comando:

```
karma init
```

Ao executar o comando, aparecerá as perguntas para ser montado o arquivo de configuração.

```
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Config file generated at "[diretorio]\karma.conf.js".

```

Após responder as perguntas, será gerado o arquivo `karma.conf.js`. Para esse exemplo, as sugestões me atendem, então foi só apertar `enter`, direto.

O nosso arquivo de configuração está de acordo com os plugins que foram instalados inicialmente. Para os testes, usaremos o `jasmine` e os mesmos rodarão no navegador 'chrome', na porta 9876 (http://localhost:9876).

## Execução

Para executar o que foi configurado, precisamos do comando:

```
karma start
```

Mesmo não tendo nenhum arquivo para ser testado, executando o comando, já poderá ver em ação o que foi configurado.

Para um exemplo mais prático, vamos criar o arquivo `test.js`, com o código:

```
describe("Exemplo", function() {
  it("verdadero", function() {
    expect(true).toBe(true);
  });

    it("falso", function() {
    expect(false).not.toBe(true);
  });
});
```

No arquivo `karma.conf.js`, vamos acrescentar o caminho do arquivo, para ser identificado.

```
files: [
        './*.js'
    ],
```

Pronto, como um código simples de um teste feito com o `jasmine`, agora é só executar o `karma start`.

No terminal, aparecerá a seguinte mensagem:

```
Chrome 47.0.2526 (Windows 7 0.0.0): Executed 2 of 2 SUCCESS (0.018 secs / 0.003 secs)
```

E assim, temos o primeiro teste rodando de acordo com a nossa configuração, de uma forma bem rápida e simples.

## Conclusão

Não se pode ter desculpas para não criar testes para o seu código. Além de assegurar a integridade, previne muitas dores de cabeça e falhas que não podem fazer parte do dia a dia de um bom desenvolvedor. Todo ser humano é falho, então vamos deixar nas mãos da tecnologia a última avaliação do seu código. O bom desenvolvedor é ciente de que pode haver `bugs` e que testes, além de ajudar, evita transtornos para o cliente. Afinal, ninguém quer perder dinheiro. Ainda mais se poderia ser evitado.


Começando com KarmaJS


O Ionic é um framework para construir aplicações no sentido nativo para dispositivos móveis, utilizando as linguagens web como HTML, CSS e JavaScript.

Criado no final de 2013, visando a construção de aplicações híbridas. Sendo voltado para a aparência e interação da interface da aplicação com o mesmo. Em sua documentação deixa bem claro que não é um substituto para o PhoneGap ou seu preferido framework de JavaScript. A ideia é se encaixar com os seus projetos e simplicar grande parte da sua aplicação no lado do front-end.

O framework exige atualmente o AngularJS, para trabalhar todo o seu potencial. Se integra com os recursos nativos dos dispositivos por meio do Cordova e disponibiliza ferramentas e componentes com o Ionic Module e Ionic CLI.

## Instalação

Para começar, precisamos primeiramente ter o NodeJS e NPM, instalados.

Podendo ser baixado, aqui: [NodeJS com NPM](https://nodejs.org/en/download/)

E agora, será necessário instalar globalmente o ionic e o cordova:

```
npm install -g ionic cordova
```

## Criando um projeto

Usando o gerador do Ionic CLI, utilizaremos o comando:

```
ionic start nomeDoApp tipo
```

Onde:

`nomeDoApp` = Nome da sua aplicação.
`tipo` = Tipo do projeto base(Existem 3 tipos: tabs, blank e sidemenu.).

## Visualizando o projeto

Com o projeto criado, podemos rodar o projeto para visualizá-lo com o comando:

```
ionic serve
```

Para simular um dispositivo móvel com android por exemplo, podemos utilizar os comandos abaixo:

```
ionic platform add os
ionic build os
ionic emulate os
```

Onde:

`os` = plataforma(android ou ios)

Até o momento apenas simulei com o android e você precisa ter instalado o [Java Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) e o [Android SDK](http://developer.android.com/sdk/installing/index.html)

## Links interessantes

[Ionic Creator](https://creator.ionic.io/app/login)
Aqui você pode criar a interface para as páginas com os elementos disponíveis

[Ionic Playground](http://play.ionic.io/app/312561eb0aaf)
Funciona como o `jsfiddle`, voltado para o Ionic

[Ionic Material Design](http://ionicmaterial.com/)
Para resolver uma boa parte de problemas com layout

## Observações

Precisando utilizar os recursos nativos dos dispositivos, todos os recursos do Cordova estarão disponíveis para isso. E também pode contar com o módulo `ngCordova` do AngularJS.

O Ionic usa o GulpJS para automatizar as tarefas de compilar o SCSS, coffeeScript e rodar o servidor para visualizar o projeto. Os mesmos são opcionais.

## Conclusão

Nos dias de hoje, ter uma aplicação web e ainda desenvolver nativamente para android e IOS, além de gastar mais recursos, tempo e mais códigos para manter, é complicado. Por isso, ter uma aplicação hídrida com o Ionic, resolve boa parte dos problemas, com mais rapidez e facilidade para o desenvolvimento da sua aplicação.

Confira o [site](http://ionicframework.com/) do framework e sua documentação para mais detalhes.


Começando com Ionic


No desenvolvimento Front-End tem algumas tarefas que são como um castigo se feitas manualmente. Por isso, temos que automatizar algumas tarefas. Para nos auxiliar com isso, temos o GruntJS.

O GruntJS é um `task runner` que automatiza tarefas e roda via terminal.

## Instalação

Para rodá-lo, precisamos primeiramente ter o NodeJS e NPM, instalados.

Podendo ser baixado, aqui: [NodeJS com NPM](https://nodejs.org/en/download/)

Agora que já temos o NodeJS e NPM, instalados. Temos que instalar o GruntJS via terminal:

```
npm install -g grunt-cli
```

Podemos ver se está instalado com o commando:

```
grunt --version
```

Para o GruntJS funcionar, precisamos de 2 arquivos: `package.json` e o `Gruntfile.js`.

O **_package.json_** é um arquivo do NodeJS, onde terão as informações do projeto e os plugins do GruntJS. Ex:

```
{
  "name": "project name",
  "version": "1.0.0",
  "title": "Project Title",
  "devDependencies": {
    "grunt": ">=0.4.5",
    "load-grunt-config": "^0.10.0",
    "load-grunt-tasks": "^0.4.0"
  },
}
```

O **_Gruntfile.js_** é o arquivo de configuração do GruntJS. Ex:

```
module.exports = function( grunt ) {

  grunt.initConfig({
    // Tasks
  });
};
```

Para adicionar um plugin no seu `package.json`, podemos utilizar os comandos:

Para as dependências para produção (`dependencies`)

```
npm install grunt --save
```

Para dependências, apenas para o desenvolvimento (`devDependencies`)

```
npm install grunt --save-dev
```

Se você está utilizando um `package.json`, já com os plugins listados, basta executar o comando:

```
npm install
```

## Configuração

Agora com os plugins instalados, precisando configurar cada tarefa para ser executado ao rodar o `GruntJS`.

No link [http://gruntjs.com/plugins](http://gruntjs.com/plugins), você pode conferir os plugins para o `GruntJS`. Clicando no plugin desejado, será encaminhado para o host [https://www.npmjs.com](https://www.npmjs.com), onde terá as informações para a configuração do `package` escolhido.

Como exemplo, escolhi o plugin `grunt-contrib-uglify`, sendo levado para [https://www.npmjs.com/package/grunt-contrib-uglify](https://www.npmjs.com/package/grunt-contrib-uglify). Onde podemos conferir, como configurar a tarefa.

Abaixo, como podemos ver no método `initConfig`, iremos passar um objeto com a configuração do plugin. Com o método `loadNpmTasks`, informaremos a tarefa que deverá ser carregada. E para finalizar, devemos registrar as tarefas que teremos no projeto.

```
module.exports = function( grunt ) {

  grunt.initConfig({

    uglify: {
	    my_target: {
			files: {
				'dest/output.min.js': ['src/input1.js', 'src/input2.js']
			}
	    }
	}

  });


  // Plugins do Grunt
  grunt.loadNpmTasks( 'grunt-contrib-uglify' );


  // Tarefas que serão executadas
  grunt.registerTask( 'default', [ 'uglify' ] );

};

```

Para ficar mais claro, temos outro exemplo com mais plugins e tarefas.

```
module.exports = function( grunt ) {

  grunt.initConfig({

    uglify: {
	    my_target: {
			files: {
				'dest/output.min.js': ['src/input1.js', 'src/input2.js']
			}
	    }
	},
	cssmin: {
		target: {
	    	files: [{
				expand: true,
				cwd: 'release/css',
				src: ['*.css', '!*.min.css'],
				dest: 'release/css',
				ext: '.min.css'
			}]
		}
	}

  });


  // Plugins do Grunt
  grunt.loadNpmTasks( 'grunt-contrib-uglify' );
  grunt.loadNpmTasks( 'grunt-contrib-cssmin' );


  // Tarefas que serão executadas
  grunt.registerTask( 'default', [ 'cssmin', 'uglify' ] );
  grunt.registerTask( 'css', [ 'cssmin' ] );
  grunt.registerTask( 'js', [ 'uglify' ] );

};

```

Acima, temos a configuração dos plugins `cssmin` e `uglify` no `Gruntfile.js`, onde os mesmos serão carregados com o método `loadNpmTasks` e registramos 3 tarefas.

## Executando as tarefas

No terminal, rodando o comando:

```
grunt
```

Será executada a lista de tarefas `default` (`cssmin` e `uglify`)

Com o comando:

```
grunt css
```

Será executada a lista `css`

E o comando:

```
grunt js
```

a lista `js`

Acredito que ficou simples de compreender a lógica para utilizar as tarefas do `GruntJS`. Com isso, temos tudo instalado e configurado. Agora só ser feliz com as tarefas automatizadas.

## A dica

Dependendo da quantidade de configurações no seu `Gruntfile.js`, a manutenção fica bem complicada. Para resolver o problema, podemos utilizar o plugin `load-grunt-config`, para termos mais organização.

[https://github.com/firstandthird/load-grunt-config](https://github.com/firstandthird/load-grunt-config)
O **_load-grunt-config_**, permite quebrar a configuração do `Gruntfile.js` por tarefa. Você pode usar os arquivos na extensão .js , .json , .yaml , .cson , ou .coffee.

Instalando o plugin

```
npm install load-grunt-config --save-dev
```

O `Gruntfile.js`, ficará semelhante ao exemplo abaixo:

```
module.exports = function(grunt) {
    // Carrega configurações da pasta grunt-configs/
    var path = require('path');

    require('load-grunt-config')(grunt, {
        init: true,
        configPath: path.join(process.cwd(), 'source/_tasks'),
        data: {
            projectDir  : '../../public/assets/',
            projectDev  : 'source/_assets/',
            pkg: grunt.file.readJSON('package.json')
        }
    });

};
```

`'source/_tasks'` - Será o caminho para onde estão os arquivos com as configurações das tarefas.

No objeto data, informamos as variáveis que será retornadas pelo parâmetro `options` no arquivo de configuração de cada plugin, como podemos ver abaixo.

```
module.exports = function(grunt, options){
	// configuração
};
```

No `Gruntfile.js`, o caminho das configurações se encontram na pasta `source/_tasks` e a estrutura ficaria assim:

```
>source
  >_tasks
    > aliases.yaml
    > cssmin.js
```

A sua pasta com as tarefas precisará ter o arquivo `aliases.(js|.json|yaml|cson|coffee)` para definir as suas tarefas.

Exemplo com a extensão `.yaml`:

**_aliases.yaml_**

```
default:
  - 'cssmin'
  - 'uglify'

css:
  - 'cssmin'

js:
  - 'uglify'

```

Abaixo, um exemplo com a extensão `.js`, da configuração de um plugin.

**_cssmin.js_**

```
module.exports = function(grunt, options){

  var projectDir = options.projectDir;

  return {
    site: {
      files: [{
        expand: true,
        cwd: '<%= projectDir %>css/site/',
        src: ['*.css'],
        dest: '<%= projectDir %>css/site/'
      }]
    }
  };
};
```

E assim, podemos utilizar o `GruntJS`, para estar automatizando as tarefas que dão um bom trabalho se feitas manualmente e poupam um bom tempo, nos deixando mais produtivos.


Começando com GruntJS


O HTML é uma linguagem de marcação. Assim, dando significado para o conteúdo, mediante as suas `tags`. A WAI-ARIA se aplica para o significado das interações. Assim, ajudando onde a informação é dividida em diversos elementos e precisão de uma interação no site para serem visualizadas.

> WAI - ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.
> <cite>
>
> - [WAI-ARIA - Front in Rio 2012](http://www.w3c.br/pub/Agenda/PalestraFrontinRio2012AcessibilidadeHtml5Waiaria/Apresentacao-wai-aria-html5-frontinrio2012.pdf) > </cite>

## Roles

Distingue o tipo de elemento que está tendo a interação do usuário. Temos 4 categorias de `roles`: Abstract, Widgets, Document Structure e Landmarks.

**_Abstract_** - Tem a finalidade de definir conceitos gerais. São utilizados apenas por navegadores para ajudar a organizar e dinamizar um documento, e nunca por desenvolvedores para marcar HTML. Eles não são mapeados para leitores de tela e não fornecem nenhuma informação adicional acessibilidade diretamente entre HTML e leitor de tela.

- [command](http://www.w3.org/TR/wai-aria/roles#command)
- [composite](http://www.w3.org/TR/wai-aria/roles#composite)
- [input](http://www.w3.org/TR/wai-aria/roles#input)
- [landmark](http://www.w3.org/TR/wai-aria/roles#landmark)
- [range](http://www.w3.org/TR/wai-aria/roles#range)
- [roletype](http://www.w3.org/TR/wai-aria/roles#roletype)
- [section](http://www.w3.org/TR/wai-aria/roles#section)
- [sectionhead](http://www.w3.org/TR/wai-aria/roles#sectionhead)
- [select](http://www.w3.org/TR/wai-aria/roles#select)
- [structure](http://www.w3.org/TR/wai-aria/roles#structure)
- [widget](http://www.w3.org/TR/wai-aria/roles#widget)
- [window](http://www.w3.org/TR/wai-aria/roles#window)

**_Widgets_** - Tem a finalidade de definir elementos de interface independentes ou em conjuntos.

- [alert](http://www.w3.org/TR/wai-aria/roles#alert)
- [alertdialog](http://www.w3.org/TR/wai-aria/roles#alertdialog)
- [button](http://www.w3.org/TR/wai-aria/roles#button)
- [checkbox](http://www.w3.org/TR/wai-aria/roles#checkbox)
- [dialog](http://www.w3.org/TR/wai-aria/roles#dialog)
- [gridcell](http://www.w3.org/TR/wai-aria/roles#gridcell)
- [link](http://www.w3.org/TR/wai-aria/roles#link)
- [log](http://www.w3.org/TR/wai-aria/roles#log)
- [marquee](http://www.w3.org/TR/wai-aria/roles#marquee)
- [menuitem](http://www.w3.org/TR/wai-aria/roles#menuitem)
- [menuitemcheckbox](http://www.w3.org/TR/wai-aria/roles#menuitemcheckbox)
- [menuitemradio](http://www.w3.org/TR/wai-aria/roles#menuitemradio)
- [option](http://www.w3.org/TR/wai-aria/roles#option)
- [progressbar](http://www.w3.org/TR/wai-aria/roles#progressbar)
- [radio](http://www.w3.org/TR/wai-aria/roles#radio)
- [scrollbar](http://www.w3.org/TR/wai-aria/roles#scrollbar)
- [slider](http://www.w3.org/TR/wai-aria/roles#slider)
- [spinbutton](http://www.w3.org/TR/wai-aria/roles#spinbutton)
- [status](http://www.w3.org/TR/wai-aria/roles#status)
- [tab](http://www.w3.org/TR/wai-aria/roles#status)
- [tabpanel](http://www.w3.org/TR/wai-aria/roles#tabpanel)
- [textbox](http://www.w3.org/TR/wai-aria/roles#textbox)
- [timer](http://www.w3.org/TR/wai-aria/roles#timer)
- [tooltip](http://www.w3.org/TR/wai-aria/roles#tooltip)
- [treeitem](http://www.w3.org/TR/wai-aria/roles#treeitem)

Exemplo:

```
<span class="tooltip" role="tooltip" aria-hidden="true">Texto de exemplo</span>
```

As `roles` abaixo, normalmente são recipientes para gerenciar outros elementos de interface.

- [combobox](http://www.w3.org/TR/wai-aria/roles#combobox)
- [grid](http://www.w3.org/TR/wai-aria/roles#grid)
- [listbox](http://www.w3.org/TR/wai-aria/roles#listbox)
- [menu](http://www.w3.org/TR/wai-aria/roles#menu)
- [menubar](http://www.w3.org/TR/wai-aria/roles#menubar)
- [radiogroup](http://www.w3.org/TR/wai-aria/roles#radiogroup)
- [tablist](http://www.w3.org/TR/wai-aria/roles#tablist)
- [tree](http://www.w3.org/TR/wai-aria/roles#tree)
- [treegrid](http://www.w3.org/TR/wai-aria/roles#treegrid)

Exemplo:

```
<ul class="menu" role="menu">
	<li class="menu-item checked" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="true">Sans-serif</li>
	<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Serif</li>
	<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Monospace</li>
	<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Fantasy</li>
</ul>
```

**_Document Structure_** - Descrevem estruturas que organizam o conteúdo de uma página. Geralmente não são interativos.

- [article](http://www.w3.org/TR/wai-aria/roles#article)
- [columnheader](http://www.w3.org/TR/wai-aria/roles#columnheader)
- [definition](http://www.w3.org/TR/wai-aria/roles#definition)
- [directory](http://www.w3.org/TR/wai-aria/roles#directory)
- [document](http://www.w3.org/TR/wai-aria/roles#document)
- [group](http://www.w3.org/TR/wai-aria/roles#group)
- [heading](http://www.w3.org/TR/wai-aria/roles#heading)
- [img](http://www.w3.org/TR/wai-aria/roles#img)
- [list](http://www.w3.org/TR/wai-aria/roles#list)
- [listitem](http://www.w3.org/TR/wai-aria/roles#listitem)
- [math](http://www.w3.org/TR/wai-aria/roles#math)
- [note](http://www.w3.org/TR/wai-aria/roles#presentation)
- [presentation](http://www.w3.org/TR/wai-aria/roles#presentation)
- [region](http://www.w3.org/TR/wai-aria/roles#region)
- [row](http://www.w3.org/TR/wai-aria/roles#row)
- [rowgroup](http://www.w3.org/TR/wai-aria/roles#rowgroup)
- [rowheader](http://www.w3.org/TR/wai-aria/roles#rowheader)
- [separator](http://www.w3.org/TR/wai-aria/roles#separator)
- [toolbar](http://www.w3.org/TR/wai-aria/roles#toolbar)

Exemplo:

```
<dialog tabindex="0" role="alertdialog" aria-labelledby="d-message">
   <div>
      <div role="document" tabindex="0">
         <p id="d-message">Essa informação é desnecessária</p>
         <button>Eu entendi</button>
      </div>
   </div>
</dialog>
```

**_Landmarks_** - São regiões da página que são pontos importantes para a navegação do usuário.

- [application](http://www.w3.org/TR/wai-aria/roles#application)
- [banner](http://www.w3.org/TR/wai-aria/roles#banner)
- [complementary](http://www.w3.org/TR/wai-aria/roles#complementary)
- [contentinfo](http://www.w3.org/TR/wai-aria/roles#contentinfo)
- [form](http://www.w3.org/TR/wai-aria/roles#form)
- [main](http://www.w3.org/TR/wai-aria/roles#main)
- [navigation](http://www.w3.org/TR/wai-aria/roles#navigation)
- [search](http://www.w3.org/TR/wai-aria/roles#search)

Exemplo:

```
<ul role="navigation">
	<li><a href="sobre.html">Sobre</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>
```

## States e Properties

Aprensenta o estado do elemento.

Abaixo, temos um exemplo de estado e propriedades com a funcionalidade de `tabs`, que será alterado via javaScript (Não será necessário, colocar o script aqui, porque a ideia é apenas mostrar as propriedades e estados):

```
// HTML
<ul role="tablist">
 <li role="presentation"><a href="#section1" tabindex="0" role="tab" aria-controls="section1" aria-selected="true">Section 1</a></li>
 <li role="presentation"><a href="#section2" tabindex="-1" role="tab" aria-controls="section2">Section 2</a></li>
 <li role="presentation"><a href="#section3" tabindex="-1" role="tab" aria-controls="section3">Section 3</a></li>
</ul>
<section id="section1" role="tabpanel">...</section>
<section id="section2" role="tabpanel" aria-hidden="true">...</section>
<section id="section3" role="tabpanel" aria-hidden="true">...</section>

```

Ao clicar no item de navegação, o elemento terá o estado `true`, para a propriedade `aria-selected`. E o conteúdo que será mostrado para o usuário, não terá a propriedade `aria-hidden` com o estado `true`.

## Links

- HTML5 ARIA - [http://www.w3.org/TR/aria-in-html/](http://www.w3.org/TR/aria-in-html/)
- ARIA - [http://www.w3.org/WAI/PF/aria/](http://www.w3.org/WAI/PF/aria/)
- Roles - [http://www.w3.org/TR/wai-aria/roles](http://www.w3.org/TR/wai-aria/roles)
- States and Properties - [http://www.w3.org/TR/wai-aria/states_and_properties](http://www.w3.org/TR/wai-aria/states_and_properties)
- Design Patterns - [http://www.w3.org/TR/wai-aria-practices/#aria_ex](http://www.w3.org/TR/wai-aria-practices/#aria_ex)

## Conclusão

A WAI-ARIA é para extender e não substituir as tags HTML. Dê sempre preferência para o HTML, para dar significado ao conteúdo. E é preciso tomar alguns cuidados.

Se não é possível usar a tag `form`, usaríamos assim:

```
<div role="form"></div>
```

No código abaixo, seria redundante.

```
<form role="form"></form>
```

O mais importante é sempre lembrar que as interações devem ser usadas via teclado. Afinal, o foco está na acessibilidade.


Começando com WAI-ARIA


Antes de qualquer coisa, cada um/equipe sabe o que é melhor para o workflow do seu projeto. Cada projeto tem suas necessidades e o ideal que seja feito um planejamento para o mesmo. O que interessa é a organização, automação das tarefas, gerenciamento de dependências e padrão único da equipe.

Para iniciar o fluxo de trabalho, temos que criar um controle de versão. Afinal, não podemos perder o que fizermos no projeto.

A partir desse momento vem o processo de desenvolvimento de código, com uma arquitetura sólida e preferencialmente com [TDD](http://pt.wikipedia.org/wiki/Test_Driven_Development) ou [BDD](http://pt.wikipedia.org/wiki/Behavior_Driven_Development).

O importante é a criação de padrões e documentação. Para que o projeto fique de fácil compreensão na hora da manutenção. Os testes unitários, automatização de tarefas e ferramentas que auxiliam na depuração são de grande valia para assegurar que o seu código seja estável.

Como não queria que o artigo ficasse muito extenso, nos próximos artigos vou falar mais detalhadamente sobre cada etapa e ferramenta. Por enquanto, listei por categorias o que uso no fluxo de trabalho como front-ender, com pequenos comentários.

---

## Linguagem

As linguagens que nós front-enders mais usamos, são:

- **HTML** - [http://pt.wikipedia.org/wiki/HTML](http://pt.wikipedia.org/wiki/HTML)
- **CSS** - [http://pt.wikipedia.org/wiki/Cascading_Style_Sheets](http://pt.wikipedia.org/wiki/Cascading_Style_Sheets)
- **JavaScript** - [http://pt.wikipedia.org/wiki/JavaScript](http://pt.wikipedia.org/wiki/JavaScript)

---

## Diversos e Produtividade

Como editor utilizei por um bom tempo o Sublime e o Bracket, no momento utilizando o Atom. Ter um bom editor que auxilia com seus plugins, facilita e agiliza muito o processo de desenvolvimento.

- **Sublime Text** - [http://www.sublimetext.com/3](http://www.sublimetext.com/3)
- **Bracket** - [http://brackets.io/](http://brackets.io/)
- **Atom** - [https://atom.io/](https://atom.io/)

Para gerenciar as tarefas:

- **Wunderlist** - [https://www.wunderlist.com/pt/](https://www.wunderlist.com/pt/)

Poderia colocar tudo no mesmo lugar, mas tenho a preferência de versionar os arquivos gráficos como os layouts em PSD no Dropbox, documentos e livros no Google Drive.

- **Dropbox** - [https://www.dropbox.com/](https://www.dropbox.com/)

- **Google Drive** - [https://www.google.com/intl/pt-BR/drive/](https://www.google.com/intl/pt-BR/drive/)

---

## Softwares

Gosto de usar o Rails Installer, pois em uma só tacada ele já instala o Ruby, Rails, Git bash e etc..

- **Rails Installer** - [http://railsinstaller.org/pt-BR](http://railsinstaller.org/pt-BR)

Para criar, visualizar e editar os layouts web.

- **Photoshop** - [http://www.adobe.com/br/products/photoshop.html](http://www.adobe.com/br/products/photoshop.html)

---

## Referências

Ótimas referências para consultar a compatibilidade crossbrowser e novos recursos.

- **MDN** - [https://developer.mozilla.org/pt-BR/](https://developer.mozilla.org/pt-BR/)

- **caniuse** - [http://caniuse.com/](http://caniuse.com/)

- **html5please** - [http://html5please.com/](http://html5please.com/)

- **Cross Browser Knowledgebase** - [http://www.crossbrowserbook.com/Knowledge](http://www.crossbrowserbook.com/Knowledge)

---

## Ferramentas Online

Para fazer testes rápidos com bibliotecas JavaScript, HTML e CSS

- **jsfiddle** - [http://jsfiddle.net/](http://jsfiddle.net/)

Nem sempre conseguimos ter todos os ícones que precisamos em um lugar só, o Icomoon ajuda nisso e com ícones que você mesmo criou.

- **icomoon** - [https://icomoon.io/](https://icomoon.io/)

Para testar a performance do site:

- **PageSpeed** - [https://developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/)

- **GTmetrix** - [http://gtmetrix.com/](http://gtmetrix.com/)

Avaliar a performance do seu código JavaScript.

- **JSperf** - [http://jsperf.com/](http://jsperf.com/)

Depois de estruturar seu código HTML com o Schema, aqui você pode ver como o Google vê.

- **Google Structured Data Testing Tool** - [http://www.google.com.br/webmasters/tools/richsnippets](http://www.google.com.br/webmasters/tools/richsnippets)

---

## Plataforma

Além de ser um pré-requisito para utilizar muitas ferramentas que estão listadas nesse artigo, o Node consegue levar o front-ender para o lado do servidor. Não vou falar muito porque isso merece um artigo à parte. ^^

- **NodeJS** - [http://nodejs.org](http://nodejs.org)

---

## Geradores & Gerenciadores

Para conectar a criação de estrutura, automatização e gerenciamento de tarefas, temos:

- **Yeoman** - [http://yeoman.io/](http://yeoman.io/)

Gerenciador de Pacotes do Node

- **NPM** - [https://www.npmjs.com/](https://www.npmjs.com/)

Gerenciador de dependências

- **Bower** - [http://bower.io/](http://bower.io/)

Para gerar páginas estáticas. Uso para este blog. :)

- **Jekyll** - [http://jekyllrb.com/](http://jekyllrb.com/)

---

## Automatização de tarefas

Sempre utilizei o Grunt, mas já testando o Gulp. ^^

- **Grunt** - [http://gruntjs.com/](http://gruntjs.com/)

- **Gulp** - [http://gulpjs.com/](http://gulpjs.com/)

---

## Pré-processador de CSS

Sou grande adepto do SCSS, e utilizo bastante o Compass.

- **SASS** - [http://sass-lang.com/](http://sass-lang.com/)

- **Compass** - [http://compass-style.org/](http://compass-style.org/)

- **LESS** - [http://lesscss.org/](http://lesscss.org/)

- **Stylus** - [http://learnboost.github.io/stylus/](http://learnboost.github.io/stylus/)

---

## Versionamento

Para versionar os meus projetos utilizo o Git, dividindo entre o [Github](https://github.com/) e o [Bitbucket](https://bitbucket.org/)

- **Git** - [http://git-scm.com/book/pt-br/v1](http://git-scm.com/book/pt-br/v1)

---

## Depuração & teste

Muito útil para garantir a qualidade e padrão do código.

- **JSHint** - [http://jshint.com/](http://jshint.com/)

- **CSSLint** - [http://csslint.net/](http://csslint.net/)

Teste unitário para o seu código JavaScript, é indispensável.

- **Jasmine** - [http://jasmine.github.io/](http://jasmine.github.io/)

- **Mocha** - [http://mochajs.org/](http://mochajs.org/)

- **Karma** - [http://karma-runner.github.io/0.12/index.html](http://karma-runner.github.io/0.12/index.html)

Para visualização rápida em várias resoluções

- **Responsive Design Testing** - [http://mattkersley.com/responsive/](http://mattkersley.com/responsive/)

---

## Navegador

Por questão de memória RAM, largando o Chrome como meu navegador principal para voltar para o Firefox.

- **Chrome** - [https://www.google.com.br/chrome/](https://www.google.com.br/chrome/)

- **Firefox** - [https://www.mozilla.org/pt-BR/firefox/new/](https://www.mozilla.org/pt-BR/firefox/new/)

---

## Complementos do navegador

- **ColorZilla** - [http://www.colorzilla.com/](http://www.colorzilla.com/)

- **Firebug** - [http://getfirebug.com/](http://getfirebug.com/)

- **Window Resizer** - [Chrome](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) & [Firefox](https://addons.mozilla.org/pt-BR/firefox/addon/window-resizer-webextension/?src=search)

- **Chrome Developer Tools** - [https://developer.chrome.com/devtools](https://developer.chrome.com/devtools)

---

## Bibliotecas & Frameworks

O mais famoso e mais utilizado com certeza é o JQuery. Também utilizo no momento, mas já tive um bom contato com o Dojo e foi um preríodo de um bom conhecimento.

- **jQuery** - [http://jquery.com/](http://jquery.com/)

- **Dojo Toolkit** - [http://dojotoolkit.org/](http://dojotoolkit.org/)

Avaliando os prós e contras desses 2 frameworks que tem muito a acrescentar.

- **AngularJS** - [https://angularjs.org/](https://angularjs.org/)

- **React** - [http://facebook.github.io/react/](http://facebook.github.io/react/)

---

## Sintaxe & metodologias

Com uma junção de padrões e metodologias, você cria um boa estrutura para o seu projeto.

- **BEM** - [https://en.bem.info/methodology/](https://en.bem.info/methodology/)

- **OOCSS** - [http://oocss.org/](http://oocss.org/)

- **SMACSS** - [https://smacss.com/](https://smacss.com/)

- **DryCSS** - [http://malko.github.io/dryCss/](http://malko.github.io/dryCss/)

- **Atomic Design** - [http://bradfrost.com/blog/post/atomic-web-design/](http://bradfrost.com/blog/post/atomic-web-design/)

- **CSS Guidelines** - [http://cssguidelin.es/](http://cssguidelin.es/)

- **Idiomatic CSS** - [https://github.com/necolas/idiomatic-css](https://github.com/necolas/idiomatic-css)

- **Idiomatic SASS** - [https://github.com/anthonyshort/idiomatic-sass](https://github.com/anthonyshort/idiomatic-sass)

- **Idiomatic JS** - [https://github.com/rwaldron/idiomatic.js](https://github.com/rwaldron/idiomatic.js)

- **JavaScript design patterns** - [https://github.com/addyosmani/essential-js-design-patterns](https://github.com/addyosmani/essential-js-design-patterns)

---

## Documentação

Para a documentação do código SCSS e JS. Para as demais documentações, utilizo o Jekyll.

- **SassDoc** - [http://sassdoc.com/](http://sassdoc.com/)

- **JSDuck** - [https://github.com/senchalabs/jsduck](https://github.com/senchalabs/jsduck)

---

## Inspiração & Blogs

É sempre bom ter uma inspiração e segue algumas.

- **CSS Tricks** - [http://css-tricks.com/](http://css-tricks.com/)

- **Smashing Magazine** - [http://www.smashingmagazine.com/](http://www.smashingmagazine.com/)

- **A List Apart** - [http://alistapart.com/](http://alistapart.com/)

- **Codrops** - [http://tympanus.net/codrops/](http://tympanus.net/codrops/)

- **Awwwards** - [http://www.awwwards.com/](http://www.awwwards.com/)

Por enquanto é isso. :)


Conhecendo o fluxo de trabalho front-end


Hoje venho falar sobre o que o desenvolvedor front-end faz. Existem dois tipos de linguagens para o desenvolvimento web:
As linguagens client-side(lado cliente) e server-side(lado servidor). Com isso, no desenvolvimento temos três estágios (Front-End, Middleware e Back-End).

**O Front-End está no lado cliente(client-side), no caso seria o primeiro estágio quando acessamos um site. Normalmente a estrutura front-end é composta por HTML, CSS e Javascript.**

O Middleware(mediador) seria o intermediário entre a interface(front) e os dados(back). Geralmente é associado a um "encanamento" de um sistema. Um exemplo seria a comunicação de aplicações via web service.

O Back-End está no lado servidor(server-side), que é responsável por todo processamento dos dados recebidos do front-end e esse estágio mexe com o banco de dados(ex: MySQL, MS-SQL, PostgreSQL e etc...) e o armazenamento de dados. Posso citar algumas linguagens do lado servidor como Ruby on Rails, Lua, Perl, Python, Django, Node, PHP e etc...

O intuito é apenas abordar superficialmente os dois últimos estágios citados e focar no primeiro estágio que seria o Front-End.

> Front-end e back-end são termos utilizados para caracterizar interfaces de programas e serviços em relação ao usuário inicial desses recursos. (O "usuário" pode ser um ser humano ou um programa.) A aplicação "front-end" é aquele que os usuários do aplicativo interagem diretamente. Um aplicativo de "back-end" ou programa serve indiretamente em apoio aos serviços de front-end, geralmente por estar mais perto do recurso necessário ou que tenham a capacidade de se comunicar com o recurso necessário.
> <cite> -- Front-end
>
> - [Margaret Rouse](http://whatis.techtarget.com/definition/front-end) > </cite>

Abaixo você tem uma estrutura (HTML), um estilo para o link (CSS) e uma interação (Javascript). Essa é apenas uma pequena amostra do que um front-ender faz.

Exemplo HTML:

```
<p>
	<a id="link" href="/">Link</a>
</p>
```

Exemplo CSS:

```
#link {
	color: #4299E3;
	font-size: 14px;
}
```

Exemplo JavaScript:

```
var el = document.getElementById("link");

function message( event ) {
	event.preventDefault();
	alert('Este é um link');
}
el.addEventListener("click", message, false);
```

O código acima, funcionando: [Demonstração](http://jsfiddle.net/hc77v7g2/)

> ### O que o front-end faz:

> 1.  Estabelecer uma linguagem visual entre designers e o back-end
> 2.  A partir de um projeto visual, definir um conjunto de componentes que representam o conteúdo, marca, recursos, etc.
> 3.  Estabelecer uma linha de base para a aplicação Web em termos de convenções, quadros, requisitos, linguagens visuais e especificações.
> 4.  Definir o escopo do aplicativo Web em termos de dispositivos, navegadores, telas, animações.
> 5.  Desenvolver uma diretriz de garantia de qualidade para garantir a fidelidade da marca, a qualidade do código, revisão de produto pelas partes interessadas.
> 6.  Estilo de aplicações Web com espaçamentos adequados, tipografia, títulos, fontes cara, ícones, margens, preenchimentos, grades e assim por diante.
> 7.  Estilo de aplicações Web com várias imagens de alta resolução, mockups orientada dispositivo, tudo ao mesmo tempo cuidando de diretrizes de design.
> 8.  Marcação da aplicação web, tendo em conta a semântica, acessibilidade, SEO, esquemas e microformats.
> 9.  Conectar-se a uma API para recuperar informações em um amistoso, consumindo não-bateria, dispositivo e cliente maneira consciente.
> 10. Desenvolver código do lado do cliente para executar animações, transições, carregamento lento, interações, fluxos de trabalho de aplicativos, a maior parte do tempo, tendo em conta a optimização progressiva e normas para trás compatíveis.
> 11. Certificar que as conexões de back-end são seguras.
> 12. Nunca esquecendo que apesar de prazos rigorosos, os pedidos dos associados e as limitações do dispositivo, o usuário é, e estará sempre em primeiro lugar.
>
> <cite> -- Why can’t we find Front End developers?
>
> - [Jose Aguinaga](http://jjperezaguinaga.com/2014/03/19/why-cant-we-find-front-end-developers/) > </cite>

Em um projeto web, temos a regra de negócio:

> "Regras de Negócio são declarações sobre a forma da empresa fazer negócio. Elas refletem políticas do negócio. As organizações com isto têm políticas para satisfazer os objetivos do negócio, satisfazer clientes, fazer bom uso dos recursos, e obedecer às leis ou convenções gerais do negócio.
> Regras do Negócio tornam-se requisitos, ou seja, podem ser implementados em um sistema de software como uma forma de requisitos de software desse sistema. Representam um importante conceito dentro do processo de definição de requisitos para sistemas de informação e devem ser vistas como uma declaração genérica sobre a organização.
> As regras de negócio definem como o seu negócio funciona, podem abranger diversos assuntos como suas políticas, interesses, objetivos, compromissos éticos e sociais, obrigações contratuais, decisões estratégicas, leis e regulamentações entre outros."
> <cite> -- Regras de negócio
>
> - Wikipédia
>   </cite>

Com essa definição, passamos para próximo passo que seria o UX/UI design (Desenho da experiência do usuário ou desenho da Interface do usuário)

> "De um modo simplificado, podemos dizer que em um projeto de um carro, por exemplo, a interface (também chamado de User Interface, Interface de Usuário ou apenas UI) é toda a parte “física” do veiculo; ou seja, a forma. Já a experiência (ou User Experience, UX) é o prazer que o veiculo te proporciona ao dirigi-lo; ou seja, a sua experiência de uso do veículo."
> <cite> -- Design Básico: Diferença entre UX e UI Design
>
> - Canha - Chocolate Design
>   </cite>

Essa etapa com a regra de negócio em mãos, começa um estudo para ter a melhor forma de apresentação e experiência para o usuário.

Após esse estudo, chegamos na etapa do design final. Onde todos os elementos que se mostraram necessários para a apresentação do negócio/produto ganham cores e formas mais harmônicas para o usuário. E assim, temos o layout final do projeto. Geralmente, o front-ender recebe os layouts das telas em formato PSD(Photoshop).

Agora o trabalho do front-ender é transformar essas telas em páginas web, onde serão acessadas pelo navegador, como o exemplo de código que citei no inicio desse artigo.

Em teoria, o back-end seria a última etapa, mas na maioria das vezes em paralelo ou antes, pois o front-end precisa saber como enviar alguns dados por meio de API e etc...

> "No contexto de desenvolvimento Web, uma API é um conjunto definido de mensagens de requisição e resposta HTTP, geralmente expressado nos formatos XML ou JSON. A chamada Web 2.0 vem abandonando o modelo de serviços SOAP em favor da técnica REST.
> Enquanto você usufrui de um aplicativo ou sítio, este pode estar conectada a diversos outros sistemas e aplicativos via APIs sem que se perceba.
> Um exemplo popular é a rede social Twitter, sendo possível ler e publicar mensagens."
> <cite> -- Interface de programação de aplicações
>
> - Wikipédia
>   </cite>

Bom, a ideia foi mostrar um pouco do processo e aonde se encaixa o front-ender. O front-end é o elo entre o layout e o armazenamento de dados. Além de ser a estrutura da interface para o usuário, ele tem algumas preocupações a mais, como comunicação com o back-end, ser adaptável para todos os dispositivos e diferentes navegadores, código limpo e bem estruturado para o buscadores e etc..

Espero que tenha contribuído, com esse meu primeiro artigo.

Aceitando feedbacks. :)


Desenvolvedor client-side

react


A versão [16.8.0](https://github.com/facebook/react/releases/tag/v16.8.0), é o primeiro **release** que traz suporte estável aos **Hooks**. Com isso, simplificando a vida de programadores e curiosos. Permitindo o uso de estado e outros recursos da biblioteca sem escrever uma classe.

## Regras dos Hooks

- Apenas chame os Hooks **no nível mais alto**. Não chame Hooks dentro de **loops**, **condicionais** ou **funções aninhadas**. O React identifica os hooks de um componente pela ordem em que eles foram chamados.
- Apenas chame os Hooks em **componentes funcionais**. Não chame Hooks em funções **JavaScript** comuns. (Há apenas um outro lugar válido para se chamar Hooks — dentro dos seus próprios Hooks customizados.)

Confira o link para o [plugin do eslint](https://www.npmjs.com/package/eslint-plugin-react-hooks), para que as regras sejam revisadas automaticamente.

## Tipos de Hooks

- [Hook de estados](https://reactjs.org/docs/hooks-state.html) - **useState** - permite ler e armazenas as informações de maneira mais fácil e prática no estado, eliminando alguns componentes de classes e substituindo por componentes funcionais.
- [Hook de efeitos](https://reactjs.org/docs/hooks-effect.html) - **useEffect** - utilizado para executar funções que necessitam ou realizam algum efeito no componente. Ex: **mutations**, **subscriptions**, **timers** e **logging**. Tem o mesmo efeito que os **componentDidMount** e **componentDidUpdate** tem nas classes.
- [Hook customizado](https://reactjs.org/docs/hooks-custom.html) - Crie seus próprios **hooks** e extraia a lógica de um componente em funções reutilizáveis.
- [Outros Hooks](https://reactjs.org/docs/hooks-reference.html) - Hooks nativos com funções específicas.

Os Hooks existentes podem ser classificados como básicos e adicionais. Veja a lista abaixo:

**Hooks básicos:**

- [useState](https://pt-br.reactjs.org/docs/hooks-reference.html#usestate)
- [useEffect](https://pt-br.reactjs.org/docs/hooks-reference.html#useeffect)
- [useContext](https://pt-br.reactjs.org/docs/hooks-reference.html#usecontext)

**Hooks adicionais:**

- [useReducer](https://pt-br.reactjs.org/docs/hooks-reference.html#usereducer)
- [useCallback](https://pt-br.reactjs.org/docs/hooks-reference.html#usecallback)
- [useMemo](https://pt-br.reactjs.org/docs/hooks-reference.html#usememo)
- [useRef](https://pt-br.reactjs.org/docs/hooks-reference.html#useref)
- [useImperativeMethods](https://pt-br.reactjs.org/docs/hooks-reference.html#useimperativehandle)
- [useMutationEffect](https://pt-br.reactjs.org/docs/hooks-reference.html#uselayouteffect)
- [useLayoutEffect](https://pt-br.reactjs.org/docs/hooks-reference.html#usedebugvalue)

## Hook de estados

Vamos olhar o hook de estado. Abaixo veremos um exemplo:

```
import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      Você clicou {count} vezes!
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};
```

O hook nesse caso é o **useState**. Ele está recebendo um estado inicial e retorna um array com dois valores. Sendo o primeiro valor o estado atual e o segundo uma função para atualizar esse estado.
O **useState** não tem a funcionalidade idêntica ao **setState** que é utilizado em classes. Quando se é passado um objeto para o **setState**, o mesmo combina o valor que estamos passando com o antigo. Já no **useState**, todo o estado do hook será alterado, mas temos o mesmo efeito usando o operador de **spread**. Ex: useState({ ...oldState, ...newState }); .

Exemplo de um objeto no estado inicial:

```
function Counter() {
  const [state, setState] = useState({ nome: '', idade: 0  })
  ...
  )
}
```

Também, podemos chamar mais de uma vez o nosso hook **useState** no nosso componente.

```
function Counter() {
  const [name, setName] = useState('')
  const [age, setAge] = useState(0)
  ...
  )
}
```

## Hook de efeitos

Agora vamos falar do hook **useEffect**. O mesmo permite que seu componente em forma de função tenha acesso aos métodos de ciclo de vida sem precisar refatorar seu componente para uma classe. Abaixo, um exemplo:

```
import React, { useState, useEffect } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    window.document.title = `Você clicou ${count} vezes!`
  })

  return (
    <div>
      Você clicou {count} vezes!
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
)}
```

O título será alterado de acordo com a atualização do estado do componente. O **useEffect** nesse contexto, seria o mesmo que o **ComponentDidMount** e também o **ComponentDidUpdate**. Será chamada a função passada tanto quando o componente é montado quando é atualizado.

O **useEffect** te ajuda ao desmontar os recursos, exatamente como faria com **ComponentWillUnmount**.

```
function Example() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  useEffect(() => {
    const mouseMove = e => {
      setX(e.screenX)
      setY(e.screenY)
    }

    document.addEventListener('mousemove', mouseMove);
    return () => document.removeEventListener('mousemove', mouseMove);
  })

  return <div>O Mouse esta no {x}, {y}</div>;
}
```

Acima temos o evento de **mousemove** configurado para alterar o estado do componente de acordo com o movimento do mouse e quando o componente for desmontado será rodado o **removeEventListener**. Também será chamada quando for detectado que o **useEffect** precisa rodar novamente, ou seja em cada render. A cada alteração no estado do componente nosso evento está sendo removido e adicionado novamente. Agora não queremos isso e precisamos que o evento seja adicionado na montagem e na desmontagem.

Vamos utilizar o segundo argumento que o **useEffect** recebe, que é uma lista dos valores que devem mudar para que ele rode novamente. Passando uma lista vazia, ele irá rodar apenas quando é montado e a função de limpeza apenas quando é desmontado.

```
function Example() {
  const [x, setX] = useState(0)
  const [y, setY] = useState(0)

  useEffect(() => {
    const mouseMove = e => {
      setX(e.clientX)
      setY(e.clientY)
    }

    document.addEventListener('mousemove', mouseMove);
    return () => document.removeEventListener('mousemove', mouseMove);
  }, []) // <-- lista vazia

  return <div> Mouse esta no {x}, {y}</div>;
}
```

Os **Event listeners** serão chamados apenas quando precisamos. O segundo parâmetro pode ser utilizado para dizer quando nosso efeito vai rodar. Abaixo, um exemplo:

```
function Status(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const handleStatusChange = status => setIsOnline(status.isOnline)

    API.subscribeToUserStatus(props.user.id, handleStatusChange)

    return () => API.unsubscribeFromUserStatus(props.user.id, handleStatusChange)

  }, [props.user.id]) // apenas se desinscreve caso props.friend.id mude
}
```

Quando friend.id for alterado, iremos chamar o **unsubscribeFromUserStatus** com id anterior e depois chamar o **subscribeToUserStatus** com id atual, assim temos consistência na limpeza dos recursos de forma simples.

## Hook customizado

Os Hooks são totalmente desacoplados de componentes, o que nos permite combiná-los para criar novos hooks mais específicos e compartilhar lógica entre nossos componentes.

Começaremos com o exemplo abaixo:

```
import React, { useState, useEffect } from 'react';

function Status(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const handleStatusChange = status => status.isOnline

    API.subscribeToUSerStatus(props.user.id, handleStatusChange)

    return () => API.unsubscribeFromUSerStatus(props.user.id, handleStatusChange)
    }
  })

  if (isOnline === null) return 'Loading...';

  return isOnline ? 'Online' : 'Offline';
}
```

Também vamos precisar de uma lista de contatos e exibir seus respectivos status.

```
import React, { useState, useEffect } from 'react';

function UserListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const handleStatusChange = status => status.isOnline

    ChatAPI.subscribeToUserStatus(props.user.id, handleStatusChange)
    return () =>  API.unsubscribeFromUserStatus(props.user.id, handleStatusChange)
  })

  return <li style={{ color: isOnline ? 'green' : 'black' }}>{props.user.name}</li>;
}
```

Com isso, temos uma repetição de código. Resolveremos isso, ao extrair a lógica repetida em um hook customizado.

```
import React, { useState, useEffect } from 'react';

function useUserStatus(userID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const handleStatusChange = status => status.isOnline

    API.subscribeToUserStatus(userID, handleStatusChange)
    return () =>  API.unsubscribeFromUserStatus(userID, handleStatusChange)
  })

  return isOnline;
}
```

Agora a lógica que tínhamos em nossos componentes, está em uma função separada (um padrão: que os hooks tenham o prefixo **use**). Abaixo, exemplo da utilização:

```
function UserStatus(props) {
  const isOnline = useUserStatus(props.user.id)

  if (isOnline === null) return 'Loading...';

  return isOnline ? 'Online' : 'Offline';
}
```

```
function UserListItem(props) {
  const isOnline = useUserStatus(props.user.id)

  return <li style={{ color: isOnline ? 'green' : 'black' }}>{props.user.name}</li>;
}
```

Agora temos uma lógica simplificada. Também é possível criar hooks para lidar com bibliotecas externas:

```
import React, { useState, useEffect } from 'react';

const useObservable = (observable, initialValue) => {
  const [value, setValue] = useState(initialValue)
  useEffect(() => {
    const subscription = observable.subscribe({next: setValue})
    return () => subscription.unsubscribe()
  }, [observable])
  return value
}
```

Acima, a cada novo evento no **stream** do **observable** temos uma atualização no estado. Abaixo, um exemplo usando a bilbioteca **RxJS**.

```
import React from 'react';
import { fromEvent } from 'rxjs';
import { map }  from 'rxjs/operators';
import { useObservable } from './observableHook';

const mouseTest = fromEvent(document, 'mousemove').pipe( map(e => [e.clientX, e.clientY]) );

const App = () => {
   const [x,y] = useObservable(mouseTest, [0,0]);

   return <div>Mouse x:{x} y:{y}</div>;
}
```

## Considerações finais

Não foi falado muito sobre os **Outros Hooks**, mas podemos ver a listagem no ínício deste artigo. Mais sobre os **Hooks**, podem ser vistos na [documentação oficial](https://pt-br.reactjs.org/docs/hooks-intro.html) e em próximos artigos.


React - Hooks


Na versão [16.3.0](https://github.com/facebook/react/releases/tag/v16.3.0), que foi lançada em 29 de março de 2018, teve a adição de novos métodos para o ciclo de vida dos componentes e nova API.

## Métodos de ciclo de vida

No ciclo de vida dos componentes existem métodos para controlarmos o fluxo de montar, atualizar e desmontar cada elemento. E com essa versão do **React**, três métodos estão sendo depreciados: **componentWillMount**, **componentWillReceiveProps**, e **componentWillUpdate**. E foram adicionados dois novos métodos:

- **getDerivedStateFromProps** – adicionado como uma alternativa mais segura do método **componentWillReceiveProps**. Executado tanto na inicialização do componente quanto na sua atualização de propriedades e deve retornar as alterações no estado do componente baseada nas propriedades ou nulo.
- **getSnapshotBeforeUpdate** – adicionado para oferecer suporte à leitura segura de propriedades. Todo valor retornado por esse método é enviado ao **componentDidUpdate** que é o ciclo executado posteriormente.

## Context API

Sempre existiu uma **Context API**, mas era instável e com diversos problemas relacionados à performance. Eu particularmente já usava para uma questão de tema e gostei muito da estabilide que veio nessa versão.

Ao compartilhar informações entre componentes totalmente desconexos você terá que utilizar a arquitetura flux com **Redux**. Com a nova **Context API** conseguimos facilmente repassar informações de qualquer tipo entre diversos componentes do **React**.

Precisaremos ver 3 coisas: **React.createContext**, **Provider** e **Consumer**.

Abaixo, temos o componente filho **Title** e ainda não estamos usando a nova API de contexto.

```
class App extends Component {
  state = {
    ttile: 'Esse é um título'
  }

  render() {
    const { title } = this.state;
    return (
      {tenant &&
        <div className="container">
          <Title />
        </div>
      }
    );
  }
}
```

Vamos começar criando uma variável de contexto com o comando **React.createContext** passando como parâmetro o valor padrão quando nenhum valor existir nessa variável.

```
const ExampleContext = React.createContext('example');
```

A variável **ExampleContext** já pode ser considerada uma variável de contexto. Para alterar o seu valor, precisamos utilizar um componente chamado **Provider** que pertence à essa variável:

```
render() {
  const { title } = this.state;
  return (
    <ExampleContext.Provider value={title}>
      {title &&
        <div className="container">
          <Title />
        </div>
      }
    </ExampleContext.Provider>
  );
}
```

Assim, criamos um **ExampleContext.Provider** com uma única propriedade chamada value que é responsável por prover o valor da variável de contexto.

Agora o componente **Title**, consome o **ExampleContext**:

```
function Title() {
  return (
    <ExampleContext.Consumer>
      {title => (
        <h1>{title}</h1>
      )}
    </ExampleContext.Consumer>
  );
}
```

Com o **ThemeContext.Consumer** podemos utilizar esses dados e trabalhar com uma técnica chamada [render props](https://reactjs.org/docs/render-props.html).

Sendo assim, você não vai mais precisar utilizar o **Redux** sempre que precisar compartilhar informações entre componentes, mas vale lembrar que a arquitetura **Flux** é muito mais do que simplesmente compartilhamento de dados, tem a ver com estrutura, com fluxo de informações e arquitetura dos dados da aplicação.

Para retornar o valor padrão que informamos na criação da variável **ExampleContext**, o componente não deverá possuir um **Provedor** correspondente acima dele na árvore. Isso pode ser útil para testar componentes isoladamente sem envolvê-los.

```
render() {
  const { title } = this.state;
  return (
    <div className="container">
      <Title />
    </div>
  );
}

// Saída: example
```

Mais pode ser visto na [documentação oficial](https://reactjs.org/docs/context.html).

## Considerações finais

Então vamos continuar precisando de um gerenciamento de estado mais complexo como o **Redux** e temos a API de contexto quando for necessário compartilhar algumas informações entre componentes.

Agora é ficar ligado nos novos métodos e prestar atenção nos que foram depreciados. A biblioteca está evoluindo muito bem e vamos botar a mão na massa.


React - Ciclo de vida e context API

A versão [16.0.0](https://github.com/facebook/react/releases/tag/v16.0.0), foi lançado em 26 de setembro de 2017, e trouxe mudanças significativas até o momento.

## Polêmica com a licença

Por um período os desenvolvedores ficaram preocupados com a ideia da biblioteca ter adotado a licença BSD+Patents. Tudo ficou na paz, quando o **React 16** foi disponível sob a licença MIT. A versão 15.6.2 também foi publicado com essa licença, para que não fosse preciso que as aplicações fossem atualizadas imediatamente.

## Novo tamanho

Agora mesmo com novas funcionalidades, o tamanho diminuiu cerca de 32%, se comparado com a versão 15.6.1.

**Versão 15**

- react - 20.7kb (6.9kb com gzip)
- react-dom - 141kb (42.9kb com gzip)
- react + react-dom - 161.7 kb (49.8 kb com gzip)

**Versão 16**

- react - 5.3kb (2.2kb com gzip)
- react-dom - 103.7kb (32.6kb com gzip)
- react + react-dom - 109 kb (34.8 kb com gzip)

## Tratamento de erros

Antes tínhamos o problema que ao ter um erro durante a renderização, toda a árvore de componentes era desmontada. Agora é possível capturar os erros e substituir o componente. Quem não gosta de um try-catch? :)

Temos então, o novo método **componentDidCatch**, que irá informar o erro para que possamos tratar com facilidade. Identificando um erro, podemos tratar no método **render**.

```
componentDidCatch(error, info) {
  this.setState({ ...state, hasError: true });
  // E você também tem 2 paramêtros para utilizar
  console.log(error); // o erro em si
  console.log(info); // contém o Component Stack
}

render() {
  if (this.state.hasError) {
    return <h1>Deu algo errado</h1>;
  }
  else {
    // retornando o componente
    ...
  }
}
```

Para mais detalhes, confira o artigo oficial sobre o [tratamento de erros no React 16](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).

## Novos tipos de retorno de renderização

Ao trabalhar com **React**, o método **render** sempre deve retornar um único elemento. Querendo retonar uma lista de elementos, você deve criar um **container** para eles.

Agora você pode retornar um **Array** de elementos. Por ser um Array, você ainda precisará adicionar o atributo **key** aos elementos.

```
render() {
  return [
    <li key="item1">item 1</li>,
    <li key="item2">item 2</li>,
    <li key="item3">item 3</li>,
  ];
}
```

E também é possível retornar uma simples **String**:

```
render() {
  return 'Meu nome é Hemerson';
}
```

## Portals

Agora é possível inserir um elemento filho em um local diferente no DOM, fora da sua árvore principal.

Exemplo:

```
<body>
  <div id="main"></div>
  <div id="modal"></div>
<body>
```

Com **Portals**, tendo um componente na div **main**, será possivel pegar este componente e renderizá-lo na div **modal**.

Tendo um elemento que irá aparecer na página e reaparecer ao abrir uma modal, seria necessário chamar o componente em dois lugares (na página e na modal) e passar as propriedades para ele. Com **Portals** basta indicar o elemento que quer usar e onde quer exibí-lo. Querendo alterar alguma propriedade passada para o componente, só será preciso alterar em um lugar.

Mais detalhes na [documentação](https://reactjs.org/docs/portals.html);

## Renderização no lado do servidor

Graças a reescrita, a renderização no lado do servidor ficou muito mais rápida. E agora com suporte a **streaming**, sendo possível enviar os dados de forma melhor e mais ágil para o navegador.

Nesse artigo, pode ser visto as [melhorias no SSR](https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67).

## Atributos personalizados

Atributos informados no HTML ou SVG que não fossem reconhecidos eram ignorados. Agora os mesmos são mantidos.

```

<div example="test" />


<div />


<div example="test" />
```

## Nova arquitetura

Agora temos uma reescrita na arquitetura central da biblioteca, sendo conhecida como **Fiber**. O mesmo é responsável pela maioria dos novos recursos do React 16.

Uma área que está tendo um bom foco é a renderização assíncrona, tendo uma estratégia para programar cooperativamente a renderização, entregando periodicamente a execução ao navegador. Com a renderização assíncrona, as aplicações são mais responsivas porque o React evita o bloqueio da árvore principal. Nessa versão 16.0.0 não foi ativado nenhum recurso assíncrono, para facilitar a migração para essa versão.

Confira um exemplo de problema de [renderização assíncrona](https://twitter.com/acdlite/status/909926793536094209?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E909926793536094209&ref_url=https%3A%2F%2Freactjs.org%2Fblog%2F2017%2F09%2F26%2Freact-v16.0.html).

## Depreciações, mudanças, empacotamento e requisitos

### Depreciações

Para hidratar um container renderizado pelo servidor agora tem uma API explicita. Renderizando o HTML pelo servidor, use **ReactDOM.hydrate** ao invés de **ReactDOM.render**. Use **ReactDOM.render** se renderizar pelo lado do cliente.

O suporte ao **React Addons** foi descontinuado e com exceção do **react-addons-perf** que terá uma versão nova, os outros addons não serão atualizados. **react-addons-perf** não funciona no React 16, e é encorajado usar as [ferramentas do navegador para medir performance](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab).

### Mudanças

O React 16 depende dos tipos de coleção **Map** e **Set**. Se você precisa dar suporte para navegadores e dispositivos antigos que não suportam nativamente (por exemplo, IE <11) ou que tenham implementações não compatíveis (por exemplo, IE 11), será necessário incluir um polyfill na aplicação, como **core-js** ou **babel-polyfill**. Confira mais [sobre o assunto](https://reactjs.org/docs/javascript-environment-requirements.html).

Algumas mudanças que podem causar quebras em relação às versões anteriores:

- **ReactDOM.render** e **ReactDOM.unstable_renderIntoContainer** agora retornam **null** se forem chamados de dentro de um método do ciclo de vida do componente. Para contornar isso, você pode usar **portals** ou **refs**.
- Chamar **setState** com **null** não dispara mais atualizações
- Chamar **setState** diretamente dentro de **render** sempre causa atualizações.
- **Callbacks** de **setState** agora são disparados após **componentDidMount** ou **componentDidUpdate**.
- Ao trocar **<A />** por **<B />**, **B.componentWillMount** agora vai sempre acontecer antes de **A.componentWillUnmount**. Antes, **A.componentWillUnmount** podia inicializar primeiro em certos casos.
- Antes, mudar a referência de um componente sempre iria desmontar a referência antes que o renderização do componente fosse chamada. Agora, a referência é alterada depois, quando aplicadas as mudanças no DOM.
- **componentDidUpdate** não recebe mais o parâmetro **prevContext**.
- O renderizador superficial não é mais chamado no **componentDidUpdate** porque as referências DOM não estão disponíveis. Isso também o torna consistente com **componentDidMount**(que também não é chamado nas versões anteriores).

## Empacotamento

Agora não existe mais **react/lib/** e **react-dom/lib/**. Os nomes/caminhos mudaram para enfatizar a diferença entre os **builds** de produção e desenvolvimento:

- react/dist/react.js → react/umd/react.development.js
- react/dist/react.min.js → react/umd/react.production.min.js
- react-dom/dist/react-dom.js → react-dom/umd/react-dom.development.js
- react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js

## Considerações finais

Muitas mudanças boas vieram e o React continua sendo muito usado nas aplicações. Pode conferir o artigo completo no blog oficial sobre a versão [16.0.0](https://reactjs.org/blog/2017/09/26/react-v16.0.html).

React - Mudanças na versão 16


A biblioteca que é largamente usada no desenvolvimento front-end já está na versão [16.8.6](https://github.com/facebook/react/releases/tag/v16.8.6), que foi lançada em 27 de março deste ano.

Para quem está começando com o **React**, vale saber que teve algumas mudanças significativas a partir da versão [16.0.0](https://github.com/facebook/react/releases/tag/v16.0.0), lançada em 26 de setembro de 2017 (veremos sobre isso no próximo artigo).

Antes de tudo, vale saber da linha do tempo.

## A Linha do tempo

Há exatos seis anos (29 de maio de 2013), uma biblioteca JavaScript de código aberto, que foi desenvolvida pelo **Facebook**, era lançada. Sendo óbvio, estou falando da biblioteca **React**. Para ser mais preciso, a pessoa que está por trás dessa criação é [Jordan Walke](https://twitter.com/jordwalke) (Engenheiro de software na empresa Facebook).

Tivemos o lançamento do [React Native](https://facebook.github.io/react-native/), em 26 de março de 2015.

Em 18 de abril de 2017, o Facebook anunciou o [React Fiber](https://github.com/acdlite/react-fiber-architecture), um novo algoritmo `core` da biblioteca. Com o propósito de se tornar a base de qualquer melhoria futura e desenvolvimento de recursos da biblioteca **React**.

No dia seguinte (19 de abril de 2017), foi lançado o [React 360](https://facebook.github.io/react-360/), para o público. Isso permitiu aos desenvolvedores que utilizam React, saltassem para o desenvolvimento de VR (Realidade Virtual).

Por fim, temos a versão 16 e 16.8.6 da biblioteca, como mencionado no início desse artigo. Sem esquecer que na versão 16.8, temos o suporte estável na utilização de Hooks, que veremos nos próximos artigos.

## A Biblioteca

A biblioteca ganhou grande popularidade por ter o foco na criação de componentes de interface, ter uma grande empresa por trás, usar uma técnica que agradou à todos (Virtual-Dom) e ter uma pequena curva de aprendizado para quem já está acostumando com **JavaScript**.

Abaixo, também veremos sobre a especificação JSX e micro bibliotecas que auxiliam o desenvolvimento com **React**.

### Virtual-DOM

É uma representação em JavaScript puro do DOM. Sendo assim, você manipula esse objeto e não o DOM de verdade. Quando o objeto virtual é atualizado, um algoritmo calcula a diferença entre o virtual-dom e o DOM real, alterando então os trechos do DOM.

É mais produtivo criar os elementos DOM no JavaScript, processar eles e aplicá-los de uma só vez na arvore DOM do navegador. A biblioteca veio para facilitar isso, entre outras coisas.

### JSX

JSX é uma especificação de sintaxe para escrever JavaScript como se estivéssemos escrevendo XML.

```
cont Example = React.createClass({
  render: function() {
    return <div>Olá, {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Example name="Hemerson" />,
  document.getElementById('main')
);
```

Sem JSX:

```
var Example = React.createClass({
  displayName: 'Hello',
  render: function() {
    return React.createElement("div", null, "Olá, ", this.props.name);
  }
});

ReactDOM.render(
  React.createElement(Example, {name: "Hemerson"}),
  document.getElementById('main')
);
```

### Micro-bibliotecas

Sendo apenas uma biblioteca, não seria possível criar aplicações complexas, apenas com **React**. Por isso, vamos falar um pouco nas micro-bibliotecas que ajudam muito no desenvolvimento.

As mais utilizadas nos projetos são [react-router](https://reacttraining.com/react-router/) e [react-redux](https://react-redux.js.org/). Com elas, já é capaz de criar uma projeto SPA complexo.

Cada vez mais o caminho tem sido separar as responsabilidades, por uma questão de manutenção, peso e mais.

Nesse [link](https://github.com/enaqx/awesome-react), temos muitas micro-bibliotecas para nos ajudar.

## Considerações finais

Tenho gostado de utilizar o **React**, pela liberdade no desenvolvimento de componentes e pela estabilidade e flexibilidade da ferramenta. Nos dias de hoje, podemos usar no navegador, servidor e aplicativos móveis. A comunidade está empenhada no crescimento e melhorias. A cada ano temos evoluções consideráveis da biblioteca e ferramentas que utilizamos como suporte no desenvolvimento das aplicações.


Começando com React

react-native


Dando continuidade ao artigo **Criando Layouts**. Na [parte 1](/tecnologia/artigos/react-native/react-native-criando-layouts-parte-1/), vimos o **Stack layout** e agora vamos continuar vendo os tipos de layout que conseguimos criar no **React native**.

## Grid Layout

O **React Native** não vem com um sistema de layout de grade, mas o **flexbox** é flexível o suficiente para criar um. Ao utilizar o que já vimos até agora, podemos recriar um **grid layout** usando o **flexbox**. Ex:

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-grid-layout.png)

```
import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

export default class GridLayout extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          <View style={[styles.box, styles.box2]}></View>
          <View style={[styles.box, styles.box3]}></View>
          <View style={[styles.box, styles.two]}></View>
        </View>

        <View style={styles.row}>
          <View style={[styles.box, styles.two]}></View>
          <View style={[styles.box, styles.box2]}></View>
          <View style={[styles.box, styles.box3]}></View>
        </View>

        <View style={styles.row}>
          <View style={[styles.box, styles.box2]}></View>
          <View style={[styles.box, styles.two]}></View>
          <View style={[styles.box, styles.box3]}></View>
        </View>

        <View style={styles.row}>
          <View style={[styles.box, styles.box2]}></View>
          <View style={[styles.box]}></View>
          <View style={[styles.box, styles.box3]}></View>
        </View>

        <View style={styles.row}>
          <View style={[styles.box, styles.box2]}></View>
          <View style={[styles.box]}></View>
        </View>

        <View style={styles.row}>
          <View style={[styles.box]}></View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10
  },
  box: {
    flex: 1,
    height: 100,
    backgroundColor: '#333',
  },
  box2: { backgroundColor: 'green' },
  box3: { backgroundColor: 'orange' },
  two: { flex: 2 }
});
```

No código acima, você pode ver que estamos simulando o que costumamos fazer em uma estrutura de grade no **CSS**. Cada linha com uma exibição separada e os itens da grade estão dentro dela. O valor 1 na propriedade `flex` é aplicado a cada item para que eles compartilhem igualmente o espaço disponível em cada linha. Mas para itens que precisam ocupar um espaço maior, um valor `flex` maior é aplicado. Isso ajusta automaticamente a largura dos outros itens para acomodar todos os itens.

Se você quiser adicionar espaços entre cada item de uma linha, você pode adicionar um preenchimento a cada um deles e criar uma caixa dentro de cada um. Ex:

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-grid-layout-with-space-between.png)

## Absolute Layout

O **React Native** só suporta os valores `absolute`e `relative`, para a propriedade `position`. Isso não limita muito, porque sempre podemos combiná-los com o **flexbox** para posicionar os diferentes elementos em qualquer lugar que desejarmos. Ex:

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-positioning.png)

Podemos conseguir isso facilmente se tivermos um comando total sobre os valores de posicionamento disponíveis no navegador. Mas, como estamos no **React Native**, precisamos pensar primeiro no modo **flexbox** e usar o posicionamento **CSS** para as caixas.

Usando o **flexbox**, isso pode ser conseguido de duas maneiras. Você pode usar `row` ou `column`para a propriedade `flexDirection` no elemento pai. Usando o valor `row` no `flexDirection`, a tela seja dividida em três colunas. A primeira coluna conterá a caixa vermelha, a segunda coluna conterá as caixas azul, cinza e verde e a terceira conterá as caixas amarela e roxa.

```
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

export default class Positioning extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.left}>
          <View style={[styles.box, styles.bigRedBox]}>
          </View>
        </View>
        <View style={styles.middle}>
          <View style={[styles.box, styles.bigBlueBox]}>
            <View style={[styles.innerBox, styles.blackBox]}></View>
          </View>
          <View style={[styles.bigGrayBox]}></View>
          <View style={[styles.box, styles.bigGreenBox]}>
            <View style={[styles.innerBox, styles.blackBox]}></View>
          </View>
        </View>
        <View style={styles.right}>
          <View style={[styles.box, styles.bigYellowBox]}>
            <View style={[styles.innerBox, styles.blackBox]}></View>
          </View>
          <View style={[styles.innerBox, styles.purpleBox]}></View>
        </View>
      </View>
    );
  }
}
```

A primeira coluna tem apenas a caixa vermelha, basta definir a propriedade `justifyContent` com `center` no elemento pai que define a coluna. Como já vimos, o o valor `default` do `flexDirection` é `column`. Isto significa que se você definir `justifyContent` como `center`, os elementos filhos serão alinhados no centro do eixo Y.

A segunda coluna tem basicamente a mesma ideia que a primeira, só que desta vez não queremos alinhar todas as caixas ao centro. O que queremos é que eles tenham espaços iguais entre eles. A propriedade `justifyContent` com valor `space-between`, resolve isso. Mas ao mesmo tempo, também queremos centralizar os elementos filhos no eixo x, então nós usamos `alignItems` com valor `center`.

A única parte complicada aqui é que você não deve aplicar nenhuma propriedade `width` a caixa cinza porque queremos que ele ocupe todo o espaço do elemento pai. Uma vez que não aplicamos a propriedade `width`, devemos usar a propriedade `alignSelf` com valor `stretch`, para que a caixa cinza ocupe a largura total do seu elemento pai.

Em seguida, para posicionar a pequena caixa preta um pouco longe de sua posição relativa, usamos `position` com o valor `relative` e depois acrescentamos as propriedades `top` e `left` com os valores que queremos, porque sua posição relativa está em torno do canto superior esquerdo de seu pai.

Na pequena caixa roxa, colocamos a propriedade `position` com o valor `absolute` e as propriedades `bottom` e `right`, para alinhá-la ao canto inferior direito de seu pai. Isso funciona porque elementos posicionados com `position: absolute` no **React Native** estão vinculados aos seus pais.

A terceira coluna basicamente aplica a mesma ideia.

```
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  left: {
    flex: 1,
    justifyContent: 'center',
  },
  middle: {
    flex: 5,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  right: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#f2f2f2',
  },
  bigGreenBox: { backgroundColor: 'green' },
  bigRedBox: { backgroundColor: 'red' },
  bigYellowBox: { backgroundColor: 'yellow' },
  bigGrayBox: {
    height: 100,
    alignSelf: 'stretch',
    backgroundColor: '#ccc'
  },
  innerBox: {
    width: 20,
    height: 20,
  },
  redBox: {
    position: 'relative',
    backgroundColor: 'red',
    top: 10,
    left: 10
  },
  blueBox: {
    position: 'absolute',
    backgroundColor: 'blue',
    top: 10,
    right: 10
  },
  purpleBox: {
    position: 'absolute',
    backgroundColor: 'purple',
    bottom: 10,
    right: 10
  },
  blackBox: {
    position: 'relative',
    backgroundColor: 'black',
  }
});
```

## Header e footer fixos.

Para isso, precisamos usar o componente de `ScrollView`, se o conteúdo for maior que a altura do elemento, o **React Native** gerará automaticamente uma barra de rolagem vertical. Isso nos permite adicionar `marginTop` e `marginBottom` no elemento com o conteúdo principal, para que o `header` e o `footer` fixos não obstruam o conteúdo principal. Os valores de `left` e `right` do `header` e `footer` estão configurados com 0, para que eles ocupem a largura total do dispositivo.

```
import React, { Component } from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';

export default class FixedHeaderFooter extends Component {
  render() {
      return (
      <View style={styles.container}>
        <View style={[styles.header]}></View>
        <ScrollView>
          <View style={[styles.content]}>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
          </View>
        </ScrollView>
        <View style={[styles.footer]}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center'
  },
  header: {
    height: 40,
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: 'red,
    zIndex: 10
  },
  content: {
    alignItems: 'center',
    marginTop: 50,
    marginBottom: 40
  },
  footer: {
    height: 40,
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'blue'
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'gray',
    marginBottom: 10
  }
});
```

## Conclusão

Vimos como usar o **Flexbox** do **React Native** para posicionar os elementos e criarmos os layouts. Espero que essas duas partes consigam te ajudar na tarefa de criação de layouts e que tenha ajudado a conhecer as propriedades mencionadas.

O repositório [nexus-react-native/04-how-to-create-layouts](https://github.com/descco-tools/nexus-react-native/blob/master/04-how-to-create-layouts/App.js), está a disposição para praticar. :)


React Native - Criando layouts - Parte 2


Para criar um layout no **React Native** vamos usar o **Flexbox**, mas nem todos os recursos que estão na [especificação do Flexbox](https://www.w3.org/TR/css-flexbox-1/), estão incluídos. :/

## Stack Layout

Esse layout na orientação vertical empilha elementos em cima uns dos outros, enquanto que para a orientação horizontal, os elementos são colocados lado a lado. Vejamos a orientação vertical:

```
import React, { Component } from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';

const { height } = Dimensions.get('window');
const boxCount = 3;
const boxHeight = height / boxCount;

export default class VerticalStackLayout extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.box, styles.box1]}></View>
        <View style={[styles.box, styles.box2]}></View>
        <View style={[styles.box, styles.box3]}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  box: { height: boxHeight },
  box1: { backgroundColor: 'red' },
  box2: { backgroundColor: 'blue' },
  box3: { backgroundColor: 'green' }
});
```

No elemento pai(container), usaremos a propriedade `flex`. O valor é a quantidade de espaço que ele ocupará. Sendo 1, isso significa que ele ocupará todo o espaço disponível, desde que o elemento não tenha irmãos.

A propriedade `flexDirection` permite que você especifique o eixo principal do layout. Por padrão, isso é definido como `column`. O valor de `flexDirection` sendo `column`, significa que os elementos filhos serão dispostos verticalmente (empilhados uns sobre os outros). Se o valor for `row`, significa que os filhos serão dispostos horizontalmente (lado a lado).

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-vertical-stack-layout-manual.png)

O exemplo acima mostra a maneira manual. O uso de `Dimensions` para calcular a largura ou a altura dos elementos falhará se o seu aplicativo suportar a orientação do dispositivo retrato e paisagem. Isso ocorre porque assim que o usuário virar seu dispositivo, a largura ou a altura que você calculou não serão atualizadas. Exemplo mudando a orientação:

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-vertical-stack-layout-manual-h.png)

O **Flexbox** faz a computação para você, se você fornecer os valores corretos. Para alcançar o mesmo layout acima, sem usar o `Dimensions`, tudo o que você precisa fazer é especificar `flex: 1` para todas as caixas, em vez de especificar o valor para a propriedade `height`:

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-vertical-stack-layout-flex.png)

```
box: {
  flex: 1
},
```

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-vertical-stack-layout-flex-h.png)

Agora podemos evoluir esse layout com o uso do `flex` nos elementos irmãos.

```
//header
box1: {
  flex: 1,
  backgroundColor: 'red',
},
//content
box2: {
  flex: 10,
  backgroundColor: 'blue',
},
//footer
box3: {
  flex: .5,
  backgroundColor: 'green',
}
```

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-vertical-stack-layout-header-content-footer.png)

Tenha em mente que se conteúdo interno for maior do que a altura máxima disponível, o resto do seu conteúdo será oculto. Se você espera que seu conteúdo ultrapasse esse limite, você pode usar o componente de `ScrollView`, incorporado para gerar automaticamente uma barra de rolagem vertical, como em uma página da web.

### Horizontal

Para implementar a orientação horizontal, basta mudar o `flexDirection` para `row`. Colocando o valor de `flex` do box novamente para 1, isso resulta em que 3 colunas ocuparam toda a tela.

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-horizontal-stack-layout.png)

```
container: {
  flex: 1,
  flexDirection: 'row',
},
box: { flex: 1 },
box1: { backgroundColor: 'red' },
box2: { backgroundColor: 'blue' },
box3: { backgroundColor: 'green' }
```

## Justificando o conteúdo

Se você deseja controlar a distribuição dos elementos filhos, é necessário utilizar a propriedade `justifyContent` no elemento pai.

```
container: {
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'flex-start',
},
box: { height: boxHeight },
box1: { backgroundColor: 'red' },
box2: { backgroundColor: 'blue' },
box3: { backgroundColor: 'green' }
```

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-justify-content.png)

Abaixo vamos ver os 5 valores possíveis que podem ser usados ​​com essa propriedade. Você não conseguirá ver nenhuma diferença se o valor da propriedade `flex` for 1, para cada um dos elementos filhos, porque eles ocupariam todo o espaço disponível.

- `flex-start`: os elementos filhos são alinhados em direção ao ponto de partida. Observe o fundo branco logo abaixo do último filho. É assim que você sabe que isso está sendo usado o **flex-start**.
- `flex-end`: os elementos filhos são alinhados em direção à linha final. Desta vez o espaço vazio estará no ponto de partida.
- `center`: os elementos filhos são colocados em direção ao centro. Desta vez, o espaço vazio é dividido igualmente entre o ponto inicial e final.
- `space-around`: os elementos filhos são distribuídos de modo que haveria espaço igual em cada um deles. Isso significa que os elementos na parte externa teriam menos espaço no lado externo e o espaço entre os dois filhos é duplicado.
- `space-between`: os elementos filhos são distribuídos de modo que haveria uma quantidade igual de espaço entre cada um deles.

Como você pode ter notado, cada um desses valores de estilo dependem da altura ou largura dos elementos filhos. Depende da largura, se `flexDirection` for `row` e na altura se `flexDirection` for `column`.

Por exemplo, `space-between` realmente não terá qualquer efeito em um **Stack layout vertical** se cada um dos elementos filhos estiver usando `flex` para controlar a altura. Isso ocorre porque não haverá mais espaço entre cada elemento para ocupar.

## Alinhando os itens

`justifyContent` e `alignItems` podem parecer como se estivessem fazendo o mesmo. Eles também compartilham três valores possíveis: `flex-start`, `flex-end` e `center`, com a adição do valor `stretch` na propriedade `alignItems`.

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-align-items-stretch.png)

A principal diferença entre `justifyContent` e `alignItems` é o eixo em que os elementos filhos são distribuídos. Como você vimos anteriormente, `justifyContent` sempre usa o eixo primário ao distribuir elementos filhos. Mas `alignItems` usa o eixo oposto ao primário.

Nós já sabemos que o eixo é determinado pelo `flexDirection` que foi definido. Então, se `flexDirection` for `row`, o eixo primário flui da esquerda para a direita. Isso significa que o eixo transversal irá fluir de cima para baixo. Por outro lado, se `flexDirection` é `column` que o eixo transversal irá fluir da esquerda para a direita.

Abaixo vamos ver alguns exemplos com `justifyContent` e `alignItems` implementados lado a lado com o `flexDirection` de `row`. O primeiro usa `justifyContent` enquanto o segundo usa `alignItems`.

- `flex-start`: o posicionamento dos elementos é o mesmo, por isso que a implementação de **alignItems** e **justifyContent**, são iguais.
- `flex-end`: agora começamos a ver uma diferença. Com **justifyContent**, os elementos filhos irão para o final da primeira linha, enquanto com **alignItems** os elementos filhos irão estar no início da última linha.
- `center`: tem a mesma ideia do resto dos valores que usamos até agora. Com **justifyContent**, os itens são centrados no eixo x enquanto com **alignItems**, os itens estão centrados no eixo y.
- `stretch`: use para que os elementos filhos se estendam para preencher o elemento pai. Este é o valor padrão para `alignItems`, portanto, especificar esse valor é opcional.

![Stack Layout Vertical](/assets/tecnologia/artigos/layout-align-items.png)

Abaixo temos o trecho de código usado nos exemplos acima. Basta alterar os valores para o `flexDirection`, `justifyContent` e `alignItems`:

```
import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

export default class AlignItems extends Component {
  render() {
    return (
      <View style={styles.wrapper}>
        <View style={styles.container}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
        <View style={styles.container2}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  container: {
    flex: .5,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    borderBottomWidth: 1,
    borderBottomColor: '#000'
  },
  container2: {
    flex: .5,
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  box: {
    width: 100,
    height: 100
  },
  box1: { backgroundColor: '#2196F3' },
  box2: { backgroundColor: '#8BC34A' },
  box3: { backgroundColor: '#e3aa1a' }
});
```

Se você quiser especificar o alinhamento de elementos filhos dentro de um elemento pai, você pode usar a propriedade `alignSelf`. Todos os valores possíveis de `alignItems` são aplicáveis ​​a esta propriedade. Então, por exemplo, você pode alinhar um único elemento à direita do seu elemento pai, enquanto todos os restantes estão alinhados à esquerda.

## Conclusão

Nessa primeira parte, implementamos o **Stack layout**. E na [segunda parte](/tecnologia/artigos/react-native/react-native-criando-layouts-parte-2/), vamos continuar vendo outros tipos de layout que podemos fazer.

O repositório [nexus-react-native/04-how-to-create-layouts](https://github.com/descco-tools/nexus-react-native/blob/master/04-how-to-create-layouts/App.js), está a disposição para praticar. :)


React Native - Criando layouts - Parte 1


A grande vantagem que o **React native** nos traz, é tornar único o código tanto para **Android**, quanto para **IOS**. Não só pensando nos dispositivos móveis, graças ao **React**, o código pode ser utilizado no desenvolvimento web. Mas quando chegamos na parte de estilização, podemos ter que nos acostumar e perceber que nessa parte a diferença do que estamos acostumados a ver no desenvolvimento web, é maior que o esperado.

## Cascading Style Sheets (CSS)

A princípio mexer com estilo no **React native**, parece ser bem simples. Podemos ver as regras de CSS e que diferente da web, onde as as mesmas são escritas em [kebab-case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles), utilizaremos a sintaxe com **CamelCase**.

O **React Native** utiliza o mecanismo de layout de [Yoga](https://yogalayout.com/), que implementa as especificações do flexbox e empresta nomes de regras CSS. Ex:

```
.text {
  font-family: Arial;
  font-size: 12px;
}
```

Que ficaria assim no **React native**:

```
const styles = StyleSheet.create({
  text: {
    fontFamily: "Arial",
    fontSize: 12,
  }
});
```

Isso faz com que a escrita do estilo seja muito familiar. Mas depois fica claro que o estilo no **React Native** é muito diferente do estilo na web. Nomes de regras e flexbox são as únicas coisas que o **CSS** e o estilo no **React Native** tem em comum.

## Escopo por componente

No navegador, o **CSS** tem o escopo a nível da página. Para uma aplicação web de uma única página, isso significa que cada folha de estilo afeta a aplicação inteira. As regras de estilos individuais são aplicadas aos elementos no **DOM**, sendo definidos dentro dos blocos dos seletores. Existem muitas maneiras diferentes de selecionar os elementos **DOM**.

Com o **React Native**, os estilos não tem efeito em seu aplicação, a menos que você os passe especificamente aos seus componentes. Não existe um conceito de `seletor` porque os componentes e os estilos estão bem acoplados. Isso significa que você pode usar o mesmo nome para estilos em várias folhas de estilo sem causar efeitos colaterais:

```
const headerStyles = StyleSheet.create({
  container: {
    backgroundColor: 'red'
  }
});
const footerStyles = StyleSheet.create({
  container: {
    backgroundColor: 'red'
  }
});
<Header style={headerStyles.container} />
<Footer style={footerStyles.container} />
```

## Herança

Os estilos não são herdados por padrão. Na web, os elementos **DOM** herdam alguns dos estilos dos pais por padrão. Estes são principalmente estilos relacionados a texto, e isso significa que você pode fazer:

```
<style>
  .container {
    font-family: Arial;
    font-size: 12px;
  }
</style>
<div class="container">
  <h1>Title</h1>
  <div>
    <p>Test with <strong>text</strong></p>
  </div>
</div>
```

Que é equivalente a:

```
const styles = StyleSheet.create({
  container: {
    fontFamily: 'Arial',
    fontSize: 12,
  },
  bold: {
    fontWeight: '700',
  }
});
<View>
  <Text style={styles.container}>Title</Text>
  <View>
    <Text style={styles.container}>Test with <Text style={styles.bold}>text</Text></Text>
  </View>
</View>
```

Os componentes podem para passar propriedades de estilo para os componentes filho. É o caso do `<Text />` do **React Native**. Um componente `<Text />` que é filho de outro componente `<Text />,` herdará seus estilos:

```
<Text style={styles.text}>
  Text
  <Text style={{fontWeight: bold}}>Text</Text>
</Text>
```

O compartilhamento de estilos de texto com `<Text />` tem uso limitado, pois `<Text />` não permite que a maioria dos outros componentes **React Native** sejam seus filhos.

## Lógica no estilo

O **CSS** é muito limitado na sua capacidade de calcular valores. Existem algumas funções que você pode usar, como `calc()` e as variáveis **CSS** são suportadas em navegadores modernos. Além disso, a lógica para calcular estilos dinamicamente precisa ocorrer em outros lugares, sendo compilado com pré-processadores (como SASS).

No **React Native**, os estilos são definidos em **JavaScript**. Tendo uma linguagem de programação nos dá uma série de possibilidades.

Assim, temos novos padrões de estilo. Esse é um [repositório que vale a pena ver](https://github.com/MicheleBertoli/css-in-js).

## Style e StyleSheet

Os estilos só podem ser transmitidos diretamente para um componente, da mesma forma que você passaria estilos para elementos **DOM** através do atributo `style`:

```
<p style="color: blue;">text</p>
```

Achou que iria se livrar do estilo `inline`? XD

A documentação do **React native** nos informar mais sobre o [style](https://facebook.github.io/react-native/docs/style.html).

O que pode ser novo para você é o [StyleSheet](https://facebook.github.io/react-native/docs/stylesheet.html), que cria uma folha de estilo a partir de um objeto de estilo, tornando possível se referir a ele por **ID** ao invés de criar um novo objeto de estilo sempre.

## Gerenciando estilos

Pra mim, essa é a parte mais critica. Antes de recorrer a módulos de terceiros, uma escolha minha e um conselho é explorar as possibilidades ao utilizar o **React native**, principalmente se a ideia é ir para a linha **universal** (nativo e web).

### Mixins

Como utilizamos no pré-processador **SASS** (meu preferido.. :D), os mixins são uma boa saída para reaproveitamento de código e organização:

```
export const errorText = {
  fontWeight: "700",
  color: "red",
};
```

```
import { errorText } from "textMixins";

export default StyleSheet.create({
  formErrorMessage: {
    ...errorText,
    fontSize: 22,
  },
  fieldErrorMessage: {
    ...errorText,
    fontSize: 18,
  },
});
```

### Estilo global

Como em muitas metodologias de **CSS**, temos uma boa organização definido o estilo primitivo e o reutilizando em suas folhas de estilo. Ex:

```
export const COLOR_BLUE = "blue";
export const COLOR_RED = "red";
// ...

export default StyleSheet.create({
  blue: { color: COLOR_BLUE },
  red: { color: COLOR_RED },
  // ...
  bg_blue: { backgroundColor: COLOR_BLUE },
  bg_red: { backgroundColor: COLOR_RED },
  // ...
  o_100: { opacity: 1 },
  o_90: { opacity: 0.9 },
  o_80: { opacity: 0.8 },
  // ...
});
```

Podendo ser usado assim:

```
import styles from "styles";

class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.bg_red}>
        <Text style={[styles.blue, styles.o_90]}>Text</Text>
      </View>
    );
  }
}
```

Ou assim:

```
import { COLOR_BLUE, COLOR_RED } from "styles";

class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Text</Text>
      </View>
    );
  }
}

const styles = {
  container: {
    backgroundColor: COLOR_BLUE,
  },
  text: {
    color: COLOR_RED,
  }
}
```

Teste e busque a melhor solução para o seu projeto. Aqui veremos só algumas possibilidades. Então descubra o seu problema e comece a pensar na solução para a arquitetura.

Muitas vezes, mesmo uma pequena mudança na forma como um componente funciona, significa que os nomes dos estilos não se encaixam. E os problemas podem aparecer e prejudicar o projeto. Então gaste um tempo, testando a necessidade do projeto e a melhor solução de organização e utilização.

## Funções auxiliares

Estilos em JavaScript significa que você obtém o poder de uma linguagem de programação em vez de uma linguagem de estilo simples.

```
// font https://gist.github.com/samueljmurray/eeb9495146ef0aad24f534cecd17487c
import { Dimensions } from "react-native";

// Height
const screenSizes = [
  {
    name: "xs",
    height: 568
  },
  {
    name: "s",
    height: 667
  }
];

// Example usage:
// screenSize({xs: 8, s: 12}, 16)
// screenSize({s: 12}, 16)
// screenSize({xs: 8}, 16)
export function screenSize(screenSizeOptions, defaultValue) {
  const matchedScreenSizes = screenSizes.filter((screenSize) => {
    return Dimensions.get("window").height < screenSize.height;
  });

  let value;
  const hasScreenSizeOption = matchedScreenSizes.some((matchedScreenSize) => {
    if (screenSizeOptions.hasOwnProperty(matchedScreenSize.name)) {
      value = screenSizeOptions[matchedScreenSize.name];
      return true;
    } else {
      return false;
    }
  });
  if (!hasScreenSizeOption) {
    value = defaultValue;
  }
  return value;

```

## Passando contexto para o estilo

Um componente `<Button />`, por exemplo, pode aceitar uma propriedade de cor (string) e estilo quando estiver desabilitado (booleano), que afetam o seu estilo:

```
export default StyleSheet.create({
  button: {
    backgroundColor: "red",
  },
  buttonDisabled: {
    backgroundColor: "gray",
  },
});
```

```
import styles from "buttonStyles";

class Button extends React.Component {
  render() {
    return (
      <View style={[
        styles.button,
        this.props.color && {
          backgroundColor: this.props.color
        },
        this.props.disabled && styles.buttonDisabled,
       ]}>
        // ...
      </View>
    );
  }
}
```

O problema do exemplo acima, que pode ficar muita lógica misturada (estilo e funcionalidade do componente). Então, vamos deixar a lógica de estilo no seu devido lugar.

```
export default (props) => StyleSheet.create({
  button: StyleSheet.flatten([
    {
      backgroundColor: "red",
    },
    props.color && {
      backgroundColor: props.color,
    },
    props.disabled && {
      backgroundColor: "gray",
    },
  ]),
});
```

```
import styles from "buttonStyles";

class Button extends React.Component {
  render() {
    const s = styles(this.props);
    return (
      <View style={s.button}>
        // ...
      </View>
    );
  }
}
```

Mais um exemplo, sem **StyleSheet**:

```
class Button extends React.Component {
  render() {
    const s = styles(this.props);
    return (
      <View style={s.button}>
        // ...
      </View>
    );
  }
}

const styles = props => ({
  button: {
    backgroundColor: props.disabled ? "gray": (props.color ? props.color : "red"),
  },
});
```

Ficou mais complexo. Simplificando ficaria assim:

```
class Button extends React.Component {
  render() {
    const { color, disabled } = this.props;
    const buttonStyle = disabled ? styles.button({ color }) : styles.buttonDisabled;
    return (
      <View style={buttonStyle}>
        // ...
      </View>
    );
  }
}

const styles = {
  button: props => ({
    backgroundColor: props.color ? props.color : "red",
  },
  buttonDisabled: {
    backgroundColor: "gray",
  }
});
```

Esses foram exemplos que seguirmos uma linha antes de avaliar bem o projeto, pode ficar muito complexo, independente do caminho escolhido. O melhor caminho é ver na prática e testar as possibilidades que conseguir.

## Conclusão

Testando as abordagens ao estilo no **React native**, podemos ver a flexibilidade e também muda a forma como pensamos sobre como os estilos podem ser definidos em aplicações baseadas em componentes **JavaScript**, não apenas no **React Native**, mas também na web.

Tem muitas bibliotecas para testar:

- [Styled components](https://github.com/styled-components/styled-components)
- [Extended StyleSheets for React Native](https://github.com/vitalets/react-native-extended-stylesheet)
- [Further - algebraic style composition for functional UIs](https://github.com/jongold/further)

Então, vamos testar!


React Native - Estilização

Se está desenvolvendo uma aplicação com **React native**, você vai querer personalizar o mesmo. Então, vamos ver como colocar a tela inicial e os ícones do aplicativo como queremos.

Primeiro temos que criar o nosso projeto.

```
react-native init helloworld
```

## Criando as images

Existem dispositivos de todas as formas e tamanhos, portanto, nossas imagens de tela inicial também precisam ter uma variedade de tamanhos. O Phonegap tem um guia dos tamanhos de [telas](https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes) e [ícones](https://github.com/phonegap/phonegap/wiki/App-Icon-Sizes) que o seu aplicativo deve ter.

Usaremos o [Image Gorilla da Ape Tools](https://apetools.webprofusion.com/#/tools/imagegorilla) para gerar todos os tamanhos necessários para a nossa tela inicial. Na ferramenta use uma imagem PNG sem transparência de 2048x2048 para a tela de abertura e uma imagem PNG de 1024x1024 para o ícone.

![Tela de abertura](/assets/tecnologia/artigos/splash-screen.jpg)
![Ícone](/assets/tecnologia/artigos/icon-app.jpg)

Assim que o processo do Image Gorilla seja concluído, baixe o zio e extraia. Você verá vários diretórios, só estamos interessados ​​nos diretórios Android e IOS.

### Adicionando no IOS

Abra o arquivo `ios/helloworld.xcodeproj`, com o **XCode**.

Após o processo de indexação, selecione o projeto no menu esquerdo, que será mostrado o conteúdo para a edição. Role para baixo até achar a opção `Launch Images Source` e clique em `Use Asset Catalog...`.

![Tela XCode](/assets/tecnologia/artigos/splash-screen-01.jpg)

Na caixa de diálogo que aparece clique em `Migrate`. Em seguida, no campo **Launch Screen File**, exclua **LaunchScreen** e deixe o campo em branco. Você também pode excluir o **LaunchScreen.xib** do navegador à esquerda.

![Tela XCode](/assets/tecnologia/artigos/splash-screen-02.jpg)

Dentro da pasta `Imagens.xcassets`, existe agora uma opção **LaunchImage** dentro dela. Aqui é onde vamos arrastar e soltar as imagens IOS geradas.

![Tela XCode](/assets/tecnologia/artigos/splash-screen-03.jpg)

Agora, executando `react-native run-ios`, já é possível ver a nossa tela de abertura nova e o ícone.

![Tela XCode](/assets/tecnologia/artigos/splash-screen-04.jpg)
![Tela XCode](/assets/tecnologia/artigos/splash-screen-05.jpg)

### Adicionando no Android

As próximas dicas tem como base o artigo [Splash Screens the Right Way](https://www.bignerdranch.com/blog/splash-screens-the-right-way/).

No Android, primeiro copie os seguintes diretórios das imagens geradas:

- drawable-hdpi
- drawable-mdpi
- drawable-xhdpi
- drawable-xxhdpi

e cole no diretório `android/app/src/main/res`.

Abra o projeto no Android Studio (sempre abro o arquivo `android/build.gradle`, que assim ele já verifica as configurações do gradle). Em `app/res/drawable`, crie um novo `Drawable resource file`. Nomeie esse arquivo `project_splash`.

![Tela Android Studio](/assets/tecnologia/artigos/splash-screen-06.jpg)

Dentro do arquivo cole o seguinte:

```
// project_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <bitmap
      android:gravity="fill"
      android:src="@drawable/screen"/>
  </item>
</selector>
```

A exibição da tela de abertura deve estar pronta imediatamente, mesmo antes de poder inflar um arquivo de layout em sua atividade de `splash`.

Então você não usará um arquivo de layout. Em vez disso, especifique o plano de fundo da tela inicial como o fundo do tema da atividade.

Agora precisamos adicionar um novo estilo no arquivo `android/app/res/values/styles.xml`, resultando no seguinte arquivo.

```
// styles.xml
<resources>
  
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    
  </style>
  <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@drawable/project_splash</item>
  </style>
</resources>
```

Agora precisamos fazer algumas atualizações **AndroidManifest.xml**. Vamos criar uma nova atividade com o nome de **.SplashActivity**.

Basicamente, mude o nome da atividade existente e adicione `android:theme="@style/SplashTheme`. Em seguida, crie uma atividade vazia com o nome de **.MainActivity**. Isso resulta em um arquivo como este.

```
// AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.helloworld"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <activity
        android:name=".SplashActivity"
        android:label="@string/app_name"
        android:theme="@style/SplashTheme">
        <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name=".MainActivity" />
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
</manifest>
```

Observe que movemos todas as configurações de **MainActivity** para **SplashActivity**.

Agora precisamos dizer ao **SplashActivity** que vá para o **MainActivity**, o que representa a nossa aplicação real. Para fazer isso você precisa criar uma nova classe Java chamada **SplashActivity**.

![Tela Android Studio](/assets/tecnologia/artigos/splash-screen-07.jpg)

E coloque o seguinte código nesse arquivo. Certifique-se de manter a primeira linha o mesmo que o que for criado para o seu aplicativo, é específico do aplicativo.

```
// SplashActivity.java
package com.helloworld;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}
```

Pronto! Temos as telas de abertura no Android. Para o ícone, basta substituir a imagen `ic_launcher.png` de cada pasta `android/app/src/main/res/mipmap-*`, com as imagens `icon.png` que estão nos diretórios respectivos `drawable-*`, mantendo o nome `ic_launcher.png`. Ou se preferir altere o arquivo `AndroidManifest.xml`, o valor de `android:icon`. Ex: `android:icon="@drawable/icon"`.

![Tela Android Studio](/assets/tecnologia/artigos/splash-screen-08.jpg)

Com tudo isso concluído, você deve ver o seguinte (extremamente brevemente) ao criar o aplicativo.

![Tela Android Studio](/assets/tecnologia/artigos/splash-screen-09.jpg)
![Tela Android Studio](/assets/tecnologia/artigos/splash-screen-10.jpg)

## Conclusão

Depois da configuração dos ambientes e a implementação dos ícones e telas de abertura, agora é só focar na aplicação que pretende desenvolver.

React Native - Tela de abertura e ícone


Para ver na prática o **React native**, vamos para o nosso **Hello world**. A documentação([Getting Started](https://facebook.github.io/react-native/docs/getting-started.html)) explica bem os passos de instalação e para rodar os projetos, mas você também pode ver aqui abaixo e conferir um exemplo em [nexus-react-native - hello-world](https://github.com/descco-tools/nexus-react-native/tree/master/01-hello-world).

## Pré-requisitos

- **Node** - Interpretador de código JavaScript que funciona do lado do servidor.
- **Watchman** - Ferramenta do Facebook para observar as alterações no sistema de arquivos. É altamente recomendável que você o instale para um melhor desempenho.
- **Xcode** - Ambiente de desenvolvimento integrado e software livre da Apple Inc.
- **JDK** - Significa Kit de Desenvolvimento Java, e é um conjunto de utilitários que permitem criar sistemas de software para a plataforma Java.
- **Android Studio** - Ambiente de desenvolvimento integrado para desenvolver para a plataforma Android.
- **react-native-cli** - Permite instalar a interface do React Native via linha de comando.

### IOS (Mac)

- [Node](https://nodejs.org/en/download/)
- [Watchman](https://facebook.github.io/watchman/)
- [Xcode](https://itunes.apple.com/br/app/xcode/id497799835)

### Android (Windows/Linux/Mac)

- [Node](https://nodejs.org/en/download/)
- [Watchman](https://facebook.github.io/watchman/)
- [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/index.html)
- [Android Studio](https://developer.android.com/studio/index.html)

## Android Studio

### Instalação

Escolha uma configuração `custom` quando solicitado ao selecionar o tipo de instalação. Certifique-se de que esses itens estejam marcados:

- `Android SDK`
- `Android SDK Platform`
- `Performance (Intel ® HAXM)`
- `Android Virtual Device`

### Instalando o Android SDK

O Android Studio instala o último SDK do Android por padrão. Uma aplicação **React Native**, no entanto, requer o SDK do Android 6.0 (Marshmallow) em particular. SDKs Android adicionais podem ser instalados através do SDK Manager no Android Studio.

O SDK Manager pode ser acessado em `Appearance & Behavior → System Settings → Android SDK`.

Selecione a guia `Plataformas SDK` dentro do SDK Manager, em seguida marque a caixa ao lado de `Show Package Details` no canto inferior direito. Procure e expanda a entrada do Android 6.0 (Marshmallow), então verifique se os seguintes itens estão marcados:

- `Google APIs`
- `Android SDK Platform 23`
- `Intel x86 Atom_64 System Image`
- `Google APIs Intel x86 Atom_64 System Image`

Em seguida, selecione a guia `SDK Tools` e marque a caixa ao lado de `Show Package Details` aqui também. Procure e expanda a entrada `Android SDK Build-Tools`, então verifique se o **23.0.1** está selecionado.

## Variáveis de ambiente (Android)

Se vai utilizar a plataforma **Android**, precisa ter algumas variáveis de sistema.

No caso do **Mac** e **Linux** basta adicionar no arquivo `$HOME/.bash_profile`:

```
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
```

ou se for no **Windows**, configure a variavel `ANDROID_HOME`. [Veja aqui como configurar](https://www.java.com/pt_BR/download/help/path.xml) uma variavel de ambiente no windows.

## Criando a aplicação

Tendo os pré-requisitos instalados e no caso do **Android**, as variáveis de ambiente configuradas. Agora podemos criar o nosso **hello world** com o `cli` do **React native**.

Se ainda não tem o `cli` instalado, basta instalar pelo `npm`.

```
npm install -g react-native-cli
```

Agora basta executar o comando `init`, com o nome do projeto.

```
react-native init helloworld
```

## Rodando a aplicação

### IOS

No **IOS** é bem simples, basta entrar na pasta do projeto e executar `run-ios`.

```
cd helloworld
react-native run-ios
```

### Android

No caso do **Android**, teremos que iniciar um dispositivo Android antes de executar `run-android`. Podendo ser um dispositivo físico ou você pode usar um dispositivo virtual que permite que você simule um dispositivo Android em seu computador.

**Usando um dispositivo físico** - Se você tem um dispositivo físico, você pode usá-lo para o desenvolvimento no lugar de um AVD conectando-o ao seu computador usando um cabo USB e seguindo as [instruções aqui](https://facebook.github.io/react-native/docs/running-on-device.html).

**Usando um dispositivo virtual** - Você pode ver a lista de dispositivos virtuais de Android (AVDs) disponíveis abrindo o `AVD Manager` no Android Studio. Procure um ícone que se pareça com isto: ![ícone AVD](/assets/tecnologia/artigos/icon-avd.png)

**Android Studio AVD Manager** - Se você acabou de instalar o Android Studio, provavelmente será necessário criar um novo **AVD**. Selecione `Create Virtual Device`, depois escolha qualquer telefone na lista e clique em `Next`.

Com o dispositivo pronto, podemos continuar.

```
cd helloworld
react-native run-android
```

## Conclusão

Pode parecer complicado no começo (me refiro ao Android :D). Mas tem uma solução mais rápida com o `Create React Native App`.

É a maneira mais fácil de começar a criar um novo aplicativo **React Native**. Ele permite que você inicie um projeto sem instalar ou configurar ferramentas - não é necessária nenhuma instalação **Xcode** ou **Android Studio**.

Precisará do **Node** instalado e instalar:

```
npm install -g create-react-native-app
```

E depois:

```
create-react-native-app helloworld

cd helloworld
npm start
```

Instale o aplicativo do [Expo client](https://expo.io/) no seu telefone [iOS](https://itunes.apple.com/us/app/expo-client/id982107779?mt=8) ou [Android](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=pt_BR) e conecte-se à mesma rede sem fio que o seu computador. Usando o aplicativo **Expo**, analise o código QR do seu terminal para abrir seu projeto.


React Native - Hello World


Na [ReactConf 2015](http://conf2015.reactjs.org/), que rolou nos dias 28 e 29 de janeiro de 2015, foi feito o anúncio do **React Native**. Tendo o seu [primeiro release no Github](https://github.com/facebook/react-native/releases/tag/v0.1.0) no dia 27 de Março de 2015.

## Desenvolvimento móvel nativo

Antes de tudo, precisamos escolher uma plataforma.

A plataforma Android, por ter ferramentas gratuitas já oferece para muitos desenvolvedores que tem pouco dinheiro para investir, uma grande oportunidade.

Mesmo que apps android contém 85% do mercado de usuários do planeta. Quando você cria apps iOS baseado-se em compras por meio no aplicativo, você tem como benefício a chance de gerar lucros de até 4 vezes maior do que Android.

Temos que olhar as características de cada um..

### Android

- Utiliza a linguagem Java.
- Apps Android são baixados com maior frequência e números do que outras plataformas.
- Para Publicar seu trabalho, é cobrado uma taxa fixa de apenas US$ 25 dólares.
- Muitos países emergentes estão adotando a desenvolvimento Android como Brasil, índia, África, China dentre outros.
- Por se tratar de código aberto, você corre risco de sofrer com problemas de Malware.
- Taxas altas de fragmentação da indústria por conta da grande quantidade de fornecedores e quantidade de aparelhos no mercado.
- Lucratividade da loja Google Play menor em comparação ao iOS.

### IOS

- Utiliza linguagens de programação como Objective-C e Swift.
- Usuários iOS são normalmente muito leais, significa uma base de usuários ativa e constante.
- Usuários mais dispostos a gastar dinheiro.
- Para publicar seu trabalho na plataforma, você terá que gastar cerca de US$ 99 dólares.
- Seu app passará por um processo rigoroso que pode levar um bom tempo antes de ser aprovado.
- A concentração desses usuários são de maioria dos EUA, um pouco na China e na Europa.

### Resultado

Simplesmente a nível de desenvolvimento com uma pessoa, teríamos que escolher um. Pois seria um trabalho dobrado que demandaria muito tempo de aprendizado e desenvolvimento.

E a nível de empresa, comparando com um desenvolvimento móvel web, os custos são mais altos no desenvolvimento e manutenção, demandando mais pessoal e tempo para manter os códigos iOS e Android separadamente. E consequentemente, linguagens diferentes em plataformas distintas geram comportamentos.

## A solução(?)

Surgiram os frameworks para desenvolvimento híbrido (ex: [Cordova](https://cordova.apache.org), [Xamarin](https://www.xamarin.com), [PhoneGap](http://phonegap.com), [Intel XDK](https://software.intel.com/en-us/intel-xdk), [Ionic](https://ionicframework.com) e [Sencha Touch](https://www.sencha.com/products/touch)). Eles permitem compilar o mesmo projeto em ambas as plataformas.

Esses frameworks utilizam HTML, CSS e JavaScript. Eles operam em cima de uma **WebView** (página Web simulando uma aplicação nativa).

Dessa forma, o desempenho é inferior e a interação gráfica com o usuário pode não ser satisfatória.

## Arquitetura

<table style="display:inline-table;">
  <tbody>
    <tr>
      <td style="vertical-align: top; width: 33%; border: 0; padding: 4px; background: #fbfbfd;">
        <table style="display:inline-table; margin-bottom: 0; background: #fff">
          <thead>
            <tr>
              <th style="text-align:center;">Nativo</th>
            </tr>
          </thead>
          <tbody style="font-size: 14px; text-align: center;">
            <tr>
              <td style="vertical-align: top; padding: 0;">
                <table style="display:inline-table; margin-bottom: 0;">
                  <tbody style="font-size: 14px; text-align: center;">
                    <tr>
                      <td style="text-align:center; padding: 0; border: 0;">
                        <table style="display:inline-table; margin-bottom: 0;">
                          <tbody style="font-size: 14px; text-align: center;">
                            <tr>
                              <td style="text-align:center; border: 0;">Aplicação</td>
                              <td style="border: 0;">&nbsp;</td>
                              <td style="border: 0;">&nbsp;</td>
                            </tr>
                            <tr>
                              <td style="text-align:center;">Bibliotecas de terceiros</td>
                              <td style="border: 0;">&nbsp;</td>
                              <td style="border: 0;">&nbsp;</td>
                            </tr>
                            <tr>
                              <td colspan="2" style="text-align:center;">SDK de desenvolvedores, bibliotecas padrão</td>
                              <td style="border: 0;">&nbsp;</td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align:center;">Sistema operacional móvel (IOS, Android, etc...)</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="vertical-align: top; width: 33%; border: 0; padding: 4px; background: #fbfbfd;">
        <table style="display:inline-table; margin-bottom: 0; background: #fff">
          <thead>
            <tr>
              <th colspan="2" style="text-align:center;">Híbrido</th>
            </tr>
          </thead>
          <tbody style="font-size: 14px; text-align: center;">
            <tr>
              <td colspan="2" style="text-align:center;">Aplicação</td>
            </tr>
            <tr>
              <td colspan="2" style="text-align:center;">Framework para desenvolvimento móvel (ex: Cordova)</td>
            </tr>
            <tr>
              <td colspan="2" style="text-align:center;">Bibliotecas compatíveis com os Frameworks</td>
            </tr>
            <tr>
              <td colspan="2" style="text-align:center;">WebView API</td>
            </tr>
            <tr>
              <td style="text-align:center;">IOS SDKs</td>
              <td style="text-align:center;">Android SDKs</td>
            </tr>
            <tr>
              <td style="text-align:center;">IOS</td>
              <td style="text-align:center;">Android</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="vertical-align: top; width: 33%; border: 0; padding: 4px; background: #fbfbfd;">
        <table style="display:inline-table; margin-bottom: 0; background: #fff">
          <thead>
            <tr>
              <th colspan="2" style="text-align:center;">React native</th>
            </tr>
          </thead>
          <tbody style="font-size: 14px; text-align: center;">
            <tr>
              <td colspan="2" style="text-align:center; border-bottom: 0;">Aplicação</td>
            </tr>
            <tr>
              <td style="vertical-align: bottom; padding: 0; border-top: 0;">
                <table style="display:inline-table; margin-bottom: 0;">
                  <tbody style="font-size: 14px; text-align: center;">
                    <tr>
                      <td colspan="2" style="text-align:center; border: 0;">&nbsp;</td>
                    </tr>
                    <tr>
                      <td style="border: 0;">&nbsp;</td>
                      <td style="text-align:center;">Bibliotecas de terceiros</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="text-align:center; padding: 0;">
                <table style="display:inline-table; margin-bottom: 0;">
                  <tbody style="font-size: 14px; text-align: center;">
                    <tr>
                      <td style="border: 0;">&nbsp;</td>
                      <td colspan="2" style="text-align:center; border: 0;">Pacotes NPM (ex: React)</td>
                    </tr>
                    <tr>
                      <td style="border: 0;">&nbsp;</td>
                      <td style="border: 0;">&nbsp;</td>
                      <td style="text-align:center;">Componentes RN de terceiros</td>
                    </tr>
                    <tr>
                      <td style="border: 0;">&nbsp;</td>
                      <td colspan="2" style="text-align:center;">React native</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td style="text-align:center;">IOS / Android SDKs</td>
              <td style="text-align:center;">JS Runtime</td>
            </tr>
            <tr>
              <td colspan="2" style="text-align:center;">IOS / Android</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

## Conclusão

O **React native** revolucionou, já que o código gerado pelo **React** pode ser reaproveitado em até 100% entre as plataformas, fazendo com que o custo e duração do projeto caia pela metade.

Ele compila o projeto nativamente, aproveitando 100% dos recursos do dispositivo e sistema operacional. O desenvolvedor tem acesso nativamente a toda API.


Começando com React Native


Hoje vou falar sobre algo bem interessante, que deixa o versionamento do nosso código bem organizado. Estão em dia com os assuntos `Semantic Version` e `Git flow`?
Aposto que já utilizou essas regras, mas não tinha um conhecimento mais profundo sobre o assunto, ou já sempre utilizou seguindo à risca.

Já conheço e sigo o `Git flow`, a um bom tempo. Inclusive um dos meus projetos no [github](https://github.com/doc-solutions/documentation-gitflow) é sobre a documentação do mesmo. Não reinventei a roda, é mais para ter um registro de fácil acesso, para futuras explicações ou consultas.

Sobre `Semantic Version`, o [site oficial](http://semver.org/lang/pt-BR/) que está na versão `2.0.0`, explica com detalhes as regras.

Estudando os conteúdos acima, basta ter uma disciplina inicial para os processos e regras.

## Tomada de decisões

Muitas perguntas podem surgir na cabeça com algumas situações. Vou ilustrar algumas.

1. Digamos que estamos na versão 2.2.0 na branch `master`. Estamos planejando um novo recurso (feature), então a próxima versão deve se tornar 2.3.0.
   Em seguida, o cliente relata um bug crítico, forçando-nos a preparar um `hotfix`. Nós corrigimos o bug e colidimos a versão para 2.2.1. Mas, dados os 'insights' obtidos com a correção do bug, agora percebemos que talvez precisamos quebrar a API pública para que a feature funcione da maneira que queremos. E se fizermos isso, não devemos mais colidir com a versão 2.3.0. Em vez disso, devemos mover para a versão 3.0.0.

> **Regra:** A alteração de versão ocorre quando nós nos ramificamos do desenvolvimento para o release, ou quando nos ramificamos do master para a branch de hotfix.

2. Convenção de nomenclatura na branch de `dev`. Uma vez que todas as mudanças nas outras branchs devem ser mescladas de volta para `dev`, acho que a nomeação deve refletir que `dev` é praticamente sempre a versão mais recente do produto. Por isso, é interessante usar a convenção `a.b.c-wip.d`, onde `wip` (work-in-progress) significa trabalho em andamento e `d` é o número da compilação (build).

> **Regra:** Sempre certifique-se de que o número de versão na branch de dev está em sincronia com o número mais recente em qualquer branch de hotfix ou release.

Exemplo:

A branch de `dev` estava em 1.2.0-wip.123 quando criamos a branch `hotfix` (hotfix/1.2.1). Seguindo a última regra, quando nós juntamos de volta a branch de `dev`, ele é será 1.2.1-wip.x.

Esta regra pode ficar complicada quando estamos trabalhando em um `hotfix` e uma branch de `release` simultaneamente. Na maioria dos casos, o número de versão da branch de `release` deve superar a de `hotfix`. Especialmente porque provavelmente queremos mesclar alterações da `hotfix` de volta para a branch de `release` antes de envolvê-lo.

3. Convenções de nomenclatura nas branches de `release`. Eu não espero que os `releases` permaneçam nesta branch por muito tempo, então o ciclo de vida completo de alpha/beta/rc1/rc2 parece um exagero. No final, podemos usar o rc-prefixo, o que leva à seguinte notação: `a.b.c-rc.d`. Novamente, `d` é o número de compilação (build).

Vamos continuar com o exemplo. Nós decidimos quebrar a API, então criamos uma nova branch de `release` (release/2.0.0). A primeira marca nesta branch deve então ser `2.0.0-rc.x`, onde `x` é o número de compilação. Mas o que deveria ser `x` neste caso? Isso traz a questão sobre quando o contador deve ser redefinido, se alguma vez.

Vamos examinar uma alternativa:

> **Alternativa:** Redefinir o contador de compilação sempre que o número de versão for colidido

Juntamente com o número de versão, isso garante exclusividade. Também parece muito mais agradável, já que o número de compilação raramente atingirá além de três dígitos.

No entanto, ele introduz um outro problema: lembrar de redefinir o contador sempre que você alterar o número da versão. Ou, se vamos para a automação completa, como detectar quando o número da versão mudou.

> **Regra:** Assegure-se de que cada tag de controle de versão seja exclusivo no repositório.

## Exemplo passo a passo

| Atividade do projeto                                                                                                                           | Tag                         |
| ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| O projeto começa, o master está vazio e estamos fazendo o commit do nosso primeiro recurso no desenvolvimento                                  | 0.0.0-wip.1                 |
| É feito o commit da tarefa `A` na branch `develop` de uma branch `feature`                                                                     | 0.0.0-wip.2                 |
| Correção rápida de erros diretamente no desenvolvimento                                                                                        | 0.0.0-wip.3                 |
| É feito o merge da tarefa `B` em `develop` de uma branch `feature`                                                                             | 0.0.0-wip.4                 |
| Primeiro 'minor release'! Uma Branch é criada a partir de `develop` (release/0.1.0) e reseta o contador da compilação                          | 0.1.0-rc.1                  |
| Mais um commit foi necessário                                                                                                                  | 0.1.0-rc.2                  |
| Para manter o desenvolvimento sincronizado, fizemos o merge da branch 'release' de volta, criando um commit de mesclagem                       | 0.1.0-wip.3                 |
| Um membro da equipe faz um commit de um recurso `C` em `develop`                                                                               | 0.1.0-wip.4                 |
| Release em produção: fizemos o merge de release/0.1.0 em `master` e `develop`                                                                  | 0.1.0-release.5 0.1.0-wip.6 |
| É feito um commit de uma pequena refatoração em `develop`                                                                                      | 0.1.0-wip.7                 |
| Um bug crítico é relatado na produção; Criar uma branch `hotfix`                                                                               | hotfix/0.1.1 0.1.1-hotfix.1 |
| É feito o merge da versão atualizada de volta para `develop` e assim evitar duplicação de tags (uma vez que o contador tem que ser redefinido) | 0.1.1-wip.2                 |
| Enquanto isso, outro commit de refatoração em `develop`                                                                                        | 0.1.1-wip.3                 |
| O `hotfix` é finalizado                                                                                                                        | 0.1.1-hotfix.4              |
| A ser feito o merge para `master` e `develop`                                                                                                  | 0.1.1-release.5 0.1.1-wip.6 |
| É feito o merge de outra branch de `feature` em `develop`                                                                                      | 0.1.1-wip.7                 |
| Outra `minor release`. Criaremos a branch `release/0.2.0` de `develop` e resetamos o contador da compilação (build)                            | 0.2.0-rc.1                  |

## Conclusão

Pode ficar confuso de início, se não estiver familiarizado com o processo. Mas nada melhor que a prática. Então, crie o seu repositório de testes e comece a praticar. Tendo mais exemplos para ilustrar, estarei atualizando esse artigo ou criando um novo sobre o assunto. Feedbacks e novos cenários, são bem-vindos.


Fluxo e versionamento semântico com Git


Quando damos início a um projeto de programação, a primeira questão é aonde colocaremos os arquivos com os códigos. Quem nunca guardou em um disco externo ou em um disco virtual? O grande problema é quando temos mais de um desenvolvedor no projeto. Não temos um histórico de alterações e nem o autor, fora outras questões como revertar alguma implementação que estava com um `bug`.

Para isso, temos o Git(o nome vem de uma gíria do Inglês Britânico para "cabeça-dura", segundo a Git Wiki). O Git é um sistema de controle de versão(CVS), criado por Linus Torvalds, o criador do Linux.

E temos o [Github](https://github.com/) e o [Bitbucket](https://bitbucket.org/), que são serviços de armazenamento de repositório Git. Assim, temos a ferramenta e onde armazenar. No **_Github_**, podemos ter repositórios gratuitamente, desde que sejam públicos, o serviço privado é pago. Quanto ao **_Bitbucket_**, podemos ter repositórios privados gratuitamente, desde que a equipe tenha no máximo 5 pessoas.

O Git é baseado em linha de comando, para os amantes da utilização do terminal, ele agrada bastante. Mas se não é chegado, também tem ferramentas gráficas que ajudaram na utilização.

Para utilizar o Git, primeiramente precisamos instalá-lo. Para mostrar as funcionalidades, vamos priorizar a linha de comando.

## Instalação

### Windows

Para a instalação, precisamos baixá-lo no [https://git-for-windows.github.io/](https://git-for-windows.github.io/).

**_Uma dica_**: Eu instalo com o instalador [Rails Installer](http://www.railsinstaller.org/pt-BR), que ja vem com o `Ruby`, `Rails` e outros itens que já evitam o trabalho de instalá-los separadamente.

### MacOS

Para instalar no Mac OSX (Snow Leopard ou superior), basta baixá-lo em [http://sourceforge.net/projects/git-osx-installer/files/?source=navbar](http://sourceforge.net/projects/git-osx-installer/files/?source=navbar). Selecione a última versão.

### Linux

Pelo terminal, caso esteja no Fedora, você pode usar o yum:

```
yum install git-core
```

Ou se você estiver em um Debian, como o Ubuntu, use o apt-get:

```
apt-get install git
```

## Chave de segurança

Vamos usar o `Github`, como exemplo. Crie uma conta se ainda não tiver.

A chave de segurança será a identificação da máquina local que estará usando com o `Github`. Basta abrir o terminal(Git bash) e executar o commando:

```
ssh-keygen -t rsa -C "seu_email@seu_provedor.com"
```

Irá aparecer:

```
Enter file in which to save the key (/c/Users/tecnologia/.ssh/id_rsa):
```

**_/c/Users/tecnologia/_**: na sua máquina aparecerá o caminho do seu usuário.

Só pressionar a tecla `enter`, para manter no caminho padrão. Logo após, precisará informar a senha, que fica a seu critério informar ou não. E em seguida, a confirmação da mesma.

```
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```

Aparecerá uma mensagem parecida com essa:

```
Your identification has been saved in /c/Users/tecnologia/.ssh/id_rsa.
Your public key has been saved in /c/Users/tecnologia/.ssh/id_rsa.pub.
The key fingerprint is: ...
```

Agora, precisaremos informar essa chave segura, na conta do `Github`. Nas configurações do seu perfil do `Github`, na seção [SSH Keys](https://github.com/settings/ssh), clique em `add SSH Key`. Basta informar um título e o conteúdo do seu arquivo `id_rsa.pub`, que foi gerado na sua máquina.

Pronto! Temos o Git instalado e uma conta criada no `Github`. O processo para o `Bitbucket` é semelhante.

## Clonando um repositório

Só é preciso criar um repositório no Github, para dar início e assim, clonar esse projeto criado.

Digamos que criamos o repositório `teste`. No meu Github a url do projeto ficaria assim:

```
https://github.com/ui2code/teste
```

Pelo terminal(prompt de comando) na nossa máquina local, vamos entrar na pasta onde queremos que o projeto fique e iremos clonar(baixar os arquivos, juntamente com os arquivos de controle de versão do Git).

```
cd /e/server/github/
git clone https://github.com/ui2code/teste.git
```

No meu caso, a pasta ficará na minha unidade `E:`, dentro da subpasta `github`. Com o comando `git clone [url do projeto git]`, será baixado os arquivos. Agora precisamos entrar na pasta do projeto, que por padrão é o mesmo nome do projeto.

```
cd teste
```

Como acabamos de criar o repositório não tem nada nele, na pasta só terá uma pasta oculta `.git`.

Você pode ver os arquivos do projeto navegando para a pasta "repositorio" e listando os arquivos no prompt de comando:

## Versionando alterações

Temos o nosso repositório na máquina e agora vamos criar algo, bem simples, como o `README.md`. Que é por padrão, onde colocamos as informações do projeto, por ser mostrado logo assim que entramos no respositório que fica no Github.

Vamos agora brincar com o comando `touch` do Unix e criar o arquivo pelo terminal :

```
touch README.md
```

Com ele criado, faremos uma sequência de comandos para adicionar o novo arquivo ao `storage` e fazer o `commit` do mesmo para que seja criado um objeto com um `hash` de identificação da alteração no repositório.

```
git add README.md
git commit -m "Primeiro commit"
```

A flag `-m` com a mensagem entre aspas duplas, é para customizarmos a mensagem do commit.

Agora precisamos jogar essa nossa alteração no repositório para o servidor. Para isso usaremos o comando `git push`( como é o nosso primeiro commit no repositório precisamos usar a flag `-u`, para fazer a ligação do branch local, com o branch remoto):

```
git push -u origin master
```

Por padrão o repositório principal é sempre o `master`, e quando jogamos para o servidor, precisamos informar qual é a origem. Criando outros branches a origem muda.

```
// Branch dev
git push origin dev
```

Conclusão

Essa foi apenas uma introdução, onde vimos como instalar o Git na nossa máquina. Criar uma conta em um serviço de armazenamento Git. Clonar um projeto e fazer a nossa primeira alteração. Nos próximos artigos sobre o assunto, vamos ver mais os detalhes de como trabalhar com outros branches, fazer comparações, ver histórico, fluxo e etc..


Começando com Git


Independente da área de atuação, é muito importante a organização. E na área web, mais especificamente no setor de design, a criação do `guia de estilo` é muito importante. Infelizmente, mesmo com os benefícios, muitos não começam ou cumprem essa etapa.

Vamos nos colocar no cenário em que temos um projeto web, independente do tamanho do mesmo. Existindo um guia de estilo, além de facilitar o trabalho posterior do designer, já deixa um padrão pronto para o desenvolvedor front-end.

Partiremos de dois pontos de vista, simples.

- **Primeiro caso:** O designer entrega 30 telas para o desenvolvedor front-end. O mesmo tem que olhar todas as telas, achar padrões, descobrir todas as cores, tamanhos e avaliar o que é específico ou não.
- **Segundo caso:** O designer entrega 30 telas e 1 guia de estilo para o desenvolvedor front-end. O mesmo só precisa olhar as telas por questão de conferência e precisa apenas seguir o guia de estilo, com os padrões do projeto.

De início, você pode pensar que todo o trabalho e a responsabilidade vai ficar com o designer, e o desenvolvedor front-end não terá trabalho. Errado, ele terá menos trabalho desnecessário. Afinal, quando você vai no restaurante e vai pedir um prato, você diz: - Me vê o terceiro prato da lista de almoço executivo. (E o garçom tem que olhar o cardápio para ver qual é) ... Não !!!

Essa prática é necessária para que se tenha padrões na etapa de desenvolvimento. Agilizando o processo de atualização e manutenção do projeto. O designer terá o projeto centralizado, de fácil visualização e consulta. Assim, tendo menos trabalho na etapa de alterações e mudança completa do projeto, tendo padrões estabelecidos.

Para a etapa do desenvolvimento front-end, o trabalho desnecessário não existirá mais. O foco poderá ser dado para a criação dos padrões na área de desenvolvimento, que trará os mesmos benefícios citados acima com relação a área de design.

## Exemplo prático

Vamos supor que o designer inseriu um padrão para o título de cada página no guia de estilo. Vou exemplificar com a etapa do front-end.

```scss
// Utilizando o pré-processador SASS, com a sintaxe SCSS
$base-font-family: Arial;
$font-size-large: 24px;
$font-size-regular: 18px;
$color-typography-primary: #1c1e36;

.title {
  color: $color-typography-primary;
  font-family: $base-font-family;
  font-size: $font-size-large;
  font-weight: 700;
}

.subtitle {
  color: $color-typography-primary;
  font-family: $base-font-family;
  font-size: $font-size-large;
}

.text {
  color: $color-typography-primary;
  font-family: $base-font-family;
  font-size: $font-size-regular;
}
```

Um exemplo bem simples, mas é para demonstrar que um guia de estilo bem estruturado, influência nos padrões criados na etapa de desenvolvimento. Não é preciso saber o que acontece no código acima e a princípio não vou entrar nesse assunto. Apenas compare com o código abaixo:

```css
.title {
  color: #1c1e36;
  font-size: 24px;
}

.widget-title {
  color: #1f213a;
  font-size: 23px;
}

.text {
  color: #1c1e35;
  font-size: 18px;
}
```

Calma!! Peço desculpas. Os pontos principais, não ficaram claros.

A diferença mais notável é que antes usava variáveis, para centralizar o código e a manutenção ser mais prática. E o uso das mesmas vem do planejamento do desenvolvedor, as regras de negócio do projeto e o guia de estilo.

O ponto que quis mostrar, é que mesmo centralizando o código, se não tem um guia de estilo, não faz efeito. As cores acima, tem um tom bem próximo um do outro. Será necessário ser criado uma variável para cada, então por isso na definição do guia de estilo, algumas coisas tem que ter uma avaliação se são viáveis. Como é o caso da fonte, onde se tem a diferença de 1 pixel. Isso vendo em pequena escala, parece ser uma coisa que se contorna facilmente, mas em grande escala, pode ser um grande problema. Principalmente, se não há muita comunicação entre a equipe de design e front-end.

Teremos mais casos na sequência de artigos, que irão ilustrar melhor. Um caso em que se torna indispensável o uso de um guia de estilo é em um projeto que trabalha com mais de 1 tema. Mesmo para mim, sendo sempre indispensável.

O maior problema já é resolvido na etapa de design. Com o designer criando padrões, não veremos layout como base em números `12.233` ou `201.17`, por exemplo. Você pode chegar para o desenvovledor, falar para desconsiderar e que pode arredondar. Acredite, pode dar problema. #pixelPerfect

Vamos pensar em um projeto com boxes idênticos visualmente, mas com medidas diferentes e você não tem contato com o designer. Com o tempo de desenvolvimento curto e o layout já foi aprovado. Levanta a mão quem já pegou um projeto assim? \o/

## Conclusão

Essa foi uma pequena introdução para alertar sobre um dos problemas que dificultam o processo de um projeto web.
Padrões salvam vidas. :) ...

Pode parecer que é algo óbvio, mas vejo em muitos lugares que essa etapa não tem o seu valor reconhecido. E tenho uma opinião radical, de que se começa errado, termina da mesma forma. Afinal, refazer é mais fácil que fazer? Isso sim, tem uma resposta óbvia.

Nos próximos artigos sobre o assunto, será mais trabalhado os detalhes sobre a importância e como compor um guia de estilo.


Criando um guia de estilo para a interface


Sass (Syntactically Awesome Stylesheets) é um pré-prcessador de CSS, onde podemos definir variáveis ​​e reutilizá-las para um projeto inteiro. Você também pode gerar classes e reutilizar trechos de código com "mixins" ou "estender" suas classes com propriedades usadas anteriormente. Todos estes são análogos às funções em linguagens de programação, pois podemos aplicar os conceitos de programação orientada a objetos.

Sass consiste em duas sintaxes. A sintaxe original (.sass), chamado de sintaxe de indentação, usa uma sintaxe semelhante ao `Haml`. Ele usa indentação para bloco de código separados e caracteres de nova linha para separar regras. A sintaxe (.scss), usa bloco de formatação CSS, usando chaves para denotar blocos de código e ponto e vírgula após os valores das propriedades.

```scss
// SASS
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// SCSS
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


```

Particularmente eu prefiro a sintaxe (.scss), por ser mais próximo da sintaxe CSS.

## Instalação

Para utilizar o SASS, você precisa ter o [Ruby](https://www.ruby-lang.org/pt/downloads/), instalado na máquina. O [site do SASS](http://sass-lang.com/install), mostra 2 formas de instalação do mesmo.

Praticamente sempre uso a forma, utilizando o terminal:

```bash
gem install sass
```

Para verificarmos se o mesmo está instalando, podemos conferir com o comando:

```bash
sass -v
```

## Utilização

Após a instalação, se tem várias formas para rodar o pré-processador. Você pode usar um software como o [Koala](http://koala-app.com/), usar um automatizador de tarefas como [Grunt](http://gruntjs.com/) ([grunt-sass](https://github.com/sindresorhus/grunt-sass)) ou [Gulp](http://gulpjs.com/) ([gulp-sass](https://github.com/dlmanning/gulp-sass)), ou o próprio terminal.

Como exemplo, podemos usar o terminal:

- **watch ** - flag para que sempre quando tenha alteração dos arquivos .scss que estão sendo observados, seja gerado o css
- **style.scss** - [caminho da pasta dos arquivos scss ou caminho + nome especifico do arquivo a ser observado]
- **style.css** - [caminho da pasta de destino ou caminho + nome especifico do arquivo a ser gerado]

```bash
// sass --watch source/
// sass --watch source/style.scss
// sass --watch source/:dist/
sass --watch style.scss:style.css
```

Um ponto importante ao se observar uma pasta, é com relação aos arquivos que serão gerados. Digamos que na pasta `source/`, temos 3 arquivos e queremos que apenas 2 sejam gerados. Resolvemos isso com o prefixo `_`(undescore).

```bash
// _variables.scss
// styleguide.scss
// style.scss
```

Nos arquivos que estão sendo observados, importamos o arquivo de variáveis.

```scss
// styleguide.scss
// style.scss
@import '_variables';
```

## Variáveis

Todas as variáveis devem ser definidas usando um prefixo `$`.

```scss
// SASS
$color-alpha: rgba(0,0,0,0.8)
$color-typography-primary: #ffffff
$font-size-large: 32px

.title
  background: $color-alpha
  color: $color-typography-primary
  font-size: $font-size-large
```

```scss
// SCSS
$color-alpha: rgba(0, 0, 0, 0.8);
$color-typography-primary: #ffffff;
$font-size-large: 32px;

.title {
  background: $color-alpha;
  color: $color-typography-primary;
  font-size: $font-size-large;
}
```

```css
/* CSS */
.title {
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 32px;
}
```

## Seletores aninhados

Com o Sass, você pode aninhar os seus seletores CSS, evitando a repetição de escrita. Mas cuidado, não podemos exagerar nos níveis, senão a manutenção fica inviável.

```scss
// SCSS
// Não faça isso !!!!
ul {
  li {
    .link {
      .text {
        color: red;
      }
    }
  }
}
```

```css
// CSS
ul li .link .text {
  color: red;
}
```

Vamos para a boa prática e também utilizar o caractere `&`, que representa o seletor pai.

```scss
// SCSS
.link {
  color: blue;

  &:hover {
    color: yellow;
  }

  &:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
    content: '';
    display: inline-block;
    height: 0;
    width: 0;
  }
}

.widget {
  .link {
    background: #a1a1a1;
  }
}
```

```scss
// SASS
.link
  color: blue

  &:hover
    color: yellow

  &:before
    border-left: 10px solid transparent
    border-right: 10px solid transparent
    border-top: 10px solid #f00
    content: ""
    display: inline-block
    height: 0
    width: 0

.widget
  .link
    background: #a1a1a1
```

```css
/* CSS */
.link {
  color: blue;
}
.link:hover {
  color: yellow;
}
.link:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
}

.widget .link {
  background: #a1a1a1;
}
```

## Mixins

Os mixins permitem que você reutilize propriedades CSS e seletores. No SCSS, precisamos definir o `@mixin` e atribuir um nome. Depois, podemos acrescentar algumas propriedades, criar uma classe ou elemento e utilizar com `@include`. Na sintaxe original, é um pouco diferente e podemos comparar abaixo:

```scss
// SASS
=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)
```

```scss
// SCSS
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
```

```css
/* CSS */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
```

## Funções

Semelhante a um `mixin`, as funções permitem parâmetros, mas não retornam trechos de código e sim um valor.

```scss
// SCSS
$total-width: 100%;
$total-columns: 12;

@function x-gridsystem-width($columns) {
  @return ($total-width / $total-columns) * $columns;
}

.box {
  width: x-gridsystem-width(6);
}
```

```scss
// SASS
$total-width: 100%
$total-columns: 12

@function x-gridsystem-width($columns)
  @return ($total-width / $total-columns) * $columns

.box
  width: x-gridsystem-width(6)
```

```css
/* CSS */
.box {
  width: 50%;
}
```

## Extend

Com SASS você pode fazer com que um selector herde os estilos de outro, sem duplicar as propriedades CSS. Tenha em mente que se você tem muitas propriedades duplicadas, você poderá enfrentar problemas de desempenho. Este recurso permite que você herde qualquer estilo já utilizado em qualquer classe anterior.

Vamos dizer que eu quero usar as propriedades de ".message" em ".success" e ".error". Para atingir este objetivo é necessário criar ".success" , ".error" e acrescentar "@extend .message".

```scss
// SASS
.message
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend .message
  border-color: green

.error
  @extend .message
  border-color: red
```

```scss
// SCSS
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}
```

```css
/* CSS */
.message,
.success,
.error {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}
```

## Placeholders

O placeholder é semelhante ao `@extend`, com a diferença que ele funciona como uma variável (Se não for utilizado, não aparece no CSS final).

```scss
// SASS
%message
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend %message
  border-color: green

.error
  @extend %message
  border-color: red
```

```scss
// SCSS
%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

.error {
  @extend %message;
  border-color: red;
}
```

```css
/* CSS */
.success,
.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}
```

## Conclusão

O CSS é muito importante para um projeto web. E é muito importante ter um pré-processador para organizar, reutilizar código e facilitar muito na manutenção. O SASS oferece muitos recursos e não vejo desvantagens, sendo comparado ao se escrever com apenas em CSS puro. Temos outros pré-processadores no mercado, e veremos em outros artigos.


Começando com SASS


Acredito que em 2008, quando comecei na área web e começava a engatinhar no CSS, uma das principais dúvidas era como funcionava o float e o que acontecia com o elemento pai.

A propriedade float, tem como seu valor padrão o `none`, podendo também receber os valores `left` e `right`.

Assim que utilizamos `float: left` em um elemento, o mesmo será posicionado a esquerda e se o próximo for um elemento `inline`, o irá acompanhar.

## Como funciona com os elementos `block` e `inline`?

Nos elementos `block`, o comportamento é diferente dos elementos `inline`, como podemos ver abaixo:

{% codepen hemersonvianna OyKQJv 7928 result 257 %}

No exemplo, temos 4 elementos (2 `block` e 2 `inline`). Adicionando a propriedade nos primeiros elementos de cada tipo, o segundo elemento `block`, ignora o primeiro e fica atrás dele, não recohecendo a posição do seu antecessor. Aumentando a largura do segundo elemento, conseguimos vê-lo e um fato curioso é que o texto dentro do elemento, reconhece o primeiro elemento, mas porque a quantidade de caracteres é possível ser mostrada naquele espaço a mais do elemento. Então não se engane, ele não está do lado e sim, atrás.

Já o segundo elemento `inline`, se encontra ao lado do primeiro. Com a propriedade `float`, o primeiro elemento reconhece as suas propriedades de dimensão como um elemento `block`.

## Como um elemento se comporta, quando um elemento filho tem a propriedade?

Acima, vimos o comportamento básico dos elementos soltos no `body`. Abaixo, iremos ver como se comportam os elementos, cujo os filhos tem a propriedade `float`.

{% codepen hemersonvianna LGPOMg 7928 result 257 %}

Como o exemplo, conseguimos ver que basta um elemento filho não ter a propriedade `float`, para o elemento pai identificar e respeitar a altura do elemento que não tem o `float`. Com os elementos 6 e 7, o elemento pai perde a referência e se comporta, como se não tivesse conteúdo. Uma solução para esse comportamento, seria acrescentar as propriedades `display: inline-block` e `width: 100%` no elemento pai. Assim, ele ficaria como os demais. Costumo dizer, que o `display: inline-block`, salva vidas. :) Com isso, terás um elemento com os 2 valores: `inline` e `block`. Isso quer dizer, que será um elemento bloco, mas sem quebra de linha (só ficará em 100%, se tiver a propriedade `width: 100%`). Falaremos mais sobre a propriedade `display`, em outro artigo.

## Quando usar o valores left e right para a propriedade?

Como vimos nos exemplos acima, o `float`, quebra o fluxo natural do conteúdo. Na maiorida dos casos, não queremos que os próximos elementos sejam influenciados pelos `floats` na página. Para solucionar esse problema, temos a propriedade `clear`. Solução muito conhecida por causa do `clearfix`, que você já deve ter visto em algum projeto ou já tenha utilizado.

{% codepen hemersonvianna VeZXQE 7928 result 440 %}

Temos 4 exemplos, acima. O primeiro se trata de um uso simples, quando temos 2 elementos e queremos que um fique a direita e outro a esquerda. Se invertermos os valores da propriedade `float`, dos 2 elementos, não teria problema algum. O segundo elemento ficaria a esquerda e o segundo a direita, não necessitando de alguma alteração no html.

No segundo exemplo, podemos ver que dependendo dos valores da propriedade `float`, podemos fazer muitas variações com as posições dos elementos. No caso, a sequência no html é [1, 2, 3] e com o css ele fica [1, 3, 2]. Assim, podendo ajudar muito na hora de criar mais de um template, sem ter que modificar o html.

No terceiro, já conseguimos ver a utilização da propriedade 'clear'. Se o elemento 4, não tivesse a propriedade `float` ou `clear`, naturalemnte ele ficaria atrás do elemento 1. Acrescentando nele a propriedade `float`, com o valor `left`, ele ficaria ao lado do elemento 3 e com o valor `right`, ficaria entre os elementos 5 e 2. E para quebrar esses comportamentos, podemos acrescentar a propriedade `clear`, com o valor `both`, para quebrar qualquer valor do `float` ou sendo especifico com o valor do elemento anterior. Se o elemento 3, tem o `float: left`, seria necessário o `clear: left`, no elemento 4. Assim, agora ele se encontra na próxima linha, abaixo do elemento 2. Os elementos posteriores irão respeitar essa quebra de linha.

No último, só fica mais um exemplo da lógica da mistura dos elementos com as propriedades `float` e `clear`.

## Conclusão

Tendo em mente como funciona a propriedade `float` e seu comportamento no documento HTML, fica mais fácil planejar estruturas que na maioria das vezes, não terão impacto no HTML, facilitando a manutenção. E também é importante entender como outras propriedades podem auxiliar. Como foi mostrado nesse artigo, sobre as propriedades `display` e `clear`. Portanto, usem com sabedoria e evitará muitas dores de cabeça na questão de estrutura e comportamento no documento HTML.


CSS - Propriedade float


Desde 1996, temos que agradecer a Håkon Wium Lie e Gijsbert (Bert) Bos, pela recomendação da W3C sobre o CSS1. No ano anterior, juntos apresentaram a proposta do CSS para a W3C. Hoje, estamos colhendo os frutos dessa iniciativa.

A primeira recomendação da W3C, foi em 17 de Dezembro de 1996, com o CSS nível 1 e o mesmo foi revisado em 11 de abril de 2008. Em 07 de junho de 2011, saiu a recomendação do CSS nível 2, sendo editado em 17 de dezembro de 2014 (CSS 2.1). Também temos as recomendações: [Módulo de cor nível 3](http://www.w3.org/TR/css3-color/) em 07 de junho de 2011, [Seletores nível 3](http://www.w3.org/TR/selectors/) em 29 de setembro de 2011, [Media Queries](http://www.w3.org/TR/css3-mediaqueries/) em 19 de junho de 2012, e [Atributos de estilo](http://www.w3.org/TR/css-style-attr/) em 07 de novembro de 2013. Você pode dar uma olhada nos [Trabalho atuais](http://www.w3.org/Style/CSS/current-work) da W3C.

> Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
> <cite> -- CSS
>
> - [Wikipédia](https://pt.wikipedia.org/wiki/Cascading_Style_Sheets) > </cite>

## Tipos

Tipos de CSS não se refere a forma de escrever as declarações e sim o local onde ele é inserido. Se ele estiver junto ao código HTML, chamamos de CSS inline, no início da página HTML ele é incorporado e quando colocado em um arquivo externo, ele é CSS linkado.

### CSS Inline

O CSS Inline é aquele que é inserido junto ao código HTML, através do atributo style. Sua aplicação é bastante questionada já que o modelo fica bastante parecido com a antiga formatação via HTML.

```
<p style="color: #ffff00; font-size: 11px;">
```

### CSS Incorporado

CSS incorporado é aquele que é inserido no início do código HTML dentro da tag . o modelo incorporado é melhor que o inline, mas ainda apresenta deficiências, já que ele terá efeito apenas sobre a página e não poderá ser reaproveitado para outras páginas.

```
<style type="text/css">
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FF0000;
}
</style>
```

### CSS Linkado

CSS linkado é o modelo recomendado, pois neste modelo todo o código CSS fica em um arquivo separado, podendo ser linkado a várias páginas do site. Este é o melhor modelo para promover o reaproveitamento do código.

```
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
```

## Seletores

Seletores são os elementos que o CSS pode formatar. São eles: Tags do HTML, classes (class) e identificadores (ID´s)

### Tags

Qualquer tag do HTML poderá ser formatada em CSS, porém, algus recursos não provocarão efeito nenhum. Por exemplo: aplicar cor em uma tag .
Para formatar tags, basta colocar o nome da tag como seletor. Exemplo:

```
body {
	font-family: Verdana, Arial, Tahoma;
	font-size: 12px;
	background-color: #E3E3E3;
}
```

### Classes

Diferente das tags, as classes não são aplicadas automaticamente no HTML. Uma vez criada, uma classe deverá ser aplicada manualmente no HTML.
A função das classes é fazer formatações específicas onde as definições de tags não são atendidas.

```
.recuo {
	font-size: 10px;
	color: #ff0000;
}
```

### Identificadores

Os identificadores em CSS correspondem ao ID no HTML, ou seja, quando você criar um ID no HTML significa que ele poderá ser formatado no CSS.

```
#site {
	width: 500px;
	background-color: #ffffff;
}
```

## Pseudo-classes

Existem vários tipos de pseudo-classes. Podemos separá-las em dois grandes grupos:Estruturais e Dinâmicas. Existem outras pseudo-classes que não se encaixam nestes dois grupos principais, que controlam a interface do usuário, elementos de URLs e etc.

### Pseudo-classes Dinâmicas

As pseudo-classes dinâmicas controlam os estados dos elementos. Abaixo, vão alguns deles:

`:hover` – quando passamos o mouse em cima do elemento.

`:active` – quando ativamos o elemento. Por exemplo, quando clicamos em um link e não soltamos o botão do mouse. Nesse momento, estamos ativando a ação do elemento. Esse estado é ativado também quando navegamos pelos links pelo teclado utilizando o TAB. Este estado não há em todos os elementos.

`:visited` – quando o link é visitado.

`:focus` – quando um elemento recebe foco. Muito utilizado em campos de texto. Quando clicamos em cima um campo de texto para escrever, o elemento está ganhando foco.

### Pseudo-classes Estruturais

As pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo:

`:first-child` – seleciona o primeiro filho de um outro elemento. <br>
`:last-child` – seleciona o último filho de um elemento. <br>
`:root` – representa um elemento que é a raiz do documento. No HTML 4, é sempre a tag HTML. <br>
`:nth-child()` – permite que selecionemos qualquer elemento no meio de um grupo de elementos. Por exemplo, você pode selecionar linhas de uma tabela. Assim, podemos fazer uma tabela zebrada, sem a ajuda de javascript. Há variações dessa pseudo-classe para podermos pegar os elementos de baixo para cima (`:nth-last-child`) e assim por diante. Testei aqui e isso não funcionou no meu FF3 (mac). <br>
`:lang()` – seleciona elementos que tem o atributo lang com um valor específico. ( [exemplo](http://tableless.com.br/wp-content/uploads/2009/03/lang.html) )

### Pseudo-classes Estruturais - target

O seletor target do CSS3 nos permite aplicar uma formatação ao elemento que é alvo ativo de um link. ( [exemplo](http://www.uxdesign.blog.br/curso-html5-css3/target.html) )

```
div:target { z-index: 1000; }
```

### Pseudo-classes Estruturais - atributo

No CSS3 também é possível formatarmos elementos que possuam um atributo específico.

```
a[title] {color: red;}
a[href="index.html"] {color: red;}
img[alt*="web"] {border: 5px solid red;}
a[href$=".pdf"] {background: url(pdf.png)}
```

## Pseudo-elementos

Pseudo-elementos servem para adicionar efeitos a um seletor ou parte dele. A seguir, veremos dois pseudo-elementos do CSS3 muito úteis: :before e :after.

### :before

O pseudo-elemento :before do CSS3 serve para adicionar alguma formatação ou conteúdo antes de um elemento.

```
li:before {
   content: "Livro: ";
   color: #D35529;
}
```

### :after

Por sua vez, o pseudo-elemento :after do CSS3 serve para adicionar alguma formatação ou conteúdo após um elemento.

```
li:after {
   color: #D35529;
   font-weight: bold;
}
```

## Conclusão

O CSS tem evoluindo muito e cada vez mais coisas novas estão aparecendo, até a maneira de escrever com os pré-processadores (SASS, LESS e STYLUS). O importante é sempre estar por dentro das boas práticas de utilização e manutenção, evita muitas dores de cabeça e deixa o projeto organizado. Cada projeto tem suas exigências e é importante fiar ligado nisso.


Começando com CSS


Olá, pessoal.

Vou escrever sobre uma coisa muito importante, que é o gerenciamento do código CSS. Você começa um projeto Front-End e está na hora de pensar como será a arquitetura CSS.

Se tem várias metodologias e frameworks no mercado. Com isso, várias fontes de estudo e conceitos mais sólidos para uma implantação.

Hora da avaliação dos pós e contras, e escolher o melhor rumo para o seu projeto. Nesse artigo, vou escrever sobre a metodologia que chamou a minha atenção e tenho adotado.

## No que tenho que pensar?

Quando vamos começar um projeto web, temos que montar uma boa arquitetura CSS, para que não tenhamos problemas futuramente. E é bom seguir a ideia de "perder" algumas horas de planejamento no início, do que perder dias para consertar e/ou mudar a metodologia adotada no meio do projeto.

O ponto essecial para uma arquitetura CSS é o mesmo ser modular (Escabilidade, reutilização e customização), principalmente para projetos complexos. O mesmo deve ser bem gerenciado, para não ter dor de cabeça com hierarquia e etc..

Levanta a mão que já pegou um projeto legado com vários "!important", sem nenhum critério. .../

**Portanto, temos que nos preocupar com muitos fatores na hora de escrever um código CSS. Como:**

- Escolha do pré-processador
- Padrão de escrita
- Estrutura de pastas
- Ser modular (escalável, reutilizável e customizável)
- Metodologias
- O melhor para a equipe/projeto

Com a metodologia ITCSS, uma boa porcentagem das preocupações serão resolvidas.

## ITCSS - Inverted triangle CSS

Na busca pela melhor forma de gerenciar o CSS dos meus projetos, conheci a metodologia [ITCSS](https://twitter.com/itcss_io), que foi criada por [Harry Roberts](https://twitter.com/csswizardry).

Aqui você confere o vídeo em que foi apresentado a metodologia [Harry Roberts - Managing CSS Projects with ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4&hd=1)

Slides - [Managing CSS Projects with ITCSS](https://speakerdeck.com/dafed/managing-css-projects-with-itcss)

### A metodologia

A metodologia consiste em camadas e aborda a escrita por ordem de especificidade, onde as 2 primeiras (Settings e tools), são utilizadas no desenvolvimento composto por um pré-processador de CSS e as camadas generic, base, objects, components, theme(sendo optativa) e trumps.
Com isso:

- evitando a redundância de regras de estilo;
- problemas com especificidade, indo da mais baixa para a mais alta;
- código reutilizavel, com uma estrutura granular;
- elimina a necessidade de mais desenvolvimento de código para solucionar questões de substituição de propriedades.

![ITCSS](/assets/tecnologia/artigos/arquitetura-itcss.jpg)

**[Settings] Configurações:**

Utilizando um pré-processador de CSS, essa camada inicial tem todo o controle de variáveis ​​globais e configuração do projeto (cores, tamanhos de tela).

```
// Color palette
$color-brand:           #bada55;
$color-brand-highlight: lighten($color-brand, 15%);
$color-brand-shadow:     darken($color-brand, 15%);

// Links
$color-link:        $color-brand;
$color-link-hover:  $color-brand-shadow;
```

**Ferramentas [Tools]:**

Nessa camada usamos a grande utilidade de um pré-processado de CSS, que são as funções e mixins.

```
@mixin vertical-align {
  position: relative;
  top: 50%;
  @include transform(translateY(-50%));
}
```

**Genéricos [Generic]:**

Box-sizing, reset, modernizr se encontram nessa camada.

```
html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

* {

    &,
    &:before,
    &:after {
        -webkit-box-sizing: inherit;
           -moz-box-sizing: inherit;
                box-sizing: inherit;
        }

}
```

**Base [Base]:**

Estilos que são aplicados nas tags HTML (estilização básica).

```
fieldset {
  background-color: lighten($base-border-color, 10%);
  border: $base-border;
  margin: 0 0 $small-spacing;
  padding: $base-spacing;
}

input,
label,
select {
  display: block;
  font-family: $base-font-family;
  font-size: $base-font-size;
}
```

**Objetos [Objects]:**

Seguindo o conceito de orientação a objeto CSS, nessa camada usamos as classes para os objetos que se repetem no projeto. A partir dessa camada que começamos a utilizar as classes CSS.

```
.o-media {
    display: table;
    width: 100%;
}

.o-layout {
    margin:  0;
    padding: 0;
    list-style: none;
    margin-left: -$base-spacing-unit;
}
```

**Componentes [Components]:**

Elementos de interface com contexto específico

```
.c-avatar {
    display: block;
    border-radius: 100%;
    width:  64px;
    height: 64px;
}

.c-avatar--small {
    width:  32px;
    height: 32px;
}

.c-btn {
    display: inline-block;
    padding: (0.5 * $base-spacing-unit) $base-spacing-unit;
    text-decoration: none;
    background-color: $color-btn;
    color: #fff;
    border-radius: $base-radius;
    transition: background-color 0.2s;

    &:hover,
    &:focus {
        background-color: $color-btn-hover;
        color: #fff;
    }

}
```

**Tema (opcional) [Theme]:**

Como está bem sugestivo, seria a camada onde teremos os temas do projeto / componentes / objetos.

```
/**
 * Background colors.
 */
@each $color in $colors {

    $color-name:  nth($color, 1);
    $color-value: nth($color, 2);

    .bg--#{$color-name} {
        background-color: #{$color-value};
    }

}
```

**Trunfos [Trumps]:**

Especificidade mais alta, ajudantes e substituições (.col-ms-12 {})

```
.clearfix,
%clearfix {

    &:after {
        content: "";
        display: table;
        clear: both;
    }

}
```

### Guidelines

O [CSS Guidelines](http://cssguidelin.es/) é uma documentação de recomendações e abordagens feita por Harry Roberts, para ajudar no desenvolvimento de um código CSS, legível, escalável, de fácil manutenção e etc..

### Framework

O [Inuitcss](https://github.com/inuitcss) é desenvolvido utilizando o pré-processador [Sass](http://sass-lang.com/), com a convenção de nomenclatura [BEM](https://en.bem.info/method/) e a metodologia [OOCSS](https://github.com/stubbornella/oocss/wiki) que não impõe o design. Projetado com o pensamento em escalabilidade e desempenho.

**Obs:** A única camada com a qual o Inuitcss não se envolve é a de componentes.

## Conclusão

Tenho adotado essa metodologia nos meus projetos, e tenho achado bem satisfatório a organização e o padrão que o mesmo traz.

O InuitCSS, utiliza da metodologia do [BEM](https://en.bem.info/method/). Acho muito confuso, misturar undercore com hífen. Por isso, utilizo assim:

```
.form {} // bloco
.form-field {} // elemento
.form-field--select {} // modificador
```

Para blocos com nome composto, ainda estou refletindo sobre o assunto, mas no momento utilizo tudo em minúsculo. Aceito feedbacks sobre o assunto.

```
.singleform {}
```

Quanto a estrutura de pastas, tenho usado numeração nas mesmas para uma melhor visualização.

- 00-settings
- 01-tools
- 03-base
- etc..

E com o acréscimo da pasta:

- vendor - para CSS externos de plugins (ex: colorbox, bxslider)

Acredito que não tem uma metodologia com a verdade absoluta e que o melhor caminho é ver o que o projeto necessita. Como pode ser visto neste artigo, a ideia era falar de uma metodologia, mas você pode ver que outras foram citadas e ideias acrescentadas. O mais importante é a unificação de pensamento da equipe para o projeto evoluir com um padrão sólido.

## Referências

- [Modular-CSS](https://github.com/bernarddeluna/Modular-CSS)
- [CSS Modular – Breve explicação](http://tableless.com.br/css-modular-breve-explicacao/)
- [CSS escalável - Parte 1](https://medium.com/@shankarcabus/css-escalavel-parte-1-41e7e863799e)
- [Classes Funcionais](http://tableless.com.br/classes-funcionais/)
- [Arquitetura CSS](http://tableless.com.br/arquitetura-css-anotacoes-da-palestra-rafael-rinaldi/)
- [InuitCSS](https://github.com/inuitcss)
- [css-scaffold](https://github.com/csshugs/css-scaffold)
- [itcss-netmag](https://github.com/itcss/itcss-netmag)
- [TemplateITCss](https://github.com/lionelthonon/TemplateITCss)
- [BEM](https://en.bem.info/method/)


Conhecendo a metodologia ITCSS


O WordPress é um CMS(Content Management System), open source escrito em PHP e utiliza o banco de dados MySQL. O mesmo é o sucessor do **b2/cafelog**, criado por Michel Valdrighi, que foi lançado em 2001. Em 2002, o desenvolvimento do b2, se encerrou. E em 2003, um calouro universitário decidiu criar um `fork` do projeto. Matthew Mullenweg Charles, juntamente com Mike Little, começaram a criar o WordPress a partir do código do b2.

## Pré-requisitos

- PHP 5.6 ou superior
- MySQL 5.6 ou superior
- Módulo Apache mod_rewrite, ativo

## Instalação

O [download](https://wordpress.org/download/) da versão estável pode ser feito no site oficial. Apos o download, basta extrair o `.zip` no seu servidor.

## Configuração

Primeiramente, você precisa criar um banco de dados **Mysql** e atribuir a um usuário as permissões necessárias. Agora é hora de navegar para o seu site para começar com o processo de instalação.

Você precisará informar algumas informações, como :

- Nome do banco de dados
- Nome do usuário do banco
- Senha do banco
- Servidor do banco de dados
- Prefixo utilizado na criação das tabelas

O nome do banco de dados, usuário e senha, você já saberá se fez o primeiro passo informado para a configuração. O servidor, dificilmente precisará ser alterado, podendo manter o valor `localhost`. Quanto aos prefixos das tabelas, só terá a necessidade de ser alterado, caso tenha múltiplas instalações com o Wordpress no mesmo banco de dados.

Após preencher essas informações no formulário apresentado, basta submeter. Esses dados serão armazenados no arquivo `wp-config.php`, que estará na raiz do projeto. Caso queira fazer esse passo manualmente, basta renomear ou duplicar o arquivo `wp-config-sample.php`, que se encontra na raiz do projeto. Dentro do arquivo encontraremos:

```php
define('DB_NAME', '[nome_do_banco_de_dados]');

/** Usuário do banco de dados MySQL */
define('DB_USER', '[nome_de_usuario]');

/** Senha do banco de dados MySQL */
define('DB_PASSWORD', '[senha]');

/** nome do host do MySQL */
define('DB_HOST', 'localhost');

// ...

$table_prefix  = 'wp_';
```

O importante é que se tenha o arquivo `wp-config`, preenchido na raiz do projeto, para que seja identificado a instalação.

Preenchendo as informações do banco de dados pelo navegador ou manualmente, logo após teremos o passo de preencher as informações básicas para o painel de controle. Esse passo, será feito pelo navegador. Informaremos o nome do site e os dados para a criação de um usuário para acessar o painel de controle do WordPress.

Assim, temos uma instalação completa. Podemos fazer o login, para acessar o painel ou ver o site carregado com o tema padrão.s

## Estrutura de pastas

- **wp-admin./** - Contém os arquivos(PHP) do paindel de controle e normalmente não são alterados por usuários ou desenvolvedores
- **wp-content/** - Contém os seus temas, plugins e conteúdo carregados e alterados quando você adicionar mídia, plugins e temas
  - languages/
  - plugins/
  - themes/
  - upgrade/
  - uploads/
- **wp-includes/** - Contém arquivos(PHP) do núcleo do WordPress e normalmente também não são alterados por usuários ou desenvolvedores
- ...

## Conclusão

O WordPress é uma boa ferramenta para criação de blogs, para usuários sem muito conhecimento de desenvolvimento web e desenvolvedores experientes. Poupando tempo para criação de um painel de controle. Nos próximos artigos veremos mais sobre seus recursos.


Começando com Wordpress


De acordo com Taylor Otwell (criador), Laravel foi lançado em junho de 2011, simplesmente para resolver a falta de funcionalidades com o framework **CodeIgniter**. Que na época, era bem conhecido pela sua simplicidade e e documentação abrangente.

Laravel se trata de um **Framework PHP**, que utiliza o padrão MVC. Vem com muitos recursos e é construído em muitos padrões, ajudando no desenvolvimento de aplicações seguras e performáticas de forma rápida. Possui algumas características que motivam na sua utilização como: facilidade de roteamento, arquitetura modular alimentado por Composer, comunidade ativa e solidária, boa dicumentação, sistema de templates (Blade), Artisan (CLI "Command Language Interpreter" do Laravel) e mais.

## Instalação

Pré-requisitos:

- PHP >= 5.5.9
- OpenSSL PHP Extension
- PDO PHP Extension
- Mbstring PHP Extension
- PHP Extension

### Composer

O composer é um controlador de dependências e você pode fazer a instalação do mesmo, das seguintes formas:

```bash
# via cURL
curl -sS https://getcomposer.org/installer | php

# via PHP
php -r "readfile('https://getcomposer.org/installer');" | php
```

A instalação do Laravel, é simples com o comando:

```bash
composer global require "laravel/installer"
```

Após a instalação, será necessário adicionar o caminho do mesmo no **Path** do sistema. Pode fazê-lo, pela interface do sistema operacional ou pelo comando:

```bash
export PATH="$PATH:$HOME/.composer/vendor/bin"
```

## Primeiro projeto

Para criar um novo projeto, usamos o comando:

```bash
# new [nome do projeto]
laravel new Example
```

## Configuração

Vou me basear na versão atual (5.2). Todos os arquivos de configuração se encontram na pasta `config`. Os valores de configuração podem ser acessados facilmente com a função global `config`. Os valores podem ser acessados, usando o nome do arquivo e a opção desejada por intermédio do caractere `.`. Exemplo:

```php
$value = config('app.timezone');
```

Para definir um valor em tempo de execução, passamos um `array`, na função `config`:

```php
config(['app.timezone' => 'America/Sao_Paulo']);
```

### Ambiente

É sempre bom separar o ambiente de desenvolvimento e o ambiente de produção. O Laravel tora isso fácil, utilizando a biblioteca [DotEnv](https://github.com/vlucas/phpdotenv), criada por Vance Lucas.

Durante a instalação do Laravel, via Composer, o arquivo `.env.example` é copiado para `.env`:

```bash
php -r "copy('.env.example', '.env');"
```

Nesse novo arquivo, teremos todas as varáveis que serão carregadas no `$_ENV`. Podemos utilizar a função `env`, para recuperar os valores dessas variáveis. Exemplo:

```php
// o segundo parâmetro é um valor default
// que é usado quando não existe
// nenhuma variável de ambiente
// para a chave informada
'debug' => env('APP_DEBUG', false)
```

O ambiente atual da aplicação é determinado através da variável `APP_ENV`, no arquivo `.env`. Podemos acessar esse valor com o método `environment`, da interface estática(facade) da classe `App`:

```php
$environment = App::environment();
```

Também podemos passar argumentos para o `environment`, para verificação.

```php
if (App::environment('local')) {
    // The environment is local
}

if (App::environment('local', 'staging')) {
    // The environment is either local OR staging...
}
```

Podemos também acessar pelo método auxiliar `app`:

```php
$environment = app()->environment();
```

### Cache da configuração

Para aumentar a velocidade da sua aplicação, podemos armazenar em cache os arquivos de configuração em apenas um arquivo. Isso é possível, usando o `config:cache`, do Artisan. Não se deve ser executado no ambiente de desenvolvimento, por ser frequentemente alterado. Então, para a implantação de produção, execute:

```bash
php artisan config:cache
```

## Observações

Na instalação via Composer, além da execução do comando para a criação do arquivo `.env`, também executado outros comandos. Um deles é o comando:

```bash
php artisan key:generate
```

O mesmo cria uma chave no arquivo de ambiente, sendo o valor da varável `APP_KEY`. Se a chave da aplicação não estiver definida, as suas sessões de usuário e outros dados criptografados não serão seguros.

## Estrutura de pastas

- **app/** - Componentes da sua aplicação.
- **bootstrap/** - Arquivos que inicializam o framework e configuram o autoloading.
- **config/** - Arquivos de configuração do projeto.
- **database/** - Contém os arquivos de `migration` e `seeds` do seu banco de dados, nas pastas `factories`, `migrations` e `seed`.
- **public/** - É o seu DocumentRoot (toda requisição efetuada pelo usuário cairá nela).
- **node_modules/** - Será criada na execução do comando `npm install`, na raiz do projeto.
- **resources/** - Contém as suas views, raw assets (LESS, SASS, CoffeeScript), e arquivos de localização.
- **storage/** - É responsável por armazenar os arquivos de uso interno do Laravel tais como: Cache, logs e etc.
- **tests/** - Contém os arquivos de testes, para a aplicação.
- **vendor/** - Gerada automaticamente pelo composer, é nela que encontramos as bibliotecas que farão com que o Laravel rode.
  – .env
  – .env.example
  – .gitattributes
  – .gitignore
  – artisan
  – composer.json
  – composer.lock
  – gulpfile
  – package.json
  – phpunit.xml
  – readme.md
  – server.php

## Conclusão

Essa é uma breve introdução ao Laravel, onde podemos fazer a instalação e criar um novo projeto. Nos próximos artigos, veremos coisas mais práticas e conheceremos mais sobre suas funcionalidades e etc.


Começando com Laravel


A Programação orientada a objetos permite que os desenvolvedores agrupem tarefas semelhantes em classes. O PHP não é uma linguagem que foi criada para ser orientada a objetos. Começando a dar suporte ao mesmo na versão 3, sendo melhorada na versão 4 e tendo um bom suporte na versão 5.3.

O primeiro e mais importante conceito de orientação a objetos é a classe, uma abstração do software de objetos similares, ou seja, um template do qual os objetos serão criados.

Na criação de uma classe, o nome é precedido da palavra reservada `class` e seguida de um par de chaves `{}` :

```php
<?php
class Person {
  // conteúdo da classe
}
?>
```

## Atributos/Propriedades

São elementos que definem uma classe, também são conhecidos como variáveis de classe. A palavra chave `public` determina a visibilidade da propriedade (vamos ver mais sobre isso no decorrer do artigo, na parte de visibilidade de propriedades e métodos). Depois disso, a propriedade é nomeada usando os padrões básicos de nomeação de variáves e é mostrado que não necessitam de valores iniciais.

```php
<?php
// person.php
class Person {
  public $name;
  public $cpf;
  public $age;
}
?>
```

## Métodos

São funções internas das classes que realizam algo, geralmente tomando por base os dados armazenados nas propriedades. Dentro dos métodos, as propriedades e outros métodos internos da classe são referenciados utilizando `$this`.

### Construtor

O construtor da classe é um bloco declarado com o mesmo nome que a classe.

```php
<?php
// person.php
class Person {
  public $name;
  public $cpf;
  public $age;

  //construtor da classe
  function Person(){
    $this->getPerson();
  }

  function getPerson(){
    $this->name = "Hemerson";
    $this->cpf = "123.123.123-22";
    $this->age = 29;
  }

  function getMessage(){
    return 'Meu nome é ' . $this->name;
  }
}
?>
```

Após criar a classe, ela pode ser instanciada e guardada em alguma variável usando a palavra chave `new`. O operador `->`, permite acessar as propriedades e métodos de um objeto.

```php
<?php
require_once 'person.php';

$person = new Person();

echo $person->name;
// Hemerson
echo $person->getMessage();
// Meu nome é Hemerson
?>
```

## Métodos Mágicos

Ao invés de termos um método com o mesmo nome da classe para ser o construtor, o PHP provê o método `__construct()`, que é chamado automaticamente quando a classe é instanciada. Também há inúmeras constantes mágicas, como `__CLASS__`, que retorna o nome da classe. Podemos ver as constantes disponíveis no [Manual do PHP](http://us3.php.net/manual/pt_BR/language.constants.predefined.php). Os demais métodos mágicos podemos conferir no [Manual](http://php.net/manual/pt_BR/language.oop5.magic.php).

```php
<?php
class Person {
  public $name = "Hemerson";

  public function __construct(){
    echo 'Meu nome é ' . $this->name .' e a classe ' . __CLASS__ . ' foi instanciada';
  }
}

$person = new Person();
// Meu nome é Hemerson e a classe Person foi instanciada
?>
```

## Herança de Classe

Na Orientação a objetos, as classes podem herdar métodos e propriedades de outra classe. Isso é possível utilizando a palavra chave `extends`.

```php
<?php
class Person {
  public $name = "Hemerson";
  public $cpf = "123.123.123-22";
  public $age = 29;

  function __construct(){
    echo 'Essa classe é a ' . __CLASS__;
  }

  function getMessage(){
    return 'Meu nome é ' . $this->name;
  }
}

class Example extends Person {
  function __construct(){
    echo 'Essa classe é a ' . __CLASS__;
  }
}

$example = new Example();
// Meu nome é Hemerson
?>
```

Assim, temos superclasses e subclasses na orientação a objetos. Onde as superclasses são classes mãe, que não derivam de nenhuma outra classe e as subclasses são classes que são criadas a partir de outras classes. Podemos utilizar as palavras parent (se referindo a classe mãe) e self (se referindo a classe atual).

```php
<?php
class Person {
  public $message = "Eu sou o Hemerson";

  public function __construct(){
    echo 'Essa classe é a ' . __CLASS__;
  }

  public function getMessage(){
    return $this->message."--";
  }
}

class Example extends Person {
  public $message = "Não sou o Hemerson";

  public function __construct(){
    echo parent::getMessage();
    echo self::getMessage();
    echo $this->getMessage();
  }

  public function getMessage(){
    return $this->message;
  }
}

$example = new Example();
// Não sou o Hemerson--
// Não sou o Hemerson
// Não sou o Hemerson
?>
```

Temos que ficar atentos, que quando há uma propriedade de mesmo nome na subclasse, a propriedade da superclasse será sobrescrita e o valor da subclasse passará a valer.

## Visbilidade de Propriedades e Métodos

A visibilidade controla como e de onde as propriedades e métodos podem ser acessados. Há três palavras chaves para visibilidade: `public`, `protected`, e `private`. Também pode ser adicionado à sua visibilidade, a palavra chave `static`, o que permite que sejam acessados sem uma instanciação da classe. Se a visibilidade não é declarada, automaticamente se considera como `public`. O uso da declaração de variável com a palavra-chave `var` ainda é suportada por razões de compatibilidade e o mesmo é um sinônimo para a palavra-chave `public`.

- **public** - Podem ser acessados de qualquer lugar, tanto dentro quanto fora da classe.
- **protected** - Só pode ser acessado dentro da própria classe ou por uma classe herdeira.
- **private** - É acessível somente dentro da classe que os define.
- **static** - Podem ser acessados sem instanciar a classe.

```php
<?php
class Person {
  public $name = 'Hemerson';
  protected $cpf = '123.123.123-22';
  private $status = true;

  function __construct(){
  }
}

class Example extends Person {
  function __construct(){
  }

  function getCpf(){
    return $this->cpf;
  }

  function getStatus(){
    return $this->status;
  }
}

$person = new Person();
$example = new Example();

echo $person->name; // Hemerson

echo $example->name; // Hemerson
echo $example->getCpf(); // 123.123.123-22
echo $example->cpf; // FATAL ERROR Cannot access protected property Example::$cpf

echo $example->getStatus(); // Undefined property: Example::$status
?>
```

Agora um exemplo com a adição da palavra chave `static`:

```php
<?php
class Person {
  public static $message = 'Teste';

  public static function exampleMethod() {
    return self::$message;
  }
}

print Person::$message; // Teste

$person = new Person();

print $person->exampleMethod() . "\n"; // Teste
print $person->message . "\n";
// Accessing static property Person::$message as non static
// Undefined property: Person::$message
?>
```

Propriedades estáticas não podem ser acessadas através do operador ->.

## Conclusão

Programação orientada a objetos é uma coisa linda. Pode parecer complicado no começo, mas como tudo, a prática e entender o que está fazendo, leva a perfeição. É só cair dentro dos estudos e ver as vantagens, que serão notadas. Facilidade na manutenção e organização, ajudando você e sua equipe.


PHP - Orientação a objetos


O assunto de hoje é o sobre `array`. Se já mexeu com alguma linguagem de programação, já deve ter visto ou trabalhado com um `array`. Se é leigo no assunto, vamos estar vendo sobre o mesmo no PHP.

Os `arrays` também podem ser identificados como `tipos de dados compostos`. Os elementos e os dados de um `array`, são conhecimos como os `pares de chave e valor`. Vamos supor que temos um `array` com 3 elementos, onde cada um contém uma letra do alfabeto. Exemplo:

```php
// Chave :  0 1 2
// Valor :  a b c
```

Na prática temos duas formas de criar um array e representar esse exemplo:

```php
// função array
$array = array(0 => 'a', 1 => 'b', 2 => 'c');
// ou
// com colchetes
$array2 = array();
$array2 = ['a', 'b', 'c'];

// variação com colchetes
$array3 = array();
$array3[0] = 'a';
$array3[1] = 'b';
$array3[2] = 'c';
```

Não se preocupe com os exemplos práticos. Logo abaixo vamos estar vendo os tipos, funções de `arrays` e as regras para entender melhor como eles funcionam.

## Tipos de arrays

Uma coisa muito importante, é não esquecer que a chave numérica de um elemento de um `array`, sempre começa em 0. E você pode acessar um elemento do `array`, acessando com a chave entre colchetes. Exemplo:

```php
$array = array(0 => 'a', 1 => 'b', 2 => 'c');
echo $array[2];
// c
```

### Indexado / Associativo

Um `array indexado` é conhecido como tal, qual suas chaves são do tipo numérico. Um `array` de chaves nomeadas com `strings`, é conhecido como `array associativo`.

```php
// Array com chaves númericas(indexadas)
// Chave :  0 1 2
// Valor :  a b c
$array = array(0 => 'a', 1 => 'b', 2 => 'c');
```

```php
// Array com chaves nomeadas(associativas)
// Chave :  name age status
// Valor :  Ana  20  1
$array = array('name' => 'Ana', 'age' => 20, 'status' => 1);
```

### Bidimensional / Multidimensional

Os `arrays` podem ser de duas ou mais dimensões. Isso quer dizer, que podemos ter um `array`, dentro de um `array`. Não se tem um limite de dimensões para os `arrays`, mas dependendo da quantidade, fica difícil manter o código de fácil entendimento. Exemplo:

```php
// Array tridimensional
$array = array(0 => 'a', 1 => array(0 => 'a', 1 => 'b', 2 => array(0 => 'entrou', 1 => 'saiu')), 2 => 'c');
echo $array[1][2][0];
// entrou
```

### Dinâmicos

Já vimos que os `arrays` podem ser indexados, associativos, bidimensionais e até multidimensionais. No PHP, eles também podem ser dinâmicos. Com isso, podemos adicionar, deletar e alterar os elementos com comandos e funções para esse uso.

```php
$array = array('name' => 'Ana', 'country' => 'Brasil');
// Comando que adicionará ao final do array
$array['age'] = 29;
```

Acima, temos um `array` associativo com 3 elementos. O que acontece se adicionarmos um valor, sem informar a chave? Podemos conferir no exemplo abaixo.

```php
$array = array('name' => 'Ana', 'country' => 'Brasil', 'age' => 29);
$array[] = 'ihhhh';
var_dump($array);
// 'name' => 'Ana', 'country' => 'Brasil', 'age' => 29, 0 => 'ihhhh'
```

É, quando não informamos a chave, automaticamente a chave recebe o próximo índice numérico. Como é apenas um `array` associativo e não tinha nenhuma chave numérica, o próximo índice é o `0`. Vamos ver como fica no próximo exemplo.

```php
$array = array(0 => 'Ana', 1 => 'Brasil', 'age' => 29);
$array[] = 'ihhhh';
var_dump($array);
// 0 => 'Ana', 1 => 'Brasil', 'age' => 29, 2 => 'ihhhh'
```

Para alterar o valor, é bem intuitivo. Basta informar a chave e lhe dar o novo valor.

```php
$array = array(0 => 'Ana', 1 => 'Brasil', 'age' => 29);
$array['age'] = 31;
var_dump($array);
// 0 => 'Ana', 1 => 'Brasil', 'age' => 31
```

Agora vamos brincar um pouco ao remover elementos com a função `array_splice`. Na função, você informa 3 parâmetros, sendo o terceiro opcional.

```php
$array = array(0 => 'Ana', 1 => 'Brasil', 'age' => 29);
// Parâmetros
// 1º = array, 2º = remover a partir de qual posição , 3º = quantos elementos remover
// Quando não informamos o 3º, ele remove da posição informada no 2º parâmetro até o último elemento do array
array_splice($array, 1);
var_dump($array);
// 0 => 'Ana'
```

```php
$array = array(0 => 'Ana', 1 => 'Brasil', 'age' => 29);
array_splice($array, 0, 1);
var_dump($array);
// 1 => 'Brasil', 'age' => 29
```

Também podemos criar um novo `array`, apenas com o resultado da função `array_splice`, em uma variavel. Exemplo:

```php
$array = array(0 => 'Ana', 1 => 'São Paulo', 2 => 'Rio de Janeiro');
$arrayTemp = $array;
$arrayStates = array_splice($arrayTemp, 1, 2);
var_dump($array);
// 0 => 'Ana', 1 => 'São Paulo', 2 => 'Rio de Janeiro'
var_dump($arrayStates);
// 0 => 'São Paulo', 1 => 'Rio de Janeiro'
```

Uma outra função para remover elementos de um array, é a função `unset`. Exemplo:

```php
$array = array(0 => 'Ana', 1 => 'São Paulo', 2 => 'Rio de Janeiro');
unset($array[1]);
var_dump($array);
// 0 => 'Ana', 2 => 'Rio de Janeiro'
```

## Foreach

Funciona apenas com arrays. Retorna um erro se for utilizado em uma variável de qualquer tipo diferente ou em variáveis não inicializadas. Pode ser usada de duas formas:

```php
foreach (array as $valor) {
	// instrução
}

foreach (array as $chave => $valor) {
	// instrução
}
```

```php
$arr = array(1, 2, 3, 4);
foreach ($arr as $value) {
    $value = $value * 2;
}
// $arr = array(2, 4, 6, 8)
```

## Algumas funções de Array

O `array` é muito usado no PHP. Por esse motivo, tem muitas funções nativas da linguagem, que podemos utilizar.

### sort

Essa função ordena um array. Os elementos serão ordenados do menor para o maior ao final da execução dessa função.

```php
// bool sort ( array &$array [, int $sort_flags ] )

<?php
$items = array("item1", "item2", "item3", "item4");
sort($items);
foreach ($items as $key => $val) {
    echo "items[" . $key . "] = " . $val . "\n";
}
?>

// items[0] = item4
// items[1] = item3
// items[2] = item1
// items[3] = item2
```

### rsort

Essa função ordena um array em ordem descrescente (do maior para o menor).

```php
// bool rsort ( array &$array [, int $sort_flags ] )

<?php
$items = array("item1", "item2", "item3", "item4");
rsort($items);
foreach ($items as $key => $val) {
    echo "$key = $val\n";
}
?>

// 0 = item2
// 1 = item1
// 2 = item3
// 3 = item4

```

### asort

Essa função ordena um array de forma que a correlação entre índices e valores é mantida. É usada principalmente para ordenar arrays associativos onde a ordem dos elementos é um fator importante.

```php
// bool asort ( array &$array [, int $sort_flags ] )

<?php
$items = array("d" => "item1", "a" => "item2", "b" => "item3", "c" => "item4");
asort($items);
foreach ($items as $key => $val) {
    echo "$key = $val\n";
}
?>

// c = item4
// b = item3
// d = item1
// a = item2
```

### arsort

Esta função ordena um array de forma que a correlação entre índices e valores é mantida. É usada principalmente para ordenar arrays associativos onde a ordem dos elementos é um fator importante.

```php
// bool arsort ( array &$array [, int $sort_flags ] )

<?php
$items = array("d" => "item1", "a" => "item2", "b" => "item3", "c" => "item4");
arsort($items);
foreach ($items as $key => $val) {
    echo "$key = $val\n";
}
?>

// a = item2
// d = item1
// b = item3
// c = item4
```

### ksort

Ordena um array pelas chaves, mantendo a correlação entre as chaves e os valores. Essa função é bastante útil principalmente para arrays associativos.

```php
// int ksort ( array &$array [, int $sort_flags ] )

<?php
$items = array("d"=>"item1", "a"=>"item2", "b"=>"item3", "c"=>"item4");
ksort($items);
foreach ($items as $key => $val) {
    echo "$key = $val\n";
}
?>

// a = item2
// b = item3
// c = item4
// d = item1
```

### krsort

Ordena um array pelas chaves em ordem descrescente, mantendo a correlação entre entre as chaves e os valores. Essa função é bastante útil em arrays associativos.

```php
// bool krsort ( array &$array [, int $sort_flags ] )

<?php
$items = array("d"=>"item1", "a"=>"item2", "b"=>"item3", "c"=>"item4");
krsort($items);
foreach ($items as $key => $val) {
    echo "$key = $val\n";
}
?>

// d = item1
// c = item4
// b = item3
// a = item2
```

### usort

Essa função irá ordenar um array pelos valores usando uma função de classificação definida pelo usuário. Se o array precisar ser ordenado utilizando um critério não trivial, você deve usar essa função.

```php
// bool usort ( array &$array , string $cmp_function )

<?php
function cmp($a, $b) {
	if ($a == $b) {
		return 0;
	}
	return ($a < $b) ? -1 : 1;
}

$a = array(3, 2, 5, 6, 1);

usort($a, "cmp");

foreach ($a as $key => $value) {
	echo "$key: $value\n";
}
?>

// 0: 1
// 1: 2
// 2: 3
// 3: 5
// 4: 6
```

### array_sum

`array_sum()` retorna a soma dos valores de um array.

```php
// number array_sum ( array $array )

<?php
$a = array(2, 4, 6, 8);
echo "sum(a) = " . array_sum($a) . "\n";

$b = array("a" => 1.2, "b" => 2.3, "c" => 3.4);
echo "sum(b) = " . array_sum($b) . "\n";
?>

// sum(a) = 20
// sum(b) = 6.9
```

### array_unique

Recebe o argumento array e retorna um novo array sem valores duplicados.

```php
// array array_unique ( array $array )

<?php
$input = array("a" => "green", "red", "b" => "green", "blue", "red");
$result = array_unique($input);
print_r($result);
?>

// Array
// (
//     [a] => green
//     [0] => red
//     [1] => blue
// )
```

### in_array

Procura no array, pelo valor informado.

```php
// bool in_array ( mixed $needle , array $haystack [, bool $strict ] )

<?php
$os = array("Mac", "NT", "Irix", "Linux");
if (in_array("Irix", $os)) {
    echo "Got Irix";
}
if (in_array("mac", $os)) {
    echo "Got mac";
}
?>

// Got Irix
```

### array_search

Procura no array, pelo valor informado.

```php
// mixed array_search ( mixed $needle , array $haystack [, bool $strict ] )

<?php
$array = array(0 => 'blue', 1 => 'red', 2 => 'green', 3 => 'red');

$key = array_search('green', $array); // $key = 2;
$key = array_search('red', $array);   // $key = 1;
?>

```

### array_rand

`array_rand()` é bastante útil quando se quer conseguir aleatoriamente um ou mais elementos de um array.

```php
// mixed array_rand ( array $input [, int $num_req ] )

<?php
$input = array("Neo", "Morpheus", "Trinity", "Cypher", "Tank");
$rand_keys = array_rand($input, 2);
echo $input[$rand_keys[0]] . "\n";
echo $input[$rand_keys[1]] . "\n";
?>

```

### array_merge

Funde os elementos de dois ou mais arrays de forma que os elementos de um são colocados no final do array anterior. Retorna o array resultante da fusão.

```php
// array array_merge ( array $array1 [, array $array2 [, array $... ]] )

<?php
$array1 = array("color" => "red", 2, 4);
$array2 = array("a", "b", "color" => "green", "shape" => "trapezoid", 4);
$result = array_merge($array1, $array2);
print_r($result);
?>

// Array
// (
//     [color] => green
//     [0] => 2
//     [1] => 4
//     [2] => a
//     [3] => b
//     [shape] => trapezoid
//     [4] => 4
// )
```

### array_walk

Aplica uma função definida pelo usuário nomeada pelo argumento `funcname` em cada elemento de array.

```php
// bool array_walk ( array &$arrary , string $funcname [, mixed $userdata ] )

<?php
function myfunction($value,$key){
echo "The key $key has the value $value<br>";
}
$a=array("a"=>"red","b"=>"green","c"=>"blue");
array_walk($a,"myfunction");
?>

// The key a has the value red
// The key b has the value green
// The key c has the value blue
```

### count

Conta os elementos de um array.

```php
// int count ( mixed $var [, int $mode ] )

<?php
$a[0] = 1;
$a[1] = 3;
$a[2] = 5;
$result = count($a);
// $result == 3
?>
```

### shuffle

Essa função mistura de forma aleatória os elementos de um array.

```php
// bool shuffle ( array &$array )

<?php
$numbers = range(1, 20);
shuffle($numbers);
foreach ($numbers as $number) {
	echo "$number ";
}
?>

// 15 9 18 19 12 16 4 17 20 1 5 13 8 6 7 3 11 2 14 10
```

### extract

Importar variáveis a partir de um array para a tabela de símbolos corrente. `extract()` verifica cada chave e vê se ela tem um válido nome de variável. Também verifica por colisões com já existente variáveis na tabela de símbolo.

```php
// int extract ( array $var_array [, int $extract_type [, string $prefix ]] )

<?php

$size = "large";
$var_array = array("color" => "blue",
                   "size"  => "medium",
                   "shape" => "sphere");
extract($var_array, EXTR_PREFIX_SAME, "wddx");

echo "$color, $size, $shape, $wddx_size\n";

// blue, large, sphere, medium
?>

```

### compact

Cria um array contendo variáveis e seus valores.

```php
// array compact ( mixed $varname [, mixed $... ] )

<?php
$city  = "San Francisco";
$state = "CA";
$event = "SIGGRAPH";

$location_vars = array("city", "state");

$result = compact("event", "nothing_here", $location_vars);
print_r($result);
?>

// Array
// (
//     [event] => SIGGRAPH
//     [city] => San Francisco
//     [state] => CA
// )
```

## Referências

- [PHP Documentation](http://php.net/docs.php) - Manual do PHP

## Conclusão

Se pode brincar bastante com arrays em PHP. Nas linguagens de programação, com certeza irá se deparar com um `array`. Sempre busque a melhor maneira de trabalhar com eles, pois ele pode ser usado da forma mais básica, até a mais complexa com multidimensões.


PHP - Entendendo o array


Tendo até mesmo pouco contato com a programação web, já deve ter visto ou utilizado uma `string`. No PHP, temos as intruções `echo` e `print`para enviar uma `string` para o navegador.

### echo

Permite vários parâmetros.

```php
<?php
echo "test", "test2", "test3";
// testtest2test3
echo("test2");
// test2
?>
```

Estando ativado no `php.ini` o módulo **short_open_tag**, você pode executar o comando `echo`, com a combinação de tags PHP e o sinal de `=`.

```php
<?="Test";?>
// Test
```

### print

Retorna 1 após o envio da saída, pode ser usada em expressões e permite apenas um parâmetro.

```php
<?php
$example = print("print");
// print
echo $example;
// 1
?>
```

## Escape

No PHP, para imprimir uma `string`, você pode usar aspas duplas ou simples. Podem haver casos em que seja necessário a impressão das aspas. Para que isso seja possível, temos duas formas: usar os 2 tipos de aspas ou o `escape`(com a barra invertida).

```php
<?php
echo "test 'string' ";
// test 'string'
echo 'test "string" ';
// test "string"

// Escape
echo "test \"string\" ";
// test "string"
?>
```

O `escape` também pode ser utilizado com outros caracteres. No exemplo abaixo, quando usamos o cifrão, o PHP interpreta que estamos tentando enviar o conteudo de uma variável.

```php
<?php
echo "execute $test ";
// Notice: Undefined variable: test in ..........
?>
```

Com o `escape`, temos o resultado esperado.

```php
<?php
echo "execute \$test ";
// execute $test
?>
```

É válido também mencionar que a barra invertida tem outra utilidade. Combinando a barra invertida com a letra `n`(\n), o PHP interpreta como uma diretiva de nova linha. Importante lembrar que isso funciona apenas com aspas duplas, não temos o mesmo resultado com aspas simples.

```php
<?php
echo "line \n new line";
// line
//  new line

echo 'line \n new line';
// line \n new line
?>
```

Para ser possível ver isso no navegador, é necessário colocar dentro da tag `pre`. Sendo o mais aconselhável, utilizar a tag `br` para esse fim.

```php
<pre>
<?php
echo "line \n new line ";
// line
//  new line
?>
</pre>

<?php
echo "line <br> new line ";
// line
//  new line
?>
```

## Algumas funções de string

Vamos notar que as funções não seguem uma convenção de nomenclatura. Essa flexibilidade é um ponto forte ao mesmo tempo um ponto fraco do PHP.

### ltrim

Retira espaço em branco (ou outros caracteres) do início de uma string.

```php
// string ltrim ( string $str [, string $character_mask ] )
<?php
$string = " Teste";
var_dump(ltrim($string));
?>

// string(5) "Teste"
```

### rtrim

Esta função retorna uma string com espaços em branco retirados do final da string.

```php
// string rtrim ( string $str [, string $character_mask ] )
<?php
$string = "Teste ";
var_dump(rtrim($string));
?>

// string(5) "Teste"
```

### trim

Esta função retira os espaços em branco do início e do final da string.

```php
// string trim ( string $str [, string $character_mask = " \t\n\r\0\x0B" ] )
<?php
$string = " Teste ";
var_dump(trim($string));
?>

// string(5) "Teste"
```

### ucwords

Retorna uma string com o primeiro caractere de cada palavra em maiúscula, se os mesmos forem alfabéticos.

```php
// string ucwords ( string $str [, string $delimiters = " \t\r\n\f\v" ] )
<?php
$string = "Teste para a função";
var_dump(ucwords($string));
?>

// string(21) "Teste Para A Função"
```

### srttoupper

Retorna string com todos os caracteres do alfabeto convertidos para maiúsculas. Saiba que o alfabeto é determinada pela localidade atual. Por exemplo, "a" com til (ã) não será convertido, pois o padrão do PHP é o local "C".

```php
// string strtoupper ( string $string )
<?php
// setlocale(LC_CTYPE, 'C'); // C = padrão PHP
$string = "Teste para a função";
var_dump(strtoupper($string));
?>

// string(21) "TESTE PARA A FUNçãO"
```

Podemos resolver o problema com a acentuação com a função `setlocale()`. Veja abaixo:

```php
// string setlocale ( mixed $category , string $locale [, string $... ] )
// string setlocale ( mixed $category , array $locale )
```

Category é uma constante (ou string) especificando a categoria de funções afetadas pela definição local:

- `LC_ALL` - para tudo abaixo
- `LC_COLLATE` - para comparação de strings, veja strcoll()
- `LC_CTYPE` - para classificação de caracteres e conversão, por exemplo strtoupper()
- `LC_MONETARY` - para localeconv()
- `LC_NUMERIC` - para o separador decimal (Veja também localeconv())
- `LC_TIME` - para formatação de data e hora com strftime()

```php
<?php
setlocale(LC_ALL, 'pt_BR');
$string = "Teste para a função";
var_dump(strtoupper($string));
?>

// string(21) "TESTE PARA A FUNÇÃO"
```

### srttolower

Retorna string com todos os caracteres do alfabeto convertidos para minúsculas. E também é preciso mudar a localidade da aplicação para aceitar os acentos da língua portuguesa.

```php
// string strtolower ( string $str )
<?php
setlocale(LC_ALL, 'pt_BR');
$string = "TESTE PARA A FUNÇÃO";
var_dump(srttolower($string));
?>

// string(21) "teste para a função"
```

### ucfirst

Retorna uma string com o primeiro caractere em maiúscula, se o caractere for do alfabeto.

```php
// string ucfirst ( string $str )
<?php
$string = "teste";
var_dump(ucfirst($string));
?>

// string(5) "Teste"
```

### lcfirst

Retorna uma string com o primeiro caractere em letra minúscula se o caractere for alfabético.

```php
// string lcfirst ( string $str )
<?php
$string = "TESTE";
var_dump(lcfirst($string));
?>

// string(5) "tESTE"
```

### str_word_count

Conta o número de palavras dentro de string. Se o format opcional não é especificado, então o valor de retorno será um inteiro representando o número de palavras encontrado. No caso de o format estar especificado, o valor de retorno será um array, cujo conteúdo é dependente do format.

```php
// mixed str_word_count ( string $string [, int $format [, string $charlist ]] )
<?php
$string = "TESTE de nada";
var_dump(str_word_count($string));
?>

// int(3)
```

### strlen

Retorna o tamanho da string.

```php
// int strlen ( string $string )
<?php
$string = "TESTE de nada";
var_dump(strlen($string));
?>

// int(13)
```

### strstr

Retorna parte da string haystack a partir da primeira ocorrência de needle até o final de haystack.

```php
// string strstr ( string $haystack , mixed $needle [, bool $before_needle ] )
<?php
$string = "TESTE de nada";
var_dump(strstr($string, 'de'));
?>

// string(7) "de nada"
```

### stristr

Retorna tudo de haystack a partir da primeira ocorrência de needle até o final.

```php
// string stristr ( string $haystack , mixed $needle [, bool $before_needle ] )
<?php
$string = "TESTE de nada";
var_dump(stristr($string, 'de'));
?>

// string(7) "de nada"
```

### strpos

Retorna a posição numérica da primeira ocorrência de needle dentro de haystack. Diferentemente de strrpos(), esta função pode ter uma string inteira como o parâmetro needle e toda a string será usada.

```php
// int strpos ( string $haystack , string $needle [, int $offset ] )
<?php
$string = "TESTE de nada";
var_dump(strpos($string, 'de'));
?>

// int(6)
```

### substr

Retorna a parte de string especificada pelo parâmetro start e length.

```php
// string substr ( string $string , int $start [, int $length ] )
<?php
$string = "TESTE de nada";
var_dump(substr($string, 0, -1));
?>

// string(12) "TESTE de nad"
```

### str_replace

Esta função retorna uma string ou um array com todas as ocorrências de search em subject substituídas com o valor dado para replace. Se você não precisa de regras de substituição especiais (como expressões regulares), você sempre poderia usar esta função ao invés de ereg_replace() ou preg_replace().

```php
// mixed str_replace ( mixed $search , mixed $replace , mixed $subject [, int &$count ] )
<?php
$string = "TESTE de nada";
var_dump(str_replace("nada","tudo", $string));
?>

// string(13) "TESTE de tudo"
```

### strip_tags

Esta função tenta retornar uma string retirando todas as tags HTML e PHP de str. Usa o mesmo sistema para retirar as tags do que fgetss().

```php
// string strip_tags ( string $str [, string $allowable_tags ] )
<?php
$string = "<p>nada</p>";
var_dump(strip_tags($string, "<p>"));
?>

// string(11) "
//
// nada
// "
```

### addslashes

Retorna uma string com barras invertidas antes de caracteres que precisam ser escapados para serem escapados em query a banco de dados, etc. Estes caracteres são aspas simples ('), aspas duplas ("), barra invertida (\) e NUL (o byte NULL).

```php
// string addslashes ( string $str )
<?php
$string = "d'agua";
var_dump(addslashes($string));
?>

// string(7) "d\'agua"
```

### stripslashes

Remove barras invertidas de uma string.

```php
// string stripslashes ( string $str )
<?php
$string = "d'agua";
var_dump(stripslashes($string));
?>

// string(6) "d'agua"
```

### htmlentities

Esta função é idêntica a htmlspecialchars() em toda forma, exceto que com htmlentities(), todos caracteres que tem entidade HTML equivalente são convertidos para estas entidades. Se você está querendo decodificar (o inverso), você pode usar html_entity_decode().

```php
// string htmlentities ( string $string [, int $quote_style [, string $charset [, bool $double_encode ]]] )
<?php
$string = "'teste' de <b>nada</b>";
var_dump(htmlentities($string));
?>

// string(34) "'teste' de &lt;b&gt;nada&lt;/b&gt"
```

### html_entity_decode

html_entity_decode() é o oposto da função htmlentities() no que converte todas as entidades HTML para os seus caracteres de string.

```php
// string html_entity_decode ( string $string [, int $quote_style [, string $charset ]] )
<?php
$string = "'teste' de &lt;b&gt;nada&lt;/b&gt";
var_dump(html_entity_decode($string));
?>

// string(23) "'teste' de <b>nada</b>"
```

### str_shuffle

str_shuffle() mistura uma string. Uma permutação de todas as possibilidades é criada.

```php
// string str_shuffle ( string $str )
<?php
$string = "abcdef";
var_dump(str_shuffle($string));
?>

// string(6) "fcebad"
```

### md5

Calcula o "hash MD5" de str usando » RSA Data Security, Inc. MD5 Message-Digest Algorithm, e devolve esse hash.

```php
// string md5 ( string $str [, bool $raw_output ] )
<?php
$string = "abcdef";
var_dump(md5($string));
?>

// string(32) "e80b5017098950fc58aad83c8c14978e"
```

### sha1

Calcula a hash sha1 de str usando » US Secure Hash Algorithm 1, e retorna esta hash. A hash é um número hexadecimal de 40 caracteres. Se o parâmetro opcional raw_output for TRUE, então o resultado é retornado em um formato binário com o tamanho de 20.

```php
// string sha1 ( string $str [, bool $raw_output ] )
<?php
$string = "abcdef";
var_dump(sha1($string));
?>

// string(40) "1f8ac10f23c5b5bc1167bda84b833e5c057a77d2"
```

## Conclusão

Há grandes possibilidades de se trabalhar com string no PHP. E com certeza, utilizará muito todas as funções mostradas acima. A dica é brincar bastante com elas e com as demais. Assim, fixará o conhecimento da linguagem e terá uma resposta mais rápida para possíveis questões que apareção durante o desenvolvimento.


PHP - Trabalhando com string


Meu primeiro contato com uma linguagem back-end(lado servidor), foi com o PHP 4. E de início não foi com as boas práticas e com certeza não tinha nenhum vestígio de MVC. Com o tempo isso foi mundando, até por utilizar o Zend framework.

O PHP foi criado em 1994, por [Rasmus Lerdorf](https://twitter.com/rasmus), e o código fonte liberado em 1995. E é mantido pela organização `The PHP Group`.

> PHP (um acrônimo recursivo para "PHP: Hypertext Preprocessor", originalmente Personal Home Page) é uma linguagem interpretada livre, usada originalmente apenas para o desenvolvimento de aplicações presentes e atuantes no lado do servidor, capazes de gerar conteúdo dinâmico na World Wide Web.
> <cite> -- PHP
>
> - [Wikipédia](https://pt.wikipedia.org/wiki/PHP) > </cite>

## O ambiente

Primeiramente para conseguirmos ver uma página em PHP funcionando, precisamos ter um servidor Apache/IIS (De preferência um servidor Apache, que muitos sugerem por ser melhor e para `URL Rewriting` se usa o .htaccess e não o web.config) configurado. Para fazer isso na nossa máquina local, tem softwares que ajudam nessa tarefa. Para windows, temos o [XAMPP](https://www.apachefriends.org/pt_br/index.html) e o [WAMP](http://www.wampserver.com/en/). Para mac, temos o [MAMP](https://www.mamp.info/en/). E para o linux, querendo ser mais `hardcore`, pode seguir esses [passos da Digital Ocean](https://www.digitalocean.com/community/tutorials/como-instalar-a-pilha-linux-apache-mysql-php-lamp-no-ubuntu-14-04-pt) para instalação via terminal.

O necessário é ter o Apache e o PHP, instalados na máquina. Provalmente precisará de um banco de dados e isso fica por conta da necessidade do projeto. Querendo instalar manualmente, segue os links abaixo:

- **_Apache_** - [http://www.apache.org/](http://www.apache.org/)
- **_PHP_** - [http://php.net/downloads.php](http://php.net/downloads.php)

Sugestões de banco de dados:

- **_MySQL_** - [http://dev.mysql.com/downloads/](http://dev.mysql.com/downloads/)
- **_PostGRE_** - [http://www.postgresql.org/](http://www.postgresql.org/)

## Sintaxe

Já temos o ambiente e agora precisamos escrever nossas primeiras linhas para ver o PHP, funcionando. Pela lógica arquivos PHP, usaram a extensão `.php`.

Podemos usar as tags `HTML`, normalmente como fazemos em arquivos de extensão '.html', mas para usarmos o código PHP, o mesmo deverá ser usado como vemos abaixo:

```
<!DOCTYPE html>
	<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<?php
			// script php
		?>

		<p class="<?php echo imprimirClasse(); ?>">Esse parágrafo tem uma classe inserida via uma função php</p>
	</body>
</html>
```

### Variável

Uma variável no PHP, se inicia com o `$`(cifrão);

As regras para nomeação, são bem simples:

- Não iniciar com números
- Sem espaços
- Sem caracteres especiais, exceto `underscore`

```
<?php
	$name = "Meu nome";
	$age  = 29;
	$account_status  = true;
?>
```

## Constante

Também é possível definir constantes com a função `define()`. E ela não poderá ser alterado em sua execução. Como boa prática, é sempre boa que seja definida em letras maiúsculas para serem facilmente identificadas.

```
<?php
	define("VALOR", "Esse é o valor");
	echo VALOR; // Esse é o valor
?>
```

## Echo ou Print

Para imprimir algo na tela, temos a função `echo` ou `print`.

```
//index.php

<?php
	echo "Esse texto vai aparecer na minha página inicial";
	echo("Esse texto vai aparecer na minha página inicial");

	print "Esse texto vai aparecer na minha página inicial";
	print("Esse texto vai aparecer na minha página inicial");

	// Retornará 4 vezes na tela a frase "Esse texto vai aparecer na minha página inicial"
?>
```

Os 2 fazem a mesma coisa, sendo que a maior diferença fica por conta que o `print` também retorna `1` e o `echo` não retorna nada, além do que ele imprime. Podemos ver melhor isso, abaixo:

```
<?php
    echo print('Teste');
    // Teste1

    $test = print("Teste");
    if ($test) echo 'entrou';
	// Testeentrou
?>
```

O `echo` tem um atalho.

```
<? echo "exemplo" ?>
// É o mesmo que
<?="exemplo" ?>
```

O `print` pode ser usado com ternários, já o `echo`, não.

```
$test = ($age < 18) ? print('menor') : print('maior'); //válido

$test = ($age < 18) ? echo('menor') : echo('maior'); //inválido,
Parse error: syntax error, unexpected T_ECHO
```

Utilizando o `echo`, estará economizando `1 byte` e precisando receber um valor de retorno ou utilizar com um ternário, temos o `print`.

## Estruturas condicionais

Temos o famoso `if/else` e o `switch/case`. Se já mexeu em outras linguagens de programação, já terá uma familiaridade. Se em um determinado trecho do seu código for necessário ter muitas condições em um mesmo ponto, o mais indicado é o `switch/case`, para que o seu código não tenha um `hadouken`. :)

```
<?php
// if/else
if ([condição]) {
	//seu código aqui
} else {
	//seu código aqui
}

if ([condição]) {
	//seu código aqui
} elseif([outra condição]) {
	//seu código aqui
} else {
	//seu código aqui
}

// swicth/case
$item = 3;

switch ($item) {
    case 1:
        echo "Item 1";
        break;
    case 2:
        echo "Item 2";
        break;
    case 3: // condição
        echo "Item 3";  // código que será executado
        break; // Finaliza a execução
    case 4:
        echo "Item 4";
        break;
    case 5:
        echo "Item 5";
        break;
    default:
        echo "Nenhum item";
        break;
}
?>
```

No caso do `if/else`, se nenhuma condição for atendida, sempre o código contido no `else`, será executado. No caso do `switch/case`, se nenhuma condição for atendida, o `default`, será executado.

## Loops

São os laços de repetição que podemos executar, usando: for, while, do while e foreach.

- **_for_** - Executa 3 operações (A primeira antes de executar a condição, onde podemos definir as variáveis que serão utilizadas. A segunda é a condição. E a terceira, o que fará se a condição for verdadeira.)
- **_while_** - Só executamos uma operação que é a condição. Sendo verdadeira, executa o código.
- **_do while_** - Ao contrário do `while`, primeiro executa o código para depois testar a condição. Como podemos ver no exemplo abaixo (que não faz sentido, apenas para exemplo), que ele executa o código, mesmo a condição sendo falsa.
- **_foreach_** - Simplifica o trabalho com um `array`. Executando de acordo com a quantidade de posições do array, sem precisar informar. E já nos informa de uma vez, a chave e valor da posição.

```
<?php
for ($i=0, $len = 5; $i < len; $i++) {
    echo $i;
}
// 01234

$value = 1;
$max = 5;
while ($value <= $max) {
	echo $value;
	$value++;
}
// 12345

$count = 1;
do{
    echo "Loop número $count";
} while ($count < 1);
// Loop número 1

$alpha = array('a', 'b', 'c', 'd');
foreach ($alpha as $key => $value) {
    echo $key." - ".$value."<br />";
}
// 0 - a
// 1 - b
// 2 - c
// 3 - d
?>
```

### Observações

1. Para concatenarmos no PHP, usamos `.` .

```
//index.php

<?php
	echo "Esse texto vai aparecer na minha página inicial. " . "E esse texto também.";
?>
```

2. Uma coisa muito importante no PHP, é sempre usar o `;`, após uma declaração. Você pode estar familiarizado com isso no `CSS` e no `Javascript`.

```
//index.php

<?php
	// sem
	define('PHP', 'de boas') echo PHP
	//Parse error: syntax error, unexpected T_ECHO

	// com
	define('PHP', 'de boas'); echo PHP;
	// de boas
?>
```

3. Podemos interferir no processo normal de um `loop`. Duas palavrinhas mágicas: `break` e `continue`. Como podemos ver abaixo, com o `break`, ele interrompe o processo quando a condição permite a execução do mesmo. No caso do `continue`, quando a condição é verdadeira e o mesmo é executado, ele vai para o próximo `loop`, não imprimindo o '0 - a'.

```
// break
$alpha = array('a', 'b', 'c', 'd');
foreach ($alpha as $key => $value) {
    echo $key." - ".$value."<br />";
    if($value === 'b') {
    	echo "Parei na letra ".$value;
    	break;
    }
}
// 0 - a
// 1 - b
// Parei na letra b

// continue

$alpha = array('a', 'b', 'c', 'd');
foreach ($alpha as $key => $value) {
    if ($value === 'a') continue;
    echo $key." - ".$value."<br />";
}
// 1 - b
// 2 - c
// 3 - d
```

## Conclusão

Essa foi uma pequena introdução ao PHP, nos próximos artigos mostrarei mais sobre a linguagem, frameworks e etc.


Começando com PHP

database


O MongoDB é um tipo de banco de dados orientado a documentos, em vez de registros estritamente definidos e relacionamentos. Esse tipo de banco de dados foi apelidado de `NoSQL`(Not Only SQL). Um documento no MongoDb, agrupa objetos em coleções. Você pode pensar em uma coleção como uma tabela como você criaria em um banco relacional, mas a diferença é que não será forçado a definir um esquema para que possa armazenar alguma coisa.

Você pode incorporar um documento dentro de outro, o que é muito útil para os casos em que há uma relação de um para um. Em um típico banco de dados relacional, você precisa criar duas tabelas e ligá-los em conjunto com uma chave estrangeira para conseguir o mesmo resultado. NoSQL não suporta `joins`, mas se você organizar os dados corretamente, então você vai achar que você não precisa de um `join`.

Vale a pena mencionar o objetivo do MongoDB e do NoSQL não é acabar com o banco relacional. Bancos relacionais ainda são uma solução muito boa para a maioria das necessidades do mundo do desenvolvimento. Mas eles tem os seus pontos fracos, mais notadamente a necessidade de definir um esquema rígido para os seus dados, que o `NoSQL` tenta resolver.

O MongoDB tem como característica ser open source, possuir alta performance, não possuir esquemas, ser escrito em C++, multiplataforma e ser formado por um conjunto de aplicativos JSON. O mesmo foi concluído em 2009 lançando assim a primeira versão do MongoDB.

Comparação dos conceitos em SQL e MongoDB:

| SQL                          | MongoDB                         |
| ---------------------------- | ------------------------------- |
| Banco de dados (database)    | Banco de dados (database)       |
| Tabela (table)               | Coleção (colection)             |
| Linha (row)                  | documento ou documento BSON     |
| Coluna (column)              | Campo (field)                   |
| índice (index)               | índice (index)                  |
| Table joins                  | documentos embutidos e linkados |
| Chave Primária (primary key) | Chave Primária (primary key)    |

## Instalação

Para instalar o MongoDB precisamos fazer o [download](http://www.mongodb.org/downloads) no site oficial.

Para mais detalhes sobre a instalação para as plaaformas, você pode ver nos links abaixo:

- [Windows](https://docs.mongodb.org/master/tutorial/install-mongodb-on-windows/)
- [OS X](https://docs.mongodb.org/master/tutorial/install-mongodb-on-os-x/)
- [Linux](https://docs.mongodb.org/master/administration/install-on-linux/)

É necessário que esteja adicionado o caminho da pasta `bin` do mesmo no **Path** do sistema. Se não já estiver adicionado, pode fazê-lo pela interface do sistema operacional ou pelo comando:

```bash
# ex: C:\Program Files\MongoDB\Server\3.2\bin no windows
export PATH="$PATH:[caminho onde foi instalado]/bin"
```

Com isso, podemos usar o comando `mongod` de qualquer lugar. O mesmo é usado para iniciar o servidor do MongoDB. Por default o MongoDB armazena seus bancos de dados no diretório `/data/db` (Linux e OS X) e `C:\data\db` (Windows). No Windows, `C:` é a unidade onde está executando o comando, se estiver por exemplo usando uma outra unidade como `E:`, a pasta deverá estar na mesma. Portanto, se iniciar o servidor do MongoDB e não tiver essa pasta, terá um erro no terminal.

Se você quiser usar outra pasta, basta usar a flag `dbpath`, ao inciar o servidor:

```bash
# ex: mongod -dbpath=/home/tecnologia/mongodb
mongod -dbpath=[caminho da pasta]
```

## Utilização

Além de iniciar o servidor como o comando `mongod`, também temos o comando `mongo`, para termos acesso ao shell. Ao iniciar o servidor, por padrão o mongo procura por uma base de dados na porta 27107, no seu localhost.

Ao iniciar o shell, por padrão ele utilizará o banco `test`:

```bash
$ mongo
MongoDB shell version: 3.2.4
connecting to: test
```

Para selecionar ou criar uma base de dados, basta usar o comando `use [nome_da_base]`. Sempre que precisar checar em qual base está trabalhando, basta usar o comando `db`. Já para checar quais são as bases existentes, utilize o comando `show dbs` ou `show databases`.

## Inserindo

Para que a base seja criada com o comando `use`, é necessário utilizar o comando `INSERT`:

```bash
use myTest
#switched to db myTest
user = { name : 'Hemerson Vianna', description: 'Testando' }
db.users.insert(user)
#WriteResult({ "nInserted" : 1 })
```

O mesmo também pode ser feito com o comando `SAVE`:

```bash
use myTest
#switched to db myTest
user = { name : 'Hemerson Vianna', description: 'Testando' }
db.users.save(user)
#WriteResult({ "nInserted" : 1 })
```

Usamos o objeto `db`, que aponta para o banco de dados atualmente selecionado. Incluindo o documento `user` dentro da coleção `users`

### A diferença entre `insert` e `save`.

O comando `insert` apenas insere um documento. O comando `save` insere um documento, mas se o registro já tiver um `_id`, o comando faz a função de atualização.

## Consultando

Podemos consultar o que foi inserido com o comando `find` e podemos usar um filtro com o mesmo.

```bash
# O mesmo que SELECT * FROM list
db.list.find()
# { "_id" : ObjectId("571f6bdd891bf653d4cc709d"), "name" : "Hemerson Vianna", "description" : "Testando" }

# Com filtro
# O mesmo que SELECT * FROM list WHERE name="Hemerson Vianna"
db.list.find({"name": "Hemerson Vianna"})
# { "_id" : ObjectId("571f6bdd891bf653d4cc709d"), "name" : "Hemerson Vianna", "description" : "Testando" }

# Especificando os campos
# O campo _id vem por padrão
# O mesmo que SELECT _id, name FROM list
db.list.find({},{"name": 1})

# Removendo o campo _id
# O mesmo que SELECT name FROM list
db.list.find({},{"name": 1, "_id": 0})
```

Acrescentando o método `pretty()`, podemos exibir os resultados de um modo mais apresentável.

```bash
db.list.find().pretty()
```

Além do método `find()` há também o método `findOne()`, que retorna apenas o primeiro resultado da consulta.

```bash
db.list.findOne({"description": "Testando"})
```

Operadores de comparação:

- **equal** - `$eq` é o mesmo que `==`
- **greather** - `$gt` é o mesmo que `>`
- **greather than equal** - `$gte` é o mesmo que `>=`
- **less than** - `$lt` é o mesmo que `<`
- **less than equal** - `$lte` é o mesmo que `<=`
- **not equal** - `$ne` é o mesmo que `!=`
- **in** - `$in` é o mesmo que `IN()`
- **not in** - `$nin` é o mesmo que `NOT IN()`

Operadores lógicos:

- **or** - `$or` é o mesmo que `OR`
- **and** - `$and` é o mesmo que `AND`
- **not** - `$not` é o mesmo que `NOT`
- **nor** - `$nor` é o mesmo que `NOR`

Exemplos:

```bash
db.users.find({"age":{"gte":29, "lte":31}});

db.users.find({"name":{"ne":"Hemerson Vianna"}});
```

## Atualizando

Você pode usar os métodos `update()` e `save()` para atualizar documentos dentro da coleção. Sendo que, o método `update()` atualiza valores em um documento existente, enquanto o método `save()` substitui o documento existente em si pelo documento passado dentro do método `save()`.

```bash
# Update
db.list.update({name: "Hemerson Vianna"}, {$set: {description: "Testando 2"}})
```

Se não utilizar o `$set` todos os dados do usuário como, nome e descrição, serão substituidos pela descrição "Testando 2", ou seja, o `$set` faz com que seja mantido todos os dados, e alterado apenas a descrição.

```bash
# save
db.list.save({"_id" : ObjectId("571f6bdd891bf653d4cc709d"), description: "Testando 2"}})
```

## Removendo

O método `remove()` é usado para remover um documento da coleção. Este método permite 2 parâmetros. O primeiro é o critério de exclusão e o segundo é a flag `justOne`. Se a flag estiver setada como true ou 1, o método removerá apenas um documento.

```bash
# Remove o registro com o valor informado
db.list.remove({name: "Hemerson Vianna"})

# Remove todos os dados da coleção list
db.list.remove()
```

## Mais alguns comandos

- **show collections** - mostra as coleções do banco
- **db.createCollection("[nome da coleção]")** - cria uma coleção
- **db.[coleção].drop()** - deleta a coleção
- **db.dropDatabase()** - deleta o banco atual

## Conclusão

Querendo conhecer mais sobre um banco `NoSQL`, o MongoDB é uma das melhores opções. Nos próximos artigos, entraremos mais no assunto.


Começando com MongoDB


Meu primeiro contato com banco de dados, foi em 2009, e foi com o MySQL. Um SGBD (Sistema Gerenciador de Banco de Dados) relacional e orientado a objetos, que pelo nome, já dá a pista que utiliza a linguagem SQL (Structured Query Language).

Criado na Suécia e em 2008, a MySQL AB, desenvolvedora do MySQL, foi adquirida pela Sun Microsystems por US$ 1 bilhão. No dia 20 de Abril de 2009, foi anunciado que a Oracle compraria a Sun Microsystems e todos os seus produtos, incluindo o MySQL.

MySQL é robusto, multiusuário, multitarefa e inicialmente desenvolvido para projetos de pequeno e médio porte. Alguns dos grandes motivos por ser muito utlizado, é por ser **open source** e a fácil integração com o PHP incluído. Tem compatibilidade com a maioria dos sistemas operacionais, por ter sido desenvolvido em C e C++.

## Características do MySQL

Como já foi citado, compatibilidade com várias plataformas como: Windows, Linux, Unix e outros. Suporte a várias linguagens como PHP, C, C++, Java, Python, Ruby e mais. Um bom sistema de senhas criptografadas flexível e segura. Suporte a ODBC (Open Database Connectivity), padrão que define um conjunto de interfaces que permitem o uso de linguagens de programação como Visual Basic, Delphi, Visual C++, Java, entre outras capazes de utilizar estas interfaces, para ter acesso a uma vasta gama de bases de dados distintas sem a necessidade de codificar métodos de acesso especializados.

Algumas outras características:

- Excelente desempenho e estabilidade;
- Pouco exigente quanto a recursos de novos hardware;
- Facilidade no manuseio;
- Contempla a utilização de vários Storage Engines como MyISAM, InnoDB, Falcon, BDB, Archive, Federated, CSV, Solid…
- Suporta controle transacional;
- Suporta Triggers;
- Suporta Cursors (Non-Scrollable e Non-Updatable);
- Suporta Stored Procedures e Functions;
- Replicação facilmente configurável;
- Interfaces gráficas (MySQL Toolkit) de fácil utilização.

## Instalação

### Windows/ OS X

Pode ser feito via [download](https://dev.mysql.com/downloads/mysql/) do instalador no site oficial.

### Linux

No Linux, além de poder ser feito o download como no windows/OS X, podemos fazê-lo pelo comando:

```bash
# Debian/Ubuntu
apt-get install mysql-server

# Fedora/CentOS
yum install mysql-server
```

## MySQL Client

O servidor é o responsável por armazenar os dados, responder às requisições, controlar a consistência dos dados, entre outras coisas. Aém disso, precisamos da comunicação com o servidor através da SQL. Para isso, temos algumas ferramentas como: [MySQL Workbench](http://www.mysql.com/products/workbench/), [Sequel Pro](http://www.sequelpro.com/), [HeidiSQL](http://www.heidisql.com/), [phpMyAdmin](http://phpmyadmin.net/), [Toad for MySQL](http://www.quest.com/toad-for-mysql/), [MySQL-Front](http://www.mysqlfront.de/), [Neor Profile SQL](http://www.profilesql.com/) e mais.

Para os usuários que preferem a linha de comando. Podemos instalar o `mysql-client`, no Linux, via linha de comando:

```bash
# Debian/Ubuntu
apt-get install mysql-client

# Fedora/CentOS
yum install mysql-client
```

Que permite você se conectar a um servidor MySQL. Ele lhe dará a possibilidade de utilizar na linha de comando o `mysql`.

Mesmo gostando muito da linha de comando, o meu preferido e o que mais utilizo é o **Workbench**.

### Workbench

O MySQL Workbench é uma ferramenta gráfica que permite fazer modelagem de dados, desenvolvimento em SQL e administração do servidor MySQL.

O [download](https://dev.mysql.com/downloads/workbench/) pode ser feito no site oficial. Por linha de comando no linux, pode ser feito com o comando:

```bash
# Debian/Ubuntu
apt-get install mysql-workbench

# Fedora/CentOS
yum install mysql-workbench
```

## Conclusão

Para não ficar muito extenso o artigo, veremos a continuação em um próximo artigo. Onde daremos continuidade com a configuração do mesmo.


Começando com MySQL

prompt


PowerShell é um prompt de comando do sistema operacional Windows. É construído em cima do framework .NET e totalmente orientado a objetos. É fortemente integrado com uma grande quantidade de componentes do Windows.

## Instalação

A partir do Windows Server 2008 R2 e do Windows 7, o mesmo já vem instalado. Para as versões anteriores, pode ser [baixada](https://www.microsoft.com/pt-br/search/DownloadsDrillInResults.aspx?q=Windows+PowerShell&cateorder=1_5_2_11&ftapplicableproducts=Windows) gratuitamente para instalação.

## Cmdlet (command let)

A base do PowerShell são os cmdlets. A Microsoft fez várias estratégias de design na concepção de cmdlets no PowerShell. Primeiro é a capacidade de inferir facilmente nomes de cmdlet, ou pelo menos torná-los fáceis de se descobrir.

Os cmdlets usam o formato verbo-substantivo como em `Get-Service`, `Stop-Service`, ou `Import-CSV`. O verbo do nome do cmdlet indica a ação a ser executada com o substantivo. Normalmente cmdlets são usados ​​para solicitar informações usando o verbo `Get`, como é o caso com `Get-Process` ou `Get-Content`. Em muitos casos, essas combinações de verbo-substantivo pode ser adivinhado ou previsto por causa da convenção de nomenclatura padrão.

Alguns comandos básicos:

- **Get-Location:** obter o diretório atual
- **Set-Location:** alterar o diretório atual
- **Copy-Item:** copiar arquivos
- **Remove-Item:** remover um arquivo ou diretório
- **Move-Item:** mover um arquivo
- **Rename-Item:** renomear um arquivo
- **New-Item:** criar um novo arquivo vazio ou diretório

## Sintaxe

Abaixo temos a sintaxe básica para começar a brincar com o PowerShell. :)

### Vírgula e ponto e vírgula

A vírgula é frequentemente usada para separar itens em uma lista. Considerando que o ponto e vírgula é usado para dividir ideias separadas.

```bash
$i=0
$Log = Get-EventLog -List
ForEach ($Item in $Log) {
  "{0,-30} {1,-20} {2,13}" -f `
  $Item.Log, $Item.OverflowAction, $Item.MaximumKilobytes; $i++
}
```

### Escape

A crase representado como o caractere `` ` `` é o caractere de escape no PowerShell. Você pode usar esse caractere para guias exemplo de impressão `` `t `` ou escapar caracteres com um significado especial como o caractere $ como em `` `$ `` ou escapar citações como `` `" ``.

Você também pode usar o caractere de crase para abranger as suas declarações em várias linhas, que às vezes pode vir a calhar.

### Variáveis

A declaração de variáveis no PowerShell é semelhante ao do PHP, com o prefixo `$`.

```bash
$example = 'teste'
$age = 29
```

### Aspas duplas e simples

Enquanto as asplas duplas interpretam o que está dentro, as aspas simples não interpretam e representam tudo de forma literal.

```bash
$example = 'ando'
write 'test$example'
# test$example
write 'test$example'
# testando
```

## Operadores de comparação

- **Igual:** -eq
- **Diferente:** -ne
- **Maior do que:** -gt
- **Menor do que:** -lt
- **Maior igual a:** -ge
- **Menor igual a:** -le
- **Comparar com wilcards:** -like ou -notlike
- **Comparar string com regex:** -match ou -notmatch
- **Se um array contém um valor(pode ser string):** -contains

## Operadores lógicos

- **e:** -and
- **ou:** -or
- **ou exclusivo:** -xor
- **negação:** ! ou -nor

## Executando os scripts

Por padrão, por uma questão de segurança, a possibilidade de execução de scripts Power Shell vem desabilitada. Para habilitar essa característica precisamos mudar a política de execução

No terminal do PowerShell, execute:

```bash
Get-ExecutionPolicy
// O retorno deverá ser Restricted
```

Para permitir a execução de scripts sem qualquer restrição, utilizaremos a regra `Unrestricted`, que permite executar todo e qualquer script PowerShell.

```bash
Set-ExecutionPolicy Unrestricted
```

Será exibida uma mensagem informando sobre a proteção quanto à execução de Scripts. Digite "S" e pressione `Enter`.

Agora com o commando `Get-ExecutionPolicy`, veremos que o retorno será `Unrestricted`. Assim, os scripts PowerShell já podem ser executados de forma irrestrita.

Existem outras regras além de `Unrestricted` e `Restricted`:

- **AllSigned** – Todos os scripts devem ser assinados por alguém confiável.
- **Remote Signed** – Todos os scripts que forem baixados da Internet devem ser assinados por alguém confiável.
- **Bypass** - A responsabilidade da segurança fica totalmente a cargo do utilizador.

## Conclusão

Esse foi apenas umas simples introdução. A maioria dos assuntos merecem um artigo para cada tópico, entao estaremos vendo mais sobre o asunto nos próximos artigos. Sempre é bom conhecer uma linguagem que possamos mexer com o sistema operacional.


Começando com PowerShell

angular


AngularJS é um framework JavaScript open source, que auxilia na execução de Single Page Application(SPA). Desenvolvido pela Google, utiliza o padrão model–view–controller (MVC), facilitando tanto o desenvolvimento quanto os testes das aplicações.

No Angular, os dados são ligados em ambos os sentidos, ou seja, quando o model é atualizado, a view será atualizada automaticamente para refletir essas mudanças e vice-versa. Isso faz com que a manipulação do DOM seja fácil e é uma das principais vantagens em se utilizar o Angular.

## Data binding

A associação de dados é a característica mais útil e poderosa entre qualquer uma das tecnologias de desenvolvimento de software existentes ou futuras. É realmente um processo que preenche uma conexão entre a visão e a lógica de negócios de uma aplicação.

Basicamente vemos uma associação de sentido único e em dois sentidos de dados no que diz respeito a aplicações AngularJS.

### One-way Data Binding

É uma abordagem em que um valor é retirado do modelo de dados e inserido em um elemento HTML. Não havendo uma maneira de atualizar o model pela view.

AngularJS fornece algumas diretivas de associação dados:

- **ng-bind** - Passa a propriedade de texto interno de um elemento HTML.
- **ng-bind-template** - Quase semelhante a diretiva `ng-bind`, mas permite múltiplos templates.
- **ng-non-bindable** - Declara uma região de conteúdo para o qual a associação de dados será ignorada.
- **ng-bind-html** - Cria associações de dados usando a propriedade interna HTML de um elemento HTML.
- **ng-model** - Cria a associação bidirecional de dados.

### Two-Way Data Binding

É quando há mudança no model e a view reflete a mudança, e vice-versa. Associações de duas vias em AngularJS são criadas com a diretiva ng-model. Praticamente, as associações de duas vias pode ser aplicadas apenas aos elementos que permitem que o usuário forneça um valor de dados, seriam `input`, `textarea`, e elementos `select`.

## Iniciando com o Angular

Para inicializar qualquer aplicação Angular, precisamos invocar a diretiva `ng-app`. Essa diretiva pode ser associada a qualquer elemento HTML e é usado para auto-inicialização de uma aplicação Angular. A diretiva `ng-app` representa a raiz da aplicação e apenas podemos ter uma inicialização de uma aplicação Angular, por página.

O controller é definido utilizando a diretiva `ng-controller`. O controller é um objeto javascript que contém atributos/propriedades e funções. Cada controller aceita o `$scope` como um parâmetro que se refere a aplicação/módulo que o controller, irá controlar.

Você pode fazer o download do framework, pelo próprio [site](https://angularjs.org/) ou pelo:

- Bower

```bash
bower install angular
```

- NPM

```bash
npm install angular
```

E por outros meios.

Exemplo simples, para o primeiro `Olá, mundo`, com AngularJS.

### index.html

```html
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS</title>
  </head>
  <body ng-controller="ExampleController">
    <p>Olá, <em>{{ name }}</em>!</p>
    <script src="lib/angular/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="example-controller.js"></script>
  </body>
</html>
```

### app.js

```javascript
;(function () {
  'use strict'

  var app = angular.module('app', [])
})()
```

### example-controller.js

```javascript
;(function () {
  'use strict'

  angular.module('app').controller('ExampleController', ExampleController)

  ExampleController.$inject = ['$scope']

  function ExampleController($scope) {
    var vm = this
    $scope.name = 'Hemerson'
  }
})()
```

## Conclusão

Angular, veio como a solução para abstrair a manipulação do DOM da lógica da aplicação. Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação. Isto permite que o desenvolvimento evolua em ambos os lados, de forma paralela, e permite o reuso de código. E tem muitos recursos e vantagens que veremos nos próximos artigos sobre o assunto.


Começando com AngularJS

javascript


Lançado em 27 de maio de 2009, sendo criado por Ryan Dahl, juntamente com alguns colaboradores. O node.js surgiu para facilitar o desenvolvimento de aplicações `real-time` e de alta escalabilidade. Ele utiliza o mecanismo V8 Javascript, que é utilizado pela Google no navegador Chrome. A google criou esse interpretador escrito C++, e é possível fazer o download desse mecanismo e integrá-lo aonde desejar. Um mecanismo `javascript`, interpreta e executa o código. Assim com o V8, essa interpretação e execução é feita no servidor.

O pessoal de front-end, fica muito grato com a existência da plataforma Node.js e assim, conseguindo rodar `javascript`, no lado do servidor. É isso mesmo, para quem já utiliza a linguagem `javascript`, a curva de aprendizado será muito pequena. Portanto, irá desenvolver em `javascript` na plataforma do Node.js.

O Node.js possui vários módulos nativos que possibilitam trabalhar com recursos I/O (entrada/saída) no servidor. Podendo assim, ter várias bibliotecas a sua disposição para trabalhar com: HTTP, DNS, WebSockets e mais. Além de manipular arquivos, criptografias e mais. Com a vantagem desses eventos serem assíncronos.

## Node foundation

O `io.js`, oficialmente lançado em dezembro de 2014, começou com um `fork` do projeto do Node.js, que hoje é mantido pela empresa Joyent, onde Dahl, trabalha. A iniciativa foi tomada por Fedor Indutny, um dos principais membros da comunidade Node.js, que estava insatisfeito com o conselho consultivo da Joyent. Outros importantes colaboradores da comunidade apoiaram a ideia, como: Trevor Norris, Isaac Z. Schlueter e Mikeal Rogers. Schlueter, deixa claro no FAQ do blog do io.js, que o `fork` é para prover um espaço para que os contribuidores do núcleo Node possa continuar fazendo o seu trabalho de melhoria.

Uma das principais queixas, era a falta de versões no projeto do Node.js. E com o io.js, a intenção era de lançar com crescente regularidade, versões que são compatíveis com o ecossistema `npm` construído até o momento para o Node.js.

Em 16 de junho de 2015, a [`Linux foundation`](http://www.linuxfoundation.org.) anunciou que Node.js e io.js, iriam oficialmente fundir suas bases de código e continuar o trabalho como `Node foundation` e seria hospedado pela `Linux Foundation`.

Hoje, já estamos na versão 5.3.0 . Realmente o o ritmo de contribuições com o io.js, acelerou muito as melhorias. Antes da fusão, era curioso ver no `github`. Assim, vemos o poder da comunidade. Parabéns aos envolvidos. :)

## Baseado em Node.js

Tem muitos projetos que são baseados na plataforma e nos ajudam no dia a dia. Alguns deles são:

- **_Grunt ou Gulp_**: Automatizador de tarefas, muito conhecido por quem desenvolve o front-end. O mesmo nos ajuda nas tarefas de minificação de arquivos, compilação e mais.
- **_MeteorJS_**: É um framework web JavaScript open-source escrito em Node.js.
- **_KarmaJS_** - Uma ferramenta que gera um servidor Web que executa o código fonte com o código de teste para cada um dos navegadores conectados.

Mesmo que ainda não tenha usado o Node.js, no lado do servidor, é possível utilizá-lo para outras tarefas. Principalmente, quem é front-end, é quase obrigatório tê-lo instalado na máquina, por causa dos automatizadores de tarefas, citados acima. :)

## Threads (Usuários fazendo requisições para a aplicação)

Em sistemas com arquitetura de `Threads Bloqueantes`, que é o caso dos desenvolvidos em JAVA ou .NET, por exemplo. Quando há acessos simultâneos para o mesmo recurso, eles são enfileirados. Assim, cada um deles utiliza o recurso um de cada vez, garantindo a integridade dos dados, por ter o controle de acesso único. Esse conceito é muito utilizado em aplicações bancárias e e-commerce.

O Node.js segue o conceito de `Threads Não-Bloqueantes`, portanto, é totalmente `single-thread`. Isso traz como vantagem uma alta escalabilidade para aplicações que necessitam de um processamento sem controle de processamento concorrente (threads), pois não há um agente bloqueando e enfileirando threads. Nos casos de aplicações que necessitem de uma resposta rápida, por exemplo, consultas frequentes no banco de dados, o node.js faz esse trabalho muito bem, como: Games Multiplayer, Web Services, Blogs, Redes sociais, Web Analytics, Chats e mais.

## CommonJS

O Node.js utiliza o padrão CommonJS para organização e carregamento dos módulos.
Para carregar um módulo, você fará uso da função `require`.

```
require('nome-do-modulo');
```

E o módulo terá que utilizar as variáveis globais: exports ou module.exports.

```
module.exports = function() {
	// script do módulo
}
```

## Rodando um exemplo

Primeiramente, precisará ter o node instalado, se não tiver é só [acessar o site e baixar](https://nodejs.org/en/).
Depois vamos dar uma conferida no terminal:

```
node -v
```

Com o editor de sua preferência, vamos criar o arquivo `exemplo.js`:

```
var http = require('http');
http.createServer(function(req,res) {
  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
  res.end('Exemplo com Node.js');
}).listen(4000);
console.log('Servidor rodando no endereço localhost:4000');
```

No terminal, você vai até onde está o arquivo ou escreve todo o caminho para executá-lo. No caso abaixo, vamos supor que estou na pasta onde se encontra o arquivo, sendo apenas necessário digitar:

```
node exemplo.js
```

Acessando no navegador da sua preferência, o endereço http://localhost:4000, poderemos ver o texto "Exemplo com Node.js". E assim, temos um exemplo simples com o Node.js.

## Conclusão

Quer deixar um `front-ender` feliz, é só dizer que ele pode escrever em `javascript`, para rodar no servidor. E ele vai a loucura, se disser que pode usar os recursos do ES6. E isso é possível com a nossa querida plataforma Node.js. Acima, você pode conferir algumas informações e nos próximos artigos, terá mais algo prático. Até lá.


Começando com NodeJS


MeteorJS é plataforma completa para construir aplicações web e móveis em tempo real usando JavaScript, o mesmo é escrito em Node.js. Portanto, é mais que um framework. Por padrão, usa MongoDB para o banco de dados e Handlebars como linguagem de template. Ele foi apresentado a comunidade em dezembro de 2011 com o nome de Skybreak. A versão 1.0, foi lançada em dezembro de 2014, sendo uma declaração pública de estabilidade.

A principal característica é que você terá um ambiente completo pra desenvolver e gerenciar uma aplicação desde o banco de dados MongoDB, backend Node.js, frontend JavaScript e build mobile usando Cordova do Phonegap.

## DDP

DDP é muito simples e minimalista. É um protocolo baseado em JSON. Tecnicamente, DDP pode ser implementado em cima de qualquer transporte duplex. A implementação atual do Meteor é baseada em WebSockets e SockJS. SockJS é um transporte de emulação WebSockets, que pode ser usado quando o WebSockets não está disponível.

DDP é o coração do MeteorJS e é o protocolo que o mesmo usa para se comunicar entre o cliente e o servidor. DDP é uma sigla para Distributed Data Protocol. Meteor implementou ambas as implementações de cliente e servidor para DDP. Existem algumas bibliotecas do lado cliente para frameworks e linguagens para se conectar com Meteor via DDP.

## Instalação

### Windows

Para instalar no Windows, basta acessar o [Link](https://install.meteor.com/windows).

### OS X ou Linux

Poderá instalar utilizando a biblioteca cURL.

```bash
curl https://install.meteor.com/ | sh
```

## Meteor Tool

Meteor Tool é uma CLI (Command Line Interface), que gerenciará o que for necessário para o desenvolvimento com o **Meteor**. Para verificar que já pode testar, basta no terminal, executar o comando:

```bash
meteor --version
```

## Princípios do Meteor

- **Dados na rede:** Não envie HTML pela rede e sim apenas dados para deixar o cliente decidir como renderizá-lo.
- **Uma só linguagem:** Escreva código Javascript em ambas camadas: cliente e servidor.
- **Banco de dados em todo lugar:** Utilize uma API de interface única e transparente que te permite acessar o banco de dados tanto no cliente como no servidor.
- **Compensação de latência:** No cliente é usado prefetching e model simulation na API do banco de dados para atingir latência zero no acesso de seus recursos.
- **Atualização automática das camadas:** Por default tudo funciona em real-time. E todas as camadas da aplicação adotam o paradigma orientado à eventos, que é herdado do Node.js.
- **Abrace o ecossistema:** Totalmente open-source o Meteor possui suas convenções pelo qual agrega novos valores ao invés de ser ferramenta uma que vai substituir outros frameworks atuais.
- **Simplicidade igual a Produtividade:** Desenvolva de forma simplificada, utilize APIs fáceis de aprender e implementar, afinal essa será a melhor forma de criar uma aplicação.

## Criando a primeira aplicação

Para criar um novo projeto, basta executar o comando `create` no terminal, junto com o nome que o projeto terá:

```bash
meteor create example
```

Vamos ver o projeto rodando:

```bash
cd example
meteor
// Depois acesse : http://localhost:3000/
```

O Meteor vem com algumas aplicações de demonstração que você pode experimentar. Basta executar uma das sequências dos comandos abaixo no terminal:

```bash
// app de tarefas
meteor create --example todos
cd todos
meteor

// exemplo de aplicação móvel
meteor create --example localmarket
cd localmarket
meteor
```

## Links

- [Site oficial do Meteor](http://meteor.com/)
- [Documentação oficial do Meteor](http://docs.meteor.com/)
- [Meteor Example apps ](http://www.meteor.com/examples)
- [Twitter do Meteor](https://twitter.com/meteorjs)
- [Blog Underground WebDev - Meteor](http://udgwebdev.com/meteor)

## Conclusão

Essa foi uma introdução simples ao MeteorJS. O mesmo tem muitas vantagens como: Desenvolvimento em tempo real, desenvolvimento com uma linguagem única, fácil de aprender, fácil de configurar, recursos úteis, escabilidade e desenvolvimento ágil.

Portanto, tem muito a oferecer para um projeto web ou mobile.


Começando com MeteorJS


Depois de 20 anos, temos a evolução de alguns recursos da linguagem JavaScript. Em junho de 2015, foi anunciada pela Assembleia Geral da Ecma International a aprovação da sexta edição da ECMA-262.

O nome oficial é ECMAScript 2015 e de agora em diante, as novas versões irão em seu nome incluir ECMAScript seguido pelo ano de sua liberação.

O ES6, já mostra que veio com várias melhorias, pela sua documentação com quase 600 páginas, enquanto a documentação do seu antecessor ES 5.1, tem 245 páginas.

## Compatibilidade

Para evitar problemas de compatibilidade, o ES6 é compatível com as versões anteriores. Com isso, não precisa arrancar os cabelos por causa do seu código antigo.

Para ficar por dentro, da compatibilidade com os browsers, confira no [link](http://kangax.github.io/compat-table/es6/), que é mantido pelo [Kangax](https://twitter.com/kangax).

## Transpiler

Atualmente nenhum navegador suporta completamente todos os novos recursos do ES6. Para utilizar os novos recursos sem problemas, é necessário utilizar um `transpiler` para o ES5. Uma dica para esse trabalho, é o [Babel](https://babeljs.io/)

## Algumas novidades

Default Parameters Values - Com certeza, muitos desenvolvedores vão matar uma linha ou mais, podendo já passar em uma função, um parâmetro com um valor `default`.

```
// ES 5
function worked(entry, leave) {
    leave = leave || 18;
    return leave - entry;
}
```

```
// ES 6
function worked(entry, leave = 18) {
    return leave - entry;
}
```

Classes - Agora ficou mais declarativo e fácil de entender e o método constructor para aproximar o javascript com as demais linguagens.

```
// ES 5
function Accordion(element){
	this.container = element;
	this.effect;
}
Accordion.prototype.close = function () {
}

```

```
// ES 6
class Accordion {
    constructor(element) {
        this.container = element;
        this.effect;
    }

    close() {
    }
}
```

O intuito do post é só dar uma introdução, mais exemplos e a documentação, você encontra nos links abaixo.

## Links interessantes

[ECMAScript 2015](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf)
Especificação da linguaguem com a versão ECMAScript 2015.

[Futuro do Subjuntivo - Quando vós programardes JavaScript](https://goo.gl/PL2bV2)
Palestra muito boa que acompanhei ao vivo no Front Carioca 2015, onde o Jaydson Gomes mostra muito bem algumas novidades.

[ES6: Brincando com o novo JS](http://jsrocks.org/pt-br/2014/11/es6-playing-with-the-new-javascript)
Artigo do Pedro Nauck, que vale a pena dar uma conferida.

[ES6: Using the new Javascript today!](https://www.youtube.com/watch?v=OVPzgq2pBTc)
Video com a apresentação do Pedro Nauck.

## Conclusão

Com a especificação do ECMAScript 2015, muitas coisas melhoraram e por isso já devemos estar utilizando para atualizar os projetos e já atualizar com os novos padrões. E no momento, de preferência com a ajuda de um `transpiler`. Muita gente como eu, aguardava esse momento, ele já chegou e já está passando. Já acabou a meses a época para testar as novidades, devemos utilizar. É claro, que dependendo do projeto, não será uma tarefa fácil ou rápida, mas já temos que conhecer todas as novas melhorias.


Começando com ECMAScript 2015


Variáveis são endereços de memória onde armazenamos dados ou informações. Precisamos declarar as mesmas, para manipular os dados e informações com facilidade e para termos controle durante os processos.

Até a quinta versão do ECMA-262, variáveis não declaradas ou sem valor receberiam o valor `undefined`. Agora com a sexta versão, variáveis declaradas sem valor e não declaradas, terão o valor `string` e `undefined`, respectivamente.

```
// versão 5
var name;
console.log(typeof name); // undefined
console.log(typeof calc); // undefined
```

```
// versão 6
var name;
console.log(typeof name); // string
console.log(typeof calc); // undefined
```

Podemos apenas declarar uma variável sem valor, com isso já estaremos configurando na memória para o seu uso posteriormente. Declarando já com um valor, dizemos que a variável está sendo inicializada.

```
var name = 'Hemerson';
```

É possível declarar uma variável sem usar a palavra-chave var na declaração e atribuir um valor para ela. Trata-se de uma declaração implícita.

```
name = 'Hemerson';
```

Não é possível usar uma variável que nunca tenha sido declarada.

```
var result = width * height;
```

## Nomeação

A linguagem JavaScript é '**case sensitive**', portanto faz distinção entre maiúsculas e minúsculas.

```
var name = 'hemerson';
var Name = 'fulano';

console.log(name) // hemerson
console.log(Name) // fulano
```

Regras para nomear uma variável:

- 1. O caractere inicial deve ser uma letra ASCII ou um caractere de sublinhado(\_). E não pode iniciar por um número
- 2. Os próximo caracteres devem ser letras, números ou sublinhados (\_).
- 3. Não pode ter o nome de uma palavra reservada.

### Palavras reservadas

break - default - function - return - var - case - delete - if - switch - void - catch - do - in - this - while - const - else - instanceof - throw - with - continue - finally - let - try - debugger - for - new - typeof

Pode:

```
var _name;
var Age;
var match_result;
```

Não pode:

```
var 107Test;
var name&age;
```

## E aí, comma-first ou trailing commas?

Comma-first:

```
var name = 'hemerson'
    , age= 28
;
```

Trailing commas:

```
var name = 'hemerson',
    age= 28;
```

O padrão tradicional e o qual muitos estão acostumados, seria com as vírgulas à direita. Com a vírgula na frente, na minha opinião tem facilitado bastante a legibilidade do código e dependendo da ocasião, facilidade para comentar uma variável.

Sendo adepto do comma-first, deixo um [artigo do Suissa](http://nomadev.com.br/comma-first-por-que-usar/) que levanta uns bons pontos.

Essa é uma questão que mesmo tendo uma preferência, deixo aberto que a decisão seja tomada visando o melhor para o projeto e padronização da equipe.

<br><br>

### Série JavaScript

- 1.[Introdução](/tecnologia/artigos/javascript/javascript-introducao)
- 2.[Tipos de dados](/tecnologia/artigos/javascript/javascript-tipos-de-dados)
- 3.[Valores](/tecnologia/artigos/javascript/javascript-valores)
- 4.Variáveis


Javascript - Variaveis


Agora que já conhecemos os tipos de dados que existem na linguagem JavaScript, agora precisamos ver mais sobre os valores em si. Como no caso do tipo `boolean`, que tem apenas 2 valores possíveis, `true` ou `false`.

Podemos inverter o valor do tipo `boolean` com o operador `!`(negação). Ex:

```
var test = true;
console.log(!test); // false
```

Negando 2 vezes `!!`, podemos ter o retorno real do valor. Ex:

```
var test = true;
console.log(!!test); // true
```

Uma coisa muito importante para se levar em conta nas condições que você possa fazer no código JavaScript, é se determinados valores são considerados verdadeiros ou falsos.

Considerados `falsy` (falsos):

- false
- 0 (zero)
- "" (string vazia)
- null
- undefined
- NaN

```
if(false) console.log('true');
else console.log('false');

if(0) console.log('true');
else console.log('false');

if("") console.log('true');
else console.log('false');

if(null) console.log('true');
else console.log('false');

if(undefined) console.log('true');
else console.log('false');

if(NaN) console.log('true');
else console.log('false');
```

Considerados `truthy` (verdadeiros):

- "0" (zero)
- "false"
- function() {}
- []
- {}

```
if("0") console.log('true');
else console.log('false');

if("false") console.log('true');
else console.log('false');

if(function(){}) console.log('true');
else console.log('false');

if([]) console.log('true');
else console.log('false');

if({}) console.log('true');
else console.log('false');
```

Também é importante conhecer os possíveis valores do tipo `number`.

- Inteiro

```
var num = 10;
var num2 = -10;
```

- Decimal

```
var num = 10.12;
var num2 = -10.12;
```

- Com expoente

```
var num = 421e6
console.log(num); //421000000

var num2 = 421e-6
console.log(num2); //0.000421
```

- Hexadecimal

```
var num = 0xFF;
console.log(num); // 255
```

<br><br>

### Série JavaScript

- 1.[Introdução](/tecnologia/artigos/javascript/javascript-introducao)
- 2.[Tipos de dados](/tecnologia/artigos/javascript/javascript-tipos-de-dados)
- 3.Valores
- 4.[Variáveis](/tecnologia/artigos/javascript/javascript-variaveis)


Javascript - Valores


A linguagem JavaScript é uma linguagem de tipagem fraca (ou tipagem dinâmica). Isso significa que variáveis JavaScript não têm nenhum tipo predeterminado. Assim, o tipo de uma variável é o tipo do seu valor.

Em JavaScript, você pode realizar operações em valores de diferentes tipos sem causar uma exceção. O interpretador converte implicitamente um dos tipos de dados no outro e realiza a operação.

Regras para os tipos primários:

```
// string + number
var test = '1' + 1;
console.log(typeof test); // string

// string + boolean
var test2 = '1' + false;
console.log(typeof test2); // string

// number + boolean
var test3 = 1 + false;
console.log(typeof test3); // number

```

### Primários

Os tipos de dados primários (primitivos) são:

String

```
var name = 'Hemerson';
console.log(typeof name); // string
```

Number

```
var age = 29;
console.log(typeof age); // number
```

Boolean

```
var rich = false;
console.log(typeof rich); // boolean
```

Symbol (Novidade com a versão ECMAScript 2015)

```
var symbol1 = Symbol('foo');
console.log(typeof symbol1); // symbol
```

### Compostos

Os tipos de dados compostos (de referência) são:

Object

```
var obj = {};
console.log(typeof obj); // object
```

Array

```
var items = [];
console.log(items instanceof Array); // true
```

### Especiais

Os tipos de dados especiais são:

Null

```
var money = null;
console.log(money); // null
```

Undefined

```
console.log(typeof lost); // undefined
```

<br><br>

### Série JavaScript

- 1.[Introdução](/tecnologia/javascript/javascript-introducao)
- 2.Tipos de dados
- 3.[Valores](/tecnologia/javascript/javascript-valores)
- 4.[Variáveis](/tecnologia/javascript/javascript-variaveis)


Javascript - Tipos de dados


E aqui se inicia a série "JavaScript". A ideia veio depois de ver um número grande de front-enders que ainda não se preocupam em conhecer a linguagem e só apenas usam frameworks e bibliotecas.

Quando perguntado se conhece a linguagem, a resposta mais ouvida foi: **_'Uso jQuery!'_**

Então, vamos falar sobre a linguagem JavaScript, que já foi chamada de Mocha, posteriormente LiveScript e por fim JavaScript. A mesma foi criada por [@BrendanEich](https://twitter.com/brendaneich), e teve sua primeira versão JavaScript 1.0, introduzida no navegador Netscape 2.0 em 1996.

> JavaScript é uma linguagem de programação interpretada . Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.
> <cite> -- JavaScript
>
> - [Wikipédia](http://pt.wikipedia.org/wiki/JavaScript) > </cite>

> Com JavaScript, podemos controlar o comportamento do navegador em diversos aspectos, como criar janelas pop-up, apresentar mensagens ao usuário, alterar as dimensões do navegador, interferir na barra de status, retirar menus, fechar e abrir janelas.
>
> JavaScript é capaz de acessar os campos e valores digitados em um formulário HTML e proceder à validação dos dados, realizar cálculos e fornecer dicas de preenchimento dos campos.
>
> <cite> -- JavaScript Guia do Programador
>
> - Maurício Samy Silva
>   </cite>

Atualmente, o nome oficial da linguagem JavaScript é ECMAScript e a versão é a ECMA-262 v6 (ECMAScript 2015).

### Tabela 1.1 – Versões da JavaScript

| Versão           | Implementação                                | Mês/ano       |
| ---------------- | -------------------------------------------- | ------------- |
| JavaScript 1.0   | Netscape 2.0                                 | Março 1996    |
| JavaScript 1.1   | Netscape 3.0                                 | Agosto 1996   |
| JavaScript 1.2   | Netscape 4.0 e 4.05                          | Junho 1997    |
| JavaScript 1.3   | Netscape 4.06 e 4.07x                        | Outubro 1998  |
| JavaScript 1.4   | Servidores Netscape                          | -             |
| JavaScript 1.5   | Netscape 6.0 – Firefox 1.0 – Opera 6.0 a 9.0 | Novembro 2000 |
| JavaScript 1.6   | Firefox 1.5 – Safari 3.0 e 3.1               | Novembro 2005 |
| JavaScript 1.7   | Firefox 2.0 – Safari 3.2 e 4.0 – Chrome 1.0  | Outubro 2006  |
| JavaScript 1.8   | Firefox 3.0                                  | Junho 2008    |
| JavaScript 1.8.1 | Firefox 3.5                                  | 2008          |
| JavaScript 1.9   | Firefox 4.0                                  | 2009          |
| JavaScript 1.0   | Internet Explorer 3                          | Agosto 1996   |
| JavaScript 2.0   | Internet Explorer 3 – Windows IIS 3          | Janeiro 1997  |
| JavaScript 3.0   | Internet Explorer 4                          | Outubro 1997  |
| JavaScript 4.0   | Visual Studio 6.0                            | -             |
| JavaScript 5.0   | Internet Explorer 5                          | Março 1999    |
| JavaScript 5.1   | Internet Explorer 5.01                       | -             |
| JavaScript 5.5   | Internet Explorer 5.5                        | Julho 2000    |
| JavaScript 5.6   | Internet Explorer                            | Outubro 2001  |
| JavaScript 5.7   | Internet Explorer 7                          | Novembro 2006 |
| JavaScript 5.8   | Internet Explorer 8                          | Março 2009    |
| ECMA-262 v1      | Navegadores versão 4                         | 1998          |
| ECMA-262 v2      | Versão de testes                             | 1998          |
| ECMA-262 v3      | Navegadores versão 6                         | 1999          |
| ECMA-262 v4      | Navegadores versão 6+                        | 2002          |
| ECMA-262 v5      | Navegadores versão 6+                        | 2009          |
| ECMA-262 v6      | Versão atual                                 | 2015          |

> ECMA (acrônimo para European Computer Manufacturers Association) é uma associação fundada em 1961 dedicada à padronização de sistemas de informação. Desde 1994 passou a se denominar Ecma International para refletir suas atividades internacionais. A associação é aberta a companhias que produzem, comercializam ou desenvolvem sistemas de computação ou de comunicação na Europa.
> <cite> -- Ecma International
>
> - [Wikipédia](http://pt.wikipedia.org/wiki/Ecma_International) > </cite>

> ECMAScript é uma linguagem de programação baseada em scripts, padronizada pela Ecma International na especificação ECMA-262. A linguagem é bastante usada em tecnologias para Internet, sendo esta base para a criação do JavaScript/JScript e também do ActionScript.
> <cite> -- ECMAScript
>
> - [Wikipédia](http://pt.wikipedia.org/wiki/ECMAScript) > </cite>

## Mãos à obra

Conseguimos inserir de algumas formas o código JavaScript em um documento HTML.

Incorporado no `<head>` ou no `<body>`:

```
<!doctype html>
<html>
  <head>
    <script type="text/javascript">
      // Insira o código Javascript aqui
    </script>
  </head>
  <body>
    <script type="text/javascript">
      // Insira o código Javascript aqui
    </script>
  </body>
</html>
```

Linkado no `<head>` ou no `<body>`:

```
<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="arquivo.js"></script>
  </head>
  <body>
  	<script type="text/javascript" src="arquivo.js"></script>
  </body>
</html>
```

Também é possível de forma `inline`, mas não é aconselhável por dificultar a manutenção e etc.

```
<!doctype html>
<html>
  <head>
  </head>
  <body>
    <a href="#" onclick="document.getElementsByTagName('p')[0].style.color = 'red';return false;">clique aqui</a>

    <p>Text 1</p>
    <p>Text 2</p>

  </body>
</html>
```

## EcmaScript 2015

Já podemos utilizar as novas features sem preocupação com o auxílio de um "transpiler", como o [BabelJS](https://babeljs.io/).
Em um próximo artigo, falarei sobre as novas features.

Com isso, temos uma introdução na linguagem. :)

<br><br>

### Série JavaScript

- 1.Introdução
- 2.[Tipos de dados](/tecnologia/artigos/javascript/javascript-tipos-de-dados)
- 3.[Valores](/tecnologia/artigos/javascript/javascript-valores)
- 4.[Variáveis](/tecnologia/artigos/javascript/javascript-variaveis)


Começando com Javascript

ruby


Ruby é uma linguagem interpretada, criada por [Yukihiro Matsumoto](https://twitter.com/yukihiro_matz). O primeiro `release` da linguagem foi feito em 21 de dezembro de 1995, no Japão. Em setembro de 2000, o primeiro livro em inglês foi impresso ([Programming Ruby](http://ruby-doc.org/docs/ProgrammingRuby/)). No ano de 2003, foi lançado o **meta-framework**(framework de frameworks), Rails. Por volta de 2005, o interesse pela linguagem Ruby cresceu com o Ruby on Rails.

## Instalação

Você pode usar diversas ferramentas para instalar o Ruby. Para verificar se já tem o Ruby instalado, basta digitar o comando `ruby --version` ou o seu atalho `ruby -v` no terminal ou console. Caso, ainda não tenha instalado, siga os passos abaixo, para cada sistema operacional.

### Linux

O Debian GNU/Linux e o Ubuntu usam o gerenciador de pacotes apt. Você pode utilizá-lo da seguinte forma:

```bash
sudo apt-get install ruby-full
```

O CentOS, o Fedora e o RHEL usam o gerenciador de pacotes yum. Você pode utilizá-lo da seguinte maneira:

```bash
sudo yum install ruby
```

### Windows

Se você está no Windows, existe um ótimo projeto para ajudá-lo a instalar o Ruby: [RubyInstaller](http://rubyinstaller.org/). Ele te dá tudo o que você precisa para configurar um ambiente de desenvolvimento em Ruby completo no Windows.

### OS X

No OS X Yosemite e Mavericks, o Ruby 2.0 já está incluso. O OS X Mountain Lion, Lion e Snow Leopard vêm com o Ruby 1.8.7.
Muitas pessoas no OS X usam o Homebrew como gerenciador de pacotes. É muito fácil de obter uma versão mais nova do Ruby usando o Homebrew:

```bash
// instala a versão mais recente
brew install ruby
```

## Interactive Ruby Shell – IRB

O IRB é uma ferramenta para interpretar código Ruby com uma resposta imediata que é executada em um terminal ou console. Ela se encaixa na categoria de programas RELP (Read, Eval, Print, Loop), ou seja, ela aceita ou lê uma instrução (read), avalia ou interpreta esta (evalution), mostra ou imprime o resultado (print), e volta para o primeiro passo (loop). Quando o ruby é instalado essa ferramenta é também instalada. Para que possamos usá-la basta digitar o comando irb no se prompt de comando ou terminal:

```bash
irb(main):001:0>
```

## Variável

No Ruby as variáveis são associadas de acordo com a nomenclatura e cada variável permite sua utilização de acordo como ela foi nomeada. Quando se programa em Ruby, é interessante que se utilize as variáveis de "menor impacto" possível. Sendo assim, dar preferência pela variável local, caso não seja possível, pela de instância e assim em diante.

As variáveis são as seguintes:

- **_local_** - inicia-se com letra minúscula ou undeline, mesma nomenclatura de métodos, e funcionam apenas dentro de métodos, elas não mantém seu valor, e por isso são preferencialmente usadas quando possíveis.

- **@instância** - A nomenclatura para variáveis de instância no Ruby, são as palavras precedidas por @, por exemplo, @variavel. A variável de instância mantêm o seu valor e podem ser acessadasr todo o objeto aonde foi inicializada. Variáveis de instância podem ser acessadas fora do objeto se usado como atributo daquele objeto.

- **$globais** - As variáveis globais podem ser acessadas de qualquer parte do programa, essas variáveis inclusive são utilizadas pelos eventos do RPG Maker (switches e variáveis).

- **@@classe ou estática** - Algumas vezes, as classes precisam armazenar informações referentes a si próprias, ou seja, ter de alguma forma o seu próprio estado, e é aí que entram as variáveis de classe. Uma variável de classe é compartilhada entre todos os objetos desta classe, portanto podem ser usadas por cada um deles e também pelos métodos da classe.

- **constantes** – Apesar de não ser uma variável, é importante ressaltar e explicar como ela funciona. As constantes no Ruby, diferente de muitas outras linguagens, podem ser mudadas, porém é altamente não recomendado. As constantes como o nome diz, devem ser usadas para valores que não mudam através do programa.

Além das regras já mencionadas, depois do primeiro caractere do seu nome, uma varíavel só poder ter combinações de letras, números e o caractere de underscore (convenção `snake case`). E quando uma variável possui mais de uma palavra no seu nome, as palavras são separadas pelo undescore. Além disso, o caractere após @ e @@ não pode ser um dígito, ou seja, @@1 e @2 são nomes de variáveis inválidos no Ruby.

Os 4 escopos de variáveis do Ruby.

```ruby
answer = "Sim"

@age = 29

$version = 1.2

@@count = 57
```

## Tipos de dados

Ruby não tem tipos de dados primitivos, ou seja, números, strings, arrays, hashes, símbolos, valores booleanos são objetos e podem ser alterados dinamicamente.

**Boolean**:

Aceita 2 valores (true ou false).

```ruby
#!/usr/bin/ruby

status = true

if status
  puts "Permitido"
else
  puts "Negado"
end

# => "Permitido"
```

**Symbol**:

A diferença de um símbolo para uma variável é o prefixo com dois pontos `:`. Você não precisa pré-declarar um símbolo e se certificar que sejam únicos. Não é preciso atribuir um valor para um símbolo, o Ruby cuida disso para você. Não importa onde apareça em seu programa, um símbolo particular terá sempre o mesmo valor.

Ele é apenas um nome e um ID interno. Símbolos são mais eficientes que strings. Duas strings com o mesmo conteúdo são dois objetos diferentes, mas para qualquer nome existe apenas um objeto Symbol. Isso pode economizar tempo e memória.

```ruby
#!/usr/bin/ruby

puts "teste".object_id
puts "teste".object_id
puts :symbol.object_id
puts :symbol.object_id

# 9258800
# 9258180
# 776028
# 776028

```

**Number**:

Ruby pode lidar com ambos os números inteiros e números de ponto flutuante (números com decimais).

```ruby
#!/usr/bin/ruby
ten = 10
fifteen_point_two = 15.2
```

Você pode usar o `underscore` como um divisor de milhares ao escrever números longos. O Rubu ignora o `underscore`. Isso deixa mais fácil de ler, números grandes.

```ruby
#!/usr/bin/ruby
billion = 1_000_000_000
```

**String**:

Não é diferente das outras linguagens que deve ter visto. Você pode usar tanto aspas duplas e aspas simples para criar uma string.

```ruby
#!/usr/bin/ruby
example = "Hello, World!"
new_example = 'New example'
```

Ruby permite incorporar o resultado de algum código dentro de uma string. O código da interpolação de string vai entre #{ e }.

```ruby
#!/usr/bin/ruby
name = "Hemerson"
phrase = "Meu nome é #{name}"
result = "30 + 5 = #{40 - 5}"
```

**Array**:

Existem duas maneiras de criar um array vazio:

```ruby
#!/usr/bin/ruby
my_array = Array.new
my_other_array = []
```

**Hash**:

Um hash em Ruby é como um objeto literal em JavaScript ou um array associativo em PHP. Eles são feitos de forma semelhante aos arrays.

```ruby
#!/usr/bin/ruby
my_hash = Hash.new
my_other_hash = {}
```

Para colocar item em um hash, usasse colchetes. Você pode usar qualquer valor como a chave, mas strings ou símbolos são opções mais comuns.

```ruby
#!/usr/bin/ruby
my_hash["name"] = "Hemerson"
my_hash[:age] = 29
```

Para criar um hash com objetos nele desde o início, você usa uma notação quase idêntica aos literais de um objeto JavaScript. A única diferença é que Ruby usa uma seta (=>) entre chaves e valores:

```ruby
#!/usr/bin/ruby
developer = { :name => "Hemerson", :age => 29, :job => "front-end" }
```

## Conclusão

Tenho a se ver sobre Ruby, principalmente sobre Rails. Nos próximos artigos, estaremos olhando mais sobre o assunto.


Começando com Ruby

python


Python é uma linguagem interpretada, orientada a objetos (incluindo herança múltipla). Apresenta semântica dinâmica, um moderno mecanismo de tratamento de erros e exceções. Python possui Uma forma eficiente de acesso e reutilização de código com o uso de módulos, recursos avançados de manipulação de textos, listas e outras estruturas de dados (como dicionários, mais poderoso que o hash de Perl, pois os valores assumidos podem conter qualquer outro tipo de objeto como até mesmo outros dicionários).

Seu desenvolvimento teve início em 1990, pelo holandês Guido van Rossum, na CWI em Amsterdã e continuou na CNRI (fundação que sustenta a linguagem hoje) em Reston. O conjunto de entidades e pessoas ligadas ao Python, sobretudo via Internet, formam a Python Software Activity (PSA).

## Instalação

Por padrão o Python, já vem instalado no linux e no OSX(Mac). Só precisará instalar se estiver usando o windows. Assim, pode baixá-lo no [https://www.python.org/downloads/](https://www.python.org/downloads/). Depois de fazer o download do arquivo \*.msi, você precisa executá-lo e seguir as instruções. Na segunda tela do assistente de instalação, marcado "Customize", certifique-se de rolar para baixo e escolha a opção "Adicionar python.exe para o caminho". Isso vai fazer com que o caminho da pasta do Python, seja adicionado no caminho do sistema operacional, nas variáveis de ambiente.

Para começar a ver como o interpretador funciona, basta abrir o terminal e digitar:

```
python // depois aperte enter
```

No windows, aparece assim:

```
Python 2.7.10 (default, May 23 2015, 09:40:32) [MSC v.1500 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>
```

### Variável

Não há declaração explícita de variáveis em Python, assim, a sua existência depende da atribuição de um valor:

```
>>> nome = "Hemerson Vianna"
```

Para declarar uma variável é preciso seguir a convenção `snake case`, onde o nome da variável começa com minúscula e utiliza underscore para separar cada palavra:

```
>>> quantidade_de_computadores = 10
```

Uma coisa muito interessante no Python, é que podemos declarar variáveis e atribuir seus valores de uma vez só:

```
>>> nome, quantidade_de_computadores = "Hemerson Vianna", 10
```

### Tipos de dados

O Python tem 5 tipos de dados:

**_Number_**:
Armazena e suporta 4 tipos de valores numéricos(int, long, float e complex).

```
// int
var1 = 1
var2 = -786
var3 = 0x69
var4 = -0x260

// long - inteiros longos , que também pode ser representado em octal e hexadecimal
var1 = 51924361L
var2 = -052318172735L
var3 = -0x19323L
var4 = 0xDEFABCECBDAECBFBAEl

// float - valores reais de ponto flutuante
var1 = 15.20
var2 = 32.3+e18
var3 = -32.54e100
var4 = 70.2-E12

// complex
var1 = 3.14j
var2 = 9.322e-36j
var3 = 4.53e-7j
var4 = .876j
```

Python permite que você use um L minúsculo com muito tempo, mas é recomendável que você use somente uma maiúscula L , para evitar confusão com o número 1. Python exibe inteiros longos com uma maiúscula L.

Um número complexo é composto por um par ordenado de números de ponto flutuante reais indicados por x + yj, onde x e y são os números reais e j é a unidade imaginária.

**_Strings_**:
Python permite tanto pares de aspas simples ou duplas. Subconjuntos podem ser feitas usando o operador de fatia ( [] e [ : ] ) com índices começando em 0 no início da string e -1 ao final. O sinal de mais (+) é o operador de concatenação de string e o asterisco (\* ) é o operador de repetição.

```
str = 'Olá mundo'

print str          # imprime a string
print str[0]       # apenas o primeiro caractere
print str[2:5]     # começa no terceiro caractere e termina no quinto
print str[2:]      # a string começa a partir do terceiro caractere
print str * 2      # imprime 2 vezes a string
print str + "TEST" # concatena a string
```

**_List_**:
É o mais versátil dos tipos de dados composto do Python. A lista contém itens separados por vírgulas e entre colchetes ([]) . As listas são semelhantes as matrizes em C. Uma diferença entre elas é que todos os elementos pertencentes a uma lista pode ser de diferentes tipos de dados.

Os valores armazenados em uma lista pode ser acessada usando o operador de fatia ([] e [:]) com índices começando em 0 no início da lista e ao final com -1. O sinal de mais (+) é o operador de concatenação e o asterisco (\*) é o operador de repetição.

```
list = [ 'abcd', 786 , 2.23, 'andre', 70.2 ]
tinylist = [123, 'andre']

print list          # imprime a lista
print list[0]       # apenas o primeiro elemento da lista
print list[1:3]     # começa no segundo e termina no terceiro elemento
print list[2:]      # começa no terceiro elemento
print tinylist * 2  # imprime 2 vezes a lista
print list + tinylist # concatena as listas
```

**_Tuple_**:
É um outro tipo de dados de sequência que é semelhante à lista. Uma tupla consiste de um número de valores separados por vírgulas. Ao contrário da lista, as tuplas são colocados dentro de parênteses.

As principais diferenças entre as listas e astuplas são: As listas são colocados entre colchetes ([]) e os seus elementos e tamanho podem ser alteradas, enquanto tuplas estão entre parênteses (()) e não pode ser atualizadas. Tuplas pode ser pensado como somente leitura.

```
tuple = ( 'abcd', 786 , 2.23, 'andre', 70.2  )
tinytuple = (123, 'andre')

print tuple           # imprime a tupla
print tuple[0]        # apenas o primeiro elemento da lista
print tuple[1:3]      # começa no segundo e termina no terceiro elemento
print tuple[2:]       # começa no terceiro elemento
print tinytuple * 2   # imprime 2 vezes a tupla
print tuple + tinytuple # concatena as tuplas
```

**_Dictionary_**:
É uma espécie de tabela hash. Funcionam como matrizes de associação ou hashes encontrados em Perl e consistem em pares de valores-chave. A chave do dicionário pode ser quase qualquer tipo Python, mas são geralmente números ou strings. Os valores, por outro lado, pode ser qualquer objeto Python arbitrário.

Dicionários são delimitados por chaves ({ }) e os valores podem ser atribuídos e acessados usando colchetes ([]).

```
dict = {}
dict['um'] = "Esse é o um"
dict[2]     = "Esse é o dois"

tinydict = {'name': 'andre','code':6734, 'dept': 'compras'}


print dict['um']       # impreme o valor "Esse é o um"
print dict[2]           # impreme o valor "Esse é o dois"
print tinydict          # imprime o dicionário
print tinydict.keys()   # Imprime todas as chaves
print tinydict.values() # Imprime todos os valores
```

### Observações

Python não permite concatenar uma string com um número. Ele não realiza uma conversão implícita de Number para String. Para isso, usamos `%s` para tratar o resultado final como uma String. Indicamos os valores que entrarão nas lacunas %s e %s, adicionando o sinal % imediatamente após a String e em seguida colocando as duas variáveis entre parênteses e separadas por vírgula.

```
>>> nome = "Hemerson Vianna"
>>> idade = 29
>>> print 'O nome é %s e a idade é %s'  % (nome, idade)
// O nome é Hemerson Vianna e a idade é 29
```

Para mostar o que citei acima, sobre não poder atualizar o valor de uma tupla, já com uma lista é possível:

```
tuple = ( 'abcd', 786 , 2.23, 'andre', 70.2  )
list = [ 'abcd', 786 , 2.23, 'andre', 70.2  ]
tuple[2] = 1000    # Invalid syntax with tuple
list[2] = 1000     # Valid syntax with list
```

## Conclusão

Venho descobrindo o mundo do Python e tem me agradado bastante. Recomendo o curso [Welcome to the Django](http://welcometothedjango.com.br/) do Henrique Bastos, que é show de bola. Eu fiz, e ele é fera. Aguardem novos artigos da série sobre Python. :)


Começando com Python

links


Esse é o primeiro artigo contendo links interessantes para o conhecimento. Estudos, dicas e assuntos que será de interesse de todos que gostam da área web.

As categorias não serão fixas, apenas dividiram os links selecionados. Com isso, a cada artigo desse segmento, as categorias poderão ser diferentes.

## UX/UI

- [Migrar UI Design para UX Design](http://arquiteturadeinformacao.com/user-experience/o-que-significa-na-pratica-migrar-de-ui-design-para-ux-design/) - Artigo que fala sobre as implicações da mudança de um UI Designer para um UX Designer
- [UX/UI Designer](http://arquiteturadeinformacao.com/mercado-e-carreira/o-mito-do-hibrido-uxui-designer/) - Artigo que fala sobre a diferença e UI e UX.
- [Wireframes](http://www.designadaptavel.com.br/artigos/o-passo-a-passo-dos-wireframes-do-blog-design-adaptavel) - Ao planejar as adaptações para um site podemos definir que existirão apenas três pontos de adaptação, ou seja, três etapas de detalhamento que resultarão em wireframes e posteriormente em layouts.

## Design

- [Design responsivo](http://webdesign.tutsplus.com/articles/responsive-web-design--webdesign-15155) - A arte de design de websites para uma grande variedade de tamanhos de tela e dispositivos
- [Upscaling Responsive](http://www.smashingmagazine.com/2015/08/responsive-upscaling-large-screen-e-commerce-design/) - Explora como os designers de e-commerce podem usar `upscaling` sensível e criar uma experiência personalizada para usuários com telas grandes.

## HTML

- [Histórico da HTML5](https://diveintohtml5.com.br/history.html) - A API de histórico da HTML5 é uma maneira padronizada para manipular o histórico do navegador via script.
- [Curso HTML5](http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf) - Curso HTML5 da W3C Escritório Brasil.
- [Elementos de divisão](http://blog.teamtreehouse.com/use-html5-sectioning-elements) - Como usar os elementos de divisão do HTML5
- [Tag DL](http://html5doctor.com/the-dl-element/) - Comp utilizar a tag dl.

## Schema

- [Schema dando significado](http://blog.popupdesign.com.br/schema-org-dando-significado-ao-conteudo-na-internet/) - Artigo explicando como dar significado com Schema

## CSS

- [CSS Escalável](https://medium.com/@shankarcabus/css-escalavel-parte-1-41e7e863799e#.kbvz33iem) - Artigo sobre CSS escalável por Shankar Cabus.
- [Lea Verou](http://lea.verou.me/) - Lea Verou é uma desenvolvedora front-end, palestrante e autora. Atualmente é uma assistente de pesquisa no [MIT CSAIL](https://www.csail.mit.edu/), no grupo Haystack de David Karger e uma especialista convidada no [CSS WG](https://www.w3.org/Style/CSS/members.en.php3).
- [Exemplos de CSS3](http://www.inwebson.com/css3/pure-css3-icons-logos-graphics/) - Icones, logos e gráficos com CSS3
- [Tipografia com SASS map](http://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/) - Sass map fazendo a tipografia responsiva muito mais gerenciável.

## SVG

- [SVG Exemplos](http://tutorials.jenkov.com/svg/svg-examples.html) - Exemplos básicos com SVG.

## JavaScript

- [Curso EXTJS 4](http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/) - Curso gratuito sobre EXTJS 4, feito pela Loiane.
- [Plugin JQuery](http://wbruno.com.br/jquery/criando-um-plugin-jquery-parte-1-comecando/) - Criando um plugin com JQuery.
- [Padrões Javascript](http://shichuan.github.io/javascript-patterns/) - Padrões de JavaScript que abrangem padrões de função, padrões jQuery, padrões de projeto, padrões gerais, literais e padrões de construtor, padrões de criação de objetos, padrões de reutilização de código, DOM e padrões de navegador.
- [Tutoriais Dojo](https://davidwalsh.name/dojo-tutorials) - Artigos para aprender mais sobre o Dojo JS.
- [Módulos](http://blog.da2k.com.br/2015/01/03/como-criar-componentes-js-usando-modulos-amd-commonjs-e-umd-parte-1-3/) - Como criar componentes JS usando módulos - AMD, CommonJS e UMD.
- [Testes Javascript](https://medium.com/@yamadapc/testes-melhores-e-stubs-em-javascript-fd31691b9393#.h877cu80l) - Testes melhores e stubs em JavaScript.

## PHP

- [PHP Orientado a objetos](http://cafeesoftware.com/curso-de-php-orientado-a-objetos/) - Curso de Orientação a Objetos com PHP.
- [PHP do jeito certo](http://br.phptherightway.com/) - Este site introduz novos desenvolvedores PHP às melhores práticas, opções disponíveis e boas informações, que por muitas vezes, quando descobertas, já é tarde demais.
- [Zend Framework](http://manual.zfdes.com/pt-br/) - Guia de referência sobre o Zend Framework.

## Gestão em TI

- [Templates e Modelos](http://www.elirodrigues.com/2015/09/14/downloads-de-templatesmodelos-para-gerenciamento-de-projetos/) - Aqui você encontra TODOS os templates necessários para gerenciar um projeto. Navegue, avalie e faça o download gratuitamente.
- [SCRUM](http://www.desenvolvimentoagil.com.br/scrum/) - Scrum é uma metodologia ágil para gestão e planejamento de projetos de software.

## Ferramentas

- [Webmaster tools](https://www.google.com/webmasters/tools/home?hl=en&pli=1) - Gerenciar algumas informações do seu projeto online
- [Schema Testing Tool](https://developers.google.com/structured-data/testing-tool/) - Ferramenta para avaliar as propriedades Schema do seu projeto
- [Page Speed](https://developers.google.com/speed/pagespeed/?hl=pt-br) - Ferramenta para calcular o carregamento do seu site
- [Acessibilidade](http://www.acessibilidade.gov.pt/accessmonitor/) - Validador automático para as WCAG
- [Responsive](http://mattkersley.com/responsive/) - Testar A responsividade do seu projeto online
- [Placehold](https://placehold.it/) - Gerador de imagens de exemplo online
- [CSS - Gradient Editor](http://www.colorzilla.com/gradient-editor/) - Gerador de background Gradient CSS online
- [CSS - Prefix](http://pleeease.io/play/) - Gerador de propriedades CSS com Prefixo dos navegadores online


Links interessantes - Parte 1

html


Independente da área que for atuar no desenvolvimento web, é importante que conheça a linguagem de marcação HTML. Afinal, ela que dá significado ao conteúdo de uma página web. A mesma foi criada em 1990, por [Tim Berners Lee](https://twitter.com/timberners_lee)(físico britânico). Em 28 de outubro de 2014, a WC3 lançou a recomendação da quinta versão (HTML 5).

> HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores.
> <cite> -- HTML
>
> - [Wikipédia](https://pt.wikipedia.org/wiki/HTML) > </cite>

## Versões

**_HTML 1.0_**
T. Berners-Lee and D. Connolly, Junho de 1993 - Foi a primeira versão do HTML, apresentada para o mundo.

**_HTML 2.0_**
T. Berners-Lee and D. Connolly, Novembro de 1995 - Incluía tudo, desde as especificações originais do 1.0 , mas acrescentou algumas novas funcionalidades.

**_HTML 3.2_**
Recomendação W3C, 14 de Janeiro de 1997 - Tornou-se cada vez mais evidente que uma norma se fazia necessária para as tags. Para este fim, a W3C foi fundada em 1994 para padronizar a linguagem e mantê-la evoluindo na direcção certa. Seu primeiro trabalho foi apelidado de `WILBUR`, que mais tarde ficou conhecido como HTML 3.2 .

**_HTML 4.01_**
Recomendação W3C, 24 Dezembro de 1999 - Foi uma grande evolução dos padrões de HTML, e a última iteração do HTML clássico. Apelidado de `Cougar`, a maior parte das novas funcionalidades vieram a partir da malfadada HTML 3.0 . O suporte ao navegador foi realizado surpreendentemente pela Microsoft em seu navegador Internet Explorer, e o líder de mercado IE5.

**_XHTML 1.0_**
Recomendação W3C, 26 de Janeiro de 2000 - revisado em 1 de Agosto de 2002 - Marca um afastamento da forma que as especificações tem trabalhado. Incorporando os rigores do XML, para que o código seja escrito corretamente. Sem muitas tags novas ou obsoletas, é principalmente apenas um novo conjunto de regras de codificação.

**_XHTML 1.1_**
Recomendação W3C, 23 Novembro de 2010 - É uma reformulação do XHTML 1.0 Strict, com pequenas modificações, usando alguns módulos de um conjunto definido em modularização de XHTML.

**_HTML 5_**
Recomendação W3C, 28 de Outubro de 2014 - Versão atual do HTML.

### Observações:

**_HTML 3.0_**
Março de 1995 - Incluía muitas habilidades novas e melhoradas para o HTML, e prometeu oportunidades muito mais poderosas para os desenvolvedores, projetarem suas páginas. Infelizmente, os navegadores foram terrivelmente lentos na implementação de qualquer uma das novas melhorias, acrescentando apenas em alguns e deixando de fora o resto. Em parte, esta falha pode ser atribuída ao tamanho da revisão e assim a especificação HTML 3.0 foi abandonada.

**_HTML5 - Primeiro esboço_**
W3C e WHATWG, 22 de Janeiro de 2008 - Em 10 de abril de 2007, propuseram que a W3C adotasse o HTML5 do WHATWG. Em Janeiro de 2008, a W3C publicou HTML5 como um `Working Draft`;

## HTML5

Após o HTML 4.01 e o XHTML 1.0, foi proposto o XHTML 2. Com a inovação constante nas funcionalidades em sites e navegadores, o caminho que o XHTML2 estava tomando, começou a ficar pouco realista. Assim, ficou evidente que era necessário uma nova abordagem.

Em 2004, um grupo de pessoas se juntaram e começaram a construir algo próprio, fora dos procedimentos habituais da W3C. Assim surgiu o WHATWG(The Web Hipertext Application Technology Working Group), já que a W3C estava focando em linguagens baseadas em XML. Insatisfeitos com a direção que o HTMLWG (W3C) tinha escolhido para o futuro do HTML, se formou o WHATWG para mudar o futuro do HTML. A W3C percebeu que o XHTML 2.0 era impraticável e parou de trabalhar na especificação. Os esforços foram direcionados para a especificação do WHATWG sobre o HTML5.

Em 28 de outubro de 2014, finalmente saiu a recomendação da W3C sobre o HTML5.

### Estrutura básica:

```
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
```

- **_Doctype_** - É uma instrução que indica para o navegador, qual a especificação do código se deve utilizar. No exemplo acima, seria HTML5, onde ele não especifica um DTD (Document Type Definition), como nas versões anteriores. Deixando assim, por responsabilidade do navegador saber qual especificação usar.
- **_html_** - A tag HTML, identifica o documento.
- **_head_** - Envolve toda a parte inteligente da página. Onde se encontra as informações sobre a página e o seu conteúdo.
- **_body_** - Onde estará todo o conteúdo que será apresentado para o usuário.

### DTD na versão anterior ([XHTML 1.0](http://www.w3.org/TR/xhtml1/dtds.html))

Na versão do XHTML, se pode usar 3 tipos de `doctype`:

**_Strict_** - Para escrever código limpo, livre de misturas entre estilo e conteúdos.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

**_Transitional_** - Junta os elementos estruturais com elementos que o W3C quer tornar obsoleto na linguagem, por misturar o estilo com os conteúdos. Deve ser usada quando somos obrigados a manter a compatibilidade com browsers que não suportam estilos CSS na perfeição.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

**_Frameset_** - Usa-se em documentos que contenham `frames`.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
```

O que acha? Ficou muito melhor, não ter que se preocupar com o `doctype`. :)

## HTMLWG x WHATWG

Em julho de 2012, o HTMLWG e o WHATWG separaram oficialmente as maneiras de como seguir na especificação do HTML5.

**_HTMLWG(HTML Working Group)_** - [W3C Recommendation](http://www.w3.org/TR/html5/)
Grupo de trabalho originalmente criado pelo World Wide Web Consortium (W3C) em 1997.

**_WHATWG(The Web Hipertext Application Technology Working Group)_** - [HTML Living Standard](https://html.spec.whatwg.org/multipage/)
Grupo de pessoas ligadas a entidades e empresas como a Mozilla, Opera e Apple, entre outros interessados na evolução do HTML.

## Conclusão

Se ouvir alguém dizer que HTML é uma linguagem de programação, imediatamente a corrija. HTML é uma linguagem de marcação. Nos próximos artigos, estarei mostrando mais sobre as tags e o que é possível com o HTML5. Deixo aqui, essa introdução com a história do HTML.


Artigos

It management

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Vue

Compartilhar

Front end

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

React

Compartilhar

Compartilhar

Compartilhar

Compartilhar

React native

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Git

Compartilhar

Compartilhar

Ui

Compartilhar

Css

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Php

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Database

Compartilhar

Compartilhar

Prompt

Compartilhar

Angular

Compartilhar

Javascript

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Compartilhar

Ruby

Compartilhar

Python

Compartilhar

Links

Compartilhar

Html

Compartilhar