Renie

MathML – Cálculos no browser sem imagens

renie — Fri, 29 Jan 2010 15:27:11 +0000

No post anterior falei da existência de uma linguagem de marcação chamada MathML, que é baseada em XML e serve para representar melhor fórmulas matemáticas na web. Resolvi então mostrar algumas tags e como funciona. Vocês vão reparar que para os resultados eu usarei imagens, por um simples motivo: alguns navegadores precisam de plugin para entender o código( como o IE), mas se vocês testarem esses código no Firefox, por exemplo, poderão ver que funciona

Farei no mesmo esquema de sempre, vou colocar o código e uma explicação dele abaixo, acho mais fácil dessa forma.



 $a x^{2} + b x + c$

Pode parecer chato/trabalhoso, na verdade é mesmo hahaha. Primeiramente incluí o doctype , disse de onde que to pegando o namespace do XML e só então começa a brincadeira. Primeiro uma que é só uma inclusão de uma linha onde estará a fórmula, aí vem a tag que diz que aquilo é somente um identificador, informa que seus filhos correspondem a uma potência, é para numeros e pra operadores. Viu não foi tão dificil. Esse código resultaria em:

Aí podemos brincar com outras tags como para frações, aí no caso usariamos 2 para fazer o numerador e o denominador; para raíz quadrada, tudo que estiver entre a abertura e o fechamento da tag estará dentro do simbolo da raíz; para fazer logaritmo por exemplo; com dentro, para fazer raiz de qualquer grau… enfim aí é só deixar a imaginação. No código abaixo uso mais algumas tags.

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

Que resultaria em:

E poraí vai.

Tirei o print também de uma outra fórmula que achei, foi feita com MathML eu garanto, mas não tive saco de tentar refazer pra postar aqui, então fica como exercício pra quem quiser brincar hahahahaha.

Abraço

[ UPDATE ]

Vale lembrar que para usar o doctype correto com MathML no meio do XHTML, temos que dizer que usaremos as duas linguagens de marcação. ficaria assim:

]>

Doctype? What a hell is that?

renie — Thu, 28 Jan 2010 15:24:44 +0000

Muitas vezes eu corrijo amigos que insistem em omitir o doctype de seus html, aí sempre me pergutam – Pra que isso? – ou então – Ah, essa merda ferra a renderização da minha aplicação/site. Resolvi explicar qual é a dessa parada então.

O doctype, ou Document Type ou DTD,serve para dizer ao browser como ele deve entender e executar o seu código, pois é no doctype que você informa qual a versão de html ou xhtml que você está usando e se o browser deve ler tudo ao pé da letra ou se ele pode deixar passar uma coisa ou outra “errada” no seu código, como por exemplo uma tag sem fechamento.

Uma das grandes vantagens de você não omitir essa informação é que você ganha performance, pois você já especifica logo de cara como você quer que sua página seja entendida, ou seja, o navegador não tem o trabalho de descobrir por conta própria essa informação. Outra vantagem é de você poder validar o seu código nos padrões w3C. Sem contar que seu html fica a prova de más interpretações.

Existem os seguintes tipos de doctype:

HTML
- HTML 4.01 Strict – Pra quando você segue de forma rígida as regras do HTML 4.01
- HTML 4.01 Transitional – Pra quando você está migrando de regras mais antigas pras mais novas
- HTML 4.01 Frameset – Pra quando você está usando frames (eca!)
- HTML 3.2 – Só a título de curiosidade
- HTML 2.0 – Só a título de curiosidade
XHTML
- XHTML 1.0 Strict – Pra quando você segue de forma rígida as regras do XHTML 1.0
- XHTML 1.0 Transitional – Pra quando você está migrando de regras mais antigas pras mais novas
XHTML 1.0 Frameset – Pra quando você está usando frames (eca! denovo) XHTML 1.1 DTD XHTML 1.1 Basic DTD


MathML

MathML 2.0

 


MathML 1.01

 


MathML 2.0 + XHTML 1.1

  ]>


