Um pouco sobre: Microformatos

Microformatos é uma série de especificações que tem como objetivo principal relacionar a informação ou os dados humanos com as máquinas. Uma maneira diferente de se pensar sobre dados. Estas especificações constituem um “dicionário” de conteúdo semântico para o HTML e XHTML que tem como base os web standards e é escrito para descrever a informação de forma simples.
Microformatos não é uma linguagem nova, são formatos de descrição de dados que podem ser aplicados em trechos específicos do seu código, sem precisar refazer nada. Se você tem um site e o seu código é semanticamente correto, basta você implementar e tratar estes trechos específicos sem precisar de alterações estruturais. 

hCard é um microformat para publicar os detalhes de contato de pessoas, empresas, organizações e lugares. Baseado na padronização vCard (RFC 2426).

hcard 

hcard - código

hCalendar é um microformato para incorporar dados de calendário em páginas web. Baseado na padronização iCalendar(RFC 2425).

hcalendar

hcalendar - código

Um pouco sobre: Design Responsivo

O design o responsivo ocorre quando layout se adapta aos diversos dispositivos (smartphones, tablets e o desktop). Para que ocorra a adaptação é necessário utilizar o CSS3, ele contém uma propiedade conhecida como Media Querie, permitindo assim os diversos tamanhos de layout. Com isso o site se torna responsivo e com acessibilidade para o usuário pois o mesmo encontrará todas as informações de forma mais prática.

                                            Tela em Smartphone

Tela de desktop

Um pouco sobre: Formulários HTML

Os formulários HTML servem apenas para coletar dados, mas objetivo deste post não é processar os dados, nem validar os campos, é apenas mostrar a parte do layout de formulários e como se cria um.

O elemento <form > vem de formulário, <action> definimos onde os dados serão armazenados, mas como já havia citado esse não é nosso objetivo e <method> serve para atribuir como os dados serão enviados. Pode-se atribuir dois valores: "get" que faz uma requisição e "post" que é incorporado junto ao corpo da página. Existe também o <name> e o <id> que servem para identificar o nome, pode o <id> não pode ser repetido.

 Nos forms, existem vários elementos como <input> que tem seus atributos:

<type> é o tipo dos atributos abaixo;

<text> para inserir texto;

<password> aparece a máscara da senha, mas não criptografa a senha;

<checkbox> caixa de múltipla escolha;

<radio> caixa de uma única escolha;

<submit> encaminha os dados;

<reset> reestrutura a página;

<file> para enviar um arquivo do computador;

<hidden> campo oculto que é enviado junto com os dados de usuário;

<image> envia imagem do computador;

<button> cria um botão e para atribuir um nome usa-se <value>;

<color> aparece uma caixa de cores;

<date> o espaçamento para inserir a data, e o calendário para selecionar;

<datetime> hora, minuto e segundo;

<datetime-local> determina a zona em relação ao meridiano de GrenWith;

<email> alguns navegadores validam o campo email;

<month> para selecionar o mês todo;

<number> só aceita números;

<range> caixa de controlo que define números;

Masc – define o número máximo,

Step- “pula” de dois em dois por exemplo;

<search> campo para pesquisa;

<tel> específico para número de telefones;

<url> para endereços de sites, valida caso começe com http://

<week> para selecionar a semana do ano;

Existem outros elementos no form como:

<textarea> que cria uma caixa de texto onde se define o número de linhas <row> e colunas<cols>;

<select> que cria um campo com linhas selecionáveis;

<label> que liga o campo com o id e o name;

<fildset> cria um grupo de comando;

<legend> cria a legenda do grupo;

<opgroup>agrupa os itens do atributo <option>;

<datalist> cria uma lista predefinida de um <input>;

<output> mostra o resultado de um calculo de acordo com o definido;

Exemplo a baixo:

Resultado do Código

Código relacionado ao Assunto

Um pouco sobre: Rede de Computadores

As redes de computadores normalmente são divididas em três categorias, com relação a sua área de cobertura: a LAN é conhecida como redes de área local, a MAN é conhecida como redes de área metropolitana e a WAN é conhecida como redes de área alargada.

As Três redes juntas.

LAN - Local Area Network é o nome que se dá a uma rede de carácter local, e cobrem uma pequena área geográfica, usualmente um escritório ou uma empresa, e interligam um número de poucos componentes. São normalmente redes de domínio privado.

Rede LAN.

MAN - Metropolitan Area Network esta rede de carácter metropolitano interliga computadores e utilizadores numa área geográfica maior que a abrangida pela LAN, mas menor que a área abrangida pela WAN. A MAN usualmente resulta da interligação de várias LAN, cobrindo uma área geográfica de dimensão média, tipicamente um campus ou uma cidade, podem ser redes de domínio privado ou público.

Rede MAN.

WAN - Wide Area Network é uma rede de telecomunicações que está dispersa por uma área geográfica grande. A WAN é bastante diferente da LAN pelo seu porte e estrutura de telecomunicações. As WAN normalmente são de carácter público.

Rede WAN.

Assim finalizo Um pouco sobre: Redes de Computadores.

Um pouco sobre: Protocolos da Internet

O protocolo é o método que permite a comunicação entre processos que geralmente são executados em diferentes máquinas. É um conjunto de procedimentos e regras que devem ser seguidos para emitir e receber dados em uma rede.

Existem vários protocolos na internet, apresentarei uma sequência de protocolos TCP/IP.

TCP – Transmission Control Protocol é um protocolo onde se concentram a maioria das aplicações do núcleo da Internet, este verifica se os dados são enviados de forma correta.

