Email e Instant Mensseger com Comunicação Assíncrona

Email é um método que permite compor, enviar e receber mensagens através de sistemas eletrônicos de comunicação. O termo Email é aplicado tanto aos sistemas que utilizam a Internet e são baseados no protocolo SMTP, POP3,IMAP, como aqueles sistemas conhecidos como intranets, que permitem a troca de mensagens dentro de uma empresa ou organização e são, normalmente, baseados em protocolos proprietários.

 POP3(Post Office Protocol) – é um protocolo utilizado no acesso remoto a uma caixa de correio eletrônico. Ele está definido no RFC 1939 e permite que todas as mensagens contidas numa caixa de correio eletrônico possam ser transferidas sequencialmente para um computador local. Dessa maneira, o utilizador pode ler as mensagens recebidas, apagá-las, responder-lhes, armazená-las etc.

SMTP(Simple Mail Transfer Protocol) – É um protocolo relativamente simples, baseado em texto simples, onde um ou vários destinatários de uma mensagem são especificados (e, na maioria dos casos, validados) sendo, depois, a mensagem transferida. É bastante fácil testar um servidor SMTP usando o programa telnet.

IMAP(Internet Message Access Protocol) – É um protocolo de gerenciamento de correio eletrônico superior em recursos ao POP3 – protocolo que a maioria dos provedores oferece aos seus assinantes. A última versão é o IMAP4. O mais interessante é que as mensagens ficam armazenadas no servidor e o utilizador pode ter acesso a suas pastas e mensagens em qualquer computador, tanto por webmail como por cliente de correio eletrônico (como o Mozilla Thunderbird, Outlook Express ou o Evolution). Outra vantagem deste protocolo é o compartilhamento de caixas postais entre usuários membros de um grupo de trabalho. Além disso, é possível efetuar pesquisas por mensagens diretamente no servidor, utilizando palavras-chaves.

O POP3 e seus antecessores foram projetados para permitir que usuários com conexões intermitentes, tais como conexões dial-up pudessem fazer o download de seus e-mails quando conectados.
O SMTP foi projetado para permitir conexões permanentes para receber e-mails. O POP3 é um protocolo de tração (quando o cliente solicita dados do servidor ), enquanto SMTP é um protocolo de pressão onde o cliente envia dados para o servidor sem que o servidor tenha solicitado os dados com antecedência.

Spam é inundar a Internet com muitas cópias da mesma mensagem, em uma tentativa de forçar a mensagem sobre as pessoas que de outra forma não escolher para recebê-lo. A maioria do spam é propaganda comercial, muitas vezes por produtos duvidosos, fique rico rápido regimes, ou quase-judiciais serviços. Spam custa o remetente muito pouco para enviar – a maioria dos custos são pagos pelo destinatário ou os portadores e não pelo remetente.

Existem dois principais tipos de spam, e têm efeitos diferentes sobre usuários da Internet. Canceláveis ​​spam qual é uma única mensagem enviada a 20 ou mais grupos de notícias Usenet. Spam qual rouba usuários da utilidade dos grupos de notícias por sobrecarregá-los com uma avalanche de publicidade ou outras mensagens irrelevantes. Além disso, o spam qual subverte a capacidade dos administradores de sistema e proprietários para gerenciar os temas que eles aceitam em seus sistemas.

Uma variante particularmente desagradável de spam de e-mail está enviando spam para listas de discussão (fóruns de discussão públicas ou privadas e-mail.) Porque muitas listas de discussão limitar a atividade para seus assinantes, os spammers usam ferramentas automatizadas para se inscrever em listas de discussão como muitos como possível, para que eles pode pegar as listas de endereços, ou utilize a lista de discussão como um alvo direto de seus ataques.

 

A Internet revolucionou a forma como comunicamos. E-mail tem sido a forma mais rapidamente adoptada de comunicação já conheceu. Menos de duas décadas atrás, muitas pessoas não tinham ouvido falar dele. Agora, muitos de nós de e-mail em vez de escrever cartas ou mesmo chamar as pessoas no telefone. Pessoas de todo o mundo enviam bilhões de mensagens de correio eletrônico a cada dia.

