d.a.domingues: html

Mostrando postagens com marcador html. Mostrar todas as postagens

quarta-feira, julho 08, 2009

HTML5: fim do XHTML

Segundo W3C, no dia 2 de julho de 2009 a diretoria anunciou o fim do "projeto" XHTML, voltando os esforços ao HTML5.

Hoje o W3C anunciou que o prazo do Grupo de Trabalho XHTML 2 vai expirar no final desse ano e não será renovado. Essa decisão, acompanhada do aumento de recursos no Grupo de Trabalho HTML, fará com que o W3C acelere os trabalhos com o HTML 5 e torne mais clara a posição do W3C com relação ao futuro do HTML. Existe uma FAQ que responde as questões sobre o futuro dos produtos do Grupo de Trabalho XHTML 2 e o status das várias discussões relacionadas ao HTML. Saiba mais sobre a Atividade HTML. (Permalink)

O HTML vai manter muita coisa do XHTML, a principal delas a estrutura baseada em XML - realmente o HTML 4 estava uma zona. O grupo de trabalho diz manter a modularização também, o que permite combinar com outras linguagens de marcação, além de corrigir muitos aspectos como acessibilidade, independencia de dispositivos, internacionalização, entre outros.

Resumindo: O futuro do HTML será uma junção do XHTML (que deriva do HTML, porém mais regrado) com o as melhoras sempre solicitadas e a semântica cada vez mais necessária nas integrações e relacionamentos entre dispositivos, pessoas e aplicações.

