Primeiras aulas do curso Email Marketing Responsivo parte 2: testando suas newsletters

Email Marketing Responsivo parte 2: testando suas newsletters

Media query no email - Introdução

Tudo bem? Eu sou o Natan Souza, instrutor de UX e de Front-end, aqui na Alura e na Caelum, e nesse segundo módulo de Email Marketing Responsivo, veremos coisas bacanas, na prática, como, por exemplo, deixa eu descer, veremos como fazer esta maravilha aqui, conforme ele vai diminuindo, tem uma hora que ele quebra, ou seja, a gente vai ter que tratar, um pouco, isso com Media Queries.

Além disso, veremos essa parte de Media Queries, rapidamente. Só que, também, veremos a parte de teste, que é uma das partes que eu considero mais importante em qualquer desenvolvimento de e-mail marketing responsivo, ou não, é muito importante pegar o seu e-mail e testar, não tem muito o que fazer. Teste, teste e teste, os clientes que a gente vai usar aqui, alguns dos mais usados, por exemplo, veremos coisas do Gmail, especificamente, como a gente testa no Gmail.

Qual o melhor jeito, ou o jeito mais rápido, de fazer testes no Gmail. Veremos coisas, também, relacionadas ao outlook.com, o antigo Hotmail, o antigo live.com, que é para quem for um pouco mais antigo. Infelizmente não veremos Zipmail, mas veremos, também, um pouquinho do Outlook 2013. Além disso, nesses três clients especificamente, veremos coisas relacionadas a fonte customizada. Será que é uma boa, quando a gente está fazendo um e-mail marketing, assim?

Fazer um layout, que seja. Ou a parte de front, será que é legal ficar colocando fonte customizada? Como a gente trata isso? Quais os browsers, os clients, que dão suporte para fonte customizada? E no final desse curso veremos, rapidamente, algumas dicas rápidas, alguns macetes bacanas. Então, fica comigo e vamos ver essa magia que é o e-mail marketing responsivo na prática.

Media query no email - Empilhando as vantagens

O grande problema que deixamos aqui é que está muito pequeno esse cara. Vamos começar a pensar, agora, no mobile. Deixa eu tirar o zoom aqui, eu sempre erro o sentido do scroll no Mac. Olha só, é para ficar um embaixo do outro, cada vantagem uma embaixo da outra. Vamos fazer o seguinte, vou no nosso Sublime, vou lá no meu Chrome. Primeira coisa, como nós fazemos para deixar uma coisa embaixo da outra, no HTML?

Normalmente, os elementos são grandes caixas, essas grandes caixas empilham, é um comportamento normal, mas como nós fizemos o curso. Gente, eu sempre falo disso, porque se eu falar alguma coisa de display block inline, qualquer coisa e você falar: o que é isso? É sinal que você não fez o curso anterior, então corre lá, corre lá que dá tempo. Mas, o seguinte, eu quero que esses dois caras, as vantagens em si, eu quero que elas empilhem. Como a gente faz para empilhar?

A gente, simplesmente, coloca um “display: block;”. Mas em quem eu preciso colocar esse display block, exatamente? Vamos lá, olha, ele até ferrou com o meu CSS, vou deixar comentado aqui, com a formatação de cores, color code. Deixa eu ver aqui, eu vou colocar parte preta, aqui, vou fazer igual, “Parte preta”. Agora, aqui em cima, eu quero colocar que esses caras empilhem, seriam as vantagens, então, eu vou pegar esse cara aqui, esse display block, “Command + X”, venho aqui, cadê a vantagem?

Achei, vou dar uns “Enter” aqui, “Command + V”, “Command + /”, “Tab”, salvo e atualizo, eles estão meio estranhos, o que será que está acontecendo? Reparem que, aqui, além das vantagens, deixa eu só achar, cadê? Achei, além das vantagens, que realmente precisam ser empilhadas, temos essa linda “td”, aqui, que não está deixando a galera empilhar, tanto que, se eu tirar essa “td”, vamos lá, eles começam a empilhar, então, o que fazer?

