HTML: Encode UTF-8

By | Criação de Desenvolvimento de Sites, Desenvolvimento de Software | Seja o primeiro a comentar!

Sabe quando sua página troca acentuações por caracteres bem loucos? Este é um problema simples de explicar e vou tentar mostrar as regras que se aplicam quando o browser faz o download de um HTML, como escolher um encode e como usá-lo.

Existem três formas de declararmos o encode do arquivo:

1 – Via cabeçalho HTTP

Content-Type: text/html; charset=utf-8

Esse aí é o cara que manda. Se declararmos o encode no parâmetro charset do Content-Type, as outras duas opções serão ignoradas. Hoje em dia a customização no servidor é praticamente zero por parte do desenvolvedor, pois a maioria dos servers e banco de dados já vem com essa configuração.

2 – Via Meta Tag

<!-- HTML 4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- HTML5 -->
<meta charset="utf-8"/>

Acredito que a maioria dos desenvolvedores utilizam essa técnica. Muitas vezes já vem nos snnipets que encontramos em nosso editores e ou até mesmo naqueles templates gerados via scaffolding (ex.: yoeman).

É uma boa prática colocar ele logo após a abertura da tag html. Pois se o encode não estiver disponível no cabeçalho da requisição, o browser irá procurar por essa informação nos primeiros 1024 bytes do arquivo. Se ele não encontrar, será utilizado o UTF-8.

Segundo a w3techs.com que é especialista em um monte de pesquisas sobre a web, o formato UTF-8 é utilizado em cerca de 80% das páginas web. Mas vamos falar um pouco mais do UTF-8 depois.

3 – Via XML

<?xml version="1.0" encoding="utf-8"?>

Esse cara só serve para páginas XHTML e deve ser colocado antes do DOCTYPE.

Por que tanto UTF-8?

Em 2014 foi constatado que cerca de 83,6% das páginas web estavam utilizando esse encode. Sua popularização se deu pelo fato dele reconhecer bastante caracteres (tipo uns 65.536).

Tem uma galera por aí usando o ISO-8859-1 por que ele é mais performático chegando á cada caractere pesar metade do seu correspondente no UTF-8. Mas aí você fica com algumas opções de caracteres á menos (você se limita á usar 256 caracteres diferentes. Pouco né?).

Esse segundo encode apareceu nesse mesmo relatório em segundo lugar com 8.3% das páginas. Ele não é uma péssima opção, uma vez que ele cobre todos os caracteres do nosso idioma. Mas se você for trabalhar em uma aplicação com chances de rolar internacionalização, aconselho á usar o UTF-8 pra ter uma transição natural sem maiores problemas.

Bala de Prata?

Tudo isso é muito chato ou demais pra minha cabeça. Quero algo mais simples.

Então tá. Vamos ver…

Você pode ignorar qualquer encode e utilizar entidades HTML.

Escrever Sabão garante que o usuário vai ler _Sabão_ e evita que algum navegador por aí mostre na tela _Sabão_ ou Sab�o.

Legal! Quero ver dar errado agora depois dessa!

Mas calma jovem, tudo tem um preço. Dá uma olhada na lista de pontos negativos:

  1. Além de escrever mais caracteres você terá que aprender todas essas entidades (ou a maioria).
  2. Uma “alteraçãozinha de 2 minutos” pra um desenvolvedor que não está muito familiarizado se torna algo com uma certa complexidade desnecessária.
  3. Sua semântica diminui, uma vez que o conteúdo do seu código deixa de ter uma alta facilidade de entendimento.
  4. Isso vai exigir mais caracteres, o que aumenta nem que seja só um pouquinho o tráfego na rede.
  5. Não é uma técnica muito popular devido aos pontos negativos anteriores á esse.
  6. Você corre risco de sofrer bullying no trampo depois de seus colegas lerem teu código.

Eu até sei um ou outro de cabeça, tipo o ç e o &, mas prefiro mil vezes digitar ç e o &. Mais fácil né não?

Charsets e Encodes – Tabelas de caracteres

By | Criação de Desenvolvimento de Sites, Desenvolvimento de Software | Seja o primeiro a comentar!

Entenda como funciona a tabela de caracteres e encodes no HTML.

