Nesta aula continuamos a examinar propriedades de CSS: em particular, aprendemos as diferenças entre os valores da propriedade “position”: static, relative, absolute e fixed. Exemplos comprovaram os assuntos. Parte da aula foi dedicada è tirar dúvidas de um aluno sobre utilizo de backgrounds e relativo posicionamento, assunto que precisou de um reforço. No final começamos um exercicio de criação de uma página a partir de um layout em imagem, para poder aplicar todos os conceitos aprendidos.
Category Archives: Curso de Html Joinville
Nesta aula examinamos mais propriedades CSS, além dos pseudo-elementos, mas o que mais deu foi exercícios para treinar tudo o que foi aprendido no curso.
Primeiro layout completo de site em 3 colunas hoje!
Utilizando os conceitos vistos na aulka precedente, conseguimos criá-lo rapidamente, com float, clear, width, margin e outras proprieades CSS.
Conceitos novos foram as pseudo-classes :hover, :active, :visited, :link etc, que representam o estato em que um elemento se encontra. Com isso conseguimos criar um menú principal em que cada link se ‘acendia’ (mudava de cor) quando o mouse passava em cima dele. A atividade proposta foi completar este layout: deixar ele mais bonito e criar uma página ‘produtos’ , com uma galeria de fotos e link que levasse á pagina de cada um.
Para começar, corrigimos o exercício começado na aula precendente.
Em seguida foram resumidas as propriedades CSS aplicáveis ao texto como font-size, font-family, color etc. Interessantes, mas ainda não desvendamos como se cria um layout completo com CSS. É aí que apresentei para a galera o nosso amigo, o DIV.
O DIV (abreviação de dividit, ou divisão) é, junto ao SPAN, uma tag que nã otem nenhum valor semantico, ou seja, não caracteriza algo que tem um significado a nível de conteúdo, como por exemplo um título, um parágrafo, uma tabela, etc. Eles só representam uma área física da página, com a diferença que o DIV delimita um bloco (ou seja, cria um quebra de linha) enquanto o SPAN continua na mesma linha de um paraágrafo, por exemplo. Por isso eles são chamados respectivamente elemento ‘block’ e elemento ‘inline’. O DIV é uma grande aliado para a criação de layouts, mas pode tornar-se um grande vilão se anusamos deles, então cuide-se, não exagere, ou vai ser uma vitima da DIV-MANIA!
Descobrimos como colocar borda, cor ou imagem de fundo, como gerenciar margem e padding (que ficam diferentes em diferentes navegadores) e, muito interessante, como criar layouts multi-coluna utilizando a propriedade ‘float’. Começamos a criar um layout em 3 colunas. Na próxima aula vamos terminar eles e aprender mais conceitos de CSS. Até lá.
Enfim, começou o capítulo CSS.
Porque este nome, Cascading Style Sheets? Vamos analisar duas partes separadamente, antes o ‘Sytle Sheet’ e depois o ‘Cascading’.
Style sheet quer dizer ‘folha de estilo’. Com estilo entendemos tudo que tem a ver com a apresentação visual da nossa página HTML. Com folha queremos dizer que temos um arquivo separado para guardar estas informações. Porém, o arquivo separado não é o único jeito – apesar de ser o melhor – de lidar com o CSS. Existem também – listando a partir do pior – o atributo ‘style’ inserido direto no nosso HTML ou a tag ‘style’ no cabeçalho da página. Separa num arquivo externo tem a grande vantagem do podera alterar o visual de infinitos números de páginas apenas mexendo num arquivo só.
A palavra ‘Cascading’ representa uma caracteristica muito importante do CSS, o Efeito Cascata, graça ao qual elementos filhos pode ‘herdar’ dos elementos pais algumas propriedades. o Efeito Cascata também gerencia qual folha de estilo tem a prioridade para ser renderizada. Pode encontrar melhores explicações aqui, aqui e aqui.
Cada declaração em CSS segue esta estrutura:
seletor { propriedade: valor; }
sendo que pode ter múltiplas duplas de propriedade – valor. Começamos a ver algumas propriedades básicas como escolha da fonte, cor da mesma, tamanhos etc. e também introduzimos margin e padding, e já deu para intuir que o Box Model pode gerar um pouco de confusão . Por isso aconselho a leitura deste artigo e deste também: teremos que lidar bastante com este assunto ao longo das próximas aulas, especialmente quando usaremos o CSS não só para estilizar textos mas sobretudo para criar layouts completos.
A aula terminou com o primeiro exercicio que consistia em reproduzir o HTML e o CSS a partir de um layout pronto. Devo dizer que a maioria se saiu bem por ser a primeira aula.
23 de julho
Aula n.6 – Curso de HTML, Javascript e CSS
Os antigos e quase inutilizados frames foram o primeiro conceito desta aula.
Precisava pelo menos saber o que eles são e como eles funcionam, pois é possível (mas não provável) que um dia vocês tinham que dar manutenção num site desenvolvido com eles.
Outro conceito foi o iFrame (inline Frame), que também não é um meu grande amígo, mas entre os dois é o mal menor. Ele permite carregar dentro dele uma página completa. ‘Antigamente’ isto era considerado ótimo, pois para visualizar uma página interna de um site não precisava atualizar tudo (menú, rodape, cabeçalhos) mas só o conteúdo de um iFrame principal; em tempo de conexão discada isso era ótimo.
Hoje em dia o iFrame não é mais uma recomendação, pois ele complica um pouco a acessibilidade e não permite criar link diretos para uma página interna do site, além do fato que as páginas internas carregadas em iFrame são indexadas pelo Google como páginas síngulas, sem cabeçalho, menú etc, então pode acontecer que o usuário acesse o site de forma incompleta.
Pelo mesmo motivo dos Frames, aprendemos a criar um layout através de iFrames e (ahi ahi) de tabelas, estruturando um pequeno site com 3/4 páginas. Aí entraram todos os outros elementos estudados nas outras aulas.
Faz tempo que não atualizo o blog. Isto porque, além de uma semana sem aulas, o curso teve várias faltas e entradas de alunos que me obrigaram a repetir e/ou reforçar alguns assuntos.
De qualquer forma, vou fazer o ponto da situação: chegamos a falar de utilizo de imagens, de tabelas e de formulários e fizemos alguns exercicios para aprender a utilizá-los de forma correta. Logo entraremos no parte de CSS, mas não pense que nunca mais veremos o HTML: muito pelo contrário. Será a horade testar nosso conhecimento dele e aplicar por cima dele uma camada de apresentação. Finalmente poderemos fazer um site “bonitinho”. Se você quiserm, podem começar a pensar em um projeto de site, já que logo faremos isto na sala.
8 de junho
Aula n.2 – Curso de Html, CSS e Javascript
Entrou um novo aluno, então fiz um breve resumo da primeira aula.
O assuntos novos foram links e ancoras (tag “a”), listas ordenadas e não ordenadas (tag “ol” e “ul”, com “li”) e listas de definições (tag “dl” com “dt” e “dd”).
Sobre a tag a, aprendemos sobre links, a estrutura deles, como abrir na mesma página o numa nova janela, como prepara-los para futuramente abri-los em frames ou iframes (não que isso seja tãaaao legal, mas é bom saber fazer….), ou como usar o “a” com âncora de texto paa ir num lugar diferente da mesma página.
Aprendemos a diferença entre listas ordenadas e não ordenadas, com criar sub listas, como mudar o símbolo ou a numeração e como “ul” e “li” são usados também para criar menus de navegação (que são listas de link, afinal).
Vimos também como usar as listas de definições, para criar por exemplo um mini-dicionário.
Não aprofundamos muito os atributos de estilização, pois a parte de layout será enfrentada mais na frente com o CSS.
No final passei um exercício: pedi que os alunos tentassem criar o html a partir de um texto, que visualmente tinha alguns link e listas de vário tipo. Deu um pouco de confusão, e era isso mesmo que queria ver. Assim semana que vem vamos corrigir isto e tentar de novo. Quero que aprendam muito bem a escolher as tags certas, isto vai ajudá-los muito, no futuro, para criar um bom código.
3 de junho
Aula n.1 – Curso de Html, CSS e Javascript
Como todo curso que se respeite, me apresentei e fiz os alunos se apresentar; em seguida, apresentei a “roadmap” das aulas.
Neste curso não aprenderemos a criar Layouts de site com editores WYSIWYG ( = What You See Is What You Get, ou seja O Que Você vê é o que você obtêm), mas sim a desenvolver HTML (e XHTML) conforme os Web Standards. Aprenderemos a criar um código bonito e semanticamente correto. O código que desenvolvemos não tem somente o simples objetivo de agradar o cliente (ou nós) porque é bonito. Nos temos algumas responsabilidades, entre elas a de deixar nosso site accessível, para pessoas com deficiências visuais (ou até outras). Este vídeo exemplifica muito bem o conceito, e é por isso que o mostrei:
Legal, não é? Deixa bem claro quanto nossa atenção a certos detalhes é importante.
Agora, vamos supor que a gente seja muuuuito ma. Que não se importe com as categorias citadas no vídeo, que pra nós só conta o dinheiro. Bem existe uma personagem muito importante no mundo da web, que pode nos permitir de ganhar muito, o de fazer o sucesso do nosso site. o detalhe que esta personagem é cega. Sabem que é? O robot do Google, ou seja aquele programa que vasculha todas as páginas da Web e que permite – ou não – que nosso site apareça nos resultados de busca. Então, o Google (ou o Yahoo, ou o Live Search, agora Bing) é cego. Não lê imagens, não gosta de código sujo, não gosta de muito Flash (= animações). Não é um caso que os serviços de SEO (Search Engine Optimization) são muito requisitados nestes últimos anos.
Enfim, o primeiro passo para um site bem feito é conhecer muito bem as tags html, não para o que mostram visualmente mas para o que elas querem dizer, para o significado semântico delas.
Por isso, na sala, fiz um pequeno experimento: peguei um site qualquer, e pedi para os alunos que identificassem estruturas básicas da página: títulos, cabeçalhos, rodapês, paragrafos, etc. Futuramente este exercicio evolverá em criar o próprio html das páginas respeitando a semântica.
Logo depois passei para os alunos as ferramentas do que falo neste artigo , e começei a introduzir o HTML, não sem antes ter explicado um pouco da arquitetura cliente – servidor. No final da aula, os alunos tiveram que reproduzir uma porção de teto deste mesmo blog, identificando parágrafos, títulos, e tentando uma formatação básica das fontes e das cores (tudo via atributos HTML, mas cientes que mais adiante este trabalho será feito pelo CSS).
Semana que vem, mais tags!
29 de maio
Ferramentas úteis para o Programador Web
Ao longo da minha experiência como programador, mutias vezes me surpreendi de como alguma tarefa pode ser feita de uma forma bem mais rápida, proveitosa e menos chata. Graça a amigos, colegas o au meu “fuçar”, descobri alguma ferramentas, que a maioria dos programadores web usam e que se tornam indispensáveis.
Em primeiro lugar, aquele programa onde a gente vê e avalia nossa criação: o Browser, o navegador. Nenhum é igual a outro, isso será repetido muitas vezes neste blog (especialmente quando o assunto é CSS!).
O 99% dos programadores eligiu o Firefox como o preferido. Porque? Bem, por vários motívos: primeiro, ele renderiza o código Html e o CSS de forma correta, como especificado pela W3C (falaremos muito a respeito destes caras!). Outros browser fazem isto também, mas não o Internet Explorer, que aprenderemos a odiar. Outra caracteristica de destaque do Firefox é o suporte a plugin e extensões: entre elas estão a maioria das ferramentas úteis para o Programador Web. Lá vem eles:
Uma ferramenta com um bocado de funções: visualização do código, dos arquivos anexos como css e javascript, realçe de estruturas html, redimensionamento da janela para testar diferentes resoluções, entre outros. confesso que atualmente não tenho ela instalada, mas recomendo.
A preferida de muitos e a mais conhecida: visualização e inspector do código, visualização do css, report de erros de javascript, monitoramento do trafego, e muitas outras. com certeza a mais prática.
ótima para quem não quer instalar um programa ftp e prefere fazer o upload dos arquivos direto do Firefox.
Permite vsualizar os cabeçalhos http e todas as informações que transitam de e para o servidor do site acessado.
Às vees, quando atualizamos um site, o navegador parece não mostrar as alterações. Isto porque todos os navegadores gravam os arquivos na chamada “cache”, para não ter que acessar e baixar toda vez, tornando a navegação mais rápida. É possível limpar a cache, indo em Ferramentas > Limpar Dados Pessoais, e selecionar Cache. Esta extensão facilita o trabalho, permitindo colocar um botãozinho na nossa interface para um acesso mais rápido à função
Permite visualizar os Cookies, arquivos que armazenam dados temporários localmente, no computador (por exemplo, nos logins automaticos, o nos carrinhos de compras). Poder visualizar direto no Firefox o conteúdo deles é melhor do que encontrar a pasta no nosso sistema operacional!
Existem muitas outras destas ferramentas, mas por enquanto vou parar por aqui. Vou encerrar citando uma ferramenta não diretamente ligada ao desenvolvimento, mas que me ajudou muito: o xMarks . Esta ferramenta permite, após a instalação e o cadastro no sistema deles (tudo via plugin e rapidamente), a sincronização automática dos favoritos entre vários computadores. Para quem como eu pesquisa em casa, depois pesquisa no trabalho, depois de novo em casa, esta é uma forma extremamente rápida de não perder nada.