Posts da Tag: web developer - Blog da TreinaWeb

Desenvolvimento Front-end

Emmet Toolkit – Seja um Web Developer mais rápido

Olá Web Developers! Hoje vou falar de uma ferramenta que poucos conhecem, mas que está presente em praticamente TODOS os editores de código e IDEs: o Emmet Toolkit.

A ideia principal dele é muito simples: escreva uma expressão parecida com um seletor CSS e ele vai transformar isso em elementos HTML. Assim você pode escrever bem menos e ser mais produtivo. E, claro, se você ainda não está acostumado com certos seletores do CSS, vai acabar aprendendo. Semelhantemente também há comandos para acelerar o seu CSS.

Exemplo de comando do Emmet para geração de HTML

Geração simples de elementos

Se você não conhece o Emmet, é provável que em arquivos HTML já tenha percebido o seguinte: para gerar um elemento basta escrever o nome dele e pressionar Tab;

    div
<!--- Após "tab" --->
    <div></div>

Geração de elementos com id, classes e atributos

Da mesma forma que geramos um elemento a partir do nome dele, podemos gerar um elemento com id e classes. Basta seguir a mesma lógica de um seletor CSS.

    a#meuId.classe-a.classe-b[href="https://treinaweb.com.br"]
<!--- Após "tab" --->
    <a href="https://treinaweb.com.br" id="meuId" class="classe-a classe-b"></a>

Conteúdo de um elemento

Para indicar o conteúdo de um elemento, escreva entre { }.

    span{Olá Web Developers}
<!--- Após "tab" --->
    <span>Olá Web Developers</span>

Elementos Filhos

Por mais que os exemplos acima sejam bacanas, não economizaram tanta digitação assim. Mas daqui para frente as coisas começam a ficar mais legais.

Vimos como definir uma tag apenas. E se quisermos já indicar os elementos filhos? Para isso basta usar o >, que no CSS indica um elemento filho.

    ul>li
<!--- Após "tab" --->
    <ul>
        <li></li>
    </ul>

Algo importante a notar é que você não pode colocar espaço na declaração, como ul > li.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Subir um nível

Podemos entender que o > é para descer um nível dentro do último elemento declarado. Mas, e se quisermos declarar algo que deveria ficar lá em cima, com outro elemento? Podemos usar o ^. Ele serve para indicar ao Emmet que queremos subir um nível.

Imagine que queremos uma lista com um item de lista. Mas que também queremos declarar uma div após a lista. Como já declaramos o item de lista, é preciso subir até o nível da lista novamente. Você pode colocar quantos ^ quiser.

    ul>li>span^^div
<!--- Após "tab" --->
    <ul>
        <li><span></span></li>
    </ul>
    <div></div>

Use o Emmet para gerar Vários Elementos!

Sem dúvida até aqui já podemos economizar uma boa quantidade de teclas pressionadas. Mas gerar apenas um filho em um elemento não é grande coisa. Para que possamos gerar vários filhos, basta usar o * (que para o Emmet indica uma multiplicação) e indicar o número de elementos que você quer que sejam gerados.

    ul>li*5
<!--- Após "tab" --->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

E, claro, você pode juntar com outras coisas que aprendemos até aqui.

    ul.lista>li.item*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>

Variáveis dentro de um looping

Não apenas podemos gerar vários elementos com *, como também podemos utilizar o símbolo $ como uma “variável” que armazena o número do elemento.

    ul.lista>li.item-${Produto $}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 1</li>
        <li class="item-2">Produto 2</li>
        <li class="item-3">Produto 3</li>
        <li class="item-4">Produto 4</li>
        <li class="item-5">Produto 5</li>
    </ul>

Você também pode usar vários $ caso queira que os números tenham um zero como prefixo.

    ul.lista>li.item-${Produto $$$}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 001</li>
        <li class="item-2">Produto 002</li>
        <li class="item-3">Produto 003</li>
        <li class="item-4">Produto 004</li>
        <li class="item-5">Produto 005</li>
    </ul>

Para fazer os números virem em ordem decrescente, adicione @- após o $.

    ul.lista>li.item-${Produto $$$@-}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 005</li>
        <li class="item-2">Produto 004</li>
        <li class="item-3">Produto 003</li>
        <li class="item-4">Produto 002</li>
        <li class="item-5">Produto 001</li>
    </ul>

