Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
centralinternet:   Followers: 3 ; Following: 0

Explore centralinternet's photo albums:
Other (1)
Photos from posts (3)

Instalando certificado SSL com o letsencrypt certbot


Para instalar o certificado seguro SSL no servidor EC2 AWS da Amazon, usei o Certbot, com os comandos:

1) Instalar mod_ssl no Apache para não dar erro "Invalid command SSLEngine"
sudo a2enmod ssl

2) Baixar e instalar o Cert Bot:
git clone https://github.com/certbot/certbot
cd certbot
./certbot-auto --help

Se não rodar com os parâmetors -d e -w, vai aparecer opções do authenticate ACME CA: Colocar arquivos no webroot directory ou instalar um webserver temporário standalone Escolhi o webroot para não precisar parar o servidor web atual (Apache), mas não funcionou pois apareceu o erro:

Failed authorization procedure. (nome do meu domínio) (http-01): urn:acme:error:unauthorized :: The client lacks sufficient authorization :: Invalid response from (url do meu domínio) / Not found. 

Para corrigir o problema, rodei novamente com os parâmetros na linha de comando:

sudo ./letsencrypt-auto certonly --agree-tos --webroot -w /virtual/meu-dominio/www/ -d meu-dominio -d www.meu-dominio --debug

sudo ./letsencrypt-auto certonly --agree-tos --webroot -w /virtual/(meu-dominio 1)/www/ -d (meu dominio 1) -w /virtual/(meu domínio 2)/www/ -d www.(meu domínio 2)  --debug

Note que inclui também o subdomínio "www.", já que o let's encrypt não permite wildcards.

O "--debug" foi necessário pois o letsencrypt ainda é experimental nos servidores do ambiente cloud Amazon EC2.

Isso gerou o certificado (certificate and chain) salvo no diretório, com validade de quase 3 meses (90 dias):

/etc/letsencrypt/live/(meu domínio)/fullchain.pem

É necessário rodar novamente o script ao término do prazo de validade do certificado seguro, com o comando:
sudo ./letsencrypt-auto renew --quiet

Para apenas testar a renovação (sem renovar de verdade), pode rodar a simulação usando o parâmetro "--dry-run":
./letsencrypt-auto renew --dry-runColocar no cron:
35 15 * * 6 sudo /home/ec2-user/certbot/letsencrypt-auto renew >> /tmp/certbot-cron.log
(Isso vai rodar todo sábado as 15:35)

Não sei se ao atualizar o certificado precisa incluir também o comando para reiniciar apache:  && sudo service httpd reload

Pode rodar "cd certbot; git pull"  para garantir que está usando a versão mais recente (atualizada) do cliente Certbot.

Os arquivos .pem para configurar o Apache estão documentados aqui: http://letsencrypt.readthedocs.io/en/latest/using.html#apache

Configurei o virtualhosts.conf com os certificados para o domínio:

 SSLEngine on
 SSLCertificateKeyFile /etc/letsencrypt/live/(meu dominio)/privkey.pem
 SSLCertificateFile /etc/letsencrypt/live/(meu dominio)/fullchain.pem
 SSLCertificateChainFile /etc/letsencrypt/live/(meu dominio)/chain.pem

 

Post by centralinternet (2016-06-02 11:19)

Post your comment:

Name: Email: Site:

Dicas de HTML para mobile

Ao desenvolver aplicações para celular e tablet usando HTML5 e Javascript (web apps), alguns problemas ocorreram, mas a maioria pode ser resolvido com pequenas alterações no HTML, tornando a aplicação web mais responsiva e com melhor usabilidade em celulares e tablets.

 

Problema:
Os ícons e letras do texto aparecem muito pequenas no browser, como se a resolução da tela fosse muito alta.

Solução:
Incluir este comando meta viewport no início da página html:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Isso faz com que o browser abra a tela como se estivesse em resolução menor. Por exemplo no meu telefone celular Motorola Moto-G Android, isso fez o conteúdo html abrir como em um browser estivesse com a largura de apenas 360 pixels, fazendo o texto ficar grande e as imagens também.
Essa é a melhor dia para o problema do site que aparece muito pequeno no celular. Estou usando esse meta viewport na maioria das páginas que estou fazendo agora, para o html ficar compatível com celular e melhorar a visualização.


Problema:
O usuário não estava conseguindo fazer zoom com os dedos (pinch) para aumentar ou diminuir o tamanho da página.

Solução:

Definir o "user-scalable=yes" no campo meta viewport. Exemplo:
<meta name="viewport" content="width=device-width, user-scalable=yes" />


Problema:
Algumas imagens ficaram muito grande, "saindo da tela".