É isso aí,  qualquer dia eu posto algo sobre MathML. Mas só pra não ficar no vazio, MathML é uma linguagem também de marcação, baseada em XML, que serve para representar melhor fórmulas e operações matemáticas, infezlimente são poucos os browsers que consegue interpretar de maneira correta essa linguagem, alguns precisam de um player pra isso. Mas é interessante. Meio inútil pra maior parte dos desenvolvedores, mas quem sabe um dia vc pode precisar   . Vale a pena dar uma pesquisada superficial na net, só pra ficar por dentro do assunto.



Tem que ter o DOM(gerando e parindo)
renie — Wed, 27 Jan 2010 16:01:44 +0000
Depois de aprender de que se trata DOM, o que é árvore, acessar e alterar elementos e navegar pelos filhos desses elementos, só nós resta aprender a criar e remover elementos.
Para fazer isso utilizaremos um método do objeto document chamado createElement . Esse método é muito simples de ser utilizado, basta que passemos como parâmetro o nome do elemento que desejamos criar, seguindo a seguin sintaxe:
document.createElement(“nomeDoElemento”)
Depois basta adicionar o elemento na página utilizando o método appendChild que pode ser chamado em qualquer elemento já existente no seu html. Um exemplo pra clarear:



   






     
        
          Linha Original
          Linha Original
        
     





Nesse código eu já tenho uma tabela no html, e cada vez que eu apertar o botão o DOM deve criar pra mim uma nova linha com duas células nessa tabela. Então quando eu entro na função eu crio 3 elementos: uma linha de tabela (tr), e duas células de tabela(td), e armazeno cada uma delas dentro de uma variável. Depois eu crio um nó de texto dentro de cada célula, com uma string qualquer. Em seguida eu coloco essas duas células dentro da linha, e por último, adiciona essa linha que eu criei dentro da tabela. E aí cabe uma observação. Porque eu não fiz a tabela sem o  e adicionei a linha direto na tabela? Porque se eu fizer assim, nosso amigo MICROSOFT Internet Explorer buga =D . Simples assim. Então o que eu fiz? Peguei a tabela pelo ID, aí puxei o elemento ZERO do array de nós-filhos de ‘tabela’ que tem nome ‘tbody’ e só então adicionei a linha. THANKS IE !! Mas na verdade eu preciso admitir que o IE esteja parcialmente correto, pois diz a w3C que o elemento TABLE deve possuir um , um e um , ou seja, ele está seguindo o padrão recomendado. Mas sei lá, não acho que seja dá conta do IE se eu uso TBODY ou não. Enfim, não vem ao caso.
O fato é que a partir do que já vimos eu posso fazer uma firulinha nesse código e brincar dessa forma:



   







    
       
         Linha Original
         Linha Original
       
    





Aqui faço a mesma coisa, mas mudo a cor do fundo se a célula foi par ou impar.
Eu ainda poderia usar um outro método chamado setAttribute para colocar qualquer propriedade html que eu quisesse no elemento, assim:

var campoTexto = document.createElement("input");

campoTexto.setAttribute('type', 'text');

campoTexto.setAttribute('id', 'meuCampoDeTexto');

Não fiz o código html inteiro pra deixar de lição pra vocês ( mentira, é preguiça mesmo hahaha ).
E como último milenar ensinamento dessa série de DOM eu apresento pra vocês o removeChild

function removerElemento(){

var filho = document.getElementById("tabela").getElementsByTagName("tbody")[0].lastChild;
var pai   = document.getElementById("tabela").getElementsByTagName("tbody")[0];
pai.removeChild(filho);

 }

Bem susse de fazer…
E assim acabo minha série sobre DOM, dentro de alguns dias postarei uma lista de funções DOM para vocês testarem. Espero ter sido útil.
Até mais moçada.



