Fala Teckers! Segunda-feira, dia 2 de março, nós vamos começar a série com o curso de Bootstrap
Studio. Serão três vídeos, segunda, quarta e sexta, mostrando como você pode criar o seu
site Bootstrap utilizando este editor visual. E o mais legal, nós vamos fazer tudo
desde a criação das páginas até a sua publicação no servidor. E o mais interessante ainda é que
vocês vão ver recursos avançados do Bootstrap Studio, como a criação de formulários e a
transição entre uma página e outra do site. Vai ser um conteúdo bem bacana, vai ser uma série
de vídeos bem legais. E para quem ainda não sabe, eu consegui o cupom de desconto lá do Bootstrap
Studio de 10%. É só você colocar TECZUM, tudo maiúsculo, na hora que você for fechar a sua
compra. E aí você vai ter um desconto bem bacana para poder acompanhar todos os vídeos que eu vou
publicar a partir do dia 2 de março. Caso você queira comprar a sua licença do Bootstrap Studio
e levar os 10%, é só clicar no link aí embaixo na descrição. Agora, o vídeo de hoje, nós vamos
continuar falando sobre frameworks para desenvolvimento de páginas responsivas, mas eu quero apresentar duas alternativas ao Bootstrap. O primeiro é o Foundation
que é um framework que surgiu mais ou menos na mesma época do Bootstrap e ele ganhou tração com
o tempo. Hoje anda um pouquinho esquecido, mas tem muito site que usa o Foundation como base
inclusive e-mails, porque ele tem uma parte só para ajudar na criação de e-mails ou newsletters
responsivas que vão rodar, que vão aparecer corretamente tanto no Gmail quanto no Outlook
ou até num cliente ali dentro do computador do usuário ou no celular também. Por isso que o
Foundation merece sim ser mostrado aqui hoje para vocês, principalmente para quem ainda não conhece
O segundo framework que eu quero mostrar é o Semantic UI, que é muito poderoso e nos últimos
meses, nos últimos anos, ele vem ganhando cada vez mais adeptos, cada vez mais programadores
estão usando o Semantic UI e ele tem recursos bem interessantes. E o legal é que a parte de
JavaScript dele é sensacional, é super leve, ela é muito mais poderosa do que o Bootstrap entrega
no seu jQuery, que inclusive na versão 5 do Bootstrap vai acabar. Então vai ser bem legal
vocês conhecerem essas duas opções, esses dois concorrentes do Bootstrap, para assim vocês terem
opções, para vocês terem alternativas e não ficarem presos em apenas um framework. Porque como eu falei
no vídeo do Bootstrap, eu estava testando muitos outros, estava utilizando muitos outros frameworks
até resolver voltar para o Bootstrap. Então eu acho interessante que você também faça isso
porque assim você vai escolher aquele que é melhor para o seu projeto. E isso só o programador
só o desenvolvedor, só o responsável pela estruturação das páginas é capaz de saber
é capaz de escolher. Então vamos lá, vamos direto para o vídeo e vamos conhecer dois
concorrentes de peso que podem deixar o Bootstrap em apuros. Olha só, o vizinho aqui do lado está tocando um Guns and Roses numa altura muito doida. Eu acho
que hoje ele está Heavy Metal. Então se estiver no fundo atrapalhando, me desculpe, mas mesmo assim
eu vou deixar aquela trilha sonora que vocês já estão acostumados aqui no TecZoom, só para tentar
abafar um pouquinho isso aí. Esse aqui é o site oficial do Foundation, ele é um framework que
assim como o Bootstrap, trabalha com a estrutura do seu site. Então tudo que você precisa de HTML
JavaScript e CSS, ele já traz pré-configurado. Então você precisa de uma classe para fazer um
redondo, o Foundation já tem. Você precisa criar um lightbox ou um modal para apresentar alguma coisa
para o seu usuário, ele também já tem isso lá trabalhado, tanto a parte da aparência com CSS e
também o JavaScript para que faça tudo rodar e funcionar ali para o usuário, na interface do
usuário. Outra coisa que é bacana também é que ele tem alguns recursos específicos para criação
de e-mail responsível, de newsletter responsiva. Por isso que o Foundation ainda é muito utilizado
Eu digo ainda, porque ele já está na versão 6, mas aqui no Brasil ele não é tão conhecido. Eu acho
que você pegar o Bootstrap e o Foundation, pode ter certeza que 90% vão conhecer o Bootstrap e apenas
10% vão falar que conhece ou usam ou já utilizaram o Foundation, mas ele é muito poderoso. E nessa
versão dele, a parte do JavaScript, o motor JS que ele usa, está muito redondinho, está funcionando
que é uma beleza. Aqui no site oficial você vai encontrar todas as informações sobre o framework
você vai encontrar também uma coisa que eu acho muito legal, que é o Showcase, então ele te mostra
alguns projetos, alguns sites que foram criados, tendo como base este framework. E olha só que
legal, ele tem temas e templates para gerenciadores de conteúdo, para CMS. E olha só, tem até para o
nosso querido WordPress. Então tem vários temas desses que você encontra na TeamForce ou em
qualquer outro marketplace, que foram construídos tendo como base o Foundation. E olha só que legal
são temas bem bonitos, tem alguns aqui que são bem legais mesmo. E ele sai um pouquinho daquela
ideia padrão do Bootstrap, que é aquele botãozinho mais redondinho, chapadinho, que é uma coisa mais
flat. Então ele tem algumas coisas diferentes do Bootstrap, mas no fundo a ideia é que ele faça a
mesma coisa, ajude você a construir, a colocar no ar uma página em minutos e não em dias ou em horas
enfim, tudo que você precisa do básico já vai estar pronto lá no framework, quer um botão vai ter
um simulário vai ter. Então por isso que o framework é legal. Então é legal também que
depois você veja esse showcase, porque tem muita coisa bacana aqui que pode até ser uma inspiração
para o seu próprio projeto. E tem um doc aqui que você com certeza vai encontrar aquilo que voc�
precisa. Então antes de iniciar o seu site, o seu projeto no Foundation, é importante que você venha
aqui, baixe os exemplos que eles têm. Então ele tem aqui um projeto inicial que você pode utilizar
baixe, estude e só depois você comece mesmo a fazer algo que precisa entrar em produção no
futuro. Então é legal que você faça vários estudos antes de escolher o framework. Com o
Foundation não é diferente. E olha só, eu falei que ele também tem uma parte que é especial para
emails, emails responsivos. Ele tem aqui também uma documentação completa de como você pode criar
emails ou newsletters de forma responsiva, que vai abrir da mesma forma em qualquer cliente de
email, inclusive nos webs. Nesse caso Gmail, Hotmail ou Outlook.com e vai abrir igual em
qualquer lugar. Então é bem legal. Essa parte do Foundation é sensacional. Mesmo que você queira
continuar com o Bootstrap, depende a parte de emails você usa o Foundation, porque ele vai
te trazer ferramentas muito mais avançadas para esse ponto específico. E agora chegamos no
Semantic UI, que é o interface de usuário, que é um framework pensado para que você crie todo o
seu projeto responsivo de uma forma que ele seja pensado desde o início, como uma aplicação que
vai funcionar perfeitamente lá no smartphone, lá no tablet e depois vai ficar ótima também no
desktop. E olha só que legal, já tem um pessoal do Brasil trabalhando com o Semantic UI, ele enrola
a língua mesmo. E já tem aqui uma tradução para o nosso português. E olha só que legal, tem apenas
19% de tudo traduzido. E se você quiser ajudar a tradução, você pode participar da equipe. Então
se você conhece inglês, se você quer participar da comunidade, fazer um framework, ganhar tração
e ganhar cada vez mais usuários no Brasil, olha aí, essa é a sua oportunidade. E aqui eu achei legal
porque ele já fala direto que a interface do usuário é a linguagem da web. E faz todo sentido
porque ali onde o usuário acessa, ali onde ele interage com o conteúdo ou até mesmo vai atrás
do que ele precisa dentro de uma aplicação, é o principal. Então, se a interface do usuário for
detonada toda cagada, pode ter certeza que o seu projeto já vai começar com uma possibilidade bem
grande de ser um fracasso. Então, é importante você trabalhar sim a interface de usuário. E
esse framework, o Semantic UI, te dá todas as ferramentas para que você possa fazer isso
Então, aqui no site oficial você vai encontrar a documentação, você vai encontrar como criar as
ferramentas responsivas e o mais legal, ele tem aqui alguns exemplos de código que você pode ver
como o framework funciona. E olha que legal o JavaScript dele, ele é semântico, ele é super
pequeno, com poucas linhas de código você consegue criar coisas avançadas, coisas interativas, e ele
te dá um exemplo aqui ainda. Olha só aqui uma parte de seleção, que bacana que é isso aqui
Com simples select aqui e uma chamadinha JS, você consegue fazer já uma parte de seleção bem
moderna. E aqui embaixo ele tem o debug, ele também fala que a parte de debugar o código
de encontrar algo que você precisa ali no código, ou para corrigir, ou até mesmo para ver o que ele
está causando lá na aplicação ou na interface do usuário, ele também tem essa parte de debugação
muito mais simplificada do que outros frameworks. Eu acredito muito no Semantic UI porque ele �
fácil de ser aprendido, então você vai se sentir em casa quando for usar ele, e ele tem uma
documentação muito rica. E os caras que estão trabalhando, os responsáveis atrás desse framework
estão trabalhando bastante ali para que ele ganhe cada vez mais usuários, cada vez mais programadores
que utilizem essa ferramenta, essa biblioteca de códigos, então acho que vale muito a pena conhecer ele
Outra coisa que é sensacional no Semantic UI é a parte de temas, você pode criar os seus
próprios temas ou pode utilizar temas que já vem com o framework, ou até mesmo baixar temas que
outros programadores, outras pessoas estão disponibilizando para a comunidade. E olha o que
ele tem aqui, um tema baseado no Bootstrap, então você consegue deixar os botões, as caixas de
formulário, o texto, tudo igual você faria no Bootstrap. E fora isso ainda, ele trabalha com
Material Design lá do Google, então se você quer uma coisa mais flat, uma coisa mais Android, que
rode como um aplicativo nativo do Android, ele também tem esse tema aqui, e você só precisa
selecionar ou chamar uma única vez, que daí ele vai carregar o tema e vai deixar a interface de
usuário do jeitinho que você quer. Então acho bem legal, ele ainda mostra aqui o código, olha só que
bacana, você tem aqui o código do framework e você tem aqui a personalização, então isso é legal
porque você já sabe mais ou menos como funciona essa parte de temas, porque você tem o CSS ali
todas criadas, já com as cores, já com as bordas arredondadas, e você pode personalizar isso através
do seu próprio CSS, porque o tema é isso no fundo, é uma forma de você deixar a aparência, as cores e
as fontes do jeito que você quer, isso que é um tema. E aqui no nosso Semantic UI é a mesma coisa
então eu recomendo também que você venha aqui, brinque um pouquinho com a parte de temas, que
você vai ver que isso é muito importante, e o principal, é muito poderoso aqui dentro do framework
E lógico, tem mais um monte de coisas aqui, ele também tem exemplos de sites que foram construídos
através do Semantic UI, e você pode navegar e pode ver como foi feita toda a estrutura HTML, CSS e
JavaScript, e aí é só acessar um site ou a página que você quer ver, navegar e testar, e olha s�
que bacana, tudo responsivo, tudo bonito, tudo legal. Se você está meio enjoado, eu recebi umas
mensagens lá de uma galera falando que no Bootstrap é tudo igual, sempre o site fica igual, não é bem
assim, se você se esforçar e fizer algo ali, você vai deixar o seu site sempre diferente um do outro
mas como o pessoal quer usar, ir pelo caminho mais rápido, mais simples, quer deixar como está mesmo
e só trabalhar o conteúdo, aí vai ficar tudo igual mesmo, só que o pessoal da Semantic UI quer mudar
um pouco isso, então ele te dá as possibilidades de você alterar de forma mais fácil ainda do que no
Bootstrap, o tema, a aparência da página, então acho que vale muito, muito a pena que você navegue e veja
Aqui tem os elementos, tem o menus, olha os modelos de menus que ele já traz pronto para você usar
o dropdown aqui, olha aqui a parte de filtro, então você tem um monte de coisa já pronta
se você vai usar o padrão que vem, aí vai de você, agora se você quiser alterar cor, quiser alterar
forma, quiser alterar fonte, você também pode, é só você personalizar o seu próprio CSS
É importante que depois você acesse o site do Semantic UI e veja tudo isso que eu falei para vocês
e o melhor, dá uma olhada aqui na documentação, que é aí que você vai encontrar coisas legais realmente
A parte de grid deste framework, tanto quanto lá do Foundation, são sensacionais, você não precisa
ficar preso no Bootstrap, por isso que é legal sempre estar antenado com as novidades aí da web
cada dia sai uma coisa nova, mas lógico, fique antenado, mas escolha uma solução e fique especialista nela
porque assim você vai acabar dominando e só quando você precisar de algo que não existe nela
aí você procura uma outra, mas é importante que você saiba que existem outras para você não ficar
sempre preso numa coisa só. Beleza, Techer? Espero que vocês tenham gostado destas dicas rápidas
foram dois novos frameworks, que não são tão novos assim, mas eu acho que merecem ser conhecidos
e merecem ser utilizados. Se vocês quiserem que eu fale, que eu me aprofunde em algum deles
ou até mesmo nos dois que eu apresentei aqui hoje, deixe nos comentários, porque assim eu descubro e
sei que o conteúdo é relevante, e aí eu posso sim produzir novos vídeos, novos conteúdos, combinado
Então, não esqueça de deixar o seu comentário aí. Eu espero que vocês tenham gostado e a gente se v�
no próximo TechCast. Valeu