Olá a todos, bem vindos na volta das férias.

Vamos retornar e começar uma nova etapa. Estudamos algumas tags html, testamos elas em um projeto pessoal, onde construimos layout e também conteúdo.
Agora vamos partir de um conteúdo comum a todos e estudar as possibilidades da folha de estilo.

Para começar e entender as possibilidades de um trabalho assim vamos dar uma olhada nesse site: Zen garden e também sua versão em português

E vamos definir o nosso conteúdo. Nosso tema será a JOTEC que acontece anualmente no Graham Bell. Começaremos fazendo uma pesquisa investigativa no próprio colégio, com colegas e professores para levantarmos um pequeno histórico da JOTEC.

A partir dessa pesquisa, feita pelos alunos, será desenvolvido um conteúdo básico em html que vai ser usado para nosso aprendizado em css.

Introdução a CSS (fonte: site Maujor)

boa aula

Leia o resto deste post »

Na última aula continuamos a construção da página pessoal sobre a profissão. Foi pedido que fosse feito o fluxograma do site (conjunto de páginas que será realizado).

exercício:: Desenhe as páginas que você está fazendo. Lembrando que precisa ter uma página principal (que vai se chamar index), uma página onde se explica o porque da escolha, e uma outra página de contato. E mais quantas você achar necessário. Só lembrando que o que for colocado no fluxograma é o que deverá ser apresentado, como página construída.

envie o desenho para o email da professora, durante o dia de hoje vou tirar dúvidas por email.

Aqui um tutorial bem explicado sobre formulário. Para fazer um formulário funcionar ele precisa ser direcionado para um página específica para onde os dados são enviados. Apenas como exercício, vamos preencher o campo action com “teste.php”. (em geral você trabalha com o suporte a formulário oferecido pelo provedor onde está hospedado o site).

Aqui outro tutorial sobre formulários.

Aqui você encontra exemplos visuais de todos os elementos de um formulário e as suas respectivas tags:

• Para campo <input> onde se pode inserir campos de dados (texto ou senha), de múltipla escolha, escolha única e botões de ação. veja aqui.
• Para campo <select> onde temos listas de valores. veja aqui.
• Para campo <textarea> onde temos, como o nome diz, área para texto, limitado ou não. veja aqui.
  

