Encarando o problema de frente – Internet Explorer

Há muitas críticas a respeito de um dos navegadores mais utilizados por usuários comuns, para os desenvolvedores este navegador pode ser encarado como um desafio quando o assunto é aplicações/documentos/websites serem interpretados universalmente não importando o dispositivo de acesso ou navegador. Lendo isso é possível detectar qual navegador estou falando –  Internet Explorer da Microsoft, isso  porque este navegador, em especial, traz mecanismos bastante distintos em suas versões. Sendo assim, uma página exibida corretamente no Internet Explorer 7, não necessariamente aparecerá como deveria na versão 6 deste mesmo navegador. Teoricamente, bastaria abrir em um, depois em outro para averiguar a existência de falhas, porém na prática há um problema: ao instalar a versão 7 do Internet Explorer no Windows, a versão anterior instalada — provavelmente a 6 — é substituída.

A dica de hoje é sobre um pequeno software que irá ajudar quem precisa realizar testes nos navegadores na Microsoft,  o nome é IETester, uma espécie de navegador que permite renderizar e acessar o site que desejar em diversas versões do IE (IE10 preview, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, além da versão instalado no próprio computador) utilizando as várias versões da engine Trident e JScript..

A utilização é bem simples, basta selecionar qual a versão que deseja testar e informar o endereço do site. É possível também informar o endereço e testar em todas as versões de uma só vez.

Há também algumas ferramentas para quem quer verificar o código fonte e até mesmo “debugar” o site.

Abaixo os links para download:

• Download IETester versão.4.11 (38MB)
• (IETester v0.4.11 instalador zipado para quem tem limitações de proxy )

Algumas boas notícias surgiram para 2012, uma delas  é que O internet Explorer 6 está praticamente extinto no Brasil, além do fato que a Microsoft anunciou que iniciará em janeiro de 2012 um plano para atualização automática do Internet Explorer para a versão mais recente disponível.

Fonte: http://www.my-debugbar.com/wiki/IETester/HomePage

Cultura Digital – HTML5 no SESC Piracicaba

Para iniciar o ano o SESC de Piracicaba irá oferecer uma oficina sobre os conceitos básicos do HTML (em especial sobre a versão 5 da linguagem) que será ministrado por mim. Particularmente estou muito honrada pelo convite e pretendo levar um pouco das minhas pesquisas e experiências com a linguagem para quem está interessado em saber um pouco mais sobre esta poderosa linguagem de marcação, e  também para aqueles que já  conhecem a linguagem e desejam desvendar as novas características que estão inclusas na sua última versão.

A oficina acontecerá nos próximos dias 14 e 15 de Janeiro das 10 as 12 horas na Rua Ipiranga, 155 – Centro - Piracicaba – SP (mapa de localização). As inscrições já estão abertas basta ir no laboratório de Internet livre do SESC. Em qualquer dúvida entre em contato comigo.

Até lá!

HTML não é linguagem de programação

Uma grande confusão feita por alguns desenvolvedores ou estudantes é passar o conceito de que o HTML é uma linguagem de programação, conceito esse que está incorreto. Para iniciar a explicação para isso basta relembrar um pouco da história da linguagem e seu real objetivo de criação.

O HTML é uma abreviação de Hypertext Markup Language ou Linguagem de Marcação de Hypertexto, isso significa que é uma linguagem criada para publicação de conteúdo na web, podendo conter texto, imagem, vídeo, áudio entre outras formas de representação de conteúdo. Os elementos não estão conectados linearmente como se fossem textos de um livro, mas sim de forma imprevista que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.

Historicamente a linguagem foi desenvolvida originalmente por Tim Berners-Lee que baseou-se na linguagem SGML. O HTML ganhou popularidade quando o Mosaic – browser desenvolvido por Marc Andreessen na década de 1990 – ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.

Desde o início, a principal ideologia dos apostadores no HTML era criar uma linguagem independente de plataformas, navegadores e outros meios de acessos. Com isso o objetivo era fornecer a possibilidade de se criar apenas um código HTML e este código ser lido por diversos meios, desta forma o HTML contribuiu com o desenvolvimento da Web sem proprietários, sem formatos limitados e incompatíveis.

Conforme o surgimento de necessidades houve melhorias nos documentos criados com esta linguagem de marcação, foram lhe adicionados possibilidades, e uma delas foi a criação de documentos inteligentes, que realizavam cadastros, exibia conteúdos conforme uma base de dados além de jogos.  A partir destas necessidades algumas linguagens de programações passaram a ser utilizadas Há diversas linguagens para isso, as mais comuns são PHP, ASP, JAVASCRIPT.