Tem que ter o DOM(desatando os nós)
renie — Mon, 25 Jan 2010 16:55:28 +0000
Nesse terceiro post da série de DOM, vamos falar sobre os nós.
No nosso primeiro post expliquei que ‘nó’ é o nome que se dá a cada divisão da árvore do document , sendo assim hoje vou explicar como acessar esses nós.
Para acessar os nós abaixo de um outro nó, precisamos primeiro acessar esse primeiro nó da forma que eu mostrei no post anterior, com document.getElementById , e, em seguida precisamos pedir um array com os elementos filhos desse nó, isso é feito com o childNodes.  Ficaria então dessa forma:
document.getElementById(“idDoElementoPai”).childNodes
Aí precisamos fazer um for para pegar individualmente os elementos do array, assim como fizemos com o getElementsByTagName . Um bom código de exemplo seria:







     
     
     





Quando eu clicar no botão, ele vai chamar a função mostraFilhos() que vai pegar o array de elementos que estiverem dentro da tag com id “mae”. Aí então a função fará um for nesse array e vai pegar o nome de cada elemento através do nodeName e jogar numa variável que eu chamei de resultado. Por último dará um alert() no resultado. Teremos algo assim:


“Po mas bugou a parada!!!”. Não meu caro, é que ocorre o seguinte, o javascript entende os espaços em branco como nós, então ele entendeu o ENTER  como nós de texto. Mas não é nada que um if não resolva =D.
if(elementoPai[contador].nodeName != Node.TEXT_NODE)
e a partir daí podemos acessar quaisquer propriedades dos nós-filhos como pegar o nome da classe, dessa forma:






      





Que resultará nesse alert:


Ah, legal, você já consegue acessar todos os filhos de um nó, mas e se quiser acessar só o primeiro ou só o último filho de um nó? Simples, basta usar firstChild ou lastChild dessa forma:






       





Que irá gerar o seguinte alert:


Lembrando que ele pega aquele ENTER como elemento de texto.
Aí é só usar a imaginação pra brincar com os nós, acessando e modificando dinamicamente, estilos e funções de cada elemento.
Pra finalizar vou deixar uma tabelinha pra vocês que boiaram no Node.TEXT_NODE .





Tem que ter o DOM(começando a brincadeira)
renie — Thu, 21 Jan 2010 15:55:09 +0000
Salve salve, bom vamos lá fazer a segunda parte dessa série sobre o DOM. Dessa vez vamos começar a ver algumas funções simples  que o javascript nos proporciona.
Um exemplo clássico, e eu diria que o mais utilizado seria o saudoso:
document.getElementById(“[idDesejado]“)
Vamos quebrar pra entender e começar a explicar pelo elemento document. O document vai referenciar toda a sua página html, ou seja, tudo de código que você escreveu dentro do seu arquivo html, poderá ser acessado através do document.
Já o getElementById vai pegar o elemento que possuir o atributo “id” igual ao que você especificou na função. Um exemplo pra clarear as idéias:









   





Ou seja, quando acabar de carregar a pagina, o javascript vai me mostrar uma caixa de mensagem dizendo que elemento ele conseguiu pegar. Abaixo temos uma imagem da mensagem exibida pelo Firerox, as mensagens variam entre navegadores, mas fique tranquilo pois ele vai pegar o elemento da mesma forma.

Depois de pegar o elemento, você pode pegar todos os atributos dele de forma muito simples










   

      ola

   





Explicando. Joguei o elemento que eu capturei numa variável, pra facilitar meu trabalho, e pedi pro javascript me mostrar agora qual é a cor do fundo desse meu elemento, que eu defini na tag STYLE, e também o nome da classe CSS que está atribuída nesse elemento. O resultado foi esse:

Certinho… a única peculiaridade é que ele me trouxe a cor no formato RGB, e não hexadecimal, mas a cor está correta.  Seguindo esse princípio já que posso pegar o elemento, eu também posso alterar suas propriedades, dessa forma:










   

      

   





Aí é só começar a pirar… bom, mas se quiser mudar a cor de , por exemplo, todos os elementos 
. Simples!
getElementsByTagName(“div”)












     








     oks








     ola







Mas nesse caso temos uma pequena diferença, precisamos de um laço de repetição, pois o getElementsByTagName não retorna apenas um elemento, mas sim um ARRAY de elementos. Então é preciso acessar individualmente cada elemento do array,  aí sim acessar suas respectivas propriedades.  Bom, por hoje vou parar por aqui, decidi que vou injetar doses homeopáticas de DOM em vocês hahaha. Amanhã mostro como acessar os nós que estão abaixo de outro elemento ( nó-filho ).  Aquele abrax galera!