exercício:: construa um formulário (mantendo o layout da sua página) com campos de entrada para nome, cidade, email, escolha para que tipo de contato quer fazer (”tirar dúvidas”, “dar um alô”, “contato para amizade”. Faça um print screen da página e envie para a professora, por email

Leia o resto deste post »

Antes de iniciar qualquer projeto é preciso ter em mente o que se vai fazer. Temos duas ferrmamentas poderosas para isso: um memorial descritivo (que também pode ser chamado de texto base, descrição do site, e tantos outros nomes) e o fluxograma.

No Memorial Descritivo, vamos colocar sobre o que é o nosso site, neste caso sobre que profissão estamos falando, porque escolhemos ela, e como pretendemos desenvolver o tema (quais serão os itens do menu, layout, interatividade etc.). Para este trabalho será pedido um pequeno memorial de 15 linhas, contendo: descrição do site, motivo da escolha, descrição as páginas (conteúdo e layout), imagens (print screen) das páginas.

Fluxograma do site, aqui organizamos as páginas e a navegação do site. O fluxograma é uma espécie de guia para a construção do site. Para este trabalho vamos desenhar o fluxograma completo do site, com todos os links.

Ainda pensando o futuro

construir uma página sobre a profissão que quer seguir com a seguinte estrutura:

- texto de 5 a 10 linhas com um texto de introdução, centralizado, com título em negrito e corpo maior que o texto

- imagem alinhada a esquerda do texto. Veja aqui como fazer links de imagens

- após o texto tabela: (alterar para conteúdo condizente com seu tema)

- link para clipe ou video no youtube que represente ou reflita sua escolha profissional

Leia o resto deste post »

TABELAS

Tutorial Tabela
http://pt-br.html.net/tutorials/html/lesson10.asp

Mais tabelas
http://pt-br.html.net/tutorials/html/lesson11.asp

Conheça os vários tipos de bordas
http://orbita.starmedia.com/~edaurelio/a17.htm#collapse

Uma aula no youtube sobre tabelas

OUTRAS TAGS
conheça mais outras tags

Não esqueça que já foi postada a lista completa de tags

Pensando um tema - meu futuro daqui a 10 anos.

Como se pesquisa, conteúdo, edição.

• Construindo a página, trabalhando no dream weaver.

• Cores hexadecimais o que são, como são construídas, links

http://www.efeitosespeciais.net/tabela.htm

http://erikasarti.net/html/tabela_de_cores_web_safe.htm

diversão total em cores: Color Lovers http://www.colourlovers.com

o TAGS, links para Tags

http://werbach.com/barebones/barebone_port.html#lists

http://henriquehb.wordpress.com/2008/04/21/guia-basico-de-html/

http://informatica.hsw.uol.com.br/paginas-da-internet2.htm

HTML

HTML (acrônimo para a expressão inglesa HyperText Markup Language, )que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do “casamento” dos padrões HyTime e SGML. (Retirado de wikipedia)

Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:

<etiqueta>…</etiqueta>

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento: <etiqueta>

Todos os elementos podem ter atributos:

<etiqueta atributo1=valor1 atributo2=valor2>…</etiqueta>

(Retirado de Introdução a linguagem html)
—————————————————————————————————————————–

O HTML é uma linguagem que baseia sua sintaxe em um elemento de base que chamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes:

Uma abertura de forma geral <etiqueta>

Um fechamento do tipo </etiqueta>

Tudo que estiver incluído no interior desta etiqueta sofrerá as modificações que caracterizam a esta etiqueta. Como por exemplo:
As etiquetas <b> e </b> definem um texto em negrito. Se em nosso documento HTML escrevemos uma frase com o seguinte código:

<b>Isto está em negrito</b>
O resultado será: Isto está em negrito

As etiquetas <p> e </p> definem um parágrafo. Se em nosso documento HTML escrevêssemos: <p>Olá, estamos no parágrafo 1</p>
<p>Agora mudamos de parágrafo</p>

O resultado seria:

Olá, estamos no parágrafo 1

Agora mudamos de parágrafo

Aqui você pode baixar o arquivo pdf da aula.

World Wide Web

(que significa “rede de alcance mundial”, em inglês; também conhecida como Web e WWW)
é um sistema de documentos em hipermídia que são interligados e executados na Internet. Os documentos podem estar na forma de vídeos, sons, hipertextos e figuras. Para visualizar a informação, pode-se usar um programa de computador chamado navegador para descarregar informações (chamadas “documentos” ou “páginas“) de servidores web (ou “sítios”) e mostrá-los na tela do usuário. O usuário pode então seguir as hiperligações na página para outros documentos ou mesmo enviar informações de volta para o servidor para interagir com ele. O ato de seguir hiperligações é comumente chamado de “navegar” ou “surfar” na Web.

——————————————————————————————————————-
A World-Wide Web (também chamada Web ou WWW) é, termos gerais, a interface gráfica da Internet. Ela é um sistema de informações organizado de maneira a englobar todos os outros sistemas de informação disponíveis na Internet.

Sua idéia básica é criar um mundo de informações sem fronteiras, prevendo as seguintes características

- interface consistente;

- incorporação de um vasto conjunto de tecnologias e tipos de documentos;

- “leitura universal”.

Para isso, implementa três ferramentas importantes:
- um protocolo de transmissão de dados - HTTP;
- um sistema de endereçamento próprio - URL;
- uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML.


HTTP significa HyperText Transfer Protocol - Protocolo de Transferência de Hipertexto.
O HTTP é o protocolo usado para a transmissão de dados no sistema World-Wide Web. Cada vez que você aciona um link, seu browser realiza uma comunicação com um servidor da Web através deste protocolo.

URL

O sistema de endereçamento da Web é baseado em uma sintaxe chamada URI (Universal Resource Identifier - Identificador Universal de Recursos). Os endereços que utilizamos atualmente são os URLs, que seguem essa sintaxe. URL significa Uniform Resource Locator - Localizador Uniforme de Recursos.

Um exemplo de URL é: http://www.icmc.usp.br/ensino/material/html/url.html
Esse endereço identifica:
- o protocolo de acesso ao recurso desejado (http),
- a máquina a ser contactada (www.icmc.usp.br),
- o caminho de diretórios até o recurso (ensino/material/html/), e
- o recurso (arquivo) a ser obtido (url.html).

Através de URLs também acionamos programas (scripts), enviamos parâmetros para esses programas, etc.

HTML significa HyperText Markup Language - Linguagem de Marcação de Hipertexto.

Não é possível programar em linguagem HTML, pois ela é simplesmente uma linguagem de marcação: ela serve para indicarmos formatações para textos, inserir imagens e ligações de hipertexto.

Os browsers são os responsáveis por identificar as marcações em HTML e apresentar os documentos conforme o que foi especificado por essas marcações.

retirado de http://www.icmc.usp.br/ensino/material/html/www.html

Links para www

definição no wikipedia - http://pt.wikipedia.org/wiki/World_Wide_Web
manual html - http://www.criarweb.com/artigos/10.php

HIPERTEXTO

Hipertexto quer dizer: texto suporte que acopla outros textos em sua superfície, cujo acesso se dá através dos links que têm a função de conectar a construção de sentido, estendendo ou complementando o texto principal.

A invenção do conceito costuma ser atribuída a Vannevar Bush que descreve o “memex” num artigo clássico, escrito em 1945, antes mesmo do aparecimento dos primeiros computadores.
Ele o considerava um estilo não linear e associativo.

Exemplos de hipertexto, fora do computador

• Anotações nas margens dos livros (marginalia)
• Livros de Rpg, com leituras não lineares, definidas pelo leitor- jogador
• Livros de Leonardo Da Vinci, com anotações que remetiam a outas anotações

links

definição no wikipedia - http://pt.wikipedia.org/wiki/Hipertexto
site sobre Hipertexto - http://www.facom.ufba.br/hipertexto/indice.html
noções básicas sobre Hipertexto - http://www.facom.ufba.br/hipertexto/nbasicas.html
história do Hipertexto - http://www.facom.ufba.br/hipertexto/historia.html
Texto de Vannevar Bush, publicado no The Atlantic Monthly onde ele apresenta e explica o Memex (em inglês) - http://sloan.stanford.edu/mousesite/Secondary/Bushframe.html

Hipermídia

Hipermídia une os conceitos de não-linearidade (não-linear), hipertexto, interface e multimídia numa só linguagem.

Ref Minority Report

A hipermídia une os conceitos de hipertexto e multimídia. Ou seja, um documento hipermídia contém imagens, sons, textos e vídeos. Mas a principal característica da hipermídia é possibilitar a leitura não linear de determinado conteúdo, ou seja não ter necessariamente início, meio e fim, e sim se adaptar conforme as necessidades do usuário.

links

definição no wikipedia - http://pt.wikipedia.org/wiki/Hiperm%C3%ADdia
design de hipermídia, wikipedia - http://pt.wikipedia.org/wiki/Design_de_hiperm%C3%ADdia

Sejam bemvindos ao blog da aula de WEB, do 2º ano do colégio Graham Bell.

aqui você encontrará material das aulas e links sobre os assuntos discutidos.