Quando você escreve um documento HTML (ou qualquer outra linguagem baseada em SGML) é necessário que especifiquemos o Charset utilizado. O Charset é o conjunto de caracteres utilizados para escrever o documento. Um jogo de caracteres consiste em ter 1) repertório com caracteres e 2) uma posição de referência para cada um dos caracteres no repertório. Cada caractere é identificado e localizado por este código de posição. Por exemplo, na tabela ASCII, as posições 65, 66 e 67 se referem às letras A, B e C respectivamente.

Abaixo, veja a tabela de caracteres ASCII:

  • 00 – (NUL)
  • 01 – (SOH)
  • 02 – (STX)
  • 03 – (ETX)
  • 04 – (EOT)
  • 05 – (ENQ)
  • 06 – (ACK)
  • 07 – (BEL)
  • 08 – (BS)
  • 09 – (HT)
  • 10 – (LF)
  • 11 – (VT)
  • 12 – (FF)
  • 13 – (CR)
  • 14 – (SO)
  • 15 – (SI)
  • 16 – (DLE)
  • 17 – (D1)
  • 18 – (D2)
  • 19 – (D3)
  • 20 – (D4)
  • 21 – (NAK)
  • 22 – (SYN)
  • 23 – (ETB)
  • 24 – (CAN)
  • 25 – (EM)
  • 26 – (SUB)
  • 27 – (ESC)
  • 28 – (FS)
  • 29 – (GS)
  • 30 – (RS)
  • 31 – (US)
  • 32 – (Espaço)
  • 33 – !
  • 34 – “
  • 35 – #
  • 36 – $
  • 37 – %
  • 38 – &
  • 39 – ‘
  • 40 – (
  • 41 – )
  • 42 – *
  • 43 – +
  • 44 – ,
  • 45 – –
  • 46 – .
  • 47 – /
  • 48 – 0
  • 49 – 1
  • 50 – 2
  • 51 – 3
  • 52 – 4
  • 53 – 5
  • 54 – 6
  • 55 – 7
  • 56 – 8
  • 57 – 9
  • 58 – :
  • 59 – ;
  • 60 – <
  • 61 – =
  • 62 – >/
  • 63 – ?
  • 64 – @
  • 65 – A
  • 66 – B
  • 67 – C
  • 68 – D
  • 69 – E
  • 70 – F
  • 71 – G
  • 72 – H
  • 73 – I
  • 74 – J
  • 75 – K
  • 76 – L
  • 77 – M
  • 78 – N
  • 79 – O
  • 80 – P
  • 81 – Q
  • 82 – R
  • 83 – S
  • 84 – T
  • 85 – U
  • 86 – V
  • 87 – W
  • 88 – X
  • 89 – Y
  • 90 – Z
  • 91 – [
  • 92 – \
  • 93 – ]
  • 94 – ^
  • 95 – _
  • 96 – `
  • 97 – a
  • 98 – b
  • 99 – c
  • 100 – d
  • 101 – e
  • 102 – f
  • 103 – g
  • 104 – h
  • 105 – i
  • 106 – j
  • 107 – k
  • 108 – l
  • 109 – m
  • 110 – n
  • 111 – o
  • 112 – p
  • 113 – q
  • 114 – r
  • 115 – s
  • 116 – t
  • 117 – u
  • 118 – v
  • 119 – w
  • 120 – x
  • 121 – y
  • 122 – z
  • 123 – {
  • 124 – |
  • 125 – }
  • 126 – ~
  • 127 – (DELETE)

A tabela de caracteres ASCII (Código Padrão Americano para Intercâmbio de Informações) foi a primeira tabela utilizada em larga escala. O computador foi desenvolvido nos Estados Unidos. No vocabulário americano, não existem acentos, além disso, era um código de 7 bits, e não 8. Ou seja, ao invés de 256 posições, a tabela ASCII tinha apenas 128 posições – como você sabe, tudo nos computadores são um grupo de zeros (0) e uns (1) chamados de bits. Esses zeros e uns formam grupos de oito em oito que chamados de bytes e representam um número entre 0 e 255. Como as imagens, áudio, vídeos, programas e tudo o que temos nos sistemas de hoje, os caracteres que aparecem na sua tela são grupos de zeros e uns.

O computador se popularizou e a necessidade de utilizar acentos e outros tipos de caracteres (Chineses, por exemplo) tornou-se um problema.

Hoje, a maioria das tabelas utilizadas foram criadas suprindo as necessidades de um idioma específico, por este motivo elas se tornaram muito limitadas.

Por exemplo, se você estiver escrevendo um documento utilizando a tabela de caracteres chinesa, você não poderá escrever algo em hebraico neste documento.

Por conta disso muitos problemas podem surgir, por exemplo, seria impossível criar um curso online de hebraico para chineses. Será também um problema se você tiver que fazer um site ou sistema com suporte a diversos idiomas. Por exemplo, um sistema de blog projetado para uso internacional. Isso por que a posição dos caracteres varia de tabela para tabela. Dois codificadores podem usar o mesmo número para dois caracteres diferentes ou usar números diferentes para o mesmo caractere.

A tabela de caractéres Unicode – UTF-8

A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. 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. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.

O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua.

Antes de começar, você precisa saber

Há algumas recomendações que você precisa saber antes de começar a mudar seu site para Unicode.

Existem três principais maneiras para você indicar a seu site qual tabela de caractere você está utilizando:

  1. Cabeçalho HTTP Content-type – Desta forma é necessário configurar o servidor web, algo que não é fácil nem para qualquer um. Dependendo de onde você trabalha, se for em um lugar grande, com vários sites neste mesmo servidor, pode ser a melhor maneira porque você terá que fazer isso uma vez. Caso for vários projetos com servidores diferentes isso pode ser uma dor de cabeça.
  2. Metatag Content-type – Colocando este código no HEAD de seu documento, ele avisará para o browser localmente e na hora da renderização do site qual Charset ele deve utilizar para exibir os caracteres. Esta é uma ótima escolha caso você não tenha acesso aos servidores. Certamente é a maneira mais simples de ser utilizada. “Quando você escreve um documento HTML (ou qualquer outra linguagem baseada em SGML) é necessário que especifiquemos o Charset utilizado. O Charset é o conjunto de caracteres utilizados para escrever o documento. Um jogo de caracteres consiste em ter 1) repertório com caracteres e 2) uma posição de referência para cada um dos caracteres no repertório. Cada caractere é identificado e localizado por este código de posição. Por exemplo, na tabela ASCII, as posições 65, 66 e 67 se referem às letras A, B e C respectivamente. Abaixo, veja a tabela de caracteres ASCII:
  • 00 – (NUL)
  • 01 – (SOH)
  • 02 – (STX)
  • 03 – (ETX)
  • 04 – (EOT)
  • 05 – (ENQ)
  • 06 – (ACK)
  • 07 – (BEL)
  • 08 – (BS)
  • 09 – (HT)
  • 10 – (LF)
  • 11 – (VT)
  • 12 – (FF)
  • 13 – (CR)
  • 14 – (SO)
  • 15 – (SI)
  • 16 – (DLE)
  • 17 – (D1)
  • 18 – (D2)
  • 19 – (D3)
  • 20 – (D4)
  • 21 – (NAK)
  • 22 – (SYN)
  • 23 – (ETB)
  • 24 – (CAN)
  • 25 – (EM)
  • 26 – (SUB)
  • 27 – (ESC)
  • 28 – (FS)
  • 29 – (GS)
  • 30 – (RS)
  • 31 – (US)
  • 32 – (Espaço)
  • 33 – !
  • 34 – “
  • 35 – #
  • 36 – $
  • 37 – %
  • 38 – &
  • 39 – ‘
  • 40 – (
  • 41 – )
  • 42 – *
  • 43 – +
  • 44 – ,
  • 45 – –
  • 46 – .
  • 47 – /
  • 48 – 0
  • 49 – 1
  • 50 – 2
  • 51 – 3
  • 52 – 4
  • 53 – 5
  • 54 – 6
  • 55 – 7
  • 56 – 8
  • 57 – 9
  • 58 – :
  • 59 – ;
  • 60 – <
  • 61 – =
  • 62 – >/
  • 63 – ?
  • 64 – @
  • 65 – A
  • 66 – B
  • 67 – C
  • 68 – D
  • 69 – E
  • 70 – F
  • 71 – G
  • 72 – H
  • 73 – I
  • 74 – J
  • 75 – K
  • 76 – L
  • 77 – M
  • 78 – N
  • 79 – O
  • 80 – P
  • 81 – Q
  • 82 – R
  • 83 – S
  • 84 – T
  • 85 – U
  • 86 – V
  • 87 – W
  • 88 – X
  • 89 – Y
  • 90 – Z
  • 91 – [
  • 92 – \
  • 93 – ]
  • 94 – ^
  • 95 – _
  • 96 – `
  • 97 – a
  • 98 – b
  • 99 – c
  • 100 – d
  • 101 – e
  • 102 – f
  • 103 – g
  • 104 – h
  • 105 – i
  • 106 – j
  • 107 – k
  • 108 – l
  • 109 – m
  • 110 – n
  • 111 – o
  • 112 – p
  • 113 – q
  • 114 – r
  • 115 – s
  • 116 – t
  • 117 – u
  • 118 – v
  • 119 – w
  • 120 – x
  • 121 – y
  • 122 – z
  • 123 – {
  • 124 – |
  • 125 – }
  • 126 – ~
  • 127 – (DELETE)