Solução:
Definir um tamanho máximo da largura usando porcentagem ao invés de quantidade fixa em pixels.
Exemplo <img src="imagem.jpg" style="max-width: 80%">
Isso fez com que a imagem ficasse responsiva, aumentando e diminuindo o tamanho da imagem conforme resolução ou tamanho da janela do browser.


Problema:
Ao preencher um email em formulário html, o teclado não estava apropriado (ex: não aparece "arroba" nem "ponto", que são caracteres usados em emails).

Solução:
Mudar o campo de <input type=text> para <input type=email>.
Isso faz com que o teclado automaticamente mostre os campos arroba e ponto para facilitar a digitação do email. No browser do computador, essa mudanca não faz diferença, mas ao acessar por browser mobile que tem telcado na tela touchscreen, faz bastante diferença melhorando a usabilidade.
Outros campos novos de input do HTML 5 que são úteis:
<input type=url> - para campos de URL, para usuário digitar endereço do site, mostrando a terminação ".com"  e os caracteres "." e "/" (ponto e barra)
<input type=number> - para campos numéricos no formulário, faz o teclado do celular abrir mostrando os números
(não estou mais usando type=number pois no browser Chrome do PC o conteúdo deste campo não está sendo enviado (POST) caso o usuário tenha digitado qualquer caractere não-numérico)


Problema:
Ao preencher formuário em iOS (ex: iPhone e iPad), o botão "go" do teclado estava fazendo submit automaticamente, mesmo com vários campos "input" de texto ainda não preenchidos.

Solução:
Para o botão "go" não fazer submit automático no iOS, troque o campo <input type=submit> por <input type=button onclick="document.getElementById('form').submit();">, e colocar a identificação (id) no campo <form id="form">.


Problema:
Ao preencher um campo de formulário e apertar o botão "go" (no teclado do iOS), não acontece nada.

Solução:
Capturar o código do botão go e efetuar ação em Javascript. O código do botão "go" é "13" (mesmo código da tecla "enter" ou "return").

<script>
function captureGo(e) {
 if (e.keyCode == 13) {
   // defina aqui a ação desejada a ao apertar "go" ou "enter"
   return false;
 }
}
</script>
(...)
<input type=text onkeypress="captureEnter(event)">
 
Se desejar que o "enter" (ou "go") vá para o próximo campo input a ser preenchido, use jQuery e o código:
$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).nextAll("input").eq(0).focus();
    }
});

OBS: Esta solução funciona bem no teclado do Android, mas no teclado do iOS o que vai acontecer é que ao clicar "go" o teclado é fechado e não abre automaticamente selecionando o próximo campo. No iOS o usuário precisa clicar novamente (mas no próximo campo a ser preenchido), em cada campo de input do formulário. Pelo menos o "go" não faz submit do formulário antes de preencher os outros campos.

 

Post by centralinternet (2014-06-11 19:54)

Post your comment:

Name: Email: Site:

Contratar servidor para hospedagem

Estamos hospedando o servidor do Postbit no cloud da Amazon AWS (Amazon Web Services), em um computador do tipo "instância EC2".

Outras opções também poderiam ser:

1) Hospedagem de servidor "Hetzner": www.hetzner.de, eles cobram barato por boas máquinas. Temos um servidor contratado do modelo "EX 4" que é um servidor muito bom com a seguinte especificação:

  Processador: Intel Core Quad-Core i7-2600 (processador do servidor é de 8 cores de 3.40GHz)
  Memória: 16 GB DDR 3 RAM
  Discos: 2 x 3 TB SATA 6 Gb/s
  Banda Ilimitada (Se passar de 10 Terabytes de banda de utilização no mês, eles limitam a interface de rede em 10Mbits.)

2) Hospedagem de sites e hospedagem de servidor (Insite e UOL Host)

3) OHV Web Hosting: Provedor de hospedagem na Inglaterra com bons preços. Opções de hospedagem com Servidor dedicado, Servidor virtual (virtual server / VPS - Virtual Private Server), serviço de CDN para content delivery de alta performance, proteção anti-DDoS para evitar ataques, backup, monitoramento, reboot automático em caso de falha de hardware, serviço de cloud. 

4) Hospedagem do servidor na "Softlayer": Tinhamos alguns servidores neste provedor, mas o preço estava muito caro.

---

Na Soyoucanstart tem diversos servidores dedicados bem razoáveis (bom custo benefício).
 
Por 35€/mês tem um servidor SYS-IP-2, com XEON W3520. 4 cores, 8 threads, 2,66GHz, 32GB de memória ECC, 2 HDs de 2TB com soft raid: 
http://www.soyoustart.com/pt/oferecidos/sys-ip-2.xml
 
