:: Codificação :: Habilidades a ser desenvolvidas
Transcrição
:: Codificação :: Habilidades a ser desenvolvidas
:: Nome do Curso Análise e Desenvolvimento de Sistemas :: Nome da Unidade Curricular Programação WEB :: Tema da aula Codificação :: Fase / Etapa do Projeto e Interligação Fase 2 – Desenvolvimento :: aula 10 :: Codificação Nesta aula abordaremos a codificação HTML e outras linguagens. :: Habilidades a ser desenvolvidas 1 2 3 4 :: :: :: :: Transcrever comandos em linguagem padrão da Internet. Preparar rotinas usando estruturas de seleção. Preparar imagens para a Web. Identificar o uso de cores adequadas. :: 48 :: aula 10 1 :: Introdução A codificação é o desenvolvimento da programação do website. Alguns padrões devem ser adotados com o intuito de facilitar a visualização do código e evitar erros. 2 :: Desenvolvimento Na codificação de um website há dois fatores muito importantes: a estruturação e a organização. :: Estruturação: um documento HTML é dividido em duas partes distintas, HEAD e BODY (CABEÇA e CORPO respectivamente). Veja no exemplo a seguir: <HTML> <HEAD> Aqui são colocados TAGS, conteúdos e SCRIPTS que não aparecem no corpo (parte visual) da página </HEAD> <BODY> Aqui vai o conteúdo visível para o usuário <BODY> </HTML> No HEAD são inseridos os SCRIPTS em Java script (ou em outra linguagem), formatação CSS, as META TAGS, inserções ou links para outros arquivos externos e toda a parte “funcional” da página. Este conteúdo é invisível para o usuário ao navegar no website. Já no BODY é possível mesclar a linguagem HTML com linguagens dinâmicas (ASP, PHP e NET, por exemplo), porém essa formatação dinâmica não é exibida ao usuário, pois é interpretada por um servidor que devolve a programação no formato HTML. :: Organização: A “INDENTAÇÃO” (do inglês INDENT ou recuo) é a prática de recuar :: 49 :: aula 10 mais ou menos o início de TAGS (ou de um novo bloco de TAGS). Essa “separação” de código não influencia na velocidade de interpretação da página e deve ser usado para auxiliar na visualização da programação. Essa prática auxilia muito na correção de possíveis erros. Veja a seguir um exemplo de código NÃO indentado: <HTML> <HEAD><TITLE>Nome da página</TITLE></HEAD> <BODY> <FONT FACE=Arial SIZE=2> Texto exibido </FONT> </BODY> </HTML> E agora o código com a indentação: <HTML> <HEAD> <TITLE>Nome da página</TITLE> </HEAD> <BODY> <FONT FACE=Arial SIZE=2> Texto exibido </FONT> </BODY> </HTML> Os recuos e a separação das TAGS facilitam a compreensão do código. Observação: é muito comum ouvir falar em ENDENTAÇÃO. É uma maneira incorreta de fala e escrita, uma vez que em português ENDENTAR significa “ligar os dentes de uma roda a outra.”. A palavra INDENTAR não existe na língua portuguesa e é um neologismo como RESETAR (reiniciar), de reset, DELETAR (apagar), de delete. Todas derivadas do inglês, mais precisamente, da informática. 3 :: Síntese A INDENTAÇÃO não é um item obrigatório e não influencia no resultado final da página desenvolvida, mas, como todo bom profissional, você deve se acostumar às boas práticas de desenvolvimento. :: 50 :: aula 10 4 :: Atividade Abra seus arquivos HTML (ou outro que façam parte da estruturação do seu site) e verifique se os códigos estão corretamente indentados. 5 :: Na próxima aula... Avaliação e controle de progresso Na aula 11, você e sua equipe serão avaliados pela organização de seus arquivos e respectivos códigos. :: 51