Eu vou ter que transformar esse cara em um display block, também, então, eu vou fazer o seguinte, para não ferrar com a minha vida, com a nossa vida, eu vou fazer o seguinte, vantagem, eu vou colocar um modificador chamado “espacador”, fica estranho, mas acho que espaçador fica de boa, eu vou vir aqui e, além dessa vantagem, eu vou ter o “vantagem--espacador”, para que os “vantagem--espacador", é só para não colocar a mesma vantagem, senão ele vai colocar o max width, vai ferrar com a minha vida.

Eu vou colocar aqui um “display: block;” nesse cara, atualizo, agora está funcionando, em mobile, fica assim, e desktop, também, na verdade, eu preciso colocar esse display block, somente quando for mobile e o que é mobile? É quando tiver acesso pelo 3G, não, notebook eu tenho meu modem, roteador, eu espeto aqui e ele vira mobile, não é bem isso, ou então, quando é touch screen, também não, melhor coisa para pegar se é mobile, ou não, tamanho de tela, e interessante, qual é o tamanho de tela, padrão, de celular, hoje em dia?

Será que é iPhone 5, que é uns 320 Pixels, mais ou menos, ou do iPhone 6, que, se não me engano, é 360, qual é o tamanho, padrão, que eu coloco nas minhas media queries? Não tem essa de tamanho padrão, então, toma muito cuidado com isso, quando vocês forem atrás de respostas absolutas, bala de prata, não existe bala de prata para isso, por exemplo, se o Bootstrap, ou o Framework, o que seja, ele usa 768, 992, 1200, para as media queries dele, o problema é dele, é bem isso, o problema é o seguinte, qual é o acesso do meu usuário?

Será que ele acessa do iPhone 5, do Galaxy S5? Não sei, com que a gente sabe isso? O Analytics, só que tem um jeito muito melhor, para a gente definir onde que a gente vai colocar breakpoint, essa quebra, esse ponto de quebra. Reparem, deixa eu só voltar aqui, volta aqui, eu vou tirar esse display block, rapidinho, esse aqui, também, voltou como estava, é simples, como simples assim, simples como simples é ótimo, eu quero que, ele vai diminuindo.

Só que, a partir do momento que ficou muito apertado, muito pequeno, eu tenho que ver, aqui, ele já começa a ferrar muito, reparem que, aqui, ele está encostando muito a linha, não está com aquele espaço bonito, o designer vai me matar, provavelmente, se eu fizesse algo, assim, então, o seguinte, eu vou definir que, aqui, é um breakpoint decente e porque? Porque, para mim, eu estou vendo que não está ficando legal, se for disso para baixo, e como eu sei qual é o tamanho da tela?

Eu vou lá, com uma régua, e meço aqui, não, botão direito, inspecionar, o Chrome, normalmente, traz uma reguinha para você, deixa eu ver aqui, olha, aqui na parte de cima, 526, deixa eu ir diminuindo, acho que aqui é um bom breakpoint, 522, o que foi que apareceu ali? Deixa eu ver, 520 vai, só para falar que eu pensei no número redondo, 520, é um bom breakpoint.

Vou colocar, aqui, uma media query, esqueci a sintaxe, “@media”, vou colocar aqui “max-width”, como eu estou fazendo, desktop para mobile, então, eu vou colocar o “max-width”, se fosse o contrário, seria “min-width”, “max-width: 520px”, faço a assim, com essa media query, o que eu quero sobrescrever na vantagem, exatamente? Eu quero colocar, na verdade, o display block, por padrão, ele vai vir, como é uma “td”, ele vai vir com “display table-cell”, eu quero dizer “display: block”, só nesse cara, “display: block;”, o que mais?

Esse “.vantagem--espaçador", ele nem precisa existir, do lado de fora, da media query, então, eu vou pegar, “Command+seta”, apertei o atalho errado, cadê? É mais fácil ter copiado, “Command+X” e joga, aqui, dentro da media query, “Command+V”, “Command+Shift+P”, “Reindent”, agora sim, deixa eu ver aqui. Olha o design responsivo, olha que maravilha, agora, se o media query dá suporte ou não, no Gmail, a gente vai ver isso nos próximos vídeos, nas próximas aulas, muita calma.