Mas, às vezes até mesmo de e-mail não é rápido o suficiente. Você pode não saber se a pessoa que você quer de e-mail está online no momento. Além disso, se você for enviar e-mails e para trás com alguém, você geralmente tem que clicar através de algumas etapas. É por isso que as mensagens instantâneas (IM) tornou-se tão popular.
Com IM, você pode manter uma lista de pessoas que interagem com ele. Você pode IM com qualquer pessoa da sua lista de amigos ou lista de contatos, desde que essa pessoa está online. Você digita mensagens uns aos outros em uma pequena janela que aparece em ambas as telas.

A maioria dos programas de mensagens instantâneas fornecer esses recursos:
Envie mensagens instantâneas notas e para trás com um amigo que está online
Chat – Crie uma sala de bate-papo com os amigos ou colegas de trabalho
Links da Web – Compartilhar links para os seus sites favoritos
Vídeo – Enviar e ver vídeos e conversar cara a cara com os amigos
Imagens – Olhe para uma imagem armazenada no computador do seu amigo
Sons – sons de jogo para seus amigos
Arquivos – Compartilhe arquivos por enviá-los diretamente para os seus amigos
Discussão – Use a Internet em vez de um telefone para realmente falar com os amigos
Streaming de conteúdo – cotações de ações em tempo real ou quase em tempo real e notícias
Capacidades móveis – Enviar mensagens instantâneas a partir do seu telefone celular

Comunicação Assíncrona e Síncrona

A comunicação síncrona é a comunicação direta, onde os comunicadores são tempo sincronizado. Isto significa que todas as partes envolvidas na comunicação estão presentes ao mesmo tempo. Isto inclui, mas não se limita a, uma conversa de telefone (não mensagens de texto), uma reunião do conselho da empresa, um evento sala de chat e mensagens instantâneas. Comunicação assíncrona não exige que todas as partes envolvidas na comunicação para estar presente ao mesmo tempo. Alguns exemplos são o e-mail, fóruns de discussão, blogs e mensagens de texto em telefones celulares. Em distância (especificamente online) comunicação assíncrona educação é o método (às vezes a única) de comunicação importante. Normalmente, usamos diferentes fóruns de discussão em cada classe com cada um tendo sua própria finalidade.

 

Bibliografia:

http://pt.wikipedia.org/wiki/Internet_Message_Access_Protocol
http://computer.howstuffworks.com/e-mail-messaging/instant-messaging.htm
http://spam.abuse.net/overview/whatisspam.shtml
http://pt.wikipedia.org/wiki/E-mail
http://wiki.answers.com/Q/What_is_asynchronous_communication
http://www.webopedia.com/TERM/A/asynchronous.html
http://pt.wikipedia.org/wiki/Post_Office_Protocol
http://www.asaecenter.org/Resources/articledetail.cfm?itemnumber=13572

Blockquote, tag img, strong, resolucao de imagens multiplos formatos

Blockquote:

A tag <blockquote> Como o próprio nome já diz, é uma “citação em bloco”. Foi criada principalmente para identificar algo que não é de sua autoria, uma frase famosa, uma entrevista, trecho de outro blog/site… Aqui vai um exemplo bacana de <blockquote>:

“Eu sou apenas um rapaz
Latino-Americano
Sem dinheiro no banco
Sem parentes importantes
E vindo do interior…”Belchior

Quando criar uma nova postagem clic na opção (Citação), e escreva entre<blockquote >   </blockquote>. Veja abaixo:

<blockquote> Escreva o seu texto </blockquote>

Blockquote ainda possui um atributo chamado cite. Cite serve para determinar a página fonte da citação, ou seja, de qual página da internet veio tal citação. Para demonstrar o uso de citações de parágrafo, abaixo está uma pequena parte do discurso de J. Kennedy sobre a corrida espacial retirada do site LetrasMusicas.