IP – Internet Protocol é utilizado para identificar um dispositivo em uma rede local ou pública, cada dispositivo possui um único endereçamento.

ICMP – Internet Control Message Protocol é um protocolo integrante do protocolo IP, fornece uma mensagem de erro á fonte original.

 HTTP – HyperText Transfer Protocol  é a base para a comunicação www, utilizado para a transferências de hipertextos.

HTTPS – HyperText Transfer Protocol Secure é uma implementação do HTTP, porém com uma camada de segurança. Permite que os dados sejam transmitidos por meio de uma conexão criptografada.

FTP – File Transfer Protocol é responsável pela transferência de arquivos, conhecido também como ficheiros.

ARP – Address Resolution Protocol  é utilizado para encontrar um endereço da camada de enlace por exemplo a Ethernet.

UDP – User Datagram Protocol permite que a aplicação escreva uma datagrama encapsulado em um pacote IPv4 ou IPv6.

SMTP – Simple Mail Transfer Protocol é o protocolo padrão para envios de e-mail através da Internet, contem um cabeçalho diferente.

E assim finalizo um pouco sobre : Protocolos da Internet.

Um pouco sobre: HTML

A abreviação da expressão inglesa HyperText Markup Languege, Linguagem de Marcação de Hipertexto é uma linguagem de marcação que se utiliza para criar páginas para web, e essas criações são interpretadas pelos navegadores .

No HTML existem algumas boas práticas necessárias para uma boa criação de uma página, temos os metadados que criam cabeçalhos e dão informações sobre o documento que será aberto, as sessões que é o corpo da página, o que é exibido no navegador que são necessários para a linguagem de marcação.

O <head> comportam as informações do cabeçalho da página. O <title> define um titulo para o navegado, o link importa a folha de stilo para formatação da página, o <style> incorpora essa formatação e o <meta> adiciona informações sobre a página como palavras chave, autor e também pode definir a formatação para leitura de caracter especial.

O <body> é onde se insere todo o corpo de página. O <heade>r é um cabeçalho dentro do corpo, o <article> é onde se define o conteúdo dentro da página, o <nav> é onde se encontra um conjunto de hiperlinks, o <aside> é o conteúdo relacionado ao artigo, o <address> é o endereçamento e o <footer> é o rodapé do corpo da página.

O comentário é feito assim: <!--Comentário--> e quando digitado na criação da página não interfere em nada da parte da programação.

O H1 até o H6 são utilizados como cabeçalhos e títulos em diversos níves sendo <h1> o menor porem maior que o texto e <h6> o maior dos títulos, o <hgroup> é menos utilizado mas tem função de agrupar os  cabeçalhos. A função <p> é utilizada para criação de parágrafo,< hr> para divisão de conteúdo na página, o <blockquote> define um parágrafo, uma atação mas nem sempre com um recuo e o <br> representa uma quebra de linha.

Para criação de listas ordenadas utiliza-se< ol> e para listas não ordenadas utiliza-se <ul> e por boas práticas o <li> é adotado para a inserção de ambos. Para uma lista de definição utiliza-se <dl> para o título, <dt> para perguntar e <dd> para resposta.

A <div> pode ser utilizada para centralizar no navegador e para criar imagem e texto, <a> é para criar hiperlinks de um documento a outro, o <em> enfatiza o texto, o <strong>deixa o texto forte e o <href> onde se especifica a URL do <a>.

Assim concluo um pouco sobre : HTML

Codificação html

Resultado Codificação

Um pouco sobre: Tabela HTML

As tabelas HTML são utilizadas apenas para apresentar dados tabulares, ou seja, que necessitam serem apresentado em uma ordem lógica com linhas e colunas.

A criação de tabelas não é tão complicada, explicandos as três tags básicas para a criação de tabelas, torna tudo mais fácil.

As três principais tags necessárias são <tabel>, <tr> e <td>. Mas temos outras que são utilizadas para ter uma melhoria na semântica do código, que são <th>, <caption>, <thead>, <tbody> e <tfoot>.

<table> : necessário no início e no fim da tabela, indica a criação da tabela e o fim da criação.

<tr> = table row: é para a inserção de uma linha na tabela, inicia e termina a linha na horizontal.

<td> = table data: é para a inserção de uma célula dentro da linha.

<th> : para criação de um título dentro da tabela, melhor semântica.

<caption>: para a legenda da tabela.

<thead>: por boas maneiras, na linha de cabeçalho da tabela.

<tbody>: por boas maneiras, para o corpo da tabela.

<tfoot>: por boas maneiras, para a linha do rodapé da tabela.

Obs: todas as linhas <tr> tem que ter o mesmo número de colunas <td>, caso haja necessidade de mesclar as linhas ou as colunas utiliza se  <colspan> e <rowspan>.

<colspan>: para mesclar em colunas.

<rowspan>: para mesclar em linhas.

Como descrito anteriormente as tabelas são ultilizadas apenas para apresentar dados tabulados. Antes  os layout’s das páginas eram criados por meio de tabelas, mas após as  novas indicações da WC3 os layout’s são criados de outras formas, que contem melhor semântica no código HTML.

Para se ter uma tabela de fácil entendimento, é necessário informar ao usuário dados que possibilitem o entendimento, como, nome, descrição, cabeçalhos entre outros.

A seguir teremos o exemplo do código em HTML, para entendermos tudo o que foi citado acima.

Codificação da Tabelas

Resultado da Codificação