Primeiro eu quero resolver isso, no meu Chrome, ou você pode resolver isso no Firefox, também, está funcionando a nossa quebra de linha, o que mais eu precisaria resolver, quando for celular? Reparem que está muito fininho, muito fininho é largura, está aqui “max-width: 133px”, não, não é para ter isso não, quando for celular, aqui, dentro dessa media query, eu quero que ele bata, sei lá, 90% do tamanho da tela, mas o que está acontecendo?

Ele ainda está pegando essa “max width”, então, eu vou ter que sobrescrever esse “max-width”, “max-width: 90%”, atualizo, ele colocou, sobrescrevi o “max-width”, só que, além disso, eu preciso que ele, que tenha essa largura máxima, dele mesmo, não, eu quero que ele estique, para eu conseguir que ele estique, realmente, eu preciso colocar a largura de 100%, agora, está começando a fazer sentido, deixa eu ver aqui, tem um espacinho, de repente, eu poderia tirar esse espaço.

Vou fazer o seguinte, esse cara aqui, o “vantagem--espacador", é ele que está aqui no meio, ele que está causando toda essa encrenca, vamos dar uma olhada nele, background vermelho, aqui, eu quero que ele fique bem pequenininho, deixa eu ver se vai funcionar, essa gambiarra, “background: red”, “height: 1px”, salvei, atualizei, até que funciona, agora, deixa eu ver, vou colocar “0”, para diminuir, mesmo, esse cara, ainda fica com um pouquinho ali, tem um padding ali, mas funciona, só vou tirar esse background vermelho, atualizo e já era.

Agora, está um pouquinho menor, esse espaço entre as vantagens, outra coisa, reparem que eles estão muito encostadinhos, eles não estão, exatamente, centralizados, então, o que a gente pode fazer, para resolver isso? Eu quero que, àquela vantagem, já que ela o “width”, eu quero que ela tenha uma margem “0 auto”, estou usando o truque da margem “0 auto”, que a gente, normalmente, usa em containers, para centralizar esse cara todo, agora sim, está lindo isso aqui.

Agora, próximas partes, próxima aula, a gente vai, realmente, testar esses caras, nos próximos vídeos, nós vamos testar esses caras aqui, que é para ver se, realmente, essa newsletter está fazendo sentido no Gmail, no Outlook, nesses caras todos, olha que bonitinho, ele fica lá e se ele diminuir, diminui o texto, também, a gente não tem que ficar se preocupando com muitas media queries, deixa eu ver aqui, olha só, está bonitinho aqui, também, então, basicamente, é isso.

Eu vou fazer só uma outra coisa aqui, como está bem legal, na verdade, eu vou colocar essa “width” em 100%, eu quero, realmente, que ela estique, olha, bonito, maravilhoso, só que tem um pequeno problema, acabei causando um pequeno problema, que é isso que eu quero mostrar para você, vou diminuir e vou aumentar, reparem que, aqui, ele está muito encostadinho, coisas que eu poderia fazer, para resolver isso, mandar um “padding”, por exemplo, quem é esse cara aqui?

Deixa eu ver que é esse cidadão, esse cidadão é esse cara aqui, então, vou fazer o seguinte, como eu já estou colocando muito estilo inline, eu já vou criar uma classe, Natan, estilo inline, eu já estou vendo aqui no campaign monitor que não tem suporte para CSS, se não é inline, calma, meu pequeno gafanhoto, vamos resolver isso, um pouco mais para frente, vamos lá, “João Vicente convidou você para o banco”, deixa eu ver, isso é um texto da chamada.

