O documento discute como o CSS, apesar de ser frequentemente subestimado, ainda é uma tecnologia valiosa e poderosa. Apresenta diversos recursos avançados do CSS, como variáveis, blend modes, grid layout, e destaca que o CSS3 continua em desenvolvimento com novas funcionalidades. Defende que aprender os fundamentos do CSS é importante para desenvolvedores web.
Tutorial ClassTools - Material de Oficina da Semana Pedagógica - Formação Continuada do Colégio Estadual Tancredo de Almeida Neves, Colombo, PR. Professora Geane Poteriko.
O documento discute a importância de padronização e reutilização no desenvolvimento front-end. Apresenta diferentes abordagens como grids, frameworks e metodologias como OOCSS, SMACSS e BEM para criar códigos reutilizáveis. Defende a criação de um arquivo de standards próprio com classes globais ao invés de depender totalmente de bibliotecas externas.
BEM, OOCSS, SMACSS etc. Todas estes modelos de arquitetura de CSS tem como principal objetivo reaproveitamento de código e um código bem organizado. Nestes slides, dou uma rápida introdução em alguns modelos, porque utiliza-los e em que momento ele melhor se aplica.
O documento descreve as ferramentas e modos de visualização do software Dreamweaver, que é usado para criar e desenvolver sites. Ele explica como definir um novo site no Dreamweaver, incluindo criar uma pasta para armazenar os arquivos do site e criar banners e botões no Corel Draw para usar posteriormente no site.
O documento apresenta padrões de HTML e CSS para criação de layouts e componentes de forma estruturada e semântica. É apresentado o padrão de grids para definir a estrutura do layout, minidocumentos para encapsular seções de conteúdo de forma autônoma e microsemântica para melhorar a acessibilidade e o significado do código HTML.
CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de documentos HTML e XML, separando seu conteúdo da sua apresentação visual. CSS permite definir estilos para elementos como fontes, cores, espaçamentos e layout de páginas da web de forma a melhorar a acessibilidade, manutenção e separação entre conteúdo e visualização.
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixNayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
A repetição de código e a difícil manutenção das folhas de estilo são alguns dos problemas vividos por quem desenvolve para a web. Foi para suprir essas deficiências que o pré processador mais utilizado atualmente nasceu. Nessa palestra vou te mostrar algumas das muitas vantagens que o SASS oferece para o desenvolvimento web.
Quem é Nayara Felix?
Entusiasta e desenvolvedora front end, sou desenvolvedora magento na FCamara, me formando em sistemas para internet na FIAP e fã incondicional de Harry Potter. Trabalhei com marketing digital, design e fotografia por alguns anos mas minha paixão sempre foram os códigos.
O documento discute como o CSS, apesar de ser frequentemente subestimado, ainda é uma tecnologia valiosa e poderosa. Apresenta diversos recursos avançados do CSS, como variáveis, blend modes, grid layout, e destaca que o CSS3 continua em desenvolvimento com novas funcionalidades. Defende que aprender os fundamentos do CSS é importante para desenvolvedores web.
Tutorial ClassTools - Material de Oficina da Semana Pedagógica - Formação Continuada do Colégio Estadual Tancredo de Almeida Neves, Colombo, PR. Professora Geane Poteriko.
O documento discute a importância de padronização e reutilização no desenvolvimento front-end. Apresenta diferentes abordagens como grids, frameworks e metodologias como OOCSS, SMACSS e BEM para criar códigos reutilizáveis. Defende a criação de um arquivo de standards próprio com classes globais ao invés de depender totalmente de bibliotecas externas.
BEM, OOCSS, SMACSS etc. Todas estes modelos de arquitetura de CSS tem como principal objetivo reaproveitamento de código e um código bem organizado. Nestes slides, dou uma rápida introdução em alguns modelos, porque utiliza-los e em que momento ele melhor se aplica.
O documento descreve as ferramentas e modos de visualização do software Dreamweaver, que é usado para criar e desenvolver sites. Ele explica como definir um novo site no Dreamweaver, incluindo criar uma pasta para armazenar os arquivos do site e criar banners e botões no Corel Draw para usar posteriormente no site.
O documento apresenta padrões de HTML e CSS para criação de layouts e componentes de forma estruturada e semântica. É apresentado o padrão de grids para definir a estrutura do layout, minidocumentos para encapsular seções de conteúdo de forma autônoma e microsemântica para melhorar a acessibilidade e o significado do código HTML.
CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de documentos HTML e XML, separando seu conteúdo da sua apresentação visual. CSS permite definir estilos para elementos como fontes, cores, espaçamentos e layout de páginas da web de forma a melhorar a acessibilidade, manutenção e separação entre conteúdo e visualização.
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixNayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
A repetição de código e a difícil manutenção das folhas de estilo são alguns dos problemas vividos por quem desenvolve para a web. Foi para suprir essas deficiências que o pré processador mais utilizado atualmente nasceu. Nessa palestra vou te mostrar algumas das muitas vantagens que o SASS oferece para o desenvolvimento web.
Quem é Nayara Felix?
Entusiasta e desenvolvedora front end, sou desenvolvedora magento na FCamara, me formando em sistemas para internet na FIAP e fã incondicional de Harry Potter. Trabalhei com marketing digital, design e fotografia por alguns anos mas minha paixão sempre foram os códigos.
O documento fornece uma introdução sobre CSS, explicando que CSS não é uma linguagem de programação e sim de folhas de estilo. Ele descreve a anatomia básica de uma regra CSS, incluindo seletores, declarações, propriedades e valores de propriedade. O documento também discute como modificar fontes, textos, layouts e resetar estilos padrão dos navegadores.
O documento discute o programa Dreamweaver e como criar um site sobre o Brasil com 4 páginas usando suas ferramentas. Ele descreve a barra de ferramentas, modos de visualização, como definir o site, inserir tabelas, dicas de diagramação e acessar provas online.
O documento descreve as ferramentas e modos de visualização do software Dreamweaver para desenvolvimento de sites. Ele explica como definir um novo site no Dreamweaver, incluindo criar uma pasta para armazenar os arquivos do site e detalhes sobre criar um banner e botões no Corel Draw para uso em páginas futuras.
Este documento fornece uma introdução sobre CSS (Cascading Style Sheets), incluindo seus principais tópicos como tipos de chamada, sintaxe, seletores, hierarquia, estilização, posicionamento e dicas essenciais para depuração.
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
Upando a gestão de conteúdo do wp com o advanced custom fieldDanilo Nobre
Slides da palestra que apresentei no Wordcamp 16 Fortaleza.
A ideia é mostrar o quanto o plugin Advanced Custom Field eleva a potência da gestão de conteúdo do WordPress ao extremo, trazendo uma excelente experiência do usuário back-end como também possibilitando a utilização desses conteúdos de forma flexível para o usuário front-end.
Quero expor a importância do ACF no fluxo de desenvolvimento dos projetos WP da Bleez, tanto na perspectiva de negócios, de design e de desenvolvimento.
A palestra começaria mostrando como que funciona os custom fields nativos do WP, pra em seguida mostrar as features do ACF junto da aplicação das principais features nos projetos da Bleez.
O documento apresenta os conceitos básicos de CSS, explicando como ele separa o conteúdo da apresentação em websites, trazendo vantagens como carregamento mais rápido, menores custos e melhor acessibilidade. Apresenta também os seletores básicos de CSS como tag, ID e classe, além de dicas práticas sobre sintaxe correta de HTML e CSS.
O documento introduz o CSS no webdesign, discutindo como antes as páginas eram construídas com emaranhado de tags sem padrões, dificultando alterações, e como o CSS trouxe padronização e separação de conteúdo, estilo e comportamento. Apresenta também vantagens do CSS como carregamento mais rápido e menor custo com hospedagem. Explica seletores, cores e fontes no CSS e dá dicas práticas de como implementar corretamente.
Apresentação realizada no Aniversário do curso de Ciência da Computação da Universidade Federal do Maranhão (UFMA). O objetivo é apresentar a definição de framework, mostrar alguns padrões de projeto e um case de um pequeno framework chamado LizPHP.
O documento discute a inserção de imagens, desenhos e outros elementos gráficos em documentos de texto. Ele explica como inserir imagens em diferentes formatos, clip art, formas básicas e textos artísticos. Também mostra como redimensionar imagens e adicionar legendas para fornecer mais contexto.
[1] O documento discute o design responsivo de sites para fornecer uma boa experiência em diferentes dispositivos. [2] Ele define design responsivo e explica problemas com sites que não são responsivos. [3] O documento também cobre conceitos como HTML, CSS, media queries e recomendações para criar interfaces responsivas.
O documento discute a construção de layouts de sites com CSS. Ele apresenta os principais tópicos do CSS como inserção, seletores, propriedades e box model. Também demonstra na prática como estilizar um documento XHTML usando CSS e discute diretrizes e novidades do CSS3.
SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
Case studies about Layout & View States & Scale in Windows 8 Store AppsComunidade NetPonto
Este documento resume uma apresentação sobre layouts, estados de visualização e resoluções de tela em aplicativos Windows Store. A apresentação discute como personalizar layouts usando estilos, alterar estados de visualização com o Visual State Manager e lidar com diferentes resoluções de tela. Também fornece exemplos de como alterar cores e bordas selecionadas em uma ListView.
O documento discute as tecnologias fundamentais do desenvolvimento front-end, incluindo HTML, CSS e JavaScript. Ele explica a estrutura básica de um documento HTML e vários elementos importantes como tags, imagens, formulários e links.
The W3C TAG is working on a set of best practices for capability URLs. What's a capability URL? Glad you asked. This presentation (give at "London Web Standards" on 20 Jan 2014) attempts to explain what a capability URL is and why Web developers should take care when using them. (NB: the first few slides are just speaker introduction.)
This document summarizes recent developments in web standards. Key points include: the rise of mobile and JavaScript, new real-time communication technologies like WebRTC, debates around DRM extensions, advances in offline capabilities and push notifications, evolving system application APIs, and work on payments, HTTP 2.0, and securing the web. It also discusses upcoming elections for the W3C Technical Architecture Group and encourages getting involved in W3C working groups.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
Oficina de "Oficina de Planejamento Corte: Seu layout virando código" dada pelo Bernard De Luna e Victor Motalvão no 15 EDTED - Rio de Janeiro dia 20/03/2010
O documento fornece uma introdução sobre CSS, explicando que CSS não é uma linguagem de programação e sim de folhas de estilo. Ele descreve a anatomia básica de uma regra CSS, incluindo seletores, declarações, propriedades e valores de propriedade. O documento também discute como modificar fontes, textos, layouts e resetar estilos padrão dos navegadores.
O documento discute o programa Dreamweaver e como criar um site sobre o Brasil com 4 páginas usando suas ferramentas. Ele descreve a barra de ferramentas, modos de visualização, como definir o site, inserir tabelas, dicas de diagramação e acessar provas online.
O documento descreve as ferramentas e modos de visualização do software Dreamweaver para desenvolvimento de sites. Ele explica como definir um novo site no Dreamweaver, incluindo criar uma pasta para armazenar os arquivos do site e detalhes sobre criar um banner e botões no Corel Draw para uso em páginas futuras.
Este documento fornece uma introdução sobre CSS (Cascading Style Sheets), incluindo seus principais tópicos como tipos de chamada, sintaxe, seletores, hierarquia, estilização, posicionamento e dicas essenciais para depuração.
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
Upando a gestão de conteúdo do wp com o advanced custom fieldDanilo Nobre
Slides da palestra que apresentei no Wordcamp 16 Fortaleza.
A ideia é mostrar o quanto o plugin Advanced Custom Field eleva a potência da gestão de conteúdo do WordPress ao extremo, trazendo uma excelente experiência do usuário back-end como também possibilitando a utilização desses conteúdos de forma flexível para o usuário front-end.
Quero expor a importância do ACF no fluxo de desenvolvimento dos projetos WP da Bleez, tanto na perspectiva de negócios, de design e de desenvolvimento.
A palestra começaria mostrando como que funciona os custom fields nativos do WP, pra em seguida mostrar as features do ACF junto da aplicação das principais features nos projetos da Bleez.
O documento apresenta os conceitos básicos de CSS, explicando como ele separa o conteúdo da apresentação em websites, trazendo vantagens como carregamento mais rápido, menores custos e melhor acessibilidade. Apresenta também os seletores básicos de CSS como tag, ID e classe, além de dicas práticas sobre sintaxe correta de HTML e CSS.
O documento introduz o CSS no webdesign, discutindo como antes as páginas eram construídas com emaranhado de tags sem padrões, dificultando alterações, e como o CSS trouxe padronização e separação de conteúdo, estilo e comportamento. Apresenta também vantagens do CSS como carregamento mais rápido e menor custo com hospedagem. Explica seletores, cores e fontes no CSS e dá dicas práticas de como implementar corretamente.
Apresentação realizada no Aniversário do curso de Ciência da Computação da Universidade Federal do Maranhão (UFMA). O objetivo é apresentar a definição de framework, mostrar alguns padrões de projeto e um case de um pequeno framework chamado LizPHP.
O documento discute a inserção de imagens, desenhos e outros elementos gráficos em documentos de texto. Ele explica como inserir imagens em diferentes formatos, clip art, formas básicas e textos artísticos. Também mostra como redimensionar imagens e adicionar legendas para fornecer mais contexto.
[1] O documento discute o design responsivo de sites para fornecer uma boa experiência em diferentes dispositivos. [2] Ele define design responsivo e explica problemas com sites que não são responsivos. [3] O documento também cobre conceitos como HTML, CSS, media queries e recomendações para criar interfaces responsivas.
O documento discute a construção de layouts de sites com CSS. Ele apresenta os principais tópicos do CSS como inserção, seletores, propriedades e box model. Também demonstra na prática como estilizar um documento XHTML usando CSS e discute diretrizes e novidades do CSS3.
SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
Case studies about Layout & View States & Scale in Windows 8 Store AppsComunidade NetPonto
Este documento resume uma apresentação sobre layouts, estados de visualização e resoluções de tela em aplicativos Windows Store. A apresentação discute como personalizar layouts usando estilos, alterar estados de visualização com o Visual State Manager e lidar com diferentes resoluções de tela. Também fornece exemplos de como alterar cores e bordas selecionadas em uma ListView.
O documento discute as tecnologias fundamentais do desenvolvimento front-end, incluindo HTML, CSS e JavaScript. Ele explica a estrutura básica de um documento HTML e vários elementos importantes como tags, imagens, formulários e links.
The W3C TAG is working on a set of best practices for capability URLs. What's a capability URL? Glad you asked. This presentation (give at "London Web Standards" on 20 Jan 2014) attempts to explain what a capability URL is and why Web developers should take care when using them. (NB: the first few slides are just speaker introduction.)
This document summarizes recent developments in web standards. Key points include: the rise of mobile and JavaScript, new real-time communication technologies like WebRTC, debates around DRM extensions, advances in offline capabilities and push notifications, evolving system application APIs, and work on payments, HTTP 2.0, and securing the web. It also discusses upcoming elections for the W3C Technical Architecture Group and encourages getting involved in W3C working groups.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
Oficina de "Oficina de Planejamento Corte: Seu layout virando código" dada pelo Bernard De Luna e Victor Motalvão no 15 EDTED - Rio de Janeiro dia 20/03/2010
Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.
Palestra feita pela primeira vez na QCon 2013.
Este documento apresenta as instruções para a realização de uma avaliação da disciplina Criação de Páginas de WEB do curso de Tecnologia em Sistemas de Computação da Fundação CECIERJ. A avaliação consiste no desenvolvimento de um site para uma livraria virtual e contém orientações sobre layout, uso de tabelas, CSS e formulários.
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
Já sabe codificar? Quer chegar a um nível destacado no mercado? Práticas avançadas de documentação, velocidade de codificação, modularização. Tudo isso recheado a muitas dicas de corte de layouts e inovações em CSS3.
[INFNET] Criando layouts em PSD pensando no front-end e back-end@cristianoweb
O Instituto INFNET me convidou para apresentar a palestra "Criando layouts em PSD pensando no front-end e back-end" com várias dicas de integração e sinergia entre os designers e desenvolvedores.
Essa palestra foi a mesma que eu dei no 2º WPMeetupRJ no Espaço de Coworking BeesOffice em 2012, porém ganhou uma atualização de novas ideias com a experiência acumulada nesses últimos dois anos.
O objetivo dessa palestra era influenciar os designers a criarem peças amigáveis para os desenvolvedores em busca de agilidade no processo de implementação de layouts baseados em Photoshop.
Este documento fornece um resumo de um treinamento sobre CSS (Cascading Style Sheets). Ele discute conceitos como separação de responsabilidades entre HTML, CSS e JavaScript, tipos de seletores, unidades de medida e propriedades CSS. O documento também aborda tópicos como media queries, fontes personalizadas e compatibilidade entre navegadores.
O documento descreve como usar CSS (Cascading Style Sheets) para criar estilos para sites. CSS permite separar o conteúdo da formatação, tornando mais fácil manter e atualizar a aparência de um site. Exemplos de código CSS demonstram como definir estilos para elementos como fontes, cores, layouts e navegação.
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
O documento discute o uso de elementos <div> e <span> em HTML para agrupar conteúdo. Explica que <div> é um contêiner de bloco genérico e <span> é um contêiner em linha genérico que podem ser usados para agrupar seções quando não há uma tag semântica apropriada. Também fornece exemplos de como estruturar uma página web usando <div> para criar cabeçalhos, rodapés, menus e seções de conteúdo.
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
O documento fornece uma introdução sobre como criar sites HTML. Explica que HTML é a linguagem subjacente usada por navegadores e foi inventada por Tim Berners-Lee em 1990. Também discute alguns softwares e editores de texto que podem ser usados para criar páginas HTML e que não é necessário estar online para desenvolver sites.
1) O documento discute o CSS (Cascading Style Sheets), que é utilizado para estilizar páginas web. Foi desenvolvido para remover tags de estilização do HTML e permitir a criação de padrões de estilos.
2) São descritas três formas de aplicar estilos CSS a uma página: internamente, por meio de um arquivo externo ou diretamente em um elemento.
3) O modelo de caixa (box model) é explicado, constituído por conteúdo, preenchimento, borda e margem.
O documento descreve as etapas da conversão de um arquivo PSD para HTML, desde a organização dos assets e estruturação do código, passando pela separação de imagens e implementação de estilos com CSS, até dicas para acessibilidade, performance e responsividade do site.
O documento fornece instruções para construir layouts sem tabelas utilizando tags <div> e CSS. Explica os 6 passos para criar o layout: 1) escolher os blocos, 2) nomeá-los, 3) criar a marcação HTML, 4) posicionar os blocos com CSS, 5) adicionar conteúdo, 6) criar menu dropdown. Também discute como tornar o layout responsivo e acessível em diferentes dispositivos.
Desenvolvedores sempre buscaram escrever menos e fazer mais. Mas como aplicar a filosofia DRY com tecnologias que inicialmente não foram projetadas especificamente para desenvolver apps? Vamos aprender nessa talk quais são as boas práticas, metodologias e ferramentas para repetir menos e produzir mais!
A web é uma das principais plataformas de desenvolvimento de aplicações. Hoje (quase) tudo está conectado na internet. Apps cada vez mais dinâmicas aumentaram a complexidade do desenvolvimento de interfaces web. Em consequência desse crescimento, surgiram metodologias e ferramentas para repetir menos código, modularizar e criar componentes para a web. No passado trabalhamos com iframes e no futuro talvez teremos web components funcionando em todos os browsers. Mas e hoje, como podemos aplicar a filosofia DRY?
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Erick L. F.
Curso sobre HTML - Aula 12, nessa aula nós vamos nos aprofundar ainda mais nas CSS dentro da sua página html, para personalizar ainda mais seu site na web (website), primeiro nós vemos como colocar espaçamento entre linhas com o CSS, depois nós vemos como personalizar ainda mais as suas bordas colocando cores, espessura, estilo, depois nós vemos como colocar espaçamento em todos os lados da sua tag, aprendemos como colocar margem para distanciar um parágrafo do outro, como definir uma imagem de fundo para uma tag, e aprendemos as diferenças entre o identificador ID do identificador Class dentro do seu html.
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
O documento fornece 7 dicas para criação de layouts para sites em WordPress: 1) Considerar diferentes tamanhos de tela, 2) Criar layout para mobile, 3) Escolher fontes, 4) Manter padrões de consistência, 5) Seguir a estrutura padrão de blog, 6) Incluir um guia de estilo visual simples, 7) Validar o layout com o desenvolvedor.
13. DOCUMENTE O LAYOUT
Crie um manual para informar ao desenvolvedor os
padrões do layout, tipografias, corpo dos textos, cores,
links e seus estados...
14.
15. HTML, E AGORA?
Linguagem de marcação, usa-se tags para dar
significado ao conteúdo. ex: <p>conteúdo como
parágrafo</p>
18. WEB STANDARDS
Web Standards é um conjunto de normas, diretrizes,
recomendações, notas, artigos, tutoriais e afins de
caráter técnico, produzidos pela W3C.
É destinado a orientar fabricantes, desenvolvedores e
projetistas para o uso de práticas que possibilitem a
criação de uma Web acessível a todos.
19. DIVISÃO EM CAMADAS
● HTML - Conteúdo
● CSS - Formatação
● JAVASCRIPT - Comportamento