Ou então, após @ coloque o número que você quer que seja o primeiro.

    ul.lista>li.item-${Produto $$$@5}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 005</li>
        <li class="item-2">Produto 006</li>
        <li class="item-3">Produto 007</li>
        <li class="item-4">Produto 008</li>
        <li class="item-5">Produto 009</li>
    </ul>
HTML5 + CSS3 - Fundamentos
Curso de HTML5 + CSS3 - Fundamentos
CONHEÇA O CURSO

Elementos Irmãos

Por mais que declarar elementos filhos seja muito útil, seria bom também poder indicar os elementos que estarão no mesmo nível do primeiro elemento declarado. E podemos fazer isso com o operador +. Assim teremos elementos gerados no mesmo nível.

    div+span+div
<!--- Após "tab" --->
    <div></div>
    <span></span>
    <div></div>

Agrupamento de Elementos

Você pode usar ( ) para agrupar elementos. Assim fica mais simples para você declarar uma árvore de elementos e depois indicar outros elementos irmãos. Bem mais simples do que ficar usando ^ para subir um nível.

    div>(header>navigation)+(main>article)+(footer)
<!--- Após "tab" --->
<div>
    <header>
        <navigation></navigation>
    </header>
    <main>
        <article></article>
    </main>
    <footer></footer>
</div>

Emmet gera automaticamente Lorem Ipsum

Talvez você já tenha visto o texto conhecido como Lorem Ipsum. Ele é muito usado para preencher sites que ainda não estão com um texto definido. Ao invés de pesquisar pelo Lorem Ipsum para copiar e colar no seu código, o próprio Emmet faz isso para você!

    div>lorem
<!--- Após "tab" --->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio repellendus laudantium sunt animi dolorum optio odit vel praesentium, atque non repellat a provident quisquam earum officia libero eos quos. Cum!</div>

Você também pode indicar um número após o comando lorem. Assim você pode controlar o tamanho do texto a ser gerado:

    lorem5
<!--- Após "tab" --->
    Lorem ipsum dolor sit amet.


    lorem10
<!--- Após "tab" --->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tempora!
Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Ferramentas

Tw Dev Server – como ele pode te ajudar a estudar programação?

Olá Web Developers! Vamos ver o que é e como utilizar o Tw Dev Server para te ajudar na hora de estudar programação.

O que é o Tw Dev Server?

Quando estamos trabalhando com desenvolvimento web precisamos de pelo menos um servidor de arquivos estáticos para nossos arquivos HTML, CSS, JavaScript, imagens, etc. Isso porque se abrirmos nosso HTML diretamente no navegador, certas operações não poderão ser feitas pelo JavaScript por questões de segurança.

Além disso, também é comum a necessidade de uma API para fazermos requisições, onde recuperamos ou salvamos dados quando estamos estudando desenvolvimento web ou criando um aplicativo mobile.

Para que essas necessidades básicas fossem resolvidas surgiu o Tw Dev Server. Ele veio com a finalidade de iniciar um servidor estático para nossos arquivos e também servir como um servidor que recebe requisições através de uma API. Com essa API podemos simular um servidor com banco de dados que recebe requisições para recuperar, salvar, modificar e apagar dados (CRUD). E tudo isso sem precisar de nenhuma configuração ou instalação complicada!

Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente

Instalando o Tw Dev Server

O Tw Dev Server pode ser baixado pelo NPM ou como uma extensão do VS Code.

No NPM, para instalar globalmente em sua máquina, execute:

$ npm install -g @treinaweb/tw-dev-server

Assim que você tiver instalado, seu terminal terá o comando tw-dev-server disponível.

Iniciando um servidor de arquivos estáticos

Para iniciar um servidor de arquivos estáticos basta abrir o seu terminal na pasta raiz do seu projeto e executar:

$ tw-dev-server

Com isso nós já teremos nosso servidor rodando.

Tw Dev Server - Terminal

Assim como você pode ver na imagem acima, ele irá mostrar como você pode acessar seus arquivos pelo navegador. Na mesma máquina basta acessar http://localhost:3002. Entretanto, caso queira acessar de outra máquina ou dispositivo que estejam na mesma rede, basta acessar o endereço que é mostrado logo abaixo.

Como se pode notar, ele utiliza por padrão a porta 3002, mas isso pode ser alterado. Por exemplo, caso a gente queira utilizar a porta 4200:

