e aí pessoal tudo bem com vocês bom eu criei um curso né de desenvolvimento de websites usando html5 e nesse curso eu utilizei duas ferramentas né auxiliares aí uma é o cansada para criação do banner né que vai como uma imagem no site e o filme não é o significa uma folha de aplicação aí que eu utilizei para desenhar um mocap né do site que a gente desenvolveu por código é é durante as aulas e em alguns né acharam interessante e tentaram mexer também para criar os seus mocassins e tiveram um pouco de dificuldade e
eles me pediram aí para fazer alguma coisa né um videozinho explicar melhor como é que funciona então é para isso que eu tô gravando esse vídeo tá então eu vou mostrar mais ou menos aí como é que isso funciona o sigma tá então basicamente aí vocês precisam criar uma conta nele é gratuito é tão básico entra lá com login é meio sem essas coisas e essa aqui é tela e vocês vão ver né provavelmente só inicia com esses dois projetos aqui não é um projeto de exemplo um exemplo aqui de cordoes personalizados preciso que você
que são projetos que eu comecei a fazer que tô trabalhando inclusive esse aqui foi o projeto que eu usei no curso e basicamente para começar um novo projeto é que nem ele basta a gente clicar nesse finalzinho demais né que ele vai criar aí uma área de trabalho em branco certo então aqui existem é duas coisas bem importantes essa barra na lateral aqui com algumas propriedades das ferramentas que a gente tá usando e essa barrinha de ferramentas aqui em cima então basicamente é isso para gente começar ok aquele menino né que a gente combinou zinho
é que a gente tenha com algumas opções inclusive estão aqui nessa tela essa opção aqui é opção que vai permitir a gente aí trabalhar com a ferramenta e mover as coisas pela tela e uma ferramenta para aumentar e dimensionar né a escala a gente vai usar bastante aí eu devolver é mas o primeiro passo que a gente tem aí para para dar é nessa cerquilho aqui né nessa opção tá bom a primeira primeira opção que a gente tem aqui clicando aqui na ferramenta é frame né ele traz aqui para gente ainda na guia design depois
a gente vai conhecer também a guia para tu taiff e cold aqui na guia design ele aparece para gente alguns exemplos de telas para a gente poder começar então por exemplo se eu for fazer uma aplicação para um telefone né para um smartphone eu vou vir nessa primeira opção e que ele me dá algumas opções de celular estão eu quero fazer para o google pixel 2 quero fazer pro iphone 11 pro mar então é basicamente quando a gente escolhe uma dessas opções a única coisa que ele faz é criar já uma área de trabalho em
branco aqui para gente com essas dimensões tá só que eu posso escolher se é para um fono se é para um tablet o top né esse aqui normalmente é utilizado para sites então ele vai trazer mais ou menos até o tamanho da tela de um computador tá aqui para o lote né para fazer uma aplicação zinha para um relógio smart watch e tem que algum paper né então tem alguns tamanhos de papéis aí normais e para social media têm alguns exemplos aí né de capa para facebook post para facebook né entre outros então só para
exemplificar aí vou querer entrar telefone e vou pegar aqui o iphone 8 plus então assim que eu clico aqui ele já me traz uma área de tamanho com aquele tamanho em específico tá eu posso aqui escolher deixar ele assim na na horizontal ou na vertical ou na horizontal tá não deixarem pezinho mesmo como ele já estava beleza então aqui a gente viu né como iniciar um projeto e ele já dá alguns tamanhos umas medidas específicas aí mas existe também a maneira da gente poder redimensionar este tamanho ou clicando e arrastando ou também né mô vem
mexendo aqui nas propriedades de altura e largura tá bom tem como a gente rotacional elemento enfim ele tem bastante configuração mas a princípio o que a gente vai precisar mais o tamanho do nosso da nossa tela de pintura tá bom sem quando ele queria que o documento ele dá um nomezinho para a gente saber aqui do lado né qual é essa essa página em sim depois de criar né aí a nossa primeira tela de trabalho a gente pode fazer algumas configurações nela como eu já mostrei é tamanho altura e largura a ser ter as bordas
né arredondadas mais aqui embaixo ele tem algumas opções é a única que a gente vai precisar é a cor do preenchimento não quero alguma cor de fundo aqui nesse preenchimento então ou eu entro com o código em hexadecimal aqui ou seleciono aí uma cor a poderia selecionar uma cor em um cinzinha não sumiu né que é um cinza bem parecido com o que seria o fundo aí do software né escolhendo a cor eu poderia ser lá aumentar aqui deixa ele mais escuro mas claro né vermelho você quiser um tom azulado clica aqui em azul e
assim eu vou momento tá bom deixar um cinza aqui mesmo só para gente enxergar área de trabalho por enquanto basicamente o que a gente faz aqui agora é adicionar element né então com a minha área de trabalho criada e pré-configurada a gente tem aqui opção agora para inserir algumas formas tá então eu tenho aqui um reta em linhas retas elipses polígonos estrelas e também imagens então eu posso trazer uma imagem do computador na medida que eu tenho salvo no meu computador também tá aqui tem algumas opções aí para gente desenhar então tem tanto aí a
caneta quanto o lápis né tem basicamente eu consigo fazer um desenho aí utilizando algumas pontas né consigo fazer um polígono alguma coisa nesse sentido aqui de ser também algumas opções para gente poder arredondar e tal mas não vou entrar em detalhes da ferramenta tá já eu penso eu a mais pra gente fazer um desenho aí a mão livre mesmo tá realmente né a gente não vai ficar desenhando aqui mas construir telas enfim né fazer alguns elementos aí para mocap beleza é preciso finalizar ela aqui primeiro ele tá aí pra ver então as duas coisas que
a gente mais é utilizar é formas ou imagens ah tá teste bem simples vou clicar aqui digitar aí o meu texto tá e aí aqui na lateral nessa a gente vira um pouquinho toque tem como alterar também lá tá bom eu sei que seria o posicionamento em relação ao eixo x e y em algumas opções aqui de alinhamento né para gente poder colocar esse algum lugar da tela e mais aqui embaixo a gente tem algumas configurações eu posso trocar a fonte né desse meu texto acho que não mudou nada lá pegar uma fonte aleatório aqui
se ela sedã bom aí parece um times new roman né não foi uma boa escolha bom assim ele tem muita fonte tá tem várias opções aqui de fontes acabei vocês aí dando uma molhadinha aqui ficando com a setinha para cima ele vai modificando aí as fontes tá deixando uma nova cilin e além de a gente trocar aqui o tipo da fonte a gente consegue também trocar o tamanho tá tá muito pequeno esse texto que era ele um pouco maior aí beleza é ao teria aí o tamanho do texto tem algumas opções aqui de alinhamento à
esquerda direita é o texto eu só cliquei digitei nem que eu fiz um texto artístico mas eu também consigo clicar e arrastar e fazer uma caixa de texto e digitando vários textos aqui dentro tá e aí quando tem uma caixa de texto eu consigo fazer aquelas formas de alinhamento né consigo aqui alinhar eles a esquerda ou eles à direita da caixa tá bom tem como também trocar a cor ou que tem algumas cores né assim já foram usadas eu posso também selecionar uma nova cor e assim por diante bom então além né do trabalhar aí
com a fundo aqui da minha área de trabalho com as fontes né eu ver se tem mais alguma coisa aqui e importante a o quê para fonte das coisas mais úteis são essas e as formas aí é que na verdade compõe né hum uma tela que serviria melhor aí para a gente poder fazer um o cap né um exemplo de site por exemplo então basicamente se a gente fosse aí vou voltar aqui para abrir é o que eu desenhei para o curso então eu queria um modelo de site é bem genérico então esse aqui foi
um modelo do site né que eu desenhei e basicamente o que eu usei aqui retângulos textos e linhas tá então não tem e usei um círculo eo triângulo aqui embaixo mas não tem muita coisa diferente disso tá então por exemplo se eu quiser criar uma nova página aqui para continuar fazendo meu trabalho então é só eu vim daqui né mazinho de design clicar aqui no frame que ele vai ele vai trazer aqui para mim algumas opções de tela tá e eu usei desktop só não lembro qual foi o tamanho exato mas vou pegar aqui esse
macbook aí tá um pouco largo demais aí na verdade acho que para construir esse aqui eu usei um outro modelo mas enfim eu posso eu consigo ver aqui e editar aí tá bom conseguiu deixar aqui o a minha área de trabalho do tamanho que eu quiser tá e para começar agora que fazer por exemplo uma outra página mas eu vim aqui por exemplo fazer um banner mas é um retângulo tá desenhou retângulo ele já trouxe aqui numa cor mas se eu quiser eu posso vir aqui em fio trocar a cor desse meu banner tá para
fazer os textos a gente vai clicar e digitar um texto nem vem para fazer os itens aqui do menu eu fiz vários textinhos tá aumentar aqui um pouco bom então clique aí digitei home run na sequência aí eu ou a gente digitar várias vezes eu dou um control c control ver e vai apertando setinha para o lado para ele um pouco mais rápido se a gente apertar shift setinha para o lado ele né vai um pouco a setinha fazer efeito um pouco maior aí ele vai um pouco mais rápido aqui eu poderia ter um item
do meu menu o control c control ver aperta a setinha para o lado outro item e assim por diante para alinhar eles organizar uma posso selecionar todo de uma vez colocar aqui numa posição vocês prestarem atenção a própria ferramenta quando chega no centro alarme bota uma linha ali para me nortear a mesma coisa quando eu trago para as laterais as posiciona em algum canto aqui na minha área objeto para fazer a linha a gente também já sabe que aqui basta clicar e arrastar quando eu clico é a raça essa linha ela pode sair torta se
eu apertar o shift ó ele não me deixa ela sair tortinha ela vai sair a minha em linha reta então é só o soltar pronto fiz uma linha reta aí tá alguma coisa que eu não falei para vocês o seguinte aqui no retângulo né eu tenho só o fio só o preenchimento mas eu poderia também colocar contorno você querer clicar aqui em estoque vocês prestarem atenção ele já esse retângulo aqui de cima já tá com uma borda é pretinha tá se eu quiser mudar a cor mais uma coisa vem aqui troca a cor aqui eu
consigo alterar a espessura não na minha borda agora dá para ver ela melhor aqui em cima né a borda preta mais escura bom e assim por diante então agora quero título do meu site é um texto ou clicar aqui botar e títulos no site e assim por diante então não tem muito segredo para vocês desenvolver um layout eu acho que com esses recursos que eu passei até agora já são suficientes e a aqui é um texto a de parágrafo né gente costuma dizer que você quer um texto artístico porque só existe o texto textos de
parágrafo para a gente criar ele basta clicar e arrastar e criar uma caixa de texto aqui eu vou jogar o texto e posso né selecionar aqui para ele ficar alinhado à esquerda direita justificado enfim bom então analisando aqui a gente só tem isso né linhas textos de diferentes formatos a retângulos quadrados a que eu utilizei um círculo eo triângulo coloquei um sobre o outro tá essas imagenzinhas aqui eu importei então se a gente vier aqui e escolher um place em mês ele vai haver aqui para gente né buscar localizar alguma coisa do nosso computador essa
que foi arte que eu fiz para exemplo ficar lá nela como a gente poderia trabalhar com kanda dar um outro e ela vai lá para o trabalho mas é bom e uma outra coisa também que eu acho que é mais interessante aí da gente trabalhar né com o sigma é que às vezes eu posso ter não é um exemplo é de um aplicativo por exemplo que vai ter várias telas com depois do desenhar todas essas telas eu consigo também emular em fazer uma constância uma simulação de como esse site funcionaria tá então por exemplo quando
eu clicar aqui no item item né nesse segundo elemento aqui vamos supor que quando eu clico nele e eu quero abrir essa minha página então tem como eu fazer essa simulação por aqui tá todo elemento quando a gente clica né mas por isso a gente precisa vir aqui para outra type tão complicado nessa área de protótipos né prototype quando a gente clica no elemento além dessas artes aqui que permite a gente redimensionar o elemen ele me também dá essa opção que é uma bolinha tá vendo tá então para tudo e a meta e acessar essa
bolinha ela me serve como um ponto de ancoragem então por exemplo vamos supor que quando eu clicar nesse item aqui eu quero abrir essa página então é só clicar no item que eu quero vir aqui até essa bolinha e arrastar tá vendo que ele queria te por uma certa eu posso ligar qualquer outro elemento quando eu encosto né no elemento aí que eu quero que faça o link ele cria um vínculo entre esses dois elementos tá a partir disso como ele tem que sair desse veio para esse esse foi o primeiro que eu mexi ele
coloca esse sinalzinho de play isso aqui significa nessa que representa que essa é a primeira tela que vai aparecer então quando eu vier aqui de um tô aí né para apresentar esse meu modelo de site é isso que vai acontecer ele vai abrir primeiro essa página e quando eu clicar aqui em item ele vai me trazer para essa outra tá então só pra gente ver como é que ficou duplicating presente ele abrindo uma guia nova o projeto oi espera um pouquinho tá ele carregar ah beleza então ele trouxe lá aquele nosso exemplo é o banner
que já estava desenhado tá e assim que eu vi ela aqui clicar no item tá vendo que já até virou uma mãozinha né ele me mostra que algo clicável cliquei aqui ele me abri aquela outra página que a gente estava fazendo beleza aí eu poderia ter aqui o mesmo vínculo do home né não fiz aqui mas eu poderia vir aqui em home clicar nessa setinha e vem colar com esse então agora quando eu clicar em um ele vai para o outro e assim vice-versa só esperar carregar aqui mas beleza então do roma ele volta para
cá é a minha index quando eu clico ele tem ele venha para cá é um cliente a navegação entre as minhas páginas isso aqui é muito importante né porque além de você desenhar você mostrar para pessoa aqui atenção não vai ter uma ideia real de como site está funcionando aí nessa opção de prototype né de protótipo a gente consegue mostrar exatamente como é que existe né como é que acontece a navegação entre as telas também você quer bem bem interessante também em último aqui né tem esses a opção do cold ele basicamente o verifica quais
são as cores né e fontes que você usou e já dá em um código css tá bem que acho que essa parte mais fácil do css mas enfim então ele mostra para a gente aí uma sugestão de código para quando a gente vai implementar isso lá junto com html e é para que a gente possa utilizar tá bom mas para mim as duas partes mais importantes do design onde o desenho este e representa né todo o layout do site a gente eu quero fazer e pronto tá e que me permite né fazer os dentes de
uma página para outra tá bom é basicamente é isso o modelo que eu fiz né usando na verdade primeiro eu criei esse modelo depois eu dupliquei ele né basta você selecionar ele inteiro control c control v colei gerando esse outro modelo aqui e aí com base nesse eu fui importando imagens trocando fontes trocando o texto sem até chegar nesse resultado e esse aqui como eu falei no começo do vídeo isso aqui foi o que originou né o que causou a ideia de um site né que para eu desenvolver e esse aqui é o site que
a gente desenvolve durante o curso eu não usei nenhum recurso além do que esses que eu falei para vocês para fazer esse modelo né e posteriormente aí poder implementar desenvolver ele lá utilizando html5 beleza bom espero ter ajudado aí né da do norte para vocês poderem começar a mexer com os projetos de vocês não sigma é caso alguém tem alguma dúvida só botar aí nos comentários né que assim que der eu respondo beleza pessoal até mais
