Aula Teórica 2

CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 1 An á l i s e e De s en v o l v i m en t o d e Si st e m a s Fe r r am e n t as d e De se nvol vi m e nt o Web A u l a 2 Pr o f . Si l vi o Bo rt o l et t o CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 2 C ON V E R S A I N IC I A L Olá , caro aluno ! Preparado para nossa segunda au la? O Desenvo lvimento Web tem cresci do a cada dia m ais. Com o advento das n ovas tecno logias cad a ve z m ai s pessoas possuem a cesso à Internet , por m eio de vá rios dispositivos. Se, há algu m tempo, o dese nvolvim ento Web era consi derado a \u201cprofissão do futuro\u201d, hoje e m dia ele já é u ma reali dade em nossa socie dade. Criar W ebsites di nâmicos, responsivos e funciona i s se torna cad a vez m a is co mplexo, exigindo esforço e dedicação ! Bons estudos! C ON T E X TU A L I Z AN D O A rel evância de se estudar o d esenvolvimento Web se dá d evido à am pl i ação do acesso à Internet e sua ab rang ênci a no m undo atual . A ca da dia m ai s pessoas possuem acesso direto à rede, utilizando- se de um co mputador, tablet ou smartphone . A Inter net j á é uma realidade e estam os i nseridos nesse contexto, pois, à m edi da que mais pessoas possuem ace sso, pre c isa m os e star sempre atentos às no vidades e te ndê ncias do mundo da tecnol ogia, par a q ue possam os com pr eender de que m an eir a essas tendênc ias i nfluenc ia m no sso cotidiano. Para cria rm o s um a pá gina W eb , preci sam os conhecer a linguagem de m ar cação HTML \u2013 é por meio dela que todas as pág ina s W eb são construídas. Através do HTML po dem o s cr ia r títulos ( , ...), parágr afos de texto ( ), links para outras pá ginas ( ), listas ( , ), e organi zar a página de acord o com o desi gn proposto. Através da li nguagem de for m ata ção CSS podemos melhora r a i nterface das páginas Web , aplicando form ata ções, a nim açõe s e in teraçõ es com o CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 3 usuário. É tam b é m a tr avés da i dentidade v isu al que sua página poderá se destacar. P E S QU I S E S el e tor e s Bem, como o assunto desta a ula é o CSS , vam os iniciar com uma pergun ta bem gera l: Você sabe exatamente o que é o CSS? Que tal pesquisar o significado dessa sigla e o que ela representa? http://www .te c m un do.co m.br/programacao/2705 -o- que-e-css-.htm Toda vez que u sam os o CSS, nós usa m os os sele tores . Isso porque a s form atações CSS serão d efinidas pe lo s seletores, que poderão ser de 3 t i pos: \uf0b7 Seletores de elemento s É um co m ando u sado para espec i ficar um esti l o para dete rm i nad o ele m ento s (ou pseudo-e le m ento s) presentes no docum ento HTML. \uf0b7 Seletores de classe Seleciona elem entos co m uma classe específica aplicada . Ex e mplo: .des taque seleci ona todos os elem entos com a cl asse "destaque". \uf0b7 Seletores de id Seleciona o elem e nto com a id espec ificad a. Exem pl o: #c abecalho i rá sele cionar o ele m ento co m o i d "cabecal ho". Cada id é úni c o e não p ode ser repetido no m es m o d ocu m en to. Para todos os seletores, existem re gras de utili zação e her ança. A concatenação, como é cham a da, pode rá com bi nar formatações, deixando sua página única! CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 4 Vamos, agora, conhecer um exemplo de funcionam ento dos diferentes sele tores? http://www . w3school s.com/cssref/trysel.asp E agora, acesse o vídeo intr odutório disponível no m aterial on -line para ver o q ue o p rofessor Sílvio tem a acrescenta r ao nosso estudo dos se le tores ! Or d e m d e a p li ca çã o As form a tações defi nidas pelo CSS seguem um a orde m de apli cação, de acordo com a importância atribuída. As regras podem se sob repor, dependendo do t ipo de concatenação que é feita. E stabel ecer um a ordem é im portan te sobretudo quando o trabalho é desenvo lvido por m ai s de um designer ou program ador. Algumas estratégias sim pl es podem ser u til izadas para deixar o seu CSS m ai s or ganizado, consistente e de fácil manutenção. Vam o s conferir que estratégia s são essas ? http://tableless.com .br/6 - estrategias-para-m el horar- a-organizacao- do - seu-css- 2/ O arquivo HTML inte rpreta as form atações CSS de acordo com priorida des: \u2022 Utili zação de !importan t \u2022 Form atação Inline \u2022 Form atação Head \u2022 Folha de estilos A prior id ade tam b é m depende da posição da form atação no documento, tanto na s tags HTML quanto no ar quivo CSS. CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 5 Pode oco rrer d e o ar quivo ser m u ito com ple x o e as regras acabarem se sobrepondo. Mas você sabia que há estratégias para que você possa apontar que regra vale para cada situ ação? Há, inclusive, um cál culo par a i sso, c omo você pode perceber com a leitura da m atér ia a seguir! http://www .r i chard barros.com .br/bl o g/css/como- saber-qu al-regra-css- tem - pri o ridade Agora, reto m e m os o co nteúdo deste tem a co m a fal a do profe ss or Síl v io sobre o assunto. Acesse o m ater ial on -line ! B ox M o de l Na verdade, todos os e le m ento s do HTML p odem ser considerados boxes. No CSS, o Box Mod el di z respeito a o design e l eiaute. Foi criado para observação dos atr i butos ligados a os elem e nto s. Box Model é um di agram a imaginário em CS S, cri ado para contextua li zar cada elemento dentro do DOM. DOM? M as o que é DOM? http://tableless.com .br/ten ha -o-dom / A im age m a segui r representa um Bo x Model . Vejam o s: \uf0a2 Content \u2013 É onde o conteúdo do box apare c e , com textos e imagens. CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 6 \uf0a2 Padding \u2013 É a área transparente ao lado do conteúdo que o separa do resto. \uf0a2 Border \u2013 É a borda que envolve o preench imento e o conte údo. \uf0a2 Margin \u2013 Lim p a u m a á rea for a da borda . A margem é transparente. O Box M odel nos permite ad i ciona r um a bo rda em torno d e elem entos e, tam b é m , d efin ir o espaço entre os elem entos. div { width: 300px; padding: 25px; border: 25px solid navy; margin: 25px; } L a rg u ra e a l t ur a d e um e l e me n t o Para definir corretam en te a l argura e altur a de um el em en to em tod os os navegadores, você precisa saber com o o model o de caixa func i ona. Quando você define a s propriedades largura e altura de um el eme nto com CSS, você apenas defin e a l argura e altura d a área de conteúdo . Para calcul ar o tam anho tota l de um elemento, você também deve a dic io nar espaçam entos, bo rdas e m ar gens. Suponha qu e você desej e que um el em ento v> te nha um a l argura to tal de 350px: CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 7 div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } Confira como é feito e sse cálculo: 320px (l argura) + 20px padding (esquerda + direita ) + 10px border (esquer da + direita ) + 0px margi n (esquerd a + direita) = 350px A largura total de um el emento deve ser calcula da da se guinte form a: elem ent wid th total = width + l eft padding + right padding + left bord er + right border + l eft margin + right margin A altura total de um e le m ento deve ser c al c ulada da seguinte form a: elem ent width total = hei ght + top p adding + bottom padding + top bord er + bottom border + top margin + bottom margin Interne t Explorer 8 e versões anteriores i ncluem preen chimento e borda na propriedade de largura. Para co rrigir esse pr oblem a, adicione um DOCTYPE html > para a p ágina HTML. CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 8 P r op r i e d a d e s e a t a l ho s Por m e io das propriedades def inid as é que as regras de f orm atação CSS são apli c adas dentro da página HTML. A comb ina ção dessas propriedades fa z com q ue cada el emento sej a úni co dentro d o seu docum en to! Confira, na v ideo aula disp onível no m aterial onli n e , quais s ão essas propriedades . Vamos recapi tu l ar quais são as principais propriedades do CSS? \u2022 Floa t A proprie dade Float define onde o elem ento HTML será posi cionado, m ove ndo -o para um ponto esp ecífi co. Os elem en tos com Float se al i nham co m o po nto do el emento par ent , e entã o se m o ve m par a o pon to disponível m ai s pr óxim o . \u2022 Clea r A pr opriedade Clear se apli ca par a \u201climpar\u201d os elementos ab aix o dos elementos co m Float . Utili za- se Cl ear quando todos os ele m ento s filhos e stão com F loat . \u2022 Posi tion A prop riedade Pos ition defi ne a posição dos elem ento s qu e possuem u m va lor estático. \u2022 Z-In dex A pr opriedade Z- Index de fine o po sic ion amento do elemento em relação ao fundo da pág ina e aos e le m ento s que o sobrepõem . \u2022 Disp lay A propriedade Display define de qua l maneira o e lemento estará disp osto na tela: \uf0a7 None : o elemento não ap arecerá na t ela. \uf0a7 Bloc k : o el em en to estar á disp osto em bl oco. \uf0a7 Inli ne : o el emento estará disposto em li nha . CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 9 \uf0a7 Inli ne-Block : o elemento estará di spost o em blo cos alin hados em li nha . \u2022 Over flow A propri edade Overflow defi ne o tr atam e nto da sobra do ele m ento : \uf0a7 Visi ble : val or padrão; m a ntém a so bra do el em ento visíve l . \uf0a7 Auto : adi ci ona uma barr a de ro lagem quando o elemento filho sobra. \uf0a7 Hidd en : escond e a sob ra do elem e nto. \uf0a7 Scro ll : se m pr e adicion a um a bar ra de rola ge m , mesmo quando não for necessário. Esses a talhos e muitos ou tros com a re spectiva descri ção você poderá conhecer com o material a segu i r: http://araguaina.ifto.edu.br/cham i l o/courses/ENS INOMEDIOAPLICATI VOS W EBE W EBDESI/docum ent/ 3 o_Bi m e stre/p ropriedadescss.pdf C S S e H T M L Quando um nave gador lê um a inform ação do CSS, el e irá decodificar essa inform ação e form atar o docum ento HTML de acordo com as informações constantes no CSS. Há três m an eir as de o i nserir r egr as de form atação em um arqui vo H T ML. São el as: \u2022 Formatação Inline \u2022 Formatação na tag Head \u2022 Folha de Estilos ligada ao HTML CCDD \u2013 Centro de Cr iaçã o e Desenvolv imento Dialógico 10 F o rm a t a ç ã o In l i n e A for m a tação Inline é a for m ata ção dentro d a s tags HTML, co m o atri buto. O CSS i nline é pouco utilizado em websites por deixar o códig o \u201c poluído \u201d com m ui ta inform ação, m as é muito utilizado na criação de mai l ings e E-mail marketing . Sua utili zação é bem si m ple s, para usá-lo, ba sta i nserir o st yle dentro da própria tag htm l que e le r eceberá o efeito. Co m o ele é aplicado diretam ente naquela tag esp ecífica, é impossível reutilizá- lo em outra tag , t e ndo que sem pre copi ar e colar o u cr iar um novo para cada tag que você queira est ilizar . F o rm a t a ç ã o na t ag H e a d A formatação Head é a for m ata ção de ntro da t ag Head , co m o u m conteú do não -visível ao usuário. T am bé m conheci da com o folha de estilo interna , essa regra de fo r m ata ção pode se r usada se um a úni ca página tem u m esti lo ún i co . body { background-color: linen; } h1 { color: maroon; margin-left: 40px; }

Aula Teórica 2

UNINTER

Desenvolvimento Web

Continue navegando

Materiais relacionados

Perguntas relacionadas

O que é um material didático? 1. Uma apostila que deve promover a aprendizagem. 2. Uma forma de livro. 3. Nenhuma das alternativas. 4. É um instr...

O que é um material didático? 1. Uma forma de livro. 2. Uma apostila que deve promover a aprendizagem. 3. É um instrumento e um produto pedagógic...

Assista à Aula teórica 2 - Políticas públicas acessadas com o CAF, que apresenta as diferentes políticas e programas destinados à agricultura famil...

Outros materiais