O blog possui atualmente os seguintes conteúdos:
Webdesign
• Começando em Webdesign
Photoshop
• Efeito Abstrato de Água
• Estudando o 'Stroke Path with Brush'
domingo, 1 de fevereiro de 2009
Começando em Webdesign
Boa tarde!
Vamos começar nossos estudos sobre Webdesign???
Não deixem passar nenhuma dúvida! Do modo como eu preparei as lições, cada conhecimento vai ser necessário mais tarde, então antes de tudo, vamos ver alguns conceitos básicos. Pode parecer desnecessário ler esta parte, mas para garantirmos uma boa prática depois, precisaremos ser pacientes!
Vamos lá:
SERVIDORES
Todas as páginas e sites disponíveis para acesso público se encontram, necessariamente, em computadores com grande capacidade de processamento e com conexão de alta-velocidade em período integral. Isso é necessário porque esse computador (denominado servidor) é responsável por distribuir o conteúdo armazenado nele para todos os usuários que requisitarem.
Como se requisita conteúdo?
Através do navegador (Internet Explorer, Mozilla Firefox, Opera), automaticamente, ao digitar um endereço na barra de endereços ou ao clicar em um botão ou link.
LINGUAGENS
Linguagem é como um conjunto de palavras e regras que, juntas, garantem a comunicação entre indivíduos. Porém, como o nosso português e todas as outras línguas e dialetos, para que a mensagem seja transmitida, é necessário que ela seja falada / escrita por um indivíduo, e ouvida / lida E interpretada por outro.
Os conteúdos das páginas da Internet são escritos usando linguagens para finalidades específicas: marcar o texto, definir os estilos, a formatação e o layout da página, e talvez a transformação do conteúdo em um aplicativo online.
Uma coisa por vez:
MARCAR O TEXTO
É a tarefa da primeira linguagem que estudaremos: o HTML, que é a sigla para HyperText Markup Language (Linguagem de Marcação de Hipertexto).
O que o HTML faz, na verdade, é a formatação de texto comum para adaptá-los para as necessidades da Internet. Quando você entra em uma página, você espera ver conteúdo. Esse conteúdo está lá, escrito em HTML ou em alguma outra linguagem de marcação (XML, por exemplo), e já visualmente formatado.
Porém, na Internet, as páginas não existem sozinhas, elas não são independentes. Na verdade, elas estão todas conectadas, formando um único conjunto de informações sem que você possa apontar onde elas começam ou terminam. Esse é o conceito de hipertexto (bastante interessante por sinal, vale a pena pesquisar), onde as ligações (hiperligações) entre as páginas são feitas através dos links e botões, que são feitos usando HTML.
Cada arquivo HTML (os que possuem extensão .htm ou .html) representa uma página. Usando somente HTML, você pode colocar texto formatado, imagens e tabelas nas suas páginas.
Para a Internet que já era visualmente navegada desde o primeiro navegador, o Mosaic, em 1993, somente o HTML já satisfazia por si todas as necessidades de seus usuários. Porém, à medida que mais pessoas comuns – e não mais somente os universitários – tinham acesso a essa rede, começou a surgir a necessidade de controlar melhor a aparência das páginas.
Foi aí que entraram as folhas de estilo.
DEFINIR OS ESTILOS, A FORMATAÇÃO E O LAYOUT
O HTML tem pouca capacidade de formatação de texto e controle de espaço. Com ele, você pode somente trocar as cores dos textos, mudar o tamanho das fontes e, no máximo, criar títulos já prontos.
Com as CSS (Cascading Style Sheets, ou “Folhas de Estilo em Cascata”) o domínio sobre a aparência do conteúdo sofreu uma grande revolução.
Agora é possível controlar a aparência da página toda (ou por vezes de um site inteiro!) com apenas algumas declarações de estilo feitas com CSS. Ou seja: além de facilitar as tarefas que o HTML já fazia – trocar cores, aumentar e diminuir fontes, etc. -, o CSS ainda adicionou mais recursos à formatação de texto – espaçamento entrelinhas, entre parágrafos, a largura das margens das páginas, e talvez o principal, que foi a utilização das DIVs para construir layouts (veremos isso mais para frente, não tenha pressa!).
MAS CUIDADO! Todo documento CSS é preso a um ou mais documentos HTML, pois as CSS agem apenas MODIFICANDO / FORMATANDO um conteúdo já pronto. São raros os casos em que você adicionará conteúdo através do CSS.
O CONTEÚDO SE TRANSFORMA EM APLICATIVO
“Já tenho HTML e CSS. Meu ‘Orkut particular’ está pronto?”
NÃO.
Para começar, páginas em HTML e CSS, mesmo tendo aparência profissional, ainda não garantem interação completa com o usuário, sendo a única interação possível o uso dos links de navegação.
Para fazer um sistema de fórum, por exemplo, em que vários usuários logam no sistema e postam mensagens, são necessários bancos de dados (arquivos em que grandes quantidades de dados podem ser armazenadas) para guardar mensagens e informações sobre os usuários. Porém, as informações não vão simplesmente sozinhas para dentro desses bancos de dados, elas devem ser coletadas e armazenadas através do uso de linguagens específicas.
O exemplo do fórum é apenas um dos milhares – talvez milhões – de que dispomos atualmente na Internet.
Algumas das linguagens que podemos usar para tornar nossa página dinâmica (interativa): PHP, ASP, Perl, Java, JavaScript, etc.
O nosso objetivo não é se aprofundar nessas. Por enquanto, vamos ficar só no HTML e CSS mesmo.
PROGRAMAS
Não é raro encontrarmos cursos de HTML em que os professores ensinam Dreamweaver – um software que manipula HTML. O aluno aprende como digitar texto no Dreamweaver, como formatar esse texto, como trabalhar com tabelas, como inserir imagens e como salvar o arquivo, com extensão ‘.html’. Depois de fazer tudo isso, acha que já aprendeu HTML. Será mesmo?
Basta fazer um teste muito simples.
No Dreamweaver, o jeito mais fácil de criar páginas HTML é no ‘Modo Layout’, uma interface WYSIWIG (do inglês “What You See Is What You Get”, “O que você vê é o que você tem”) na qual você escreve e insere elementos como se usasse um programa como o Microsoft Word.
Geralmente, quando se “ensina” HTML, os alunos só aprendem a usar esse modo Layout. Muitos terminam o curso sem saber que, clicando na aba “Code”, você tem acesso ao código HTML de verdade, ou seja, nada de criar páginas como se você ainda fosse apenas um usuário da Internet (VOCÊ É O DESENVOLVEDOR AGORA!!).
O teste de que falei é esse: alterne do modo Layout para o modo Code e peça ao aluno para criar os objetos que criou na interface WYSIWIG. O que conseguir saberá HTML. Os que não conseguirem dominam apenas um programa tão simples de mexer quanto o Word.
Você pode usar vários programas para trabalhar com o HTML, mas eu costumo usar um editor não-WYSIWIG de código aberto chamado Notepad++. Existem vários outros programas (Cofee Cup, Dreamweaver, e até o Bloco de Notas do Windows e o Microsoft Word), mas eu realmente recomendo o download do Notepad++, pois ensinarei a linguagem HTML sem uso de interface visual!!!
Agora sim, vamos lá!
Dúvidas?
Descubra como entrar em contato na caixa (+)
Vamos começar nossos estudos sobre Webdesign???
Não deixem passar nenhuma dúvida! Do modo como eu preparei as lições, cada conhecimento vai ser necessário mais tarde, então antes de tudo, vamos ver alguns conceitos básicos. Pode parecer desnecessário ler esta parte, mas para garantirmos uma boa prática depois, precisaremos ser pacientes!
Vamos lá:
SERVIDORES
Todas as páginas e sites disponíveis para acesso público se encontram, necessariamente, em computadores com grande capacidade de processamento e com conexão de alta-velocidade em período integral. Isso é necessário porque esse computador (denominado servidor) é responsável por distribuir o conteúdo armazenado nele para todos os usuários que requisitarem.
Como se requisita conteúdo?
Através do navegador (Internet Explorer, Mozilla Firefox, Opera), automaticamente, ao digitar um endereço na barra de endereços ou ao clicar em um botão ou link.
LINGUAGENS
Linguagem é como um conjunto de palavras e regras que, juntas, garantem a comunicação entre indivíduos. Porém, como o nosso português e todas as outras línguas e dialetos, para que a mensagem seja transmitida, é necessário que ela seja falada / escrita por um indivíduo, e ouvida / lida E interpretada por outro.
Os conteúdos das páginas da Internet são escritos usando linguagens para finalidades específicas: marcar o texto, definir os estilos, a formatação e o layout da página, e talvez a transformação do conteúdo em um aplicativo online.
Uma coisa por vez:
MARCAR O TEXTO
É a tarefa da primeira linguagem que estudaremos: o HTML, que é a sigla para HyperText Markup Language (Linguagem de Marcação de Hipertexto).
O que o HTML faz, na verdade, é a formatação de texto comum para adaptá-los para as necessidades da Internet. Quando você entra em uma página, você espera ver conteúdo. Esse conteúdo está lá, escrito em HTML ou em alguma outra linguagem de marcação (XML, por exemplo), e já visualmente formatado.
Porém, na Internet, as páginas não existem sozinhas, elas não são independentes. Na verdade, elas estão todas conectadas, formando um único conjunto de informações sem que você possa apontar onde elas começam ou terminam. Esse é o conceito de hipertexto (bastante interessante por sinal, vale a pena pesquisar), onde as ligações (hiperligações) entre as páginas são feitas através dos links e botões, que são feitos usando HTML.
Cada arquivo HTML (os que possuem extensão .htm ou .html) representa uma página. Usando somente HTML, você pode colocar texto formatado, imagens e tabelas nas suas páginas.
Para a Internet que já era visualmente navegada desde o primeiro navegador, o Mosaic, em 1993, somente o HTML já satisfazia por si todas as necessidades de seus usuários. Porém, à medida que mais pessoas comuns – e não mais somente os universitários – tinham acesso a essa rede, começou a surgir a necessidade de controlar melhor a aparência das páginas.
Foi aí que entraram as folhas de estilo.
DEFINIR OS ESTILOS, A FORMATAÇÃO E O LAYOUT
O HTML tem pouca capacidade de formatação de texto e controle de espaço. Com ele, você pode somente trocar as cores dos textos, mudar o tamanho das fontes e, no máximo, criar títulos já prontos.
Com as CSS (Cascading Style Sheets, ou “Folhas de Estilo em Cascata”) o domínio sobre a aparência do conteúdo sofreu uma grande revolução.
Agora é possível controlar a aparência da página toda (ou por vezes de um site inteiro!) com apenas algumas declarações de estilo feitas com CSS. Ou seja: além de facilitar as tarefas que o HTML já fazia – trocar cores, aumentar e diminuir fontes, etc. -, o CSS ainda adicionou mais recursos à formatação de texto – espaçamento entrelinhas, entre parágrafos, a largura das margens das páginas, e talvez o principal, que foi a utilização das DIVs para construir layouts (veremos isso mais para frente, não tenha pressa!).
MAS CUIDADO! Todo documento CSS é preso a um ou mais documentos HTML, pois as CSS agem apenas MODIFICANDO / FORMATANDO um conteúdo já pronto. São raros os casos em que você adicionará conteúdo através do CSS.
O CONTEÚDO SE TRANSFORMA EM APLICATIVO
“Já tenho HTML e CSS. Meu ‘Orkut particular’ está pronto?”
NÃO.
Para começar, páginas em HTML e CSS, mesmo tendo aparência profissional, ainda não garantem interação completa com o usuário, sendo a única interação possível o uso dos links de navegação.
Para fazer um sistema de fórum, por exemplo, em que vários usuários logam no sistema e postam mensagens, são necessários bancos de dados (arquivos em que grandes quantidades de dados podem ser armazenadas) para guardar mensagens e informações sobre os usuários. Porém, as informações não vão simplesmente sozinhas para dentro desses bancos de dados, elas devem ser coletadas e armazenadas através do uso de linguagens específicas.
O exemplo do fórum é apenas um dos milhares – talvez milhões – de que dispomos atualmente na Internet.
Algumas das linguagens que podemos usar para tornar nossa página dinâmica (interativa): PHP, ASP, Perl, Java, JavaScript, etc.
O nosso objetivo não é se aprofundar nessas. Por enquanto, vamos ficar só no HTML e CSS mesmo.
PROGRAMAS
Não é raro encontrarmos cursos de HTML em que os professores ensinam Dreamweaver – um software que manipula HTML. O aluno aprende como digitar texto no Dreamweaver, como formatar esse texto, como trabalhar com tabelas, como inserir imagens e como salvar o arquivo, com extensão ‘.html’. Depois de fazer tudo isso, acha que já aprendeu HTML. Será mesmo?
Basta fazer um teste muito simples.
No Dreamweaver, o jeito mais fácil de criar páginas HTML é no ‘Modo Layout’, uma interface WYSIWIG (do inglês “What You See Is What You Get”, “O que você vê é o que você tem”) na qual você escreve e insere elementos como se usasse um programa como o Microsoft Word.
Geralmente, quando se “ensina” HTML, os alunos só aprendem a usar esse modo Layout. Muitos terminam o curso sem saber que, clicando na aba “Code”, você tem acesso ao código HTML de verdade, ou seja, nada de criar páginas como se você ainda fosse apenas um usuário da Internet (VOCÊ É O DESENVOLVEDOR AGORA!!).
O teste de que falei é esse: alterne do modo Layout para o modo Code e peça ao aluno para criar os objetos que criou na interface WYSIWIG. O que conseguir saberá HTML. Os que não conseguirem dominam apenas um programa tão simples de mexer quanto o Word.
Você pode usar vários programas para trabalhar com o HTML, mas eu costumo usar um editor não-WYSIWIG de código aberto chamado Notepad++. Existem vários outros programas (Cofee Cup, Dreamweaver, e até o Bloco de Notas do Windows e o Microsoft Word), mas eu realmente recomendo o download do Notepad++, pois ensinarei a linguagem HTML sem uso de interface visual!!!
Agora sim, vamos lá!
Dúvidas?
Descubra como entrar em contato na caixa (+)
Assinar:
Postagens (Atom)