Tem que ter o DOM(introduzindo conceitos)
renie — Thu, 21 Jan 2010 02:13:42 +0000
Hoje vou direto ao ponto pois o assunto é extenso. Inclusive, vou dividir esse post e continuar daqui alguns dias.
Uma das grandes dificuldades da galera que começa a mexer com javascript é usar o DOM, Document Object Model, ou para os mais chegados – “O cara que deixa você mexer no html via javascript”.
Vou começar do BASICAAAASSO pra não ficarem dúvidas perdidas no meio do percurso.
Basicamente para utilizar o DOM é preciso entender o conceito de árvore e nó. Vou usar algumas imagens pra ilustrar, mas já aviso, minha noção de desenho é teeeeeeeeeensa hahaha.
POR QUE “ÁRVORE”?


Entenda isso como uma árvore. Se tirarmos as folhas, teremos apenas galhos:



Esse galhos possuem ramificações específicas, se isolarmos esses galhos e rotacionarmos, teríamos:



Hum já está quase parecido com o que eu preciso para explicar os conceitos, quem sabe se eu der uma organizada…



Agora sim! Imagine agora que essa ‘árvore organizada’ seja nosso documento html… difícil? Vejamos…


















Entendendo que o elemento “1″ fosse o , o “2″ seria a primeira
 filha de , o “6″ seria um span que é filha da  número “2″, o “3″ seria uma  filha de , o “4″ uma 2ª filha de  e  o “5″ seria filha de  também. Veja.


Woooow mais que beleza!! Podemos entender que cada ponta de cada ‘galho’,  assim como cada ponto de ramificação, é um nó, e assim existem “nós pais”, “nós filhos”, “nós irmãos”… e com o DOM é possível “subir na árvore” e acessar cada nó individualmente, mudando seus valores, atributos e até adicionando e removendo nós. Bom Vou deixar para começar a explicar as funções no próximo post, mas já aviso, usando DOM você poderá revirar o HTML da forma que bem entender. #fikdik
Abraço, até a próxima



Todos contra IE (viva la revolucion!)
renie — Tue, 19 Jan 2010 11:48:57 +0000
 Essa foi massa. Ontem, com diferença de apenas 8h entre as decisões, os governos Alemão e Francês passaram a recomendar que todos os seus cidadãos substituam o Microsoft Internet Explorer por qualquer outro navegador, devido a questões de segurança. Tais vulnerabilidades permitem que hackers possam executar remotamente códigos arbitrários.
O código que pode ser utilizado para explorar esse tipo de falha já foi incluído em várias ferramentas de invasão. Com ele, um agressor pode executar programas no computador de uma vítima simplesmente fazendo-a visitar uma página especialmente preparada.
A Microsoft diz que essas falhas não prejudicarão os usuários finais. (pfff… eu acredito sahuhsauhasu)
Fonte: Terra – Tecnologia



ASCII Codes com javascript
renie — Mon, 11 Jan 2010 23:53:37 +0000
Salve, salve moçada…
Hoje vou falar sobre como saber que tecla o usuário apertou em determinado lugar utilizando a tabela ASCII ( ouço um amém dos doentes sem vida programadores assembly??).
Mas aqui no renie.com.br sempre penso no cometário cretino que alguém SEMPRE faz… e aí vem o mala:
Mas pra que complicar? é só pegar o value dos campos….
Legal… e se você quiser saber se o vivente apertou a tecla ctrl ou enter….? hã?hã….? HÃ?!??!?!! rá aí eu quebrei suas pernas seu xarope. Podemos começar a brincar com ASCII.
Em javascript temos uma coisinha chamada event, que nada mais é do que um objeto criado automaticamente quando um evento é disparado, e esse objeto possui muitas propriedades do tal evento como: coordenadas de onde estava o ponteiro do mouse no momento do clique, qual botao do mouse foi clicado, qual o código da tecla que foi utilizada, o tipo do evento…entre outros.
Mas aí entra nosso querido amigo IE pra nos foder dificultar a vida. Assim como requisições ajax, é preciso fazer uma condição para pegar esse event, como COMO SEMPRE o IE não segue as normas da W3C aí teríamos:
function keyLogger(event){
var evt=window.event || event
}
evt vai receber window.event OU event(passado por parâmetro para a função), no caso window.event eh do IE e event é pros outros browsers.
Então para pegarmos a tecla que disparou o evento podemos usar:
evt.keycode
Ou seja, o código da tecla que disparou o evento. Aí basta que saibamos qual código significa o que. Aqui segue um exemplo:
var evt=window.event || event;