Para definir ainda melhor, podemos dividir a web em 3 camadas,  a primeira é a responsável pelo conteúdo, esta então contém o HTML. A segunda camada é responsável pela apresentação do documento, logo, nesta  camada estão os códigos em CSS. A terceira e última camada é a responsável pelo comportamento da página, então nesta camada estará toda a lógica e programação. Ou seja, as linguagens de programação fica responsável pelo desenvolvimento de algorítimos e funções, já o HTML fica responsável pela formação e estruturação do documento em si.

Em suma, o HTML (seja em qualquer versão) tem como objetivo a marcação de textos, estas marcações são feitas para configurar um documento, quando há necessidade de construir documentos inteligentes é necessário uma linguagem específica para administrar toda a lógica da aplicação.

Adobe anuncia o fim do FLASH para dispositivos mobile e apoio ao HTML 5

No mesmo instante em que ocorria a explosão da Internet no Brasil, no período de 1998 a 2000, o empresa Macromedia conseguiu consagrar o Flash no mercado mundial. A evolução do Flash como ferramenta de autoria para  Web acompanhou a evolução das transições de sites com conteúdo estático para sites com conteúdo dinâmico e integrados. (AWAMURA, Ken, 2000).

Após algumas evoluções, em 2007 o Flash se integra ao Adobe Creative Suite e  então surge o Flash CS3 que renovou sua interface, acrescentando ferramentas para melhor manuseio de vídeos. Este lançamento foi marcado pela integração completa com o resto da Creative Suite, particularmente Photoshop e Flex, e da introdução de ActionScript 3.0.

Deixando os detalhes da evolução do Flash de lado, hoje (quarta-feira, 09 de Novembro 2011) a Adobe anunciou que não irá trabalhar no desenvolvimento da tecnologia flash para dispositivos moveis. A companhia afirmou que passará a investir em HTML 5, tecnologia adotada, por exemplo, em eletrônicos da Apple. Segundo a Apple, na época da adoção, eles não permitiriam a tecnologia flash em seus gadgets (iPhone, iPad e iPod touch) pelo fato de gastar muita bateria.  Com este anúncio a pequena batalha entre as duas empresas termina (Um pouco mais sobre isso no meu outro artigo que fala sobre a Influência da Apple para o HTML5).

Apesar deste depoimento, a companhia afirmou que continuará a fornecer atualizações críticas e de segurança para os dispositivos que suportam a tecnologia.

“Nós já estamos trabalhando no Flash Player 12 e uma nova rodada de recursos interessantes que esperamos novamente que é possível avançar na experiências de entretenimento de alta definição. Vamos continuar com nossa experiência com Flash para acelerar nosso trabalho com a W3C e WebKit para trazer recursos semelhantes a HTML5 o mais rápido possível, assim como fizemos com Shaders CSS. E, vamos projetar novos recursos do Flash para uma transição suave para HTML5 para que os desenvolvedores possam investir com confiança sabendo que suas habilidades vão continuar a ser aproveitado.”, informa o comunicado da Adobe.

Ainda na mesma publicação, o blog oficial afirma

“Estamos super animados sobre as próximas gerações de HTML5 e Flash. Juntos, eles oferecem aos desenvolvedores e editores de opções de conteúdo para a entrega de grandes experiências atraentes web e de aplicações em PCs e dispositivos móveis. Já existe um trabalho incrível que está sendo feito que está ultrapassando limites, e não podemos esperar para ver o que ainda está por vir!”

Para nós, que de certa forma sentíamos uma insegurança por estudar algo que nem se quer está sendo suportado por todos os navegadores, este dia deve ser levado como um dia motivacional, vendo que mais e mais empresas estão aderindo a nova linguagem de marcação, afim de construir aplicativos e websites melhores, pensando em usabilidade e acessibilidade para todos.

Assim que tiver mais informações sobre o Silverlight, posto por aqui também.

Até mais

Fonte oficial: Adobe

Texto na tag canvas

HTML5 inclui um mecanismo para a colocação de texto na tag <canvas>. Isso fornece uma maneira muito mais dinâmica, flexível para apresentar o texto que as versões anteriores.Você pode criar alguns bons efeitos combinando a colocação do texto com o desenho de retângulos, linhas, arcos, e as imagens que já demonstrou.

