Estou eu lendo o blog do Líquid quando eu vejo algo interessante.
O maluco começou a postar um curso de linux, que por enquanto esta no nível básico, mas como eu sei do que ele é capaz, sei que valerá a pena seguir o curso até o fim e ver se aprendo mais coisas com ele 
Introdução à linha de comando – parte 1 from liquuid on Vimeo.
Se vocêe curtiu, acompanhe o blog dele e veja mais
Este post faz parte do Tutorial weRgeeks de HTML.
Bom, continuando, gostaria hoje de falar sobre a formatação. Como vimos, podemos utilizar o HTML tanto para delimitar o ínicio e fim de coisas como o parágrafo, como para criar quebras de linha e outros elementos.
Hoje, veremos que os tags tambem servem, para mostrar quais trechos de um texto devem ser formatados.
<body><p>Um texto pode, dentro de um parágrafo, conter <b>negrito</b>, <i>italico</i> e/ou <strong>strong</strong></p></body>Um texto pode, dentro de um parágrafo, conter negrito, italico e/ou strong
Em qualquer parágrafo, tabela, etc…, você pode definir um texto como sendo negrito (bold) ou itálico utilizando respectivamente os tags de negrito (<b>) e itálico (<i>)
<body><p>Uma <b>pequena</b> amostra do po<b>der do negri</b>to</p><p>Uma <i>pequena</i> amostra do po<i>der do itál</i>ico</p><p>Uma <b><i>amostra dos poderes combinados</i></b></p></body>Uma pequena amostra do poder do negrito
Uma pequena amostra do poder do itálico
Uma amostra dos poderes combinados
Strong é um tag muito parecido com o bold (negrito), mas com a diferença de que o negrito é meramente gráfico, enquanto que o tag <strong> pode ser interpretado por outros programas como leitores de páginas para surdo lendo o texto de forma diferente.
O mesmo vale para o tag <em> (ênfase) que pode ser lido de interpretado por outros programas, coisa que o tag itálico não pode pois é meramente gráfico.
<body><p>O tag <strong>strong</strong> alem de ser negrito serve para cegos.<br />O tag <em>ênfase</em> alem de ser itálico serve para cegos.</p></body>O tag strong alem de ser negrito serve para cegos.
O tag ênfase alem de ser itálico serve para cegos.
Um texto com Negrito, itálico, strong, ênfase e tudo junto
Este post faz parte do Tutorial weRgeeks de HTML.
Olá geeks
Neste Post eu gostaria de falar sobre padrões. O mais legal de padrões, é que cada um escolhe. No caso do HTML, temos o XHTML que faz com que sua página posa ser lida em qualquer browser.
Todos os tags podes ser escritos utilizando maiúsculas ou minúsculas, entretanto, é preferivel utilizar minúsculas para os tags. Para os valores de atributos dos tags (veremos mais para frente), a escolha entre maiúsculas e minúsculas faz diferença.
<body><P>Paragrafo com tags maiúsculas</P><p>Paragrafo com tags minúsculas</p><P>Paragrafo com tags mistas</p></body>Paragrafo com tags maiúsculas
Paragrafo com tags minúsculas
Paragrafo com tags mistas
O código HTML é formado básicamente por tags e assim como temos tag marcando o início de alguma coisa, temos um tag marcando o final <p></p>, entretanto, alguns tags não tem um par de fechamento, como o <br>, sendo assim, por padrão, marcamos o fechamento destes tags utilizando / (barra) no final do tag <br />.
<body><p>Este parágrafo não foi fechado corretamente<p>Parágrafo fechado corretamente mas,<br>A quebra não foi fechada</p><p>Parágrafo fechado corretamente.<br />A quebra foi fechada corretamente tambem.</p></body>Este parágrafo não foi fechado corretamente
Parágrafo fechado corretamente mas,
A quebra não foi fechada
Parágrafo fechado corretamente.
A quebra foi fechada corretamente tambem.
Aqui você pode ver o resultado.
Este post faz parte do Tutorial weRgeeks de HTML.
Como vimos no post anterior, todo o conteúdo de uma página deve estar “embrulhado” por tags <tag></tag>, vimos tambem que o conteudo que se quer exibir deve ficar dentro do tag <body></body>.
Vamos ver agora como formatar o texto em parágrafos. Todo texto que pertence a um mesmo parágrafo é unido pelo tag <p>.
<body><p>Paragrafo 1.
Texto, muito texto, muitissimo texto faz parte deste paragrafo</p>
<p>Paragrafo dois. tambem tem texto, muito texto, muitissimo texto que faz parte apenas deste paragrafo</p></body>Paragrafo 1.
Texto, muito texto, muitissimo texto faz parte deste paragrafo
Paragrafo dois. tambem tem texto, muito texto, muitissimo texto que faz parte apenas deste paragrafo
Como da pra perceber, cada paragrafo no código esta dentro do tag <p>, e dentro deste as quebras de linha e espaços em excesso são ignorados, o que, apesar de ser bom na hora de ler o código, gera o problema de como colocar uma quebra de linha dentro de um parágrafo sem terminar o mesmo.
Para colocar uma quebra de linha, utilizamos um tag “single” de quebra de linha, o <br>. Este tag, diferentemente dos outros, não precisa ser fechado, ou seja, ele apenas representa uma quebra de linha, e não agrupa algum texto com a mesma propriedade (como acontece com o <p>)
<body><p>oi.<br>Este paragrafo tem uma quebra de linha</p><p>oi. Este paragrafo não tem uma quebra de linha</p></body>oi.
Este paragrafo tem uma quebra de linha
oi. Este paragrafo não tem uma quebra de linha
Bom, agora basta apenas testar seus novos tags e ver o resultado.
Até a próxima
Ola
da pra ver que este paragrafo tem ao menos uma quebra de linha
ou duas
Este paragrafo bem grande nao tem quebras de linha . Eu adoro paragrafos grandes assim, e voce?
Este post faz parte do Tutorial weRgeeks de HTML.
Bom, para esta explicação, vou fugir um pouco do assunto e entrar, de leve, … em XML (mas bem de leve mesmo). Imagine que eu queira fazer um documento que descreva uma pessoa, sendo assim, utilizando o meu editor favorito, eu crio o seguinte arquivo:
<pessoa><social><nome>Darthjee</nome>
<sobrenome>Silva</sobrenome>
<idade>23.83</idade></social>
<fisico><altura>1.95m</altura>
<peso>110Kg</peso>
<cabelo>moreno</cabelo></fisico></pessoa>Pelo arquivo, podemos perceber que a pessoa é descrita pelo conteudo do tag <pessoa></pessoa>, enquanto seus atributos sociais e fisicos tambem estão dentro de um grupo de tags.
No HTML temos o mesmo formato, ou seja, todos os dados serão “embrulhados” nos tags corretos. Todo o documento (arquivo) deve estar dentro dos tags de identificação <html></html>, e observem que, enquanto <html> é o tag de abertura do conteúdo HTML, </html> é o tag de fechamento de conteúdo.
Assim como na descrição da pessoa (que tem atributos físicos e pisicológicos), o HTML tem 2 “campos” (ou tags) básicos, <head> e <body> que marcam, respectivamente, o cabeçalho e o corpo da página.
Aquilo que você colocar no corpo (<body>) será renderizado pelo navegador em alguma coisa que usuário pode ver, ou seja, a página em si.
Aquilo que você colocar no cabeçalho (<head>) será utilizado pelo navegador para obter informações extras como o autor da página, o título e outras informações que eu explicarei mais para frente. As informações do cabeçalho, quando mal feitas, não deveriam aparecer no navegador, mas aparecem nos navegadores, mas não utilize o <head> como <body> já que não funcionará em todos os navegadores.
Bom, agora que eu já expliquei como funciona, é hora de testar, abra seu editor e coloque o código abaixo, com o conteúdo de sua preferencia no corpo, e salve como pagina.html … depois basta apenas abrir para visualizar sua primeira página
Você poderá notar que o texto que você digitar nem sempre é o que você obterá, para corrigir tal, precisaremos dos outros tags HTML.
Até a próxima
Bom meus camaradinhas, como eu havia prometido, aqui vai uma introdução para o tutorial de HTML
Primeiramente, HTML é um acrónimo para Linguagem de Marcação de Hipertexto (HyperText Markup Language no original). Esta linguagem utiliza tags, ou marcadores para codificar um conteudo.
Pense em um arquivo de texto do bloco de notas, ele não tem formatação nenhuma, não aceita imagens nem nada disso, entretanto, você pode escrever no bloco de notas um trabalho e anotar "Colocar imagem do gráfico aqui", depois imprimir o seu trabalho e colar nele uma figura de uma revista, ou seja, você escreve em um arquivo de texto puro um código que você entende e que o fará colocar uma imagem no seu trabalho.
Com o HTML funcionará da mesma forma, você escreve em um arquivo de texto puro, que não aceita formataço nenhuma, códigos para que ele exiba cores, negrito, tabelas, vídeos, etc, e quem irá interpretar isso sera o Navegador.
Como diversão, faça um teste, utilizando o bloco de notas, abra um arquivo qualquer como um documento do word ou um MP3 e veja como o arquivo é na verdade, veja o que o programa tem que interpretar para dar o resultado que você esta acostumado.
Para acompanhar este tutorial, você vai precisar de um editor de texto como o Notepad(Vim ou Emacs no caso do linux) (não um processador de textos como o Word) e um navegador como o Firefox ou o Opera. Se você optou pelo Firefox, instale tambem o Add-on Firebug que é uma mão na roda (depois eu explico como utilizar )
Se você acessar o post através do blog (não do RSS), temos o nossa ferramenta de conversão HTML (que infelizmente não funciona no RSS) para voce praticar.
Basta apenas modificar o HTML no campo abaixo e clicar em “Renderizar” que o seu código será convertido em texto renderizado.
Para ver a lista com todos os capitulos do tutorial, acesse a Página do Tutorial HTML
Como eu atualizei os códigos atualmente, talvez vocês precisem recarregar a pagina para atualizar tudo
Pois é, estive batendo um papinho com o Tato, e me bateu uma vontade de fazer uma série de tutoriais para o weRgeeks. a idéia é fazer tutoriais de HTML, CSS, Javascript, PHP, XML e quem sabe de Linux.
Por enquanto ainda estamos planejando, ver como ficará a organização, mas o assim que começarmos, vamos ter posts de HTML fresquinhos para vocês.
Até a próxima pessoal
Bom, hoje minha namorada e eu aproveitamos um tempinho livre para tentar arrumar alguns dos problemas de idiomas do EeePC dela. A questão é que ela comprou o EeePC antes de existir uma versão em portugês, e sendo assim, os corretores ortográficos e o teclado estavam todos configurados para US.
Primeiro de tudo, olhamos na net para ver se encontrávamos alguma dica, e quem sabe, alguém prometendo um download do DVD do OS em português.
Após um tempo decidi me virar, tentei aproveitar o fato de que o EeePC dela roda KDE e abri a central de controle do KDE (que pode ser chamado de 2 formas, menu ou terminal).
> kcontrol &Buscamos então, Periféricos->layout do teclado onde pudemos habilitar o layout e, selecionando o teclado americano (na direita), habilitamos a variante Int1 que nos deu acesso à acentos .
Como eu não acredito que todos possuem KDE, decidi encontrar outra solução, e busquei pelo arquivo /etc/X11/xorg.conf e coloquei a mão na massa colocando a opção int1 no layout do teclado… não deu certo, e eu ainda não descobri o porquê (acho que as coisas que instalamos estão atrapalhando), mas aqui seguem as configurações e se alguem souber como resolver, por favor avise.
Section "InputDevice"
Identifier "keyboard"
Driver "kbd"
Option "CoreKeyboard"
Option "XkbRules" "xorg"
Option "XkbLayout" "us-int1"
Option "XkbVariant" ""EndSection
Section "InputDevice"
Identifier "keyboard"
Driver "kbd"
Option "CoreKeyboard"
Option "XkbRules" "xorg"
Option "XkbLayout" "us"
Option "XkbVariant" "int1"EndSection
Para acompanhar a saga de configuração, acesse:
http://www.wergeeks.net/?tag=eeepc
O Gravatar (Avatar Globalmente Reconhecido) é um sistema de controle de avatares totalmente free onde voce cadastra seus e-mails, e para cada e-mail cadastrado, você pode cadastrar um avatar.
A vantagem de se ter um avatar no gravatar é que grande parte dos fóruns vão reconhecer seu avatar (atravé de seu e-mail) e quando você quiser mudar seu avatar, basta mudar em um único lugar.
Veja aqui o passo a passo (não tão passo a passo assim)
Acesse http://www.gravatar.com e clique no link Sign up now!. Coloque seu e-mail e clique em “Signup“, isso enviará um e-mail de confirmação para você. No link de confirmação, você devera escolher o seu nick de cadastro no gravatar e senha da conta gravatar (não do fórum).
Esta é +/- a tela do seu gravatar:
e você pode adcionar um avatar clicando em “,b>Add one by clicking here!” e então corte seu avatar no tamanho certo
Selecione então o nível de censura (G para todos, PG cenas rudes, R Cenas frotes, X Porn)
Agora voce ja tem o avatar registrado no seu Gravatar
Para adcionar um e-mail, basta clicar no link “Select an email address (below) to modify or add a new one” e após o processo de confirmação por e-mail, você pode associar um avatar a um e-mail clicando no e-mail e no avatar (seguido de confirmção). Você tambem pode adcionar mais avatares e selecionar um para cada e-mail.
Se você possui Gmail, você pode utilizar ele para ter multiplos avatares do gravata (veja como aqui).
É lógico que o wergeeks consegue buscar o avatar no gravatar, sendo assim, cadastre-se, e poste comentários com avatar
Um dos motivos pelo qual eu uso Linux no meu dia a dia, é que ele, ao contrario do que o tato pensa, agiliza minhas tarefas, e aqui eu vou dar um exemplo do poder do linux.
Vamos utilizar o bash para converter imagens tiradas com uma câmera digital para o formato 648×486 e tambem gerar uma versão menor 140×105 para usarmos como snapshot em uma pagina html .
Bom, primeiro, precisamos de um diretorio para colocar as fotos originais, que normalmente são do tamanho 2592×1944. O diretório escolhido é origin. criamos os diretórios para as fotos que serão colocadas no site, e para os snapshots, fotos e snaps respectivamente
>mkdir origin
>mkdir fotos
>mkdir snapsagora, precisamos gerar um arquivo de script gera_html.sh que sera executado para gerar as fotos, e dar-lhe permissão de execução.
>chmod u=u+x gera_html.shAgora vamos fazer um loop de for que percorrera todos os arquivos da pasta origin gerando copias das imagens na pasta fotos, mas convertendo as fotos para 648×486, já que este parece ser um tamanho adequado para fotos que devem viajar pela rede. Observe que o for utiliza a lista gerada pela expansão origin/*, e que no começo do arquivo devemos colocar a #!/bin/bash para indicar que este é um bash script.
#!/bin/bashCONT=1;for FILE in origin/*; doconvert $FILE -resize 648x486 \
fotos/foto-$CONT.jpg
CONT=$[$CONT+1]
doneObserve que as fotos serao geradas com o nome foto-1.jpg foto-2.jpg … foto-10.jpg, de forma que se quisermos ter foto-0001.jpg, temos que gerar o texto atraves de uma função
function cont_to_var
{
AUX=$1
for NUM in 1000 100 10; do
if [ $AUX -lt $NUM ]; then
AUX=0$AUX;
fi
done
echo $AUX
}
Atribuimos isto a uma variavel utilizando os recursos do bash, para entao podermos gerar nossas imagens. Podemos aproveitar o loop e ja gerarmos as fotos e os snapshots
VAR=$(cont_to_var $CONT)
convert $FILE -resize 648x486 \
fotos/foto-$VAR.jpg
convert $FILE -resize 140x105 \
snaps/snap-$VAR.jpg
CONT=$[$CONT+1]
Agora basta apenas inserir a parte do codigo que gera a pagina html. primeiramente, preparamos uma pagina com a base, e a pagina com o final do arquivo, e entao utilzamos o while para finalizar o processo. Notamos que ao final do for, temos $CONT carregando o numero de fotos +1. Utilizaremos então o while com a condição [ $CONT -le $MAX ] que equivale a dizer while (cont <= max), e para cada iteração iremos inserir o tag com a imagem, redirecionando a saida para nosso arquivo fotos.html
MAX=$CONT
CONT=1
PAGE=fotos.html
COL=5cat base.html > $PAGEwhile [ $CONT -lt $MAX ]; do
check_linha_start $CONT >> $PAGE
print_img $CONT >> $PAGE
CONT=$[$CONT+1]
check_linha_end $CONT >> $PAGE
done
cat tail.html >> $PAGE
Observe que hove um redirecionamento da saida do cat é feito utilizando os operadores > e >>, cuja a diferença é que > apaga o arquivo antes de escrever o novo dado. A função check_linha_start checa a nescessidade de se iniciar uma linha da tabela (que deve conter 5 colunas), enquanto check_linha_end checa a nescessidade de se finalizar a linha
function check_linha_start
{
I=$[$1-1]
if (( ! $[$I%$COL] )); then
echo "<tr>"
fi
}function check_linha_end
{
I=$[$1-1]
if (( (! $[$I%$COL]) || ($1==$MAX) )); then
echo "echo "</tr>"
fi
}
Para imprimir a imagem, utilizamos a função print_img
function print_img
{
IMG=fotos/foto-$(cont_to_var $1).jpg
SNAP=snaps/snap-$(cont_to_var $1).jpg
echo "<td><a \
href=\"$IMG\" target=\"_BLANK\">"
echo "<img src=\"$SNAP\">"
echo "</a></td>"
}Os arquivos base.html e tail.html apenas abrem e fecham os tags basicos do html, mas poder ser utilizado para gerar códigos mais complexos com css, etc
<html>
<body>
<table>Agora basta apenas rodar o script e ser feliz
Se você quiser, voce pode baixar o meu script aqui