var asciiCode;

var asciiCaracter;
asciiCode = evt.keyCode ;
if(asciiCode == “08″){

asciiCaracter = “”

}

else if(asciiCode == “09″){

asciiCaracter = “”

}

else if(asciiCode == “13″){

asciiCaracter = “”

}

else if(asciiCode == “27″){

asciiCaracter = “”

}

else if(asciiCode == “32″){

asciiCaracter = “”

}

else if(asciiCode == “127″){

asciiCaracter = “”

}

else{

asciiCaracter = String.fromCharCode(asciiCode);

}

alert(asciiCaracter);
Tendo isso, basta chamar numa função e pronto, um abraço pro gaitero. Pra quem quiser ver como funciona, segue abaixo um código funcional.











E pra quem tiver curiosidade, segue aqui uma tabela ascii só com teclas “não-imprimíveis”, pra que vocês possam consultar mais códigos.
Abraço.



Help MySQL!!!
renie — Wed, 06 Jan 2010 13:07:44 +0000
Salve galerinha of doom!!
Acho importante sempre divulgar esse tipo de coisa, até peço pra quem puder divulgar tambem, que o faça.
Pra quem está por fora, já falei sobre isso aqui no blog mas vale a pena repassar. A Oracle está em negociação para comprar a Sun, mas tá dando uma pá de rolo na união européia. Segundo a última notícia postada pelo G1- Tecnologia, a UE, que inicialmente tinha rejeitado a transação devido a possibilidade de acabar sendo criada uma falta de competitividade, disse em meados de Dezembro que provavelmente liberaria a transação, e desde então a Oracle tá botando pressão na galera pra sair o esquema até o fim de Janeiro.
Michael Widenius(uma reverêcia por favor), criador do mysql, tá fazendo de tudo pra não deixar a compra sair, já entregou um abaixo assinado com 14mil assinaturas mas ainda é pouco.
O foco dessa campanha que estou divulgando é chegar a 100mil assinaturas para que tenha valor judicial, ja existem cerca de 22mil votos, falta bastante ainda, então bora contribuir!!



Tableless, uma iniciação
renie — Sun, 27 Dec 2009 06:42:03 +0000
Estava lá eu, todo pimpão por ter voltado a escrever no blog, ainda mais ter ido direto numa questão tão polêmica quando essa que resolvi abordar no último artigo, quando resolvi voltar  a divulgar no meu msn meu site.
Mas eu achei que havia ficado meio vago aquele texto. Foi quando um amigo(Diego “Japs” Oku) me veio com as seguintes palavras mansas vindas da milenar sabedoria oriental.
Porra velho, sem dar uma exemplo prático fica foda!!
Sendo assim, vamos ao primeiro exemplo prático, temos aqui um layout muito simples e comum , o clássico:

Topo
Menu Lateral
Conteúdo ( ao lado direito do menu )

Com tabelas teríamos uma estrutura HTML bem simples parecida com isso:





 






 




 




E um CSS assim:
table{

border: 1px solid #000000;

border-collapse:collapse;

width:100%;

height:100%;

}

td{

border: 1px solid #000000;

}

#cabecalho{

height:20%;

}

#menu{

width:20%;

}
Acho que como é um tutorial iniciante, cabe aqui uma breve explicação dos códigos acima.
Começarei pelo HTML.
Temos uma tabela( 
 ), com duas linhas(  ). Sendo que a primeira linha possui apenas uma célula(  ) que ocupa na verda o espaço onde deveriam haver 2 células ( colspan=”2″ ), essa linha seria o topo da nossa página. E a segunda linha possui 2 células, sendo uma o menu da nossa página e outra o conteúdo.