Talvez, ”chamada-texto”, faz sentido, porque vai ter a “chamada-titulo”, “chamada-texto”, texto comum, então, vem aqui, copia esse cidadão e, lá em “riba”, vamos, vou fazer o seguinte, eu já vou criar aqui o “Style” e, depois, eu jogo direto a classe, mais fácil, vamos lá, copio aqui, então, esse nosso amiguinho vai ser uma classe, “chamada-texto”, coloco as chaves, o que ele ia ter mesmo, até esqueci, vai ter que ter um ”padding”, em cima, eu não quero nada, dos lados, uns 10px, mais ou menos, o que mais ele tem que ter?

Tem que ter todos esses caras aqui, que eu já tinha colocado, “Command+X”, “Command+V”, venho aqui, porque eu não vou ficar reescrevendo coisa que eu já escrevi, atualizei, agora, eu venho aqui, tiro esse estilo “inline”, pego esse cara, dou um “Command+X”, pego esse “style”, deleto e lá em cima, deixa eu ver, eu vou colocar bem em cima mesmo, “vantagem”, “link”, “sem-underline”, aqui, que é uma das primeiras coisas que eu fiz.

Eu quero tentar seguir, um pouco, a ordem que eu fiz ali no meu HTML, “Command+Shift+P”, “Reindent”, salvo, atualizo, agora está um pouquinho melhor, acho que eu até poderia aumentar um pouquinho esse cara, vamos tentar uns 20px, vamos ver, acho que, agora, está um pouquinho melhor, olha, eu vou diminuindo, ele vai ficando, ele tem esse espaço aqui, um espaço um pouco melhor.

A gente se vê nos próximos de vídeos, para, realmente, testar esses caras, onde o usuário vai, realmente, abrir, que é nos clients de e-mail.

Testando no Gmail - Testando rapidamente no Gmail 2

Tudo bem? Vamos lá, o seguinte, nós fizemos o e-mail, tudo bonitinho, mas será que ele está, realmente, bonitinho no e-mail, de fato? Porque no meu browser, aqui no meu Chrome, para Mac, ele está lindo, todo bonitinho, quais os clientes de email, quais os clients de email, que eu realmente preciso dar suporte? Uma abordagem que você pode ter é, eu quero dar suporte para todos, eu quero dar suporte para o Gmail, para o Outlook, para o Yahoo, para o Zipmail, para quem for um pouco mais velho, sabe do Zipmail, conhece o Zipmail.

Mas o ponto é, você até pode pegar essa abordagem, só que, será que vai valer a pena? Digamos que você trabalha na padaria Pantufa, será que um 1%, ou seja, aquele tiozinho, que trabalha no setor privado, que seja lá no interior, do interior, do seu estado, só ele acessa, da sua base de e-mails inteira, só ele acessa do Outlook 2000, será que vai compensar, gastar uma semana a mais de trabalho, para deixar o e-mail certinho, 100% certinho, para esse cara? Às vezes não, às vezes vai.

Às vezes 1%, para você que trabalha na padaria Pantufa, não muita coisa, 1% a mais conversão, ou a mais, ou a menos, não vai influenciar muita coisa, mas se você trabalha, as vezes, em uma Amazon, 1%, milhões e milhões de dólares, para cima, ou para baixo, então, toma cuidado. Como que você sabe, exatamente, se vai valer a pena ou não, você tem que discutir isso com o seu chefe, isso é um pouco mais de decisão de negócio, o time de desenvolvimento, com o time de negócio, resolvendo esse pepino.

Um ponto interessante, aqui, no caso da Bytebank, quais os clientes que a gente vai dar suporte, aqui, o pessoal me passou os clientes de email, que a galera usa aqui, os clientes da Bytebank, percebam que o Gmail, esmagador número de 51%, metade da galera, que acessa o desktop, acessa do Gmail, o que mais? A gente pode perceber que o Outlook.com, vem logo, aliás, nem vem em segundo, na verdade, o iOS mail, ou seja, o aplicativo de email, lá do iOS, chega em segundo.

Depois, o Outlook, depois, o aplicativo do Gmail e, por fim, o Outlook 2013, que dá 5%, o Outlook 2013, eu quase não vou falar muita coisa, vou falar nos últimos vídeos, lá nos últimos vídeos, só que o Gmail é um primeiro cara interessante, para a gente atacar, e como você descobre, exatamente, essas informações? Provavelmente, se você já tem uma base de e-mail, se você já trabalha com e-mail marketing, provavelmente, você já tem uma base de email e você consegue extrair esse tipo de informação.

