Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas
|
|
- Olívia Pinto Minho
- 8 Há anos
- Visualizações:
Transcrição
1 Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas
2 Buenas?!
3 Jean Carlo Emer artesão da internet github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer
4
5
6 Atenção! O importante é que seu produto funcione e seja fácil de manter
7 Mas... Se você acha que pode ir além no seu fluxo de desenvolvimento, esta palestra é para você!
8 Conte-me mais! Quero saber como começo meu projeto!
9 Boilerplates
10 Base sólida e reusável para seu projeto entalhada com boas práticas
11 Boa organização de arquivos Estrutura inicial de HTML, CSS e JS Robots.txt e humans.txt Favicon e apple icons HTML5 Boilerplate
12 Define viewport para projetos responsivos HTML
13 HTML <head> <meta name="viewport" content="width=1024"> Viewport para site não responsivo
14 HTML Inclui Modernizr com todas as detecções <script src="html5shiv.min.js"> </script> </head> apenas html5shiv (IE8,7) ou o Modernizr customizado incluíndo html5shiv
15 Apache Página de erro 404 UTF-8 para CSS e JS Entrega de arquivos compactados Define expiração dos arquivos
16 Na versão mudou de Reset.css para Normalize.css CSS
17 /*! normalize.css v2.1.2 MIT License git.io Normalize Institui uma aparência padrão para cada elemento Corrige alguns bugs comuns /** * Correct `block` display not defined in IE 8/ */ article, aside, details, figcaption, figure, fo header, hgroup, main, nav, section, summary { display: block; /** * Correct `inline-block` display not defined i */ audio, canvas, video { display: inline-block; /** * Prevent modern browsers from displaying `aud * Remove excess height in ios 5 devices. */ normalize.css audio:not([controls]) { display: none; height: 0; /** * Address styling not present in IE 8/9. */
18 Reset Remove toda a aparência Elementos de título, parágrafo e lista com mesma aparência CSS Tools: Reset CSS css/reset /** * Eric Meyer's Reset CSS v2.0 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; /* HTML5 display-role reset for older browsers article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; body { line-height: 1; ol, ul { list-style: none;
19 reset X normalize
20 Sophisto Boilerplate Browsers modernos (IE9+) Stylus: pré processador de CSS Rye.js: biblioteca JS leve substituta da jquery Build tool e script de deploy Sophisto Boilerplate
21
22 Firefox OS Boilerplate App Aparência inicial Diversas APIs Suporte offline Firefox OS Boilerplate App
23 Hmmm... Mas ainda não abordamos aparência e como construir componentes!
24 Frameworks de CSS
25 Guia de estilo com componentes reusáveis e configuráveis para seu projeto
26 Cuidado! Não existe uma maneira de testar folhas de estilo
27 Foundation 3.0 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; direction: ltr; Divs ou tds não herdam o tamanho da fonte de seus elementos pais
28 Pure CSS Seu formulário deve sempre terminar com um radio
29 Cuidado! Usar frameworks engessa a marcação a sua maneira
30 <div class="border4px m10 clearfix"> <p> <i class="red">este é um exemplo</span> <span class="left">bem interessante</span> <span class="green">daquilo que não devemos fazer.</span> </p> <p class="right darktext">isto é consenso?</p> </div>
31 Twitter Bootstrap 2.3 <div class="row"> <div class="span9"> Ótimo, muito bom! <div class="row"> <div class="span6">e o quanto isto é diferente</div> <div class="span3 text-left">daquilo?</div> </div> </div> </div> Marcação usando classes nomeadas pelo framework
32 CSS to the heaven Tags e classes devem se referir ao seu conteúdo e não a sua aparência Seletores devem ser o mais globais possíveis ou função, caso esteja projetando componentes
33 Legal E agora como eu reuso e organizo meu código CSS?
34 CSS on Steroids
35 Pré-processadores // Variables $site-width: 960px; $color-primary: red; $color-secondary: #EEE; // border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; // Code.container { background: lighten($color-secondary, 10); max-width: $site-width; margin: 0 border-radius(5px);.box { p { margin-bottom: 1em; a { font-weight: bold; &:hover { background: $color-secondary;
36 Pré-processadores // Code.container { background: lighten($color-secondary, 10); max-width: $site-width; margin: 0 border-radius(5px);.box { p { margin-bottom: 1em; a { font-weight: bold; &:hover { background: $color-secondary; // CSS Code.container { background: white; max-width: 960px; margin: 0 auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;.box p { margin-bottom: 1em;.box a { font-weight: bold;.box a:hover { background: #eeeeee;
37 Pré-processadores Linguagem para adicionar açucar sintático não nativos ao CSS Resultam em CSS nos padrões das especificações Nova camada que precisa ser transcompilada
38 @base: #f938ab; Padrão do Twitter Bootstrap Repetições bastante estranhas e engessadas Mantido por desenvolvedores when (iscolor(@c)) @alpha: 50%) when (isnumbe.box-shadow(@style, rgba(0, 0, { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div {.box-shadow(0 0 5px, #842210; #header { color: (@base-color * 3); border-right: (@the-border * 2); #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%);
39 border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments Mixins transparentes Mixins e componentes com Nib Sintaxe bastante livre Muita liberdade causa confusão body font: 12px Helvetica, Arial, sans-serif background: linear-gradient(top, white, blac a.button border-radius: foo { from { color: black to { color: white button { color: rgba(red,.5) border-radius: bottom 10px;.nav { fixed: bottom 10px right 5px;
40 Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar $blue: #3bbfce $margin: 16px.content-navigation border-color: $blue color: darken($blue, 9%).border padding: $margin / 2 margin: $margin / 2 border-color: table-base th text-align: center font-weight: bold td, th padding: left($dist) float: left margin-left: $dist table-base Sintaxe SASS
41 Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar $blue: #3bbfce; $margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);.border { padding: $margin / 2; margin: $margin / 2; border-color: table-base() { th { text-align: center; font-weight: bold; td, th { padding: left($dist) { float: left; margin-left: $dist; #data table-base; Sintaxe SCSS
42 <3 <3 <3
43 Atenção! Não reescreva a árvore de elementos do HTML no CSS
44 html { body { background: black; section { padding: 20px; p { margin-bottom: 10px; a { color: blue; &:hover { text-decoration: none; html body section p a:hover CSS Explain
45 Organizando o CSS // "helper" // "core/structure" // "shared/footer" // "modules/map" // "pages/about"
46
47 Grid semântico Mixins e helpers são muito úteis para definir grids
48 Grid semântico <article class="tool"> <h1 class="tool-title"> Bourbon Neat </h1> <div class="tool-content"> <p> Neat é um framework de grid semântico. </p> <p> Sass e Bourbon são seus requisitos. </p> </div> </article>.tool outer-container;.tool-title span-columns(3);.tool-content span-columns(9);
49 Grid semântico.header outer-container;.brand span-columns(3);.menu span-columns(9);.tool outer-container;.tool-title span-columns(3);.tool-content span-columns(9);
50 Grid semântico.header outer-container;.brand span-columns(3);.menu span-columns(9);.tool outer-container;.tool-title span-columns(3);.tool-content span-columns(9);.brand { display: block; float: left; margin-right: %; width: %;.brand:last-child { margin-right: 0;.tool-title { display: block; float: left; margin-right: %; width: %;.tool-title:last-child { margin-right: 0;
51 Ops?! Agora temos muitas regras de CSS repetidas
52 CSSO body { padding: 0; color: red; body,.element{padding:0;color:red input,button{border:none.container{ color:red.element { color: blue; color: red;.element { padding: 0; input { border: none; button { border: none;.container,.container { color: red; CSSO
53 CSSO body { padding: 0; color: red;.element { color: blue; color: red;.element { padding: 0; body,.element { padding:0; color:red input, button { border:none.container { color:red input { border: none; button { border: none;.container,.container { color: red; CSSO
54 Frameworks de CSS conclusão Use apenas os mixins e funções para pré-processadores de CSS Aproveite a vontade código JavaScript não atrelado a classes HTML <article class="tool"> <h1 class="tool-title">[...]</h1> <div class="tool-content">[...]</div> </article> // Mixins em LESS do Twitter Bootstrap.tool {.makerow();.tool-title {.makecolumn(3);.tool-content {.makecolumn(9);
55 CSS on steroids conclusão Deixe de bobagem e turbine seu workflow Prefira o pré-processador que sua equipe se sente mais a vontade Não custa muito ativar o CSSO, mas teste bem antes de levar para produção
56 Entendi... E o que faço com a disposição dos elementos do meu layout?
57 CSS Layout
58 Box model Define tamanhos, margens, paddings... Posiciona elementos em relação a outros ou fixa eles na viewport
59 Box model Ordena os elementos em direção vertical (block) ou horizontal (inline)
60 Box model Ordena os elementos em direção vertical (block) ou horizontal (inline)
61 Box model Ordena os elementos em direção vertical (block) ou horizontal (inline)
62 Flexbox model Não usa floats Agnóstico de direção Meios de alinhar facilmente elementos
63 Flexbox: flex grown e shrink grown
64 Flexbox: flex grown e shrink grown
65 Flexbox: flex grown e shrink grown shrink
66 Flexbox: flex grown e shrink grown shrink
67 Flexbox: align itens flex-start flex-end center stretch
68 Flexbox: justify content flex-start flex-end center space-between
69 Flexbox: flow e order Holy Grail Layout example Flexible_boxes
70 Flexbox: flow e order Holy Grail Layout example Flexible_boxes
71 Flexbox Flexbox é ideal para componentes W3C Candidate Recommendation Compatível com Chrome 29+ e IE 11 A Complete Guide to Flexbox flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val;.wrapper flexbox();.item flex(1 order(2);
72 Grid Ideal para layouts completos Promissor para definir disposição dos componentes Especificação da Microsoft compatível apenas com IE 10+
73 CSS Layout conclusão Box model ainda é o caminho, aprenda ao máximo! Use flexbox e grid em ambientes controlados, ainda tem baixa compatibidade e especificação não estável Learn CSS Layout
74 Legal! E as media queries, podemos falar um pouco disto?
75 Media Queries
76 História Primeira especificação é de 2002 iphone foi lançado em 2007 W3C recommended standard em 2012
77 Layout responsivos Termo usado por Ethan Marcotte em artigo Responsive Web Design em A List Apart
78 Acessibilidade Media queries também ajudam na acessibilidade
79 Modularização A buzzword da vez no universo front-end é modularização Media queries são globais, com base na viewport
80 Cuidado! Vamos falar do universo dos sonhos desde aqui para frente
81
82
83 Módulos Meu produto
84 Layout responsivo Meu produto
85 Layout responsivo Meu produto
86 Layout responsivo Meu produto
87
88 Make it so, internetz Element level media queries Acelerar a implementação de flexbox e grid Imagens responsivas pra ontem! Pensar em soluções, testar e prototipar
89
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores
Leia maisUNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas
Leia maisMaurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20
Leia mais#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
Leia maisPré-requisito Treinamento de Lógica de Programação, ou conhecimento equivalente.
1 HTML5 e 3 Descrição Aprenda no curso de HTML os conceitos essenciais para a criação de páginas web, junto com os novos recursos e possibilidades que o HTML5 e 3 oferecem para a criação de sites com códigos
Leia maisProf. Erwin Alexander Uhlmann 1/7/2010
HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5
Leia maisNão seja lesado, use LESS
Não seja lesado, use LESS Parque Tecnológico Itaipu (PTI) Missão ITAIPU: Gerar energia elétrica de qualidade, com responsabilidade social e ambiental, impulsionando o desenvolvimento econômico, turístico
Leia maisResponsive Web Design
Professor: http://jemaf.github.com DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos
Leia maisTABLELESS E PROJETO ESTRUTURAL
Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se
Leia maisHTML. Conceitos básicos de formatação de páginas WEB
HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto
Leia maisCSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata
CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,
Leia maisFACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE
FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE Juazeiro do Norte CE 2012 Jonas Pinto Esteves CRIANDO APLICAÇÕES
Leia maisAula 7 LISTAS E TABELAS. Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme
Aula 7 LISTAS E TABELAS Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Listas Prover mecanismos para listar informações Devem conter um ou mais itens Elementos
Leia maisIntrodução às Folhas de Estilo
Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de
Leia maisConstruindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec
Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este
Leia maisIntrodução à Cascading Style Sheets
Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas
Leia maisCompêndio códigos. {css}
Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado
Leia maisIntrodução a Web Standards. Reinaldo Ferraz e Clécio Bachini
Introdução a Web Standards Reinaldo Ferraz e Clécio Bachini Document Object Model (DOM) Modelo de Documentos em Objetos Objetos em um Documento Markup Linguagem de Marcação Semântica Objetos com Sentido
Leia maisAula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
Leia maisDESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza
DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO Profº Ritielle Souza Web design responsivo Mas, o que é Web Design Responsivo? O Wiki diz o seguinte (tradução livre): Web Design Responsivo (RWD), essencialmente
Leia maisObservações importantes:
Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:
Leia maisEfeitos 101: Trabalhando com animações e transições
Capítulo 8 Efeitos 101: Trabalhando com animações e transições UmadasminhaspartesfavoritasdoCSS3sãoaquantidadedeefeitosqueconseguimos criar apenas com CSS nas nossas páginas combinando algumas propriedades
Leia maisWEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou
Leia maisDefinindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,
Leia maisMudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata
Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.
Leia maisPosicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
Leia maisCSS Cascading Style Sheets Folhas de Estilo em Cascata
CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1
Leia maisLista e Tabelas. Fundamentos da Linguagem Web
Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização
Leia maisMAKE IT RESPONSIVE! The Responsive approach on Mobile, Tablet and Desktop Web Development.
MAKE IT RESPONSIVE! The Responsive approach on Mobile, Tablet and Desktop Web Development. Carlos Martins Junho, 27 2012 Quem sou eu? AGENDA The WWW Web World War III O que é o RWD? Mãos ao trabalho Principais
Leia maisRegras básicas que definem onde o elemento pode ou não estar. Existem dois tipos de elementos: De linha: marcam, na maioria das vezes, textos,
Regras básicas que definem onde o elemento pode ou não estar. Existem dois tipos de elementos: De linha: marcam, na maioria das vezes, textos, elementos de formulários, imagens. De blocos: são como caixas,
Leia mais1) Criar o código HTML para construir a página representada pela imagem abaixo.
1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,
Leia maisAula 5 Cabeçalhos, Imagens e Links
Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos
Leia maisBURIPACK - DESIGN E INTERFACES WEB
1 de 5 BURIPACK - DESIGN E INTERFACES WEB BC 41 LÓGICA DE PROGRAMAÇÃO COM JAVASCRIPT E HTML (32h) Ajudar aos alunos no desenvolvimento do raciocínio lógico, a partir da prática em lógica de programação,
Leia maiscss Cascading Style Sheets CSS CASCADING STYLE SHEETS
css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação
Leia maisCSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13
CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender
Leia maisQUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Leia maisAPOSTILA DE PROGRAMAÇÃO WEB
Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido
Leia maisTecnologias para Web Design
Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente
Leia maisneste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?
neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente
Leia maisWeb Design Aula 15: Conhecendo CSS
Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando
Leia maisCSS (Style Sheets - Folhas de Estilo)
Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses
Leia maisWeb Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
Leia mais7. Cascading Style Sheets (CSS)
7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma
Leia mais#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver
Leia maisJosé Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas
José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript EmpregoWeb-Registo de pessoas Elabore um sítio Web de nome EmpregoWeb, recorrendo à linguagem HTML utilizando folhas de estilos (CCS) que registe
Leia maisEle vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.
Então gente, há alguns dias, disponibilizei meu theme antigo, o primeiro feito por mim, e eu não coloquei appearance nele, e quem não tem conhecimento de html fica meio tenso de editar. Então, ao invés
Leia maisO W3C Futuro da Web HTML5. Março/2011 Web Expo Fórum
O W3C Futuro da Web HTML5 Março/2011 Web Expo Fórum Web e W3C Tim Berners-Lee criou / propôs 2 a Web em 1989 (há 21 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP + HTML) Web e W3C 3 Tim
Leia maisTécnicas e processos de produção. Profº Ritielle Souza
Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo
Leia maisInternet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,
Leia maisEXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina
Leia maisProgramação para Internet I 9. HTML5. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt
Programação para Internet I 9. HTML5 Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Resumidamente, é o novo standard para estruturar conteúdo de páginas web. A última versão de HTML surgiu em 1999,
Leia maisDesenvolvendo com Bootstrap 3: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap 3: um framework front-end que vale a pena! É engraçado como temos receio do novo. Me acostumei a desenvolver sites do zero, desde a primeira linha de código. Achava estranho
Leia maisAprenda a construir com menos tempo e esforco layouts para web
Aprenda a construir com menos tempo e esforco layouts para web Sumário Apresentação 10 Capítulo #1 - Ferramentas necessárias para o desenvolvimento 22 Capítulo #2 - Afinal, o que é HTML? 26 A evolução
Leia maisWeb Design: Responsivo e Adaptativo. Lara Popov Zambiasi Bazzi Oberderfer
Web Design: Responsivo e Adaptativo Lara Popov Zambiasi Bazzi Oberderfer 1 # Construindo Layouts Tableless Layouts tableless são layouts ou páginas web construídas e estruturadas sem o uso das antigas
Leia maisWebdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Leia maisDesenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de
Leia maisCSS -Cascading Style Sheets - Introdução
CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução
Leia maisWebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
Leia maisWeb Design Aula 13: Introdução a CSS
Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas
Leia maisAlgoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15
APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos
Leia maisDiazo. Módulo 7 Tema Diazo
Diazo Módulo 7 Tema Diazo Diazo >> O que é? É uma ferramenta para criação de temas. Permite que o designer construa um tema puramente HTML, sem se preocupar com as particularidades do Plone. Funciona através
Leia maisCSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br
Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades
Leia maisSumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1
Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem
Leia maisWeb design & HTML. avançado
Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra
Leia maisTags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html
Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento
Leia maisFerramentas básicas de desenvolvimento
capítulo 1 Ferramentas básicas de desenvolvimento Este capítulo destina-se aos iniciantes. Nele apresentaremos as ferramentas mínimas necessárias ao desenvolvimento de sites, comentando e mostrando os
Leia maisSamus - Desenvolvimento Web - 14/11/2009 WebStandards Padrões de desenvolvimento Web
Samus - Desenvolvimento Web - 14/11/2009 WebStandards Padrões de desenvolvimento Web A proposta do Mini-Curso à apresentar de forma rã pida e objetiva as principais prã ticas e definiã ões sobre o desenvolvimento
Leia maisPosicionamento, dimensões e outros elementos de HTML5 e CSS3
R o q u e F e r n a n d o G l a u c i o D a n i e l Te c h n o E d i t i o n E d i t o r a L t d a Posicionamento, dimensões e outros elementos de HTML5 e CSS3 Posicionamento, dimensões e outros elementos
Leia maisMANUAL DE BOAS PRÁTICAS
MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML
Leia maisObservações importantes:
Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB Gabarito AD1 2 semestre de 2014. Observações importantes:
Leia maisPLANNER CONSULTORIA E SISTEMAS
Índice Adicionando a tag HTML em seu site Pág. 1 Customização da aparência da tag HTML Pág. 2 Passando valores para os campos do formulário do cliente no P-Atendimento Pág. 2 Passando valores dinâmicos
Leia maisPROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS
VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...
Leia maisTECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD
TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das
Leia maisRoteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
Leia maisHTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)
HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização
Leia mais#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br
#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br #O que é Web Standards? São padrões de desenvolvimento web recomendados pela W3C que visam a implementação de
Leia maisDesign responsivo para WEB com Bootstrap. Fernando Freitas Costa dovernando@gmail.com Especialista em Gestão e Docência Universitária/UNIFIMES
Design responsivo para WEB com Bootstrap Fernando Freitas Costa dovernando@gmail.com Especialista em Gestão e Docência Universitária/UNIFIMES Assunto de hoje... Um pouco de História... Por que me preocupar
Leia maisProgramação para Internet I
Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:
Leia maisO Futuro do Desenvolvimento Web
O Futuro do Desenvolvimento Web HTML 5, CSS 3 e como eles podem facilitar sua vida (ou não) Tiago Madeira madeira@ime.usp.br Academia Mozilla Brasil Congresso Internacional do Software Livre Museu da Imagem
Leia maisCSS Luciano Otávio de Assis CSS
CSS O HTML tem suas limitações quando se tratar de se construir layout. É certo, você tem seis diferentes tipos s títulos e de 6 diferentes tamanhos de fontes. Quando você trabalha com tabelas, você tem
Leia maisAula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe
Leia maisCada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS
Leia maisLayouts de páginas com HTML e CSS
Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.
Leia maisRoteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
Leia maisHTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto
HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML
Leia maisColégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa
Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato
Leia maisHTML. Para estruturar informação
HTML Para estruturar informação Não é case sensitive A saber Começar com editores de texto básicos, como notepad Comentários Elemento = {opening tag, [closing tag]} A closing tag não
Leia maisIntrodução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Leia maisO W3C Futuro da Web HTML5 Web Semântica. Março/2011 SENAC Ribeirão Preto Road Show TI 2011
O W3C HTML5 Web Semântica Março/2011 SENAC Ribeirão Preto Road Show TI 2011 Web e W3C Tim Berners-Lee criou / propôs a Web em 1989 (há 21 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP
Leia maisMANUAL DE BOAS PRÁTICAS
MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML
Leia maisPROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU - 2012 - Prof. Daniela Pires
PROF. DANIELA PIRES Aplicações para Web 1 *Oficialmente: *Uma biblioteca escrita em Javascript *Uma definição melhor: *jquery é uma Biblioteca JavaScript que simplifica a manipulação de um documento HTML
Leia maisCompêndio códigos. <html>
Compêndio códigos ADVERTÊNCIA: A que se segue é apenas uma lista com as tags de HTML e os seus possíveis atributos, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba
Leia maisS E O PA R A I N I C I A N T E S
SEO PARA INICIANTES QUEM SOU EU? WEB DESIGNER COM FOCO NO SEO DE QUALIDADE IDEALIZADOR DO COMSEO CEO DA MOSKO WEB DESIGNER O QUE É SEO? É O CONJUNTO DE ESTRATÉGIAS COM O OBJETIVO DE POTENCIALIZAR E MELHORAR
Leia maisModelo de formateo visual em CSS
Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar Recordando Atributos das caixas largura borde margen fundo altura recheio Resumo Tipos de posicionamento. Visualização
Leia maisEtec Prof. Armando José Farinazzo 138
ETEC Profº Armando José Farinazzo Fernandópolis CONCURSO PÚBLICO DE PROFESSOR DE ENSINO MÉDIO E TÉCNICO - EDITAL Nº 138/04/2016 - PROCESSO Nº 6703/2016 CADERNO DE QUESTÕES PROVA ESCRITA Nome do(a) candidato(a):
Leia maisCSS#:#Cascading#Style#Sheets#
CSS#:#Cascading#Style#Sheets# Composição#Web# # Engenharia#Informá=ca#/#Informá=ca#Web#2014/15# Artur%M.%Arsénio% Style#Sheets# #Folhas#de#Es=los# CSS#(Cascading#Style%Sheet% %ou%folhas%de%es6los% encadeados)%é#um#conjunto#de#regras#de#formatação#que#
Leia maisLINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON
COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual
Leia maisCurso PHP Básico. Jairo Charnoski do Nascimento
Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores
Leia mais