A tabela de caracteres ASCII (Código Padrão Americano para Intercâmbio de Informações) foi a primeira tabela utilizada em larga escala. O computador foi desenvolvido nos Estados Unidos. No vocabulário americano, não existem acentos, além disso, era um código de 7 bits, e não 8. Ou seja, ao invés de 256 posições, a tabela ASCII tinha apenas 128 posições – como você sabe, tudo nos computadores são um grupo de zeros (0) e uns (1) chamados de bits. Esses zeros e uns formam grupos de oito em oito que chamados de bytes e representam um número entre 0 e 255. Como as imagens, áudio, vídeos, programas e tudo o que temos nos sistemas de hoje, os caracteres que aparecem na sua tela são grupos de zeros e uns.

O computador se popularizou e a necessidade de utilizar acentos e outros tipos de caracteres (Chineses, por exemplo) tornou-se um problema.

Hoje, a maioria das tabelas utilizadas foram criadas suprindo as necessidades de um idioma específico, por este motivo elas se tornaram muito limitadas.

Por exemplo, se você estiver escrevendo um documento utilizando a tabela de caracteres chinesa, você não poderá escrever algo em hebraico neste documento.

Por conta disso muitos problemas podem surgir, por exemplo, seria impossível criar um curso online de hebraico para chineses. Será também um problema se você tiver que fazer um site ou sistema com suporte a diversos idiomas. Por exemplo, um sistema de blog projetado para uso internacional. Isso por que a posição dos caracteres varia de tabela para tabela. Dois codificadores podem usar o mesmo número para dois caracteres diferentes ou usar números diferentes para o mesmo caractere.