Quais os clientes de e-mail, que o cara mais acessa, uma plataforma que pode ajudar nisso e o Mailchimp, com o Mailchimp você consegue ter acesso a essas coisas, o Analytics pode te dar, o Analytics do Google, o Google Analytics, ele pode te dar, também, um start interessante, porque, sei lá, se 90% dos seus usuários, você está trabalhando na padaria Pantufa ainda, 90% dos usuários acessam do interior, do interior, do seu estado e, ainda por cima, acessa do IE7, eles acessam do IE7, provavelmente, está tudo com o Windows XP.

Então, eu não vou conseguir pensar muita coisa em um Gmail, numa coisa assim, num Gmail, num Outlook, vou focar em que? No Outlook antigo ou, de repente, em Browsers mais antigos e percebam, vou mostrar uma coisa interessante, quando a gente fala de clientes de e-mail, eu não estou falando só da web, também, a web tem o Gmail, só o Gmail, a gente tem o Inbox, e tem o G Suite, que é aquela Suite de aplicativos do Google, destinada a CNPJ, empresas, a gente tem o Outlook.com e a gente tem o Yahoo, também, Zipmail, Bol, essas coisas.

Só que, assim, a gente não vai pensar só em web, nós temos que pensar, também, nos aplicativos nativos, o Outlook, a gente tem os novos, que aquele tipo que vem com o Windows 10, o Office 365, essas coisas, Office 2016 e a gente tem os velhos, também, Outlook 2013, 2010, 2007 e assim vai. Quando a gente fala de Gmail, especificamente, o aplicativo do Gmail, para celular, a gente tem para iOS, para Android, para o Windows Phone, também, então, tem que tomar cuidado, será que eu preciso dar suporte para o Gmail, do Windows Phone?

Às vezes não precisa. Será que eu preciso dar suporte do iOS? Ás vezes não precisa, tem que, sempre, ir vendo essas coisas. E a parte do mobile, será que o cara está acessando mais iOS Mail? No aplicativo nativo da Apple, será que ele está acessando mais do Android Mail? Ou do aplicativo do Inbox? Que dá pra baixar, também. Então, todas essas coisas, a gente tem que bater e, voltando um pouco para web, também, o cara acessa, 100% da sua base, acessa do Gmail.

Mas o Gmail, aqui, especificamente, está acessando do Chrome, do IE ou do Firefox, ou do Opera, ou do, qualquer que for, Brave, que seja, então, você tem que cruzar essas informações, porque, se 90% dos seus usuários, acessam do Gmail, e é Gmail no IE6, ás vezes, você não vai ter, você não vai conseguir, na verdade, dar um suporte decente, para os caras, mas se todo mundo acessa, por exemplo, a maioria, Chrome, Firefox, então, facilita um pouco, ou então o Microsoft Edge, também, facilita um pouquinho.

Você tem que cruzar essas informações, do Browser que o cara está acessando e qual o e-mail, de fato, que ele está acessando, mas, no nosso caso, aqui, da Bytebank, está tudo mastigadinho aqui, bonitinho, então, eu vou focar no Gmail, primeiramente. A primeira coisa, que você precisa ter uma conta do Gmail, acho que ajuda, deixa eu vir aqui, já criei uma conta aqui chamada “aluracursosonline”, alguma coisa assim, vou compor um novo e-mail, vou abrir aqui um pouquinho, olha que magia.

Simplesmente, eu venho aqui, deixa eu só dar umas atualizadas, “Command+A”, “Command+C”, volto aqui e “Command+V”, olha que fácil para fazer isso, só que, percebam que eu nem enviei ainda, mas já dá para ver que está dando ruim, está dando alguns problemas, por exemplo, nenhuma imagem está pegando, acho que isso é um grande problema, o designer vai xingar a gente e o chefe, provavelmente, não vai gostar muito, o que a gente faz, exatamente?

