Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

HTML5 - MATHML e SVG

MATHML E SVG

MathML

O HTML5 incorpora o padrão MathML. Trata-se de uma linguagem de marcação, baseada em XML, para representação de fórmulas matemáticas. Você pode ler mais sobre MathML em http://www.w3.org/Math/.Para incorporar código MathML em seu documento HTML5, não pre-ciso fazer declarações especiais. Basta escrever normalmente o código, iniciando com um elemento math. Veja este exemplo:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>MathML</title>
</head>
<body>
<math>
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<moform=”prefix”>&minus;</mo>
<mi>b</mi>
<mo>&PlusMinus;</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>&minus;</mo>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
<mo>&InvisibleTimes;</mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</body>
</html>

Veja como esse exemplo é renderizado no navegador:

Mesmo que você nunca tenha visto MathML, e este código pareça um pouco assustador, dê uma olhada com calma no código, comparando com a imagem do resultado, e você vai perceber que é muito simples. Talvez algo que possa deixá-lo confuso é a entidade &InvisibleTimes;, que aparece algumas vezes no código. Ela está lá para separar os fatores 4ac, por exemplo. Esses valores são multiplicados, é o que a fórmula representa, mas não queremos colocar um operador de multiplicação entre eles, porque por convenção se simplesmente escrevemos 4ac qualquer leitor saberá que isso é uma multiplicação.

Por que então se preocupar em inserir &InvisibleTimes;? Você vai notar que se remover a entidade e a tag mo correspondente o resultado visual será o mesmo. Colocamos &InvisibleTimes; porque MathML não é só visual, é semântica. Um outro agente de usuário pode ter recursos de importar essa fórmula para uma ferramenta de cálculo, por exemplo.

SVG

Assim como MathML, SVG é uma outra linguagem XML que pode ser incorporada com facilidade em HTML5. Você pode ler mais sobre SVG em http://www.w3.org/Graphics/SVG/.SVG é uma linguagem para marcação de gráficos vetoriais. Vejamos um exemplo bem simples:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>SVG</title>
</head>
<body>
<svgwidth=”400” height=”400”>
<!-- Um retângulo:-->
<rectx=”10” y=”10” width=”150” height=”50” stroke=”#000000” stroke-width=”5” fill=”#FF0000” />
<!-- Um polígono:-->
<polygonfill=”red” stroke=”blue” stroke-width=”10” points=”250,75 279,161 369,161 297,215
323,301 250,250 177,301 203,215
131,161 221,161” />
<!-- Um círculo -->
<circlecx=”70” cy=”240” r=”60” stroke=”#00FF00” stroke-width=”5” 
fill=”#FFFFFF” />
</svg>
</body>
</html>

E veja como isso é renderizado no navegador:

É possível fazer muito mais com SVG. A maioria dos editores de gráficos vetoriais hoje exporta e importa automaticamente SVG, permitindo a um designer construir um gráfico em seu editor vetorial predileto e exportá-lo diretamente. Em seguida, um programador pode construir javascript que manipula esse SVG, usando os métodos do DOM. Com isso você pode ter gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em Javascript, sem tecnologias proprietárias e plugins.

 

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

Tags:

Follow the Discussion

  • PabloPablo

    Muitas falhas no código de exemplo, impossível reproduzir. Observe o <svgwidth> por exemplo, q deveria ser <svg width="400"...>. Muito mal.

  • PabloPablo

    E outra, eu tentei renderizar a formula matemática mas não conseguir, então eu decidir ver o código html dessa página (http://channel9.msdn.com/posts/HTML5-MATHML-e-SVG) e descobri que era só uma imagem .png. =S

    Vou ter que pegar esse assunto de outras fontes. =(

  • GabrielGabriel

    Cara eu cliquei com o botão direito e vi que era imgem logo de cara...

  • OrlandoOrlando

    a fórmula só funcionou no firefox 13. o svg funcionou no chrome 20 e firefox 13. ie9 não roda praticamente nada deste curso

  • ORlandoORlando

    segue o código certinho

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>SVG</title>
    </head>
    <body>
    <svg width="400" height="400">
    <!-- Um retângulo:-->
    <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />
    <!-- Um polígono:-->
    <polygon fill="red" stroke="blue" stroke-width="10" points="250,75 279,161 369,161 297,215 323,301 250,250 177,301 203,215 131,161 221,161" />
    <!-- Um círculo -->
    <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
    </svg>
    </body>
    </html>

  • OrlandoOrlando

    Eu achei incrível esse esquema de fórmulas!
    um dos esquemas mais dahora que criaram no W3C! :D

  • o problema deve ser no navegador , deve ta renderizando diferente 

  • Será que no ie do windows 8 vai funcionar o html5 perfeito? Eis minha dúvida...

  • wilsonwilson

    Funcionou beleza Orlando

  • Não é algo que usamos no dia-a-dia, mas para quem está no ramo dos cálculos é um recurso muito interessante e útil Tongue Out

    A primeira vista parece mesmo a maneira de utilizar o elemento Math, mas se comparar as tags (xml) com o resultado (formula visual) entenderá e verá que é muito fácil de usar.

    Achei interessante...

    Valeu a todos...

  • Bruno RochaBruno Rocha

    O codigo o Orlando Rodo, o da apostila nao... mas e muito interessante o assunto... sucesso pra todos..

  • DanielDaniel

    O código do MathML funcionou aqui no firefox,
    o do SVG do orlando funcionou e o do curso não, porque tem um caractere incorreto nos exemplos >>> ”
    que deveria ser >>> "

    Ou seja, as aspas duplas dos exemplos não são aspas duplas, então os browsers não reconhecem o código HTML.

  • RonaldoRonaldo

    Pra min é mais parecido com uma tabela...

  • Giovanni AmorimGiovanni Amorim

    Valeu Orlando seu código está correto e funcionou aqui. Como fazer animações com esses recursos? Já viram aquelas animações apresentadas nas logomarcas do Google representando uma data especial, como o Natal por exemplo. É essa a tecnologia usada? Uma coisa eu sei: Flash não é ;(

  • o lance das formulas é muito legal, funcionou no firefox, no IE não rola

  • JonatasJonatas

    No IE8 nem pensar....

  • Pedro Henrique dos SantosPedro Henrique dos Santos

    O curso é da microsoft e os exemplos não funcionam no IE, irônia! rs. Na boa quer acessar sites em HTML5? Não use o IE.

    Vamos esperar a versão final do IE10 pra ver se melhora.

  • Plínio Pierrypliniopierry Plínio Pierry

    Boa ORlando, valeu pelo código correto!

  • Thadeu EstevesThadeu Esteves

    SVG ainda é precário galera, vamos ter calma que logo logo isso tudo vai mudar! qual aos erros de escrita , acredito que seja o plugin de highlight do site, porque algumas paginas estão com este mesmo problema..

    abraço a todos.

  • FabricioFabricio

    <polygon fill="red" ..........
    <rect x="10" .....
    <circle cx=”70” ........
    Precisa de um espaço entre a tag e o atributo.

    SVG IE9 ok! firefox 16.. ok! crhome 23.0 ok!
    MathML IE9 (não funcionou) firefox 16.. ok! crhome 23.0 (não funcionou)

  • DhieysonDhieyson

    Muito interessante, mas para ser utilizável em ambiente de produção deve ser funcional em todos os navegadores mais populares. Esse é o mal da web.

  • NovattuNovattu

    Bom se vc selecionar a imagem e arrastar no google chrome
    vc consegue pegar somente os textos dessas imagens eu fiz assim
    deu certo !! XD

  • NovattuNovattu

    Estranho mesmo vindo o mesmo cod citado a cima ficou assim

    x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a

    detalhe o cod transferido foi o mesmo citado a acima como falei.. sé arrastei pra o word pad...

    entao diante disso

    FAIL este post....

  • @Novattu: Cara, depende do navegador. Esse código só funcionou no Firefox e no Opera, nos outros(Safari,Chrome,ie) não funcionou corretamente.

  • EderEder

    Showwww

  • Jose Carlos da SilvaJose Carlos da Silva

    1234567891011121314151617181920
    POde-se escrever assim tbm.Ok!
    <!DOCTYPE html><html><head><metacharset=”UTF-8” /><title>SVG</title></head><body><svgwidth=”400” height=”400”><!-- Um retângulo:--><rectx=”10” y=”10” width=”150” height=”50” stroke=”#000000” stroke-width=”5” fill=”#FF0000” /><!-- Um polígono:--><polygonfill=”red” stroke=”blue” stroke-width=”10” points=”250,75 279,161 369,161 297,215323,301 250,250 177,301 203,215131,161 221,161” /><!-- Um círculo --><circlecx=”70” cy=”240” r=”60” stroke=”#00FF00” stroke-width=”5” fill=”#FFFFFF” /></svg></body></html>

  • Wilson NeyWilson Ney

    Bom temos aí algumas soluções que podem ser usada para cálculo e vetoriais, sendo que pode haver imcopatibilidade por parte do navegador, mas, só o google chrome tá liderando na tabela de rederização do HTML5, sempre tente abrir código sem HTML5 no Google Chrome, neste post os códigos não apresentão diretórios de imagens sei que não é imagens estes vetoriais e sim desenhos de forma SVG mesmos. Obrigado!

  • ThaisThais

    Orlando, muito obrigada por compartilhar o seu conhecimento!!
    Deu certíssimo (:

  • Anderson OliveiraAnderson Oliveira

    Muito a se estudar sobre isso ainda...

  • pedro  gernanopedro gernano

    gostei

  • AdrianoAdriano

    Muito bom ,! excelente curso!
    Consegui renderizar a formula do SVG mais só com o código que o rapaz postou aqui nos comentários!

  • JoseJose

    Ficou faltando falar que o MathML tem pouco suporte. Atualmente apenas Firefox e Safari em suas versões recentes o suportam. O Chrome suportou-o na versão 24 mas foi descontinuado porque a linguagem ainda não estaria definida.

  • JoseJose

    PS: para quem desejar saber o suporte a MathML, bem como outras tecnologias, só acessar: http://caniuse.com/mathml. É um site muito bom para saber quais tecnologias de HTML5, e outras, podemos adotar nos nossos sites.

  • Cleiton DiasCleiton Dias

    Realmente o código está com muitos problemas, mas segue o correto, consegui abrir no firefox 22.0, google chrome Versão 28.0.1500.95 m e Internet Explorer Versão 10.0.9200.16466

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>SVG</title>
    </head>
    <body>
    <svg width="600" height="600">
    <!-- Um retângulo:-->
    <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />
    <!-- Um polígono:-->
    <polygon fill="red" stroke="blue" stroke-width="10" points="250,75 279,161 369,161 297,215,323,301 250,250 177,301 203,215,131,161 221,161" />
    <!-- Um círculo -->
    <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
    </svg>
    </body>
    </html>

  • Show fiz os teste e deu certo. muito bom.

  • Não é simples, mas de fundamental importância.

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.