...
<BLOCKQUOTE CITE="http://letras.mus.br/macklemore/thrift-shop-feat-wanz/traducao.html">
 <P>
I’m gonna pop some tags
Only got 20 dollars in my pocket
I, I, I’m hunting, lookin’ for a come-up
This is fucking awesome.
</p></BLOCKQUOTE>
...

A tag

 IMG

O código HTML5  nos possibilita facilmente inserir imagens em páginas, assim como configurá-las.

Usamos a tag IMG para isso. Essa tag possui vários atributos que serão vistos logo abaixo.

Src

Src é o atributo mais importante da tag IMG.

O atributo src é responsável em informar onde está a imagem. Essa informação é dada por meio da uma URL, como no exemplo abaixo.

...
<IMG SRC="laranja.png" />
...

Altura e largura

(Width e Height)

Um dos principais atributos da tag IMG também são width e height. Esses atributos controlam a largura (width) e a altura (height) que a imagem será exibida na tela.

A imagem que está sendo utilizada como exemplo acima tem 350 pixels de largura por 355 pixels de altura.

...
<P ALIGN="center">Imagem Original (350x355)<BR /><IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" /></P>
<P ALIGN="center">Imagem Original (150x150)<BR /> <IMG SRC="computador.jpg" WIDTH="150" HEIGHT="150" /></P>
<P ALIGN="center">Imagem Original (300x150)<BR /> <IMG SRC="computador.jpg" WIDTH="350" HEIGHT="150" /></P>
...

Imagem Original (350×355)

Imagem Original (150×300)

Imagem Original (300×150)

Imagens Múltiplos Formatos

PNG (Portable Network Graphics,) é um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados.GIF

A motivação para criar o formato PNG surgiu do início de 1995, quando veio a público que o algoritmo de compressão de dados LZW, utilizado no GIF havia sido patenteado pela Unisys. Havia também outros problemas com a GIF que tornaram a substituição desejável, como, por exemplo, a sua limitação a 256 cores num momento em que computadores com capacidade para exibir uma gama maior de cores tornavam-se comuns. Embora o  permita animações, foi decidido que o PNG deveria ser um formato estático de imagem. Um formato “companheiro” chamado MNG foi definido para animação.

Imagem PNG
Tamanho da imagem: 128 KB

JPEG (ou JPG) é um método comum usado para comprimir imagens fotográficas. O grau de redução pode ser ajustado, o que permite a você escolher o tamanho de armazenamento e seu compromisso com a qualidade da imagem. Geralmente se obtém uma compressão com pouco perceptível perda na qualidade da imagem.

Além de ser um método de compressão, é frequentemente considerado como um formato de arquivo. JPEG / Exif é o formato de imagem mais comum usado por câmeras digitais e outros dispositivos de captura de imagem, juntamente de JPEG / JFIF, que também é um outro formato para o armazenamento e transmissão de imagens na World Wide Web. JPEG / JFIF é o formato usado para armazenar fotos e transmiti-las através da Internet. Geralmente desconsideram-se os formatos e dizemos simplesmente JPEG.

Imagem JPG
Tamanho da imagem: 58.2 KB

GIF (Graphics Interchange Format,) é um formato de imagem de mapa de bits muito usado na world wide web, quer para imagens fixas, quer para animações.

Um GIF animado é o termo dado às animações formadas por várias imagens GIF compactadas numa só. É utilizado para compactar objetos em jogos eletrônicos, para usar como emoticon em mensageiros instantâneos e para enfeitar sites na Internet.

Imagem GIF
Tamanho da imagem: 490 KB

SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como gráficos vetoriais escaláveis. Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada. Umas das principais características dos gráficos vetoriais, é que não perdem qualidade ao serem ampliados. A grande diferença entre o SVG e outros formatos vetoriais, é o fato de ser um formato aberto, não sendo propriedade de nenhuma empresa. Foi criado pela World Wide Web Consortium, responsável pela definição de outros padrões, como o HTML e o XHTML.