Outra alternativa é este, com um processador diferente (mesmo preço 35€/mês): Xeon E3-1225v2 4 cores, 4 threads, 3.2 GHz, 32 GB de memória não-ECC, 2 HDs de 2TB com soft raid:
http://www.soyoustart.com/pt/oferecidos/e3-sat-2.xml
 
---
 

Post by centralinternet (2012-11-29 21:10)

Post your comment:

Name: Email: Site:

Tabela ASCII

Tabela ASCII

Veja também: Tabela UNICODE

Esta tabela de caracteres ASCII contém os valores de 0 a 255 (ou #00 a #FF em hexa) e inclui a representação visual destes caracteres com letras, números, acentos, símbolos e caracteres especiais.

Tabela ASCII contendo os valores: Hexadecimal, Decimal, Octal e representação ASCII.

00 (dec=0, oct=0) =  NUL (^@)
01 (dec=1, oct=1) =  SOH (^A)
02 (dec=2, oct=2) =  STX (Start of Text; ^B)
03 (dec=3, oct=3) =  ETX (End of Text; ^C)
04 (dec=4, oct=4) =  EOT (End of Transmission; ^D)
05 (dec=5, oct=5) =  ENQ (Enquiry; ^E)
06 (dec=6, oct=6) =  ACK (Acknowledgement (positive); ^F)
07 (dec=7, oct=7) =  BEL (Bell; ^G; \a)
08 (dec=8, oct=10) =  BS (Backspace; ^H; \b)
09 (dec=9, oct=11) = 	 HT (Horizontal Tab; \t)
0a (dec=10, oct=12) = 
 LF (Line Feed; ^N; \n)
0b (dec=11, oct=13) =  VT (Vertical Tab; ^K; \v)
0c (dec=12, oct=14) =  FF (Form Feed; ^L; \f)
0d (dec=13, oct=15) = 
 CR (Carriage Return; ^M; \r)
0e (dec=14, oct=16) =  SO (Shift Out; ^N)
0f (dec=15, oct=17) =  SI (Shift In; ^O)
10 (dec=16, oct=20) =  DLE (Data Link Escape; ^P)
11 (dec=17, oct=21) =  DC1 (Device Control 1; ^Q)
12 (dec=18, oct=22) =  DC2 (Device Control 2; ^R)
13 (dec=19, oct=23) =  DC3 (Device Control 3; ^S)
14 (dec=20, oct=24) =  DC4 (Device Control 4; ^T)
15 (dec=21, oct=25) =  NAK (Negative Acknowledgement; ^U)
16 (dec=22, oct=26) =  SYN (Synchronise; ^V)
17 (dec=23, oct=27) =  ETB (End of Transmission Block; ^W)
18 (dec=24, oct=30) =  CAN (Cancel; ^X)
19 (dec=25, oct=31) =  EM (End of Medium; ^Y)
1a (dec=26, oct=32) =  SUB (Substitute; ^Z)
1b (dec=27, oct=33) =  ESC (Escape; ^[)
1c (dec=28, oct=34) =  FS (File Separator; ^\)
1d (dec=29, oct=35) =  GS (Group Separator; ^])
1e (dec=30, oct=36) =  RS (Record Separator; ^^)
1f (dec=31, oct=37) =  US (Unit Separator; ^_)
20 (dec=32, oct=40) =  SPACE
21 (dec=33, oct=41) = !
22 (dec=34, oct=42) = "
23 (dec=35, oct=43) = #
24 (dec=36, oct=44) = $
25 (dec=37, oct=45) = %
26 (dec=38, oct=46) = &
27 (dec=39, oct=47) = '
28 (dec=40, oct=50) = (
29 (dec=41, oct=51) = )
2a (dec=42, oct=52) = *
2b (dec=43, oct=53) = +
2c (dec=44, oct=54) = ,
2d (dec=45, oct=55) = -
2e (dec=46, oct=56) = .
2f (dec=47, oct=57) = /
30 (dec=48, oct=60) = 0
31 (dec=49, oct=61) = 1
32 (dec=50, oct=62) = 2
33 (dec=51, oct=63) = 3
34 (dec=52, oct=64) = 4
35 (dec=53, oct=65) = 5
36 (dec=54, oct=66) = 6
37 (dec=55, oct=67) = 7
38 (dec=56, oct=70) = 8
39 (dec=57, oct=71) = 9
3a (dec=58, oct=72) = :
3b (dec=59, oct=73) = ;
3c (dec=60, oct=74) = <
3d (dec=61, oct=75) = =
3e (dec=62, oct=76) = >
3f (dec=63, oct=77) = ?
40 (dec=64, oct=100) = @
41 (dec=65, oct=101) = A
42 (dec=66, oct=102) = B
43 (dec=67, oct=103) = C
44 (dec=68, oct=104) = D
45 (dec=69, oct=105) = E
46 (dec=70, oct=106) = F
47 (dec=71, oct=107) = G
48 (dec=72, oct=110) = H
49 (dec=73, oct=111) = I
4a (dec=74, oct=112) = J
4b (dec=75, oct=113) = K
4c (dec=76, oct=114) = L
4d (dec=77, oct=115) = M
4e (dec=78, oct=116) = N
4f (dec=79, oct=117) = O
50 (dec=80, oct=120) = P
51 (dec=81, oct=121) = Q
52 (dec=82, oct=122) = R
53 (dec=83, oct=123) = S
54 (dec=84, oct=124) = T
55 (dec=85, oct=125) = U
56 (dec=86, oct=126) = V
57 (dec=87, oct=127) = W
58 (dec=88, oct=130) = X
59 (dec=89, oct=131) = Y
5a (dec=90, oct=132) = Z
5b (dec=91, oct=133) = [
5c (dec=92, oct=134) = \
5d (dec=93, oct=135) = ]
5e (dec=94, oct=136) = ^ (caret - circumflex)
5f (dec=95, oct=137) = _ (underscore)
60 (dec=96, oct=140) = ` (grave accent)
61 (dec=97, oct=141) = a
62 (dec=98, oct=142) = b
63 (dec=99, oct=143) = c
64 (dec=100, oct=144) = d
65 (dec=101, oct=145) = e
66 (dec=102, oct=146) = f
67 (dec=103, oct=147) = g
68 (dec=104, oct=150) = h
69 (dec=105, oct=151) = i
6a (dec=106, oct=152) = j
6b (dec=107, oct=153) = k
6c (dec=108, oct=154) = l
6d (dec=109, oct=155) = m
6e (dec=110, oct=156) = n
6f (dec=111, oct=157) = o
70 (dec=112, oct=160) = p
71 (dec=113, oct=161) = q
72 (dec=114, oct=162) = r
73 (dec=115, oct=163) = s
74 (dec=116, oct=164) = t
75 (dec=117, oct=165) = u
76 (dec=118, oct=166) = v
77 (dec=119, oct=167) = w
78 (dec=120, oct=170) = x
79 (dec=121, oct=171) = y
7a (dec=122, oct=172) = z
7b (dec=123, oct=173) = {
7c (dec=124, oct=174) = |
7d (dec=125, oct=175) = }
7e (dec=126, oct=176) = ~
7f (dec=127, oct=177) = 
80 (dec=128, oct=200) = €
81 (dec=129, oct=201) = 
82 (dec=130, oct=202) = ‚
83 (dec=131, oct=203) = ƒ
84 (dec=132, oct=204) = „
85 (dec=133, oct=205) = …
86 (dec=134, oct=206) = †
87 (dec=135, oct=207) = ‡
88 (dec=136, oct=210) = ˆ
89 (dec=137, oct=211) = ‰
8a (dec=138, oct=212) = Š
8b (dec=139, oct=213) = ‹
8c (dec=140, oct=214) = Œ
8d (dec=141, oct=215) = 
8e (dec=142, oct=216) = Ž
8f (dec=143, oct=217) = 
90 (dec=144, oct=220) = 
91 (dec=145, oct=221) = ‘
92 (dec=146, oct=222) = ’
93 (dec=147, oct=223) = “
94 (dec=148, oct=224) = ”
95 (dec=149, oct=225) = •
96 (dec=150, oct=226) = –
97 (dec=151, oct=227) = —
98 (dec=152, oct=230) = ˜
99 (dec=153, oct=231) = ™
9a (dec=154, oct=232) = š
9b (dec=155, oct=233) = ›
9c (dec=156, oct=234) = œ
9d (dec=157, oct=235) = 
9e (dec=158, oct=236) = ž
9f (dec=159, oct=237) = Ÿ
a0 (dec=160, oct=240) =     (non-breaking space)
a1 (dec=161, oct=241) = ¡ (inverted exclamation mark)
a2 (dec=162, oct=242) = ¢ (cent sign)
a3 (dec=163, oct=243) = £ (pound sign)
a4 (dec=164, oct=244) = ¤ (currency sign)
a5 (dec=165, oct=245) = ¥ (yen sign)
a6 (dec=166, oct=246) = ¦ (broken vertical bar)
a7 (dec=167, oct=247) = § (section sign)
a8 (dec=168, oct=250) = ¨ (spacing diaeresis - umlaut)
a9 (dec=169, oct=251) = © (C) (Copyright)
aa (dec=170, oct=252) = ª (feminine ordinal indicator)
ab (dec=171, oct=253) = « (left double angle quotes)
ac (dec=172, oct=254) = ¬ (sinal de não/negação)
ad (dec=173, oct=255) = ­ ­(soft hyphen)
ae (dec=174, oct=256) = ® (R) (Registered trademark)
af (dec=175, oct=257) = ¯ (spacing macron - overline)
b0 (dec=176, oct=260) = ° (degree sign)
b1 (dec=177, oct=261) = ± (plus-or-minus sign)
b2 (dec=178, oct=262) = ² (superscript two - squared)
b3 (dec=179, oct=263) = ³ (superscript three - cubed)
b4 (dec=180, oct=264) = ´ (acento agudo - spacing acute)
b5 (dec=181, oct=265) = µ (micro sign)
b6 (dec=182, oct=266) = ¶ (pilcrow sign - paragraph sign)
b7 (dec=183, oct=267) = · (middle dot - Georgian comma)
b8 (dec=184, oct=270) = ¸ (spacing cedilla)
b9 (dec=185, oct=271) = ¹ (superscript one)
ba (dec=186, oct=272) = º (masculine ordinal indicator)
bb (dec=187, oct=273) = » (right double angle quotes)
bc (dec=188, oct=274) = ¼ (fraction one quarter)
bd (dec=189, oct=275) = ½ (fraction one half)
be (dec=190, oct=276) = ¾ (fraction three quarters)
bf (dec=191, oct=277) = ¿ (inverted question mark)
c0 (dec=192, oct=300) = À
c1 (dec=193, oct=301) = Á
c2 (dec=194, oct=302) = Â
c3 (dec=195, oct=303) = Ã
c4 (dec=196, oct=304) = Ä
c5 (dec=197, oct=305) = Å
c6 (dec=198, oct=306) = Æ
c7 (dec=199, oct=307) = Ç
c8 (dec=200, oct=310) = È
c9 (dec=201, oct=311) = É
ca (dec=202, oct=312) = Ê
cb (dec=203, oct=313) = Ë
cc (dec=204, oct=314) = Ì
cd (dec=205, oct=315) = Í
ce (dec=206, oct=316) = Î
cf (dec=207, oct=317) = Ï
d0 (dec=208, oct=320) = Ð
d1 (dec=209, oct=321) = Ñ
d2 (dec=210, oct=322) = Ò
d3 (dec=211, oct=323) = Ó
d4 (dec=212, oct=324) = Ô
d5 (dec=213, oct=325) = Õ
d6 (dec=214, oct=326) = Ö
d7 (dec=215, oct=327) = × × (multiplication sign)
d8 (dec=216, oct=330) = Ø
d9 (dec=217, oct=331) = Ù
da (dec=218, oct=332) = Ú
db (dec=219, oct=333) = Û
dc (dec=220, oct=334) = Ü
dd (dec=221, oct=335) = Ý
de (dec=222, oct=336) = Þ
df (dec=223, oct=337) = ß
e0 (dec=224, oct=340) = à
e1 (dec=225, oct=341) = á
e2 (dec=226, oct=342) = â
e3 (dec=227, oct=343) = ã
e4 (dec=228, oct=344) = ä
e5 (dec=229, oct=345) = å
e6 (dec=230, oct=346) = æ
e7 (dec=231, oct=347) = ç
e8 (dec=232, oct=350) = è
e9 (dec=233, oct=351) = é
ea (dec=234, oct=352) = ê
eb (dec=235, oct=353) = ë
ec (dec=236, oct=354) = ì
ed (dec=237, oct=355) = í
ee (dec=238, oct=356) = î
ef (dec=239, oct=357) = ï
f0 (dec=240, oct=360) = ð
f1 (dec=241, oct=361) = ñ
f2 (dec=242, oct=362) = ò
f3 (dec=243, oct=363) = ó
f4 (dec=244, oct=364) = ô
f5 (dec=245, oct=365) = õ
f6 (dec=246, oct=366) = ö
f7 (dec=247, oct=367) = ÷ (sinal de divisão)
f8 (dec=248, oct=370) = ø
f9 (dec=249, oct=371) = ù
fa (dec=250, oct=372) = ú
fb (dec=251, oct=373) = û
fc (dec=252, oct=374) = ü
fd (dec=253, oct=375) = ý
fe (dec=254, oct=376) = þ
ff (dec=255, oct=377) = ÿ

Esta tabela ASCII foi criada por Rodrigo Siqueira, através de um script para gerar a tabela com caracteres de 0 até 255.

Post by centralinternet (2012-11-21 17:12)

Post your comment:

Name: Email: Site:

Como saber se o usuário não está usando JavaScript

Quantos usuários estão com o JavaScript desativado ?

Como testar se o javascript está ativo ou não ativado? Para saber a quantidade de acesso ao seu site feito por usuários que não estão com o JavaScript habilitado no browser, coloque uma imagem dentro do comando <noscript> sendo que a imagem na verdade é um programa (ex: script em php) que armazena a informação que o usuário acessou e pode retornar uma imagem real como resposta.

Exemplo:

<noscript>
<img src="http://seu-servidor.com/sem-javascript.php">
</noscript>

Esta imagem (o programa na verdade) só é acessada por usuários que estão com o JavaScript desabilitado, pois está dentro do comando "noscript" na página html. Também é interessante passar algum parâmetro para este script que identifica qual é a página que está sendo acessada, caso este script monitore acessos a mais de uma página.

Este tipo de recurso (colocar imagem que armazena informações de quem acessa) é conhecido como "Web Bug", também é usado para saber se alguém abriu o email ou para logar informações de quem acessa uma determinada página. Muitas vezes a imagem retornada pelo script do Web Bug é apenas 1 pixel transparente, pois o objetivo principal nestes casos é logar o acesso ao arquivo (para fazer o teste do Javascript habilitado) e não realmente mostrar uma imagem.

Post by centralinternet (2012-11-17 20:39)

Post your comment:

Name: Email: Site:

Como mudar o padrão de fundo dinamicamente

Para mudar dinamicamente o padrão de fundo (background) de uma página html, utilize o comando JavaScript como este exemplo:

<script>
function muda_background(url) {

 $(body).css('background', 'url('+url+')');
}

muda_background('http://exemple.com/background.png');
</script>

Este programa define uma função que recebe como parâmetro o URL do arquivo com a imagem do padrão de fundo e altera o CSS dinamicamente para definir o novo padrão de fundo do corpo da página (body) com a imagem informada.
 

Clique na imagem para alterar o padrão de fundo desta página html:

Para ver código fonte completo em JavaScript com esta funcionalide, acesse: http://js.do/samples/change-background

É necessário ter a biblioteca jQuery carregada na página para o comando deste exemplo funcionar.

Post by centralinternet (2012-11-14 13:40)

Post your comment:

Name: Email: Site:

Como fazer objetos com transparência em HTML

Para definir a opacidade (transparência) de uma imagem, div, ou outro elemento da página HTML, utilize o comando "opacity" em CSS, como neste exemplo:

Imagem normal com opacidade 100% (sem transparência):

 

A mesma imagem, com opacidade 50%:

Comando para mostrar esta imagem transparente: <img src="image.jpg" syle="opacity: 0.5">


A mesma imagem, com opacidade 15% (ou seja, 75% de transparência):

Comando para mostrar imagem transparente: <img src="image.jpg" syle="opacity: 0.15">

A opacidade também pode ser definida para elementos que não são imagens, como blocos de textos, etc. Exemplo de como criar transparência no elemento "div", em HTML:

<div style="background-color: #ffa000; width: 550px;">
  <h3>Texto sem transparência</h3>
</div>

Resultado:

Texto sem transparência

 

<div style="background-color: #ffa000; width: 550px; opacity: 0.3;">
  <h3>Texto com transparência (30% de opacidade)</h3>
</div>

Resultado:

Texto com transparência (30% de opacidade)

 

O comando de opacidade também pode ser definido dentro da folha de estilos (CSS):

<style>
.semi-transparente {
  opacity: 0.5;
}
</style>

<h1 class="semi-transparente">Texto usando CSS com efeito semi-transparente</h1>

 

Também é possível usar comandos em javascript para redefinir a transparência de objetos dentro da página html, como neste exemplo que utiliza o comando "slider" para que o usuário possa selecionar a transparência desejada e ver a mudança em tempo real dentro da página, feita com função em javascript:

Mova o slider para mudar a opacidade/transparência

Para ver o código fonte deste exemplo (e editar se desejar testar mudanças e outros parâmetros) acesse: http://js.do/samples/slider-transparency

A compatibilidade do efeito de transparência com o comando de opacidade foi testada nos browsers Chrome, Firefox e Internet Explorer 9, sem necessidade de usar o comando antigo de filtro para criar objetos transparentes do IE que era o comando "filter:alpha(opacity=40);" (necessário para funcionar no Internet Explorer 8 ou anteriores).
OBS: O comando "slider" não funciona no IE 9.

Post by centralinternet (2012-11-14 13:02)

Quero uma imagem como background do site e vou criar uma tabela com fundo branco pro corpo do site...gostaria de deixar esse fundo branco transparente, como faz? 2013-04-29 18:18

Post your comment:

Name: Email: Site:

Como usar Web Fonts em página html


Como usar fontes personalizadas (tipos de letra e caracteres) em uma página web (Web Fonts) ?


O que são Web Fonts ?

Web Fonts são fontes (tipografia) baixadas pelo browser que podem ser utilizadas dentro de textos em uma página html, sem precisar converter a fonte para imagem. 

Adicionando Fontes - Método 1:


Utilize uma fonte disponível do banco de fontes do Google (Web Fonts do Google).

Comando HTML para acessar e usar a fonte disponível no servidor do Google:

<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>

<style>
h1 {
 font-family: 'Calligraffitti', arial, serif;
}
</style>
<h1>Fonte personalizada dentro do HTML - Web Fonte</h1>

Demonstração - Visualizar este exemplo acima no browser: http://js.do/samples/webfonts

A lista de web fontes do Google gratuitas disponíveis para uso pode ser consultada aqui:
http://www.google.com/webfonts

A opção "Analytics" desta página com fontes mostra a lista de fontes mais usadas e quantidade de fontes web já fornecidas pelo Google até o momento.


Adicionando Fontes - Método 2:

Utilize seu próprio arquivo de fonte no formato .woff (Web Open Format Font), .ttf (True Type Font), .otf (Open Type Font), .eot (
Embedded OpenType), .svg (SVG Font)

Use o comando (propriedade) do css "@font-face" para o browser carregar a fonte e disponibilizar para a página. O comando define "font-family" com o nome da fonte carregada pelo "@font-face".
Logo abaixo no exemplo, onde está "fonte_personalizada", o comando font-family define neste style (class) qual é a fonte que foi baixada e quais fontes deve usar de alternativa, caso o browser não tenha compatibilidade para web fonts. No caso deste exemplo seria Arial ou Verdana (nesta ordem de preferência) as alternativa de fonte a sere mostrada.
O comando "font-size: 5em" deste exemplo significa mostrar a fonte no tamanho 5 vezes maior do que o tamanho padrão da fonte do browser.

<style type="text/css">
@font-face {
  font-family: "Minha Fonte";
  src: url(http://www.example.com/minhafonte.ttf);
}
.fonte_personalizada { 
  font-family: "Minha Fonte", Arial, Verdana;
  font-size: 5em;
}
</style>

<p class="fonte_personalizada">Texto com fonte personalizada!</p>

As fontes usadas e embutidas desta maneira dentro da página HTML (webfonts) podem ser baixadas pelos visitantes, basta acessar o código fonte da página e ver o URL com o endereço do arquivo de origem da fonte para baixar. Por isso use fontes gratuitas quando usar Web Fonts, para evitar download de fonte de maneira ilegal.

Post by centralinternet (2012-11-14 11:14)

Post your comment:

Name: Email: Site:

Checklist para criação de sistemas na web

Dicas técnicas e de marketing digital para implementação de novos sites ou novos projetos online.
Requisitos básicos para criação de sites e aplicativos web - recomendações, normas e melhores práticas. Muito usado por startups de sucesso.

Validação da idéia a ser implementada

Autenticação de Usuário

  • O "Lembrete de Senha" deve gerar nova senha ou fazer link para gerador de nova senha
  • Página de login deve usar https para segurança e confiabilidade
  • Opção de login com Facebook, Twitter ou Gmail: Ver http://openid.net/
  •     https://www.facebook.com/developers/ -> "Criar novo aplicativo"
        http://developers.facebook.com/docs/guides/web/
  • Opção para usuário se cadastrar pois muitos preferem não logar com facebook/twitter/gmail.
  • Senhas devem ser criptografadas com bcrypt
  • Verificar normas de autenticação, recomendações e procedimentos no "Guia definitivo para autenticação de usuários através de formulários em websites": http://stackoverflow.com/questions/549/the-definitive-guide-to-forms-based-website-authentication

Cadastros e perfis em redes sociais

Integração com redes sociais e divulgação

  • Incluir botão Facebook "share button" e "like button"
  • Incluir botão do Google Plus (+1 button)
  • Incluir botão de compartilhar página no Twitter: twitter buttons (simples) e twitter buttons (avançado)
  • Divulgar e promover o site/sistema em redes sociais, continuamente.
  • Criar blog para falar sobre o site/produto/sistema.
  • Criar fórum de discussão para divulgar, obter feedback e interagir com os usuários.
  • Reputação: Cadastrar no Klout e acompanhar o score. Conectar Klout com as redes sociais: Twitter, Facebook, Google+, LinkedIn, Foursquare, YouTube, Instagram, Tumblr, Blogger, Wordpress.com, Last.fm, flickr, Quora, Yelp, posterous, livefyre, disqus, bit.ly, BranchOut.
  • Email marketing: Oferecer opção para usuário cadastrar email para receber newsletter com o InMailing. Lembre-se: "O maior valor está na sua lista de emails".
  • Enviar informativos (email marketing) periodicamente
  • Aplicar técnicas de marketing digital
  • Aplicar técnicas de Growth Hacking para crescimento da audiência

Analytics e métricas de performance

  • Adicionar código do Google Analytics no site.
  • Definir "metas" no Google Analytics. Ou utilizar outras ferramentas de Analytics (ex: ainda não testei o http://mixpanel.com/ grátis ate 25.000 data points)
  • Acompanhe o crescimento da audiência do site com o Google Analytics e com o ranking do Alexa. "Medir o crescimento ajuda a aumentar o crescimento".
  • Ver Métricas de Performance para Websites

Estrutura do site, design e meta-informações

  • Descrição do conteúdo da página (meta description): O tamanho do conteúdo do 'meta description (tag <meta name="description" content="...">) deve ser aproximadamente 155 caracteres ou 25 a 30 palavras, pois é o limite que o Google utiliza para mostrar no resultado das buscas.
  • Palavras-chave: Utilizar palavras-chave relevantes no campo "meta" keywords (tag <meta name="keywords" content="palavra-chave-1, palavra-chave-2, palavra-chave-3">). Mesmo que o Google não utilize meta keywords para indexar o site, outros programas (ex: ferramenta dig.do para análise de domínios) podem extrair e utilizar os keywords da página.
  • Traduzir a página para múltiplos idiomas e utilizar o comando do tipo <link rel="alternate" hreflang="en" href="http://www.example.com" /> para que o Google mostre o site no idioma correto. Eu uso o serviço do gengo.com para traduzir o site para outros idiomas. O Google Webmaster Tools faz alerta dizendo que deve usar "hreflang tags" (em International Targeting).
  • Dados estruturados - Defina a estrutura dos dados do site com os Rich Snippets usados pelo Google para melhorar os resultados de busca. Ver Rich snippets (microdados, microformatos, RDFa e Marcador de Dados). Exemplo de uso: Dados adicionais podem aparecer no resultado de busca, como quantidade de estrelas (ex: votação ou review de produto), imagem e dados do autor do texto, calendário de eventos, preço de produtos, etc. Google dá relevância para sites que mostram a foto do usuário no resultado das buscas.
  • Defina o mapa do site (arquivo sitemap.xml) para facilitar o Google indexar o site. Veja o que são sitemaps na ferramenta do Google para webmasters.
  • Desenvolva o site pensando em mobile e design responsivo. Ao abrir o site no celular, usuário deve ver tamanho correto do texto, não deve precisar dar zoom in/zoom out (pinch).
  •  

Conteúdo da página

  • Defina o "Call to action" (ação principal que o você deseja que o usuário faça no site) e dê destaque a esta ação. Isso pode ser feito ao criar um link/botão chamativo com o texto de call-to-action no imperativo. Ex: "Preça agora o livro" ou "Faça download da planilha" ou "Crie agora seu blog".
  • Página inicial deve mostrar "frase-resumo" do serviço oferecido.
  • Página de contato deve funcionar

Verificação de integridade

  • Testar todas as páginas com o W3C Validator http://validator.w3.org/ para encontrar e corrigir os erros mais graves de html na página.
  • Verificar site com o Google Webmaster Tools para obter dicas de melhorias de HTML, erros de rastreamento, otimização, integridade, URLs bloqueados, estatísticas, relevância das palavras-chave, etc. Veja em "Improve the search presence of (seu domínio)", onde tem várias ações e sugestões.
  • Monitorar remotamente se o servidor está no ar. Sugestão: use o sistema de monitoração remota "pingdom.com", é grátis para 1 domínio e manda email quando o servidor fica fora do ar.
  • Faça backup periódico e automatizado do site, banco de dados, logs e arquivos.

Verificação da performance

  • Arquivos estáticos devem ficar em servidor separado, para aumentar a quantidade de requisições simultâneas que o browser pode fazer e para não impactar o servidor de conteúdo dinâmico. Ex: http://static.exemple.com/imagem.gif
  • Ver artigo sobre performance e como aumentar a velocidade para carregar as páginas do site: Best Practices for Speeding Up Your Web Site

SEO - Search Engine Optimization (Otimização para sistemas de busca)

Post by centralinternet (2012-11-13 17:58)

Post your comment:

Name: Email: Site:

O comando LINK (prefetch) em HTML5

Carregar uma página ou arquivo em background serve para que o usuário tenha a impressão que o site está carregando o conteúdo muito rápido ao clicar no link.

Sintaxe:

<link rel="prefetch" href="http://dicasdefotografia.postbit.com/upload/73/post-20110916/DSC08606-Panoramica-Castelo-de-Amboise-e-Rio-Loire-1024-postbit-258.jpg">

Exemplo. Tente clicar no link para ver que a imagem abrirá instantaneamente sem precisar esperar o tempo normal de carregamento:

 

 

 

Post by centralinternet (2012-10-06 01:14)

Post your comment:

Name: Email: Site:



  Page 1 of 2 NEXT PAGE >>

| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2017 - postbit.com