$ tw-dev-server --port=4200

Para encerrar basta pressionar Ctrl + C.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Live Reload e Browser Sync

Quando estamos escrevendo nosso HTML, CSS e JavaScript, pode ser meio cansativo ter que ficar atualizando o navegador a todo momento para ver o resultado do nosso trabalho.

Para isso o Tw Dev Server também possui a funcionalidade conhecida como Live Reload. Com essa função ativada, seu navegador vai atualizar automaticamente assim que você alterar algum arquivo HTML ou JavaScript. Caso a alteração seja em um arquivo CSS, o CSS da página é atualizado mesmo sem precisar atualizar o navegador.

Para ativar essa função, basta adicionar --live ao comando.

$ tw-dev-server --live

Além disso, também há a possibilidade de você querer testar sua página em vários navegadores, dispositivos ou tamanhos de janelas diferentes. E para facilitar isso temos a função Browser Sync, que vai sincronizar todos os navegadores que estiverem acessando a sua página.

Com isso você pode acessar a sua página a partir de vários navegadores, até mesmo do seu celular, e tudo o que você fizer em um navegador (como escrever, clicar num botão ou rolar a página) também acontecerá nos demais navegadores! Essa função também atualiza todos os navegadores quando você altera o seu código, não precisando ativar o --live.

Para ativar o Browser Sync basta adicionar --sync ao comando:

$ tw-dev-server --sync

Fazendo Requisições

Uma das principais funcionalidades do Tw Dev Server é disponibilizar uma API para podermos fazer requisições. E isso sem precisar configurar um back end ou um banco de dados. Porém, lembre-se que essa é uma ferramenta para facilitar nos estudos, portanto não deve ser usada para um produto que será lançado, pois não é otimizada para isso.

Podemos fazer operações GET, POST, PUT e DELETE. Para que possamos fazer requisições para a API, basta adicionar /api ao final do endereço que utilizamos para acessar os arquivos estáticos.
Em resumo, se você acessa os arquivos por http://localhost:3002, as requisições devem ser feitas a http://localhost:3002/api.

Logo após o /api nós adicionamos os nomes que quisermos. Isso será para nos organizarmos.

Painel Visual do Tw Dev Server

Para testar as requisições, ver seus dados, modificá-los, etc, você pode usar a ferramenta visual do Tw Dev Server. Basta acessar https://treinaweb.github.io/tw-dev-server/. Uma vez que o seu servidor estiver rodando, a bolinha ao lado do endereço aparecerá verde.

Tw Dev Server - Painel

Criando Dados

Imagine que a gente esteja num projeto de biblioteca e que queremos fazer uma operação POST para salvar um livro. Podemos, por JavaScript, fazer uma requisição com o seguinte código:

    let livro = {
        "nome": "GraphQL: A revolucionária linguagem de consulta e manipulação de dados para APIs",
        "autor": "Akira Hanashiro"
    };
    fetch('http://localhost:3002/api/biblioteca/livros', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(livro)
    })
    .then(response => response.json());
    .then(console.log)

Teremos como resposta um objeto com um campo id para identificar o dado recém cadastrado. Ele é gerado automaticamente pelo Tw Dev Server.

Não apenas por JavaScript, como também podemos fazer essa operação pela nossa ferramenta visual:

Tw Dev Server - Post

Buscando Dados

Para fazermos uma requisição GET e recuperar todos os livros, bastaria fazer:

    fetch('http://localhost:3002/api/biblioteca/livros')
        .then(response => response.json());
        .then(console.log)

E, claro, também podemos fazer isso na nossa ferramenta visual.

Porém, caso você queira que seja retornado apenas um único dado, pode-se passar o id do elemento. Por exemplo: http://localhost:3002/api/biblioteca/livros?id=1591291655803.

Atualizando Dados

Para atualizar um dado basta fazer uma operação PUT, usar a mesma URL e indicar nela o id do dado que você quer atualizar:

    let novoLivro = {...};
    fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(novoLivro)
    })
    .then(response => response.json());
    .then(console.log)

Assim que executar essa requisição teremos como resposta o dado atualizado.

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Apagando Dados

Por fim temos a função de apagar dados. Para isso basta fazer uma requisição DELETE passando o id do dado que se quer apagar.

    fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', {
        method: 'DELETE',
    })
    .then(response => response.json());
    .then(console.log)