Bibliografia:

http://www.tiexpert.net/programacao/web/html/blockquote.php
http://en.support.wordpress.com/code/posting-source-code/
http://dany-place.blogspot.com.br/2013/01/blockquote-com-efeito.html
http://www.helenfernanda.com.br/2008/11/quando-e-como-usar-blockquote.html
http://www.tiexpert.net/programacao/web/html/img.php
http://pt.wikipedia.org/wiki/JPG
http://pt.wikipedia.org/wiki/PNG
http://pt.wikipedia.org/wiki/SVG
http://pt.wikipedia.org/wiki/GIF

Download pagina editada

Baixe aqui: https://www.box.com/s/cdidurqvr8soypy8xm23

ou

CSS – FOLHAS DE ESTILO

 

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Com o CSS é possível ligar estilos aos comandos HTML. Dessa forma seu código fica muito menor e você ainda pode definir o estilo de um site inteiro com um único arquivo(que para nos desenvolvedor é uma maravilha hehehehehe). Com o CSS ou melhor folha de estilo em cascata, dizemos que ele serve para organizar melhor a linguagem de marcacao, havendo assim um melhor edição da pagina em sí.

Fonte: uol.com.br

Um exemplo de CSS no site da uol : AQUI

A sintaxe básica CSS: Suponha que desejamos uma cor de fundo vermelha para a página web:

Fonte: http://bit.ly/XgdLMW

<ul>	Um efeito muito utilizado em qualquer documento é a caracterização de listas. Listas não ordenadas são determinadas pela TAG<ul>. São marcadas com caracteres simbólicos como círculos, quadrados e discos.
<ol>	Um efeito muito utilizado em qualquer documento é a caracterização de listas. Listas ordenadas são determinadas pela TAG<ol>. São marcadas com caracteres como números, letras e algarismos romanos.
<meta charset=”UTF – 8″>	O conjunto de caracteres para documentos HTML, comportam-se por padrão (internamente) com uso da codificação Unicode. Desde que agentes de usuário e servidores estejam em concordância, pode ser usada qualquer codificação que possa ser convertida para Unicode.
<link rel=”stylesheet” href=”estilo . css”>	O caminho para a folha de estilos é indicado no atributo href.A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.

Bibliografia:
http://pt-br.html.net/tutorials/css/lesson2.php
http://www.codigofonte.net/dicas/css/83_css-folhas-de-estilo-em-cascata
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.ufpa.br/dicas/htm/htm-esti.htm
http://msdn.microsoft.com/pt-br/library/240ww6sz(v=vs.80).aspx
http://www.ebah.com.br/content/ABAAAAZtQAB/folha-estilo-css

Como funciona internet

Bibliografia: 

http://computer.howstuffworks.com/arpanet1.htm
http://www.blogsoestado.com/mauricioaraya/2012/11/12/infografico-explica-como-funciona-a-internet/
http://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_Internet
http://www.iconfinder.com/
http://info.abril.com.br/noticias/internet/brasil-atinge-94-2-milhoes-de-pessoas-conectadas-14122012-32.shl
http://www.yaslip.com.br/internauta-brasileiro-gasta-um-dia-inteiro-na-internet.php

Estrutura básica de doctype e charsets, Modelos de conteúdo e novos elementos e atributos.

Olá bem vindo ao meu blog ! Hoje ensinarei algumas coisinha interessante de como iniciar o tão poderoso HTML5 !

Leitor ao ver códigos de html5 !

Não fique assustado !

Antes do HTML5, existiram HTML4, HTML3.0, HTML 2.0, HTML+,para ser mais simples: O HTML5 é a nova versão do HTML4.

O código HTML e suas estruturas básicas !

• O Doctype

O doctype deve ser o começo para montar uma página de html5, ele começa na primeira linha.Chamado de Document Type Definition (DTD), o Doctype é uma exigência dos web standards, e diz ao browser como processar o documento, razão pela qual deverá ser a primeira coisa a colocar no documento HTML.

