Post on 22-May-2015
description
Sobre o HTMLdiegOCuruma
Iniciando no desenvolvimento underground
HTML
Introdução:
HTML (HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.
Wikipédia
HTML
O pai da webTim Berners-Lee criou o HTML original, na época a linguagem não era uma
especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornaria-se a Internet) ganhou atenção mundial.
Wikipédia
HTMLQuem mandaW3C é um consórcio internacional que agrega empresas, órgãos governamentais e organizações
independentes, e que visa desenvolver padrões para a criação e a interpretação de conteúdos para a Web. Fundado pelo Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.
Sites desenvolvidos segundo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente dos hardware ou software utilizados, como celulares e compatível com os novos padrões e tecnologias que surgen com a evolução da internet.
Padrões seus como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são usados de forma errônea devido ao desconhecimento da especificação.
É um dever de todo o desenvolvedor web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.
Wikipédia
HTML
Semântica
O uso da TAG ao conteúdo com o significado real.
Acessibilidade e inclusãoAcessibilidade significa permitir que pessoas com deficiências ou mobilidade reduzida
participem de atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população.
Na internet o termo acessibilidade refere-se também as recomendações do w3c, que visam permitir que todos possam ter acesso ao websites independente de terem alguma deficiência ou não.
Wikipédia
HTML
Usabilidade deixando Fácil de usarUsabilidade é um termo usado para definir a facilidade com que as pessoas podem usar uma
ferramenta ou objeto para realizar uma tarefa específica.
A usabilidade pode também se referir aos métodos de mensuração da usabilidade e ao estudo dos princípios por trás da eficiência percebida de um objeto.
Wikipédia
HTML
Elementos Usando o htmlUma declarção DTD usualmente é chamada de "Doctype".
Por que especificar um doctype?
Porque ele define qual é a versão do (X)HTML que o documento está usando e é uma informação importante para que os navegadores processem corretamente o documento.
HTML
Elementos Usando o htmlTipos:
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
O Strict é o rígido, você estará dizendo ao browser como renderizar ele, você está dizendo que seguirá os padrões.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Com esse você está dizendoao Browser que seu código está em transição, ele não seguirá rigorozamente os padrões.
HTML
Elementos Usando htmlTags
Lista de alguns elementos que podemos utilizar no nosso dia-a-dia para trazer significado para a informação dos sites:
HTML
Elementos usando tagsA - Define a ancora de um elemento.
Abbr - Define uma abreviação.
Acronym - Indica um acrônimo.
Address - A tag address é utilizada para conter informações de endereço e contatos.
Blockquote - Blockquote define longos blocos de citação.
Cite - Define uma citação ou referência a outra fonte
Code - Define que aquele texto é um código.
Tirados de um artigo do Tableless: http://tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web/
HTML
HTMLElementos usando tagsDfn - Define que certo texto é a definição de um termo.
div, span - Div e Span definem a estrutura dos elementos. Div é um elemento de bloco e Span um elemento de linha.
dl, dd, dt - Listas de definição são feitas para criar um grupo de termos e definições. Muito usada para fazer glossários, dicionários ou entrevistas textuais.
del, ins - INS é utilizado para mostrar que certo texto foi inserido e DEL define o texto que foi deletado da redação. Isso é bastante utilizado para corrigir artigos, textos e etc.
Em - Como o strong, indica uma ênfase no texto.
Tirados de um artigo do Tableless: http://tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web/
Elementos usando tagsh1 .. h6 - Grupo de títulos definidos por importância, onde o H1 é o mais importante e o H6 o menos
importante.
ul, ol, li - Listas ordenadas (OL) e listas não ordenadas (UL) são utilizadas para definir e criar listas de itens.
P - Define um parágrafo.
Q - Define uma citação ou reposta que não necessita de quebra de linha ou marcação de um parágrafo.
Strong - Define uma ênfase, como o EM.
Var - Indica uma instância de uma variavel ou argumento de programa.
Tambem podemos trabalhar com a semântica com atributos. Alt, Title, classe, cite, id, lang, longdesc, rev, rel.
Tirados de um artigo do Tableless: http://tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web/
HTML
Valores, família e hierarquiaTodo documento HTML possui tags, tags são comandos de formatação da linguagem. Um elemento é formado por um nome de tag, atributos, valores e filhos. Os atributos mudam os resultados padrões dos elementos e os valores caracterizam essa mudança.
<ul>
<li>
<a href=”#” title=”Valores”>Exemplo</a>
</li>
</ul>
HTML
ResponsabilidadesO reconhecimento do front está maior que no passado, antigamente nenhuma empresa dava atenção
pra esse setor infelizmente, mais muita coisa mudou desde então, muitos desenvolvedores aqui no brasil e fora estão lutando pelos padrões e pela qualidade
O crescimento do mercado fez as responsabilidades do desenvolvedor front-end mudar. As responsabilidades e tambem a estrutura da equipe que ele está. Ficando se parecendo com uma linha de montagem.
O dev de client-side tem as seguintes responsabilidades na minha opinião do Diego Eis, criador do Tableless para disseminar os padrões web no Brasil.
Tirados de um artigo do Tableless: http://tableless.com.br/responsabilidade-de-um-dev-client-side/comment-page-1/#comment-138488
ELEMENTOS
Responsabilidades1 - Planejamento do HTML
Mapeamento dos elementos do layout
Estudo de SEO e semântica dos elementos
Estrutura do HTML padrão
Otimização do código
Tirados de um artigo do Tableless: http://tableless.com.br/responsabilidade-de-um-dev-client-side/comment-page-1/#comment-138488
HTML
Responsabilidades2 - Planejamento do CSS
Estudo de escalabilidade do CSS
Modularização dos arquivos
Nomenclatura de classes e ids
Nomenclatura e padronização código
Otimização do código
Tirados de um artigo do Tableless: http://tableless.com.br/responsabilidade-de-um-dev-client-side/comment-page-1/#comment-138488
HTML
Responsabilidades3 - Comportamento dos elementos
Definição do comportamento (junto ao designer)
Criação e padrão de funções e aplicação
Modularização dos arquivos
Tirados de um artigo do Tableless: http://tableless.com.br/responsabilidade-de-um-dev-client-side/comment-page-1/#comment-138488=
HTML
ResponsabilidadesTambém podem haver processos posteriores: testes de funcionalidades, usabilidade, SEO,
otimização de banco e código, migrações etc.
Veja que dividimos basicamente alguns pontos relacionados às camadas de desenvolvimento: informação, formatação e comportamento. Lembrando que na camada de comportamento o dev client-side só precisa saber a manipulação de elementos. Não precisa aprender a programar profundamente em Javascript. Basta saber um pouco de JQuery ou outra biblioteca da linguagem.
Tirados de um artigo do Tableless: http://tableless.com.br/responsabilidade-de-um-dev-client-side/comment-page-1/#comment-138488
HTML
FinalmenteNinguém pode chegar a lugar algum sem antes passar por aqui:
http://www.maujor.com/w3ctuto/firstcss.html
http://tableless.com.br/categoria/artigos/
http://www.w3schools.com/
HTML
Sobre o htmldiegOCuruma
Você esta preparado pro underground?
Se não puder se destacar pelo talento, vença pelo esforço. Dave Eeinbaum
FIM