Caso você queira apagar todos os dados de uma coleção, basta passar all no lugar do id

    fetch('http://localhost:3002/api/biblioteca/livros?id=all', {
        method: 'DELETE',
    })
    .then(response => response.json());
    .then(console.log)

Em conclusão, o Tw Dev Server é uma ótima ferramenta que pode se aliar aos seus estudos em desenvolvimento web e mobile, seja servindo arquivos ou simulando um back end com api e banco de dados. Também pode ser usado para fazer testes caso você esteja desenvolvendo um front mas o back end ainda não tem uma api pronta para te retornar dados.


Desenvolvimento

Web Designer x Web Developer: quais as diferenças?

Muitos iniciantes da área de tecnologia ficam em dúvida de qual carreira seguir, no que devem focar… afinal são diversas opções. Dentre essas opções estão as carreiras de Web Designer e Web Developer. Por serem áreas que se complementam, muitas pessoas acabam confundindo elas e principalmente sobre o que cada profissional realmente faz. Essas são dúvidas principalmente de quem quer ingressar na área de desenvolvimento web e é o que vamos abordar neste artigo.

Web Designer

Web designer é o responsável pelo design – o visual – da aplicação. Esse profissional deve dominar conceitos de design, usabilidade (UX e UI), identidade visual e design de interfaces, além de ferramentas de edição visual, como o Photoshop, Illustrator e Sketch App, por exemplo, pois são através dessas ferramentas que ele irá desenvolver a parte visual da aplicação.

Mas, para ser um Web Designer eu preciso saber programar? Não necessariamente. O foco do web designer é focar totalmente no design, como o próprio nome diz é um design só que mais focado para web. Ele também deve saber HTML e CSS, mas essas não são consideradas linguagens de programação. Alguns profissionais de Web Designer acabam aprendendo JavaScript, mas não é uma obrigatoriedade, pois ele não precisará mexer com o código da aplicação de fato.

O Web Designer deve fazer o planejamento, a criação de toda a aparência da aplicação e a manutenção de interfaces digitais, tudo isso considerando aspectos importantes do design. É essencial que os designers criem algo atraente, para gerar uma boa experiência do usuário.

Depois do Web Designer fazer seu trabalho teremos um layout, porém um layout é algo estático, não tem funcionalidade nenhuma, nenhum usuário conseguirá ter alguma interação com a aplicação. Sendo assim, para que ele se torne algo utilizável, com ações pelo usuário, precisamos utilizar tecnologias onde através de sua implementação com códigos, podemos torná-lo acessível para os usuários. O profissional de Web Designer entrega o projeto cheio de recursos visuais aos desenvolvedores para codificação.

Web developer

O Web Developer é quem realmente coloca a mão no código. Ele cuida da codificação onde tornará possível que a interface gráfica (que vimos acima) seja acessada e utilizada. Geralmente são profissionais com a parte lógica mais aguçada e esses sim devem possuir habilidades em programação.

Um ponto importante de ressaltar aqui é que o Web Developer pode ser dividido em dois tipos: front-end e back-end. De maneira sucinta, os desenvolvedores front-end se concentram na parte que o usuário vê, como as interações por exemplo, fazendo com que a experiência do usuário naquela aplicação seja positiva. Já o desenvolvedor back-end está mais para a “parte de trás” do site, aquilo que não vemos, como a configuração de servidores e banco de dados. O papel do back-end também é importantíssimo para o funcionamento da aplicação. Na verdade, o Web Designer e o Web Developer (desenvolvedores front-end e back-end) se complementam a fim de entregar um bom resultado aos usuários finais.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

No final, o que acaba fazendo muita confusão é um profissional acabar fazendo ambos os papéis. Pode acontecer do próprio web developer ter que pensar no design e planejar a aplicação. Como também pode acontecer de um web designer acabar aprendendo a programar também, fazendo com que ele mesmo siga os próximos passos ao invés de passar para um programador. Neste caso, seria um acúmulo de funções, pois vimos quais tarefas pertenceriam a cada profissional.

Agora que você já sabe a diferença entre Web Designer e Web Developer, mas quer conhecer melhor o que um front-end e um back-end faz, temos um artigo específico disso em nosso blog.

Até a próxima! =)