Caso  não utilizar um Doctype ou colocar um qualquer outro código antes do tipo de documento, poderá não funcionar muito bem em todos os browsers.

Um exemplo onde é inserido o Doctype:

Doctype sendo utilizado.

• O elemento HTML

Você deve escrever suas tags em um documento HTML. Um website é constituído por um ou mais documentos HTML. Quando você navega na Web, você está abrindo diferentes documentos HTML.

1. O atributo LANG

É necessário para que os user-agents(os browser) saibam qual a linguagem principal do documento. Com isso, leitores de tela que suportam diferentes linguagens lerão o trecho de acordo com o idioma indicado e não de acordo com o idioma padrão ou o que foi definido para todo o documento na tag <html>.

• HEAD

A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados ou meta-tags.

1. Metatag Charset

O titulo é onde é  aramazenado o titulo de sua página,onde ficara na barra do navegador,essa função precisa chamar outra tag para começar a função assim como os parâmetros e os scripts.

Exemplo:

<meta charset="utf-8">

A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com o maior número de caracteres possível. Atualmente a maioria dos sistemas e browsers utilizados por usuários suportam plenamente Unicode.Exemplos: “UTF-8” e “UTF-26”

• LINK
  

  O poderoso HTML5

   

Há dois tipos de Tag links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.

No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
<link rel="stylesheet" type="text/css" href="estilo.css">
O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.

Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">
Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.

Leitor ao final deste post.

Não entendeu nada o que eu disse?

calma ate o final desse post você ira saber tudinho, você é iniciante aprendera rápido, é só se dedicar !

 

Os modelos de conteúdo:

>Há pequenas regras básicas que nós já conhecemos em que definem onde os elementos podem ou não estar. Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos: elementos de linha e de bloco.Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos:

a, strong, em, img, input, abbr, span.

Categorias

Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares.Exemplos:

• Metadata content: base, link, script, title, style;
• Flow content: a, b, h1, h2, h3, strong,  label, time;
• Sectioning content: article, anside, nav, sction;
• Heading content: h1, h2, h3, h4, h5, h6;
• Phrasing content: audio, br, button, b, i;
• Embedded content: img, audio, video, object;
• Interactive content: inframe, video, menu, label.

Para saber mais desse assunto acessem:  http://www.w3c.br/cursos/html5/conteudo/capitulo4.html

MUHAHAHAHAHAH

Pronto Paulo, agora posso ir embora? A resposta é não !

Porquê a melhor parte começa agora !

Nós falaremos qual foi o novos atributos que o HTML5 tem a nos oferecer !

Novos Atributos:

O HTML5 trouxe uma série de elementos que nos ajudam a definir setores principais no documento HTML. Exemplo diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho. Sendo assim o HTML5 os buscadores conseguem vasculhar o código de maneira mais eficaz. Procurando e guardando informações mais exatas e levando menos tempo para estocar essa informação.

Aqui uma lista dos novos elementos e atributos incluídos no HTML5:

section	A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.
nav	O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.
article	O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.
aside	O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O asidepode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.
header	O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.
footer	O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.
time	Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano.

E chega ao fim o primeiro post, foi divertido escrever o blog, até a próxima !

Até logo !

Bibliografia:

http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
http://tableless.com.br/html-5-novos-elementos-e-atributos/#.UTIwrjAQYuc
http://pt.scribd.com/doc/102453612/HTML5-e-CSS3-Com-Farinha-e-Pimenta-Diego-Eis-e-Elcio-Ferreira
http://tableless.com.br/html5/?chapter=5
http://www.w3c.br/cursos/html5/conteudo/capitulo3.html
http://www.devmedia.com.br/o-que-e-o-html5/25820
http://warau.nied.unicamp.br/warauv2/?q=node/14
http://pt-br.html.net/tutorials/html/lesson3.php
http://designshow.the-up.com/t340-funcoes-da-tag-head
http://pt.wikipedia.org/wiki/UTF-8