E dando sequencia pelo CSS…
Defini que todas as tags 
 terão (pela ordem):

Borda de 1pixel, sólida e de cor preta
A tabela deve compartilhar as bordas com as células ( para que não existam bordas nas células e bordas na tabela, ficando assim duplicadas  )
Largura terá 100% do tamanho da página
Altura terá 100% do tamanho da página
Também defini que:

As células terão bordas de 1pixel, sólidas e de cor preta
A célula com id = “cabecalho” terá altura de 20% do tamanho da tabela
A célula com id = “menu” terá largura de 20% do tamanho da tabela
Ufa! Pois bem, layout feito, funciona em qualquer navegador, você fica feliz, seu chefe/cliente/carrasco/vilão dos seus pesadelos fica feliz e pronto (demonstração)! Vamos embora? NÃO!! Layout com tabela é pecado, quem usa não vai pro céu. Bora tirar essa tabela e fazer esse layout com as tags corretas?
Pois bem, o HTML ficaria assim:












E o CSS assim:
#cabecalho{

width:100%;

height:20%;

border-bottom:1px solid #000000;

}

#menu{

width:20%;

height:80%;

float:left;

border-right:1px solid #000000;

}

#conteudo{

width:79%;

height:80%;

float:right;

}

#geral{

border:1px solid #000000;

width:100%;

height:100%;

}
Vamos a explicação. A primeira mudança que podemos notar é a redução e ‘limpeza’ no HTML. Mas a grande dúvida dos iniciantes é:  O que é essa tal de 
 aí? Pois bem, segundo a própria W3C , div é um elemento para dividir uma seção ou definir um estilo em elementos colocados em blocos, ou seja, é um container genérico. Nesse caso utilizei divs para fazer 4 blocos:

Um bloco ‘geral’, tudo que estará dentro do meu site estará contido nesse bloco, gosto de utiliza-lo pois facilita possíveis estilizações em massa na página sem necessidade de repetição de código( prometo explicar isso melhor em outro post )
Bloco ‘cabecalho’
Bloco ‘menu’
Bloco ‘conteúdo’

No CSS fiz as seguintes definições:

Meu bloco ‘geral’  tem uma borda de 1pixel, sólida e de cor preta, largura e altura de 100% do tamanho disponível no navegador
Meu bloco ‘cabecalho’ tem uma largura de 100% e altura de 20% ( ambas em relação ao tamanho do elemento pai ( no caso a div ‘geral’  )) e uma borda de 1pixel, sólida e de cor preta só na parte de baixo
O bloco ‘menu’ tem largura de 20% e altura de 80%( ambas em relação ao tamanho do elemento pai (  que também é a div ‘geral’  )), ela deve flutuar à esquerda dentro da div pai( esse atributo é necessário para definir a posição de 2 div na mesma linha ) e deve ter uma borda de 1pixel, sólida e de cor preta só à direita
E o bloco ‘conteúdo’ tem a mesma altura da div ‘menu’, a largura restante da div pai (  que também é a div ‘geral’  ) e ela deve flutuar à direita da div pai

Pronto, temos nosso layout sem tabelas(demonstração), seu chefe/cliente/carrasco/vilão dos seus pesadelos fica feliz e você fica mais feliz pois fez um trabalho de uma maneira mais correta e com mais qualidade.
Quem quiser os códigos para poder ver melhor analisar e mexer, clique aqui .

É isso aí galera, vou postar mais algumas coisas na seqüência sobre como trabalhar bem com 
 e como solucionar alguns probleminhas típicos, e lembre-se sempre. Testem sempre suas aplicações pelo menos no Internet Explorer( 7 e 8), e Mozilla Firefox 3+, não digo para testarem no IE6 pois sigo a seguinte filosofia:
Se nem a Microsoft, pai dessa merda, dá suporte ao Internet Explorer 6, porque EU deveria fazê-lo?