Reparem, percebam que, vamos ligar os pontos, o que está acontecendo? A imagem não está carregando, as imagens não estão carregando, então, provavelmente, o problema é nas imagens, eu vou dar uma caçada aqui, se essas imagens, onde elas estão? Ela está na pasta “images”, junto aqui, mas eu mandei a pasta “images” para o meu teste, não mandei, uma coisa que a gente sempre tem que fazer é pegar, todas essas pastinhas, todas essas imagens e subir em algum servidor.

Se você já manja um pouco de backend, pode subir lá no “heroku”, no “heroku” app, igual eu subi, você consegue acessar, eu não garanto que essa URL vai funcionar para sempre, eu diria que em alguns meses, em um tempo, ela pode morrer. Então, meu conselho é, sobe ela no seu servidor, por FTP, do seu site, sobe ela em algum serviço de hospedagem, tipo “imgur”, temos, também, o “imageshack”, sobe as imagens nesses caras, pega a URL bonitinho, deixa eu fechar aqui.

Pega a URL, eu vou pegar a URL aqui, eu vou fazer a substituição, vamos ver se funciona, vou substituir “images”, por toda essa pastinha, que eu subi lá no “heroku”, copiei, vim aqui, “Ctrl+A”, “Delete”, vou limpar o e-mail, “Command+V”, vamos ver se funciona, não é assim, na verdade, eu tenho que copiar daqui, atualizo, percebam que não mudou nada o “top low”, copiei, vim aqui e colei, apareceu?

Apareceu, então, sempre quando você vai subir, fazer um email marketing, você sempre tem que subir essas imagens em algum lugar, não adianta fazer que nem a gente faz com site, colocar uma pastinha “imagens”, “img”, junto, isso porque as imagens têm que estar hospedadas em algum lugar, não é para você falar para o cara baixar uma pasta, junto com um monte de coisas, eu vou deletar esse cara aqui, só para fazer um teste.

Eu vou fazer o seguinte, eu vou dar um “Command+H” nervoso aqui, vou copiar tudo isso aqui, “Ctrl+Shift+F”, onde estiver “images”, vou fazer assim, onde estiver o nomezinho, melhor ainda, vou fazer assim, “images/”, onde tiver esse padrão, no find “src=”images/”, eu quero substituir, tudo isso, por um “src”, com o “herokuapp.com”, que é a minha URL que eu fiz, mas, de novo, você pode fazer isso no “imgur”, deixa eu ver se está certinho, 15 porque eu fiz um aqui, “Replace”, substitui, vamos ver se continua funcionando.

Está funcionando, copiei, voltei aqui, e-mail novo, abro, “Ctrl+V”, agora sim, acho que esqueceram de alguém, vamos dar uma olhada nesse cara, “Natan Souza”, mais um “Natan Souza”, o que eu esqueci? Sim, é verdade, agora quase, vamos lá, vou só substituir esse cara aqui, fazer assim, “Ctrl+V”, eu copiei errado, eu vou digitar, “https://bytebank.herokuapp.com/img/” e o nome do cara, vamos ver se funciona.

Primeiro eu testo aqui, errei alguma coisa, não, não errei porque ele estava carregando, copio, venho aqui, deleto todos esses caras e cola, vamos ver se puxa, puxou, vamos fazer um teste, vou mandar para o meu e-mail aqui, “teste no Gmail rapidinho”, enviar, sua mensagem foi enviada, atualizar, já chegou e olha que bacana, responsivo, olha isso, legal, vou descer aqui, está legal, está redondo aqui.

Percebam que, assim, você pode dar um jeitinho, você pode fazer isso no Outlook, também, mas o ponto é, será que, realmente, está condizendo com a realidade verdadeira nisso? É isso que a gente vai ver nos próximos vídeos durante essa aula.

Sobre o curso Email Marketing Responsivo parte 2: testando suas newsletters

O curso Email Marketing Responsivo parte 2: testando suas newsletters possui 127 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana