Arquivo da categoria: HTML 5

JointJS – Biblioteca para criação de diagramas JS

jointjs

Surgiu-se a necessidade de criação de diagramas, fui a pesquisa para encontrar alguma ferramenta para auxiliar, como existe vários prontos não é necessário criar a roda.

Encontrei diversos plugins mas nenhum havia me chamado atenção, uma que gostei muito foi o D3.js mas achei muito complicado sui manipulação, muito trabalhoso pra criar exatamente o que queria.

Das que encontrei, me chamaram muito atenção esses plugin:
GoJS – Infelizmente é paga
img_551d33df0354a

JsPlumb – Grátis
img_551d34ebec5c3

mermaid – Grátis
header

A que mais gostei foi JointJS com esse plugin é possível criar diagramas interessante, de um forma simples e poderosa.

A instalação super simples, necessário:

<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>

jQuery: 2.0.3
Lodash: 3.10.1
Backbone: 1.2.1

Development version (0.9.5)
joint.js joint.css

Production version (0.9.5)
joint.min.js joint.min.css

Algumas imagens das possibilidades do JointJS.
ivr

traceroutes

rappid-new-showcase

rappid_attack_designer

Estrutura básica do HTML5

A estrutura básica do HTML5 é a mesma das versões anteriores da linguagem, com apenas uma excessão na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:

<!DOCTYPE HTML>
   <html lang="pt-br">
   <head>
   	<meta charset="UTF-8">
   	<link rel="stylesheet" type="text/css" href="style.css">
   	<title></title>
   </head>
   <body>
   	
  </body>
  </html>

Doctype

O Doctype deve ser a primeira linha de código do documento antes da tag HTML.

<!DOCTYPE html!>

O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser.

O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

O elemento HTML

O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.

<html lang="pt-br">

O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

Para encontrar a listagem de códigos das linguagens, acesse: http://www.w3.org/International/questions/qa-choosing-language-tags.

HEAD – Cabeçalho

A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.

Metatag Charset

No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a página está utilizando. Sendo assim será lido toda acentuação e caracteres especiais do nosso idioma português.

<meta charset="utf-8">

Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:

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

Essa forma antiga será também suportada no HTML5. Contudo, é melhor que você utilize a nova forma.

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.

Tag LINK

Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.

No nosso exemplo há uma tag LINK que importa o CSS para nossa página:

<link rel="stylesheet" type="text/css" href="style.css">

O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.

Há outros valores para o atributo REL, como por exemplo o ALTERNATE:

<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">

Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.

No HTML5 há outros links relativos que você pode inserir como o rel=”archives” que indica uma referência a uma coleção de material histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.