A tabela de caractéres Unicode – UTF-8

A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. 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. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.

O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua.

Antes de começar, você precisa saber

Há algumas recomendações que você precisa saber antes de começar a mudar seu site para Unicode.

Existem três principais maneiras para você indicar a seu site qual tabela de caractere você está utilizando:

  1. Cabeçalho HTTP Content-type – Desta forma é necessário configurar o servidor web, algo que não é fácil nem para qualquer um. Dependendo de onde você trabalha, se for em um lugar grande, com vários sites neste mesmo servidor, pode ser a melhor maneira porque você terá que fazer isso uma vez. Caso for vários projetos com servidores diferentes isso pode ser uma dor de cabeça.
  2. Metatag Content-type – Colocando este código no HEAD de seu documento, ele avisará para o browser localmente e na hora da renderização do site qual Charset ele deve utilizar para exibir os caracteres. Esta é uma ótima escolha caso você não tenha acesso aos servidores. Certamente é a maneira mais simples de ser utilizada.“
  3. Através do prolog xml – O prolog XML é utilizado em documentos XML ou XHTML para indicar a versão e a tabela de caracteres daquele documento. <? xml version="1.0" encoding="UTF-8" ?> Não é uma boa utilizar este prolog por conta do chaveamento do Internet Explorer 6 para Quirks Mode. Quando o prolog é utilizado, o Internet Explorer 6 renderiza os sites como o Internet Explorer 5, trazendo muitos problemas de compatibilidade. Não recomendo.

Outro ponto importante é não esquecer de salvar seu documento no formato da tabela que você indicou. Não adianta nada indicar que código que está utilizando a tabela de caracteres UTF-8 e seu editor salvar seus documentos com a tabela ISO-8859-1. Isso fará com que os caracteres de seu documento apareçam corrompidos. Por isso, ao definir qual será a tabela utilizada no projeto (recomendo sempre UTF-8), defina como seu editor irá salvar seus documentos. Todos os editores de código hoje em dia tem essa opção, basta procurar. Não adianta também você salvar seus arquivos em UTF-8 e o resto da equipe continuar utilizando ISO-8859-1. Os arquivos irão corromper da mesma maneira. É uma decisão que a equipe inteira deve tomar para não haver retrabalho e dor de cabeça.