Neste breve post, irei publicar um para a passo para colocar o texto no elemento, através do seguinte exemplo:

 
<!doctype html>
<html>
<head>
<title>Escrevendo na tag <canvas></title>
<script type="text/javascript">
 var contexto;
 function carregar(){
 contexto = document.getElementById('canvas').getContext('2d');
 contexto.font="15px Lucida Handwriting";
 contexto.fillText("Exemplo de texto no elemento canvas", 10, 20);
 contexto.font="italic 30px HarlemNights";
 contexto.fillText("Exemplo de texto com italic",40,80);
 contexto.font="bold 40px "
 contexto.fillText("Exemplo de texto com negrito",100,200);
 }
</script>
</head>
<body onLoad="carregar();">
 <canvas id="canvas" width="900" height="400">
 Atualize seu browser pois ele não suporte o elemento canvas do HTML5
 </canvas>
</body>
</html>

Como podemos verificar, definimos a fonte, suas configurações, e utilizamos o filltext para desenhar uma cadeia de caracteres utilizando a fonte definida e na localização (x, y) informada.

Bons estudos a todos

Conhecendo o HTML5

Olá pessoal, este post será destinado apenas para disponibilização do material utilizado na minha palestra que aconteceu no dia 17 de outubro de 2011, na Semana de Tecnologia da FATEC Americana. Primeiramente, quero agradecer o pessoal que participou e assistiu, foi muito interessante e surpreendente o número de pessoas que se interessaram pelo assunto, além de ter sido uma turma bem bacana e participativa.

Espero que aproveitem o conteúdo e se precisar de algumas dicas ou material pra estudo é só entrar em contato comigo. Muito obrigada e até breve

Novas propriedades da tag input em HTML5

Uma tag <input> é muito utilizada e importante para programadores ou pessoas que desejam fazer um layout agradável, com a chegada do HTML5 ela  recebeu algumas atualizações que pretende deixar as páginas imunes a erro de digitação e incompatibilidade de dados. Esta tag que antes aceitava tipos limitados de entradas.  Agora ela inclui novos tipos de entradas. São eles:

• search

O elemento que receber o atributo type=search representa uma linha simples de edição de texto para a inserção de uma ou mais palavras  ou termos.

Exemplo:
<input results=”10″ type=”search” /> 

• number
  Se o elemento receber o atributo type=number, ele representa um controle para definir o  valor numérico preciso.

Exemplo: 
<input type="number" />

• range

        Se o elemento receber o atributo type=range, ele representa um controle para definir um valor numérico impreciso.

Exemplo:
<input type="range" />

• color

         Se o elemento receber o atributo type=color, ele representa um controle que abrirá uma palheta de cores que retorna o valor hexadecimal que representa a cor escolhida. Este valor é uma seqüência sete caracteres, composto das seguintes partes e ordem:

1. Um caractere “#”.
2. Seis caracteres no intervalo 0-9, a-f, e A-F.

Observação: Palavras-chave  com o nome da cor(por exemplo, seqüências como “red” ou “green”) não são permitidos.

Exemplo:
<input type="color"/>

• tel

Se o elemente receber o atributo type=tel, ele representa um controle para definir números de telefone.

Exemplo:
<input type="tel"/>

• url

        Se o elemento receber o atributo type=url, ele representa um controle para editar uma URL absoluta.

Exemplo:
<input type="url"/>

• email

        Se o elemento receber o atributo type=email, ele representa um controle para editar uma lista de endereços de emails.

Exemplo:
<input type="email"/>

• date/month/week

        Se o elemento receber o atributo type=date,type=month ou type=week, ele representa um controle para configurar valores que representam uma data, mês ou semana.

Exemplo:
<input type="date"/>

• time - para mostrar a hora;

 Se o elemento receber o atributo type=time, ele representa um controle para configurar valores que representam uma hora.

Exemplo:
<input type="time"/>

Assim como pra o type=datetime e type=datetime-local : 

• datetime - configura data e hora;

Exemplo:
<input type="datetime"/>

• datetime-local - data e hora local.

Exemplo:
<input type="datetime-local"/>

Outra funcionalidade super bacana é o atributo “required” onde o HTML5 valida o campo do formulário de acordo com a entrada (caso esteja configurado como tipo “email”, ele vai validar o email e, assim, fazer a submissão do formulário.)

Influencia da Apple para o HTML5