Segue as marcações do HTML5 (links para o site http://www.w3schools.com)

HTML5 Tags

<!-->

<!DOCTYPE>

<abbr>

<acronym> (Retirado da versão 5)

<address>

<applet> (Retirado da versão 5)

<area>

<article> (NOVO!)

<aside> (NOVO!)

<audio> (NOVO!)

<base>

<basefont> (Retirado da versão 5)

<bdo>

<big> (Retirado da versão 5)

<blockquote>

<body>

<br>

<button>

<canvas> (NOVO!)

<caption>

<center> (Retirado da versão 5)

<cite>

<code>

<col>

<colgroup>

<command>

<datagrid> (NOVO!)

<datalist> (NOVO!)

<datatemplate> (NOVO!)

<dd>

<del>

<details> (NOVO!)

<dialog> (NOVO!)

<dfn>

<dir> (Retirado da versão 5)

<div>

<dl>

<dt>

<em>

<embed> (NOVO!)

<event-source> (NOVO!)

<fieldset>

<figure> (NOVO!)

<font> (Retirado da versão 5)

<footer> (NOVO!)

<form>

<frame> (Retirado da versão 5)

<frameset> (Retirado da versão 5)

<head>

<header> (NOVO!)

<h1> - <h6>

<hr>

<html>

<iframe>

<img>

<input>

<ins>

<kbd>

<label>

<legend>

<li>

<link>

<map>

<mark> (NOVO!)

<menu>

<meta>

<meter> (NOVO!)

<nav> (NOVO!)

<nest> (NOVO!)

<noframes> (Retirado da versão 5)

<noscript>

<object>

<ol>

<optgroup>

<option>

<output> (NOVO!)

<param>

<pre>

<progress> (NOVO!)

<rule> (NOVO!)

<s> (Retirado da versão 5)

<samp>

<script>

<section> (NOVO!)

<select>

<small>

<source> (NOVO!)

<span>

<strike> (Retirado da versão 5)

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<time> (NOVO!)

<title>

<tr>

<tt> (Retirado da versão 5)

<u> (Retirado da versão 5)

<ul>

<var>

<video> (NOVO!)

Fonte:

http://www.w3.org/News/2009#item119

http://www.w3.org/MarkUp/Activity

http://www.w3schools.com/tags/html5.asp

terça-feira, maio 12, 2009

Montar E-mail via HTML/JavaScript

Minha ex estava precisando enviar um formulário por e-mail, mas não podia usar nenhuma linguagem de servidor (PHP, ASP etc). Como é para a empresa e sei que todos usam uma aplicação desktop para ferenciamento de e-mails (Outlook ou Thunderbird), sugeri usar o "mailto" (normalmente usado nos links de contato) para abrir a aplicação e formatar os campos do e-mail.

A função é bem simples e lista no corpo do e-mail os campos e seus valores... e só.

function montaEmail(form) {
   var str  = 'mailto:seuemail@email.com?';
       str += 'cc=copia1@email.com, copia2@email.com&';
       str += 'bcc=copiaoculta@email.com&';
       str += 'subject=Assunto do E-mail&';
       str += 'body=';
   for (i=0;i<form.elements.length-1;i++) {
       str += '%0A' + form.elements[i].name + ' = ' + form.elements[i].value;
   }
   window.location.href = str;
}

E no form, ao invés de usar "submit", usar um "button" chamando essa função:

<input type="button" onclick="montaEmail(this.form)" value="Enviar">

Lembre-se que os parâmetros do "mailto" são:

destinatários: após o "mailto:" separados por vírgula;
cópia: "cc=" e os destinatários separados por vírgula;
cópia oculta: "bcc=" e os destinatários separados por vírgula;
assunto: "subject=" e o texto do assunto
corpo do email: "body=" e o conteúdo.

Como é uma URL, a separação dos parâmetros é feita por "?" após o(s) destinatário(s) principal(is) e depois "&" a cada parâmetro usado. Pelo mesmo motivo, os caracteres especiais devem ser formatados seguindo o padrão URL. Exemplo: Quebra de linha é %0A.

segunda-feira, abril 07, 2008

Convertendo caracteres em entidades HTML com PHP

Esse aqui é muito legal! Cada caractere da string é convertido para entidade HTML usando a numeração decimal ASCII. Comecei usando para exibir e-mail e os robôs não pegarem (não é funciona tão bem quanto esperava, mas converte bunitinho):


function getAscii($str) {
    if (strlen($str)>0) {
        for ($i=0;$i<strlen($str);$i++) {
            $arr[] = "&#".ord($str{$i}).";";
        }
        return implode('',$arr);
    } else {
        return '';
    }
}

Abraço!

terça-feira, outubro 02, 2007

Entidades HTML - caracteres especiais

Não é recomendado usar sinal de maior, menos, aspas, pois são usadas nas delimitações das marcações e seus atributos. Para inserir estes e outros caracteres especiais no seu documentos HTML, basta usar entidades.
Entidades se iniciam com "&" e finalizam com ";". no formato alfabético, você pode escrever um nome que o navegador entenda, como "á" seria á, e "õ" seria õ, "É" seira É.

& + CARACTERE + ACENTO + ;

Os caracteres especiais também funcionam assim, como aspas, letras gregas etc.

& + CARACTERE_ESPECIAL + ;

Mas existem alguns caracteres que não possuem um nome, e aí você pode usar o número da tabela ASCII:

& + # + NUMERO_ASCII + ;

Ou ainda em hexadecimal!

& + # + x + NUMERO_HEXA + ;

As mais usadas no HTML são essas pois, como disse, são usadas pelas definições das marcações da linguagem:

aspas: " [quotation] ou "
apostrofe: ' [apostrophe] (!IE) ou '
E comercial: & [ampersand] ou &
menor que: < [less than] ou <
maior que: > [greater than] ou >

Sempre recomendo o site W3Schools.com... tem tudo e para isso não é diferente!
http://www.w3schools.com/tags/ref_entities.asp

Ufa!
Tem uma tabela muito legal em http://www.wetfloordesign.com/ajuda/tabEntidades.htm, que na verdade foi inspirada em http://www.mspc.eng.br/info/htmlEnt10.asp , se o autor me permitir.

Veja uma lista completa de caracteres especiais neste site:
http://htmlhelp.com/reference/html40/entities/

http://htmlhelp.com/reference/html40/entities/latin1.html
http://htmlhelp.com/reference/html40/entities/symbols.html
http://htmlhelp.com/reference/html40/entities/special.html

quarta-feira, março 07, 2007

Centralizar a página

Provavelmente você já quis centralizar a página que você fez na tela. Você pode ter recorrido ao uso de tabela para isso, mas sabe que não fez certo. Então aqui vai o jeito certo para colocar sua página de tamanho fixo no centro da tela:

#1 - Alinhe o "texto" para iExeplorer
É isso mesmo. Para Internet Explorer basta colocar um align-text: center no CSS da tag body, mas tome cuidado porque todo o conteúdo dentro dela ficará assim se você não puser um align-text: left, por exemplo.

body {
  text-align: center;
}

Já para a tag da página, você pode colocar o alinhamento correto (padrão, a seu critério):

#pagina {
  text-align: left;
}

#2 - Para o restante
Legal. Só que isso não funciona para Firefox. Para ele DIV não é texto. Você somente precisa dizer que as margens laterais da div página vão ficar com valor padrão, ou seja, margin: 0 auto.
Isso, simplesmente isso, faz como que o navegador coloque a div no centro, deixando as margens laterais iguais. No caso acima as margens superior e inferior estão com 0, mas você pode usar da maneira que você quiser.

#pagina {
  margin: 0 auto;
}

Juntando os dois, teremos:


body {
  text-align: center; /* gambiarra para iExplorer */
}

#pagina {
  text-align: left; /* para corrigir a gambiarra do iExplorer */
  margin: 0 auto; /* para navegadores padrão */
  width: 760; /* só para definir uma largura */
  border: #1 solid #000000; /* para a gente ver a div */
  background-color: #FFFF99; /* um cor de fundo para animar um pouco */
}

HTML:

...
[body]
[div id="pagina"] Blablabla [/div]
[/body]
...

Abraço!