Se um projeto já está no ar, é bom fazer uma análise para ter certeza se vale a pena ou não mudar a tabela de um projeto que já está no ar e funcionando. Recomendo que esse novo padrão sempre comece a ser utilizado em novos projetos. Mesmo assim, um bom programador pode fazer um script que converta a tabela de caracteres de um diretório inteiro.

O importante é garantir que seu site aqui seja visto da maneira correta em outros lugares do mundo. Isso é importante para você e seu cliente.

Como transformar sua loja física em virtual?

By | Lojas Virtuais (E-commerce), Notícias | Seja o primeiro a comentar!

O poder do e-commerce também está influenciando as lojas físicas. Saiba como migrar e aliar os dois formatos.

Lojas físicas trazem diferentes despesas, como aluguel, luz, telefone, IPTU e outros gastos que acabam influenciando o fluxo de caixa do e-commerce. Por outro lado, as lojas virtuais conseguem reduzir um pouco esses custos –  além de ser um formato que está crescendo cada vez mais. Leia Mais

5 tendências para o e-commerce em 2017

5 tendências para o e-commerce em 2017

By | Lojas Virtuais (E-commerce) | Seja o primeiro a comentar!

Descubra o que vai ajudar sua loja a se destacar no próximo ano.

Conhecer as principais tendências e ficar atento às mudanças do mercado é uma forma de colocar a sua loja virtual na frente da concorrência e conquistar o público.

Em 2016, diversas tecnologias e técnicas foram implementadas no universo digital, se transformando em referências para as vendas online e ganhando a atenção do consumidor. Por isso, no próximo ano, você já pode começar a explorar estratégias e incluir essas 5 tendências do e-commerce na sua abordagem. Leia Mais

mysql

Permitir acesso remoto ao Mysql no Ubuntu

By | Banco de Dados | Seja o primeiro a comentar!

Permitir acesso remoto a um servidor MySQL

Ao instalar um servidor da base de dados MySQL, por padrão ele só será acessado por aplicações que estejam na mesma máquina que o servidor, em outras palavras, não está habilitado para acesso remoto.

Neste tutorial iremos aprender a liberar o acesso remoto.

Atenção: Execute estes comando no terminal do servidor.

  1. abra um terminal e digite
    1. sudo vi /etc/mysql/my.cnf
  2. comente as linhas
    1. bind-address = 127.0.0.1
    2. skip-external-locking
  3. reinicie o servidor com o comando
    1. /etc/init.d/mysql restart
    2. sudo service mysql restart
  4. entre no prompt do mysql com o comando:
    1. mysql –u root –p
  5. Será solicitado a senha do usuário root para servidor MySQL
  6. no prompt do MySQL digite:
    1. GRANT ALL ON *.* TO [email protected]’%’ IDENTIFIED By ‘senhadoroot’;
    2. FLUSH PRIVILEGES;
  7. O comando acima irá permitir acesso a todos os bancos de dados de qualquer máquina remota ao usuário root.

OBS.: Os comandos acima foram testados no Ubuntu 10.04 Server rodando o servidor MySQL 5.1.41

Workplace by Facebook

Facebook lança Workplace, plataforma social para empresas

By | Gestão de Redes Sociais, Notícias | Seja o primeiro a comentar!

Site tem recursos do Facebook, mas está ligado aos sistemas corporativos. Acesso ao Workplace custará de US$ 1 a US$ 3 a empresas participantes.

Workplace by FacebookO Facebook anunciou o Workplace, sua plataforma social voltada para empresas, nesta segunda-feira (10). O serviço funcionou durante um ano com uma versão de teste, e já acumula com cerca de mil clientes corporativos. Leia Mais

Semana do Consumidor: mulheres superam homens em compras por dispositivos móveis

Semana do Consumidor: mulheres superam homens em compras por dispositivos móveis

By | Lojas Virtuais (E-commerce), Notícias | Seja o primeiro a comentar!

As mulheres têm mais familiaridade em fazer compras por meio de dispositivos móveis. Ao menos foi assim na Semana do Consumidor, espécie de “segunda Black Friday”, que aconteceu entre 14 e 20 de março. Elas foram responsáveis por 77,4% das compras por meio de tablets e celulares no período, segundo apontado pelo eBit. No geral, as mulheres fizeram 59,3% das compras eletrônicas na segunda semana de março de 2016. Leia Mais