Como muitos já sabem a Apple não se cansa de bonbardear a  Adobe e seu Flash, Jobs bate sempre na mesma tecla (“HTML5 é o futuro, Flash é ultrapassado”),  com isso o HTML5 foi contemplado com o “apoio” nesta guerra.

Foi sem dúvida importante o impulso que a Apple tem dado na adopção desta nova tecnologia em detrimento de outras que identifica como sendo menos capazes e mais consumidoras de recursos, mas o HTML5 tem também dado provas de que é uma tecnologia de trará uma grande revolução e que conseguirá resolver alguns problemas que existem desde a massificação do conceito smartphone.

O HTML5 ainda é uma tecnologia inacabada, foram já escritas milhares de linhas mas ninguém poderá com segurança dizer o potencial que esta tecnologia alcançará. Mas não é só isso, a Microsoft está também empenhada em desenhar estruturas totalmente compatíveis com HTML5, o próprio IE9  é/foi um excelente exemplo dessa nova política da Microsoft.

Isso remete a uma reflexão interessante. Sobre o poder de influência de algumas empresas. Desde que Steve Jobs disse que não usaria flash em seus produtos, tais como iPhone e iPad, o uso do mesmo só vem caindo, em prol do HTML 5. E a Adobe sabe tanto que a Apple tem o poder de mudar o rumo das coisas, que está trabalhando duro para não deixar o Flash morrer e ainda oferecer suporte ao novo HTML 5, fornecendo a opção de exportação para HTML 5 em ferramentas como Adobe Illustrator e Dreamweaver CS5.

O mundo tecnológico não pára e as certezas são efémeras, assim foi dito no início deste ano, assim se está a confirmar no timming certo.

HTML5 Powered Extensão para o Google Chrome

Olá pessoal, aqui está uma dica para quem quer faciliatar a forma de verificar se o site em que você está navegando é em HTML5. O que nos promoverá isto é o HTML5 Powered que nada mais é que uma extensão do Google Chrome que mostrar o logotipo oficial em sua barra de navegação caso o site use o doctype HTML5.

Vale lembrar que a versão atual só verifica se há um doctype, mas a promessa é que as proximas versões irão detectar quais funcionalidades do HTML5 é suportado e exibir os ícones ao clicar no logo.

Clique aqui para instalar esta extensão

Fontes: http://www.elijahmanor.com/

Customizando links

Olá pessoal, como estou um pouco sem tempo para escrever artigos e não quero deixar vocês sem novidades conforme leio coisas interessantes posto aqui no blog. Hoje li um artigo muito bom e simples sobre Customização de links no seu site, algo que pode ser rápido e útil para o seu visitante.

Além do aspecto visual, customizar links é importante por causa da Acessibilidade. Não estou falando aqui da acessibilidade para pessoas cegas e etc, estou falando de acessibilidade para pessoas que enxergam também. Eu gosto muito de usar o browser sem a barra de status. O problema de se fazer isso é que eu nunca sei para onde um link vai. Quando estou lendo um texto e há um link interessante, quase nunca tenho a indicação de que aquele link vai me levar para fora do site, ou vai me levar para o download arquivo e etc… Por isso é interessante que você, se puder, indique ao leitor qual o tipo de link ele está prestes a clicar. Abaixo dou algumas dicas de seletores complexos que podem te ajudar com este trabalho.

Os seletores complexos são uma ferramenta fascinante. Os seletores complexos pinçam aqueles elementos difíceis, no meio da estrutura HTML, sem identificação de classes ou IDs.

O nosso problema aqui é selecionar links cujo os endereços podem variar, levando o usuário para uma página externa ou um arquivo. Os seletores complexos ajudarão a selecionar estes links sem a ajuda de classes ou IDs extras. Veja os exemplos abaixo e divirta-se:

Para formatar um link que leva para um PDF, por exemplo veja o HTML:

<a href="arquivo.pdf">Arquivo PDF</a> 

O CSS ficaria assim:

a[href $='.pdf'] { 
   padding-left: 18px;
   background: transparent url(icopdf.gif) no-repeat center left;
} 

O resultado: link de arquivo PDF

O código acima aplica o estilo nos links onde o valor do HREF terminam com .PDF.
Seguindo a mesma dinâmica:

a[href ^="mailto:"] {
   padding-left: 18px;
   background: transparent url(icomailto.gif) no-repeat center left;
} 

Neste exemplo customizamos os links cujo valor do HREF comece com MAILTO.

Exemplo: Contato  

 

Fonte: http://www.tableless.com.br