DGmike

DGmike

Calma! não entre em pânico! Amanhã (talvez) tem novo post…

Você está aqui: dgmike » Programação » tableless

  • Home
  • Guia Rápido jQuery
  • Códigos prontos
    • PHP: Função __auloload()
    • Classe sqlsimples e sql – PHP
    • Bancos, bancos e mais bancos…
  • PagSeguro
  • Artigos
    • JavaScript (parte 1)
  • Quem é dgmike?

IE6 – time to die!!!

Posted in Amigos, Chrome, Firefox, Internet Explorer, Navegadores, Programação, Tecnologia, Windows, html, javascript, tableless, xHTML by DGmike
Feb 27 2009
TrackBack Address.

O Internet Explorer foi um browser que trouxe inúmeras novidades como por exemplo suporte à nova linguagem de Estilos em cascata, também conhecido como CSS. Mas o lançamento do Internet Explorer foi dado há mais de oito anos (apromximadamente uns 160 anos humanos).

IE6, jogue fora esse navegador velho!

IE6, jogue fora esse navegador que foi lançado há mais de oito anos e atualize-se! Isto é uma ordem!

Sua grande propagação se deu ao fato de já vir no CD de instalação windows mais popular de todos os tempos: Windows XP. Esse sistema operacional passou por um tempo de rejeição devido à imcompactibilidade de drivers, mas logo após isso a popularização das máquinas se tornou extremamente simples. Isso quer dizer que mais pessoas compravam novas máquinas já compactiveis com o novo e revolucionário XP.

O IE6 dava muita dor de cabeça para programadores front-end (html, css e javascript). Ainda bem que, como todo software que se preze, uma nova versão foi lançada e em alguns meses a versão antiga sairá do mercado e os designers poderão trabalhar sossegados. O problema é que, diferentemente dos softwares normais, o IE6 continua no mercado e os designers continuam batendo cabeça para fazer seu site/sistema rodar nesse programa.

Como já venho dizendo há um bom tempo, precisamos parar de programar para o IE6, já que é a necessidade que faz as pessoas procurarem melhor. Dessa forma, um usuário verá que um site fica “feio” em sua máquina mas na máquina do vizinho fica “redondo” e isso porque está atrasado. Isso fará com que ele corra atrás de um amigo para atualizar seu navegador.

Hoje, não programo mais para IE6 a menos que o cliente me peça, expeficicamente, para que o sistema rode em IE6. Ainda assim tento convencê-lo que o que ele está pedindo é um absurdo e que perderá muitas vantagens com o seu pedido. Mas! Alguém já disse há um tempo (não encontrei a referencia, mas assim que encontrar, publico aqui) que não basta parar de dar suporte, pelo contrário devemos dar suporte. Não ao IE6 mas às pessoas que não sabem como fazer a atualização do seu Browser. Saia da cadeira (depois de ler este post é claro) e vá bater na porta do seu vizinho com um CD do IE7 e atualize o computador dele.

Há um post muito interessante no Web Resources Depot que algumas campanhas internacionais para o fim do IE6 e algumas dicas de como resolver vários problemas (PNG transparente por exemplo) para o dito cujo. Além de uma lista de cartas de obtuários para tal navegador.

Há pouco tempo o pessoal do iMaster começou uma ótima campanha brazuca para darmos cabo ao browser azulzinho defasado. Junto a essa campanha, há uma corrente dentre os blogueiros estão num meme onde você deve incluir o script da campanha no seu blog e indicar mais quatro amigos. Eu vou incluir cinco diferentemente das outras pessoas.

Para este meme, convoco as seguintes lendas da internet:

  1. Vinicius Amaral (@vcamaral)
  2. Willian Fernandes
  3. Bruno Torres
  4. Nando Vieira
  5. Rafael Apocalypse

1 Comment »
Tagged as: atualizar, browser, Firefox, google chrome, ie6, Internet Explorer, navegador, opera, safari

Palestras da visie

Posted in CSS, Cotidiano, Programação, Tecnologia, Trabalho, javascript, tableless, xHTML by DGmike
May 12 2008
TrackBack Address.

Aqui na visie o pessoal está organizando uma série de palestras sobre produtividade, acessibilidade, linguagens, programação, produtividade. O custo de cada palestra é de apenas R$ 35,00 (R$ 30,00 se cadastrado com antecedencia) um preço muito amigável, levando em conta a informação que eles vão passar e a quantidades de horas que eles vão falar.

Não digo isso só porque eu sou funcionário da visie, mas antes de entrar aqui eu assisti a alguns eventos dos caras como o CodeShow, palestra (resenha do arquivo de audio) no ELPI e interCon, universidades ou mesmo videos no Youtube (ah, o bate papo com eles também é muito bom, por mais que saibamos, eles sempre tem uma coisa nova para ensinar) com palestras dos caras e digo, com experiência que vale a pena pagar o preço por cada hora com os caras.

As palestras vão até outubro e cada uma leva em torno de duas horas (das 19:30 até às 21:30) e acontecerão Colégio Adventista da Liberdade (fica uma rua atrás do metrô, como você pode conferir no mapa). E até agora, as paleastras são: Formulários, Internet Móvel, JQUERY, implementação de Layout CSS, Python, Acessibilidade e Controle de Versão.

Enfim, mesmo se eu fosse de outra cidade eu juntava uma excursão, pegava um ônibus e algumas palestras para visitar a cidade e ver a palestra dos caras mais tarde. Vale a pena, já fiz muito isso. Se você quiser saber mais detalhes sobre os eventos, o @diegoeis está tirando todas as dúvidas sobre os eventos no twitter e eu também posso colocar mais informações aqui no meu blog, basta comentar suas dúvidas.

[Nota] Para quem mora fora de São Paulo e virá de ônibus, o ônibus te deixa dentro da estação de metrô (a rodoviária e o metrô são interligados) e o evento é uma rua atrás do mesmo. O metrô em São Paulo é um meio de transporte muito seguro. Então quase não há perigo para ir às palestras.

2 Comments »
Tagged as: acessibilidade, amigável, bate papo, cidade, codeshow, controle de versão, CSS, diegoeis, elpi, eventos, formulários, informação, intercon, internet móvel, jQuery, liberdade, linguagens, metrô, palestra, palestras, produtividade, Programação, python, twitter, universidade, visie, youtube

Classe de tabelas em PHP – Parte 2

Posted in Programação, php, tableless, xHTML by DGmike
Apr 19 2008
TrackBack Address.

Um tempo atrás comecei a fazer um tutorial sobre criar tabelas com o auxilio de uma classe em php[bb] que gera uma tabela semantica[bb] (o que é dificil) e de forma simples. Antes de continuarmos a classe propriamente dita, irei explicar um pouco sobre expressões regulares[bb].

As expressões regulares auxiliam muito na hora de fazer uma busca sobre qualquer coisa em um bloco de texto, como por exemplo os links de um bloco html[bb] ou os emails contidos em uma conversa ou mesmo o ip contido em uma frase. Tudo o que é necessário é saber o padrão necessário do que você procura.

Vamos pegar um exemplo bem básico, um bloco de texto e vamos pegar alguns dados contidos nele.

IP é um acrónimo para a expressão inglesa “Internet Protocol” (ou Protocolo de Internet[bb]), que é um protocolo usado entre duas ou mais máquinas em rede para encaminhamento dos dados.

Os dados numa rede IP são enviados em blocos referidos como pacotes ou datagramas (os termos são basicamente sinónimos no IP, sendo usados para os dados em diferentes locais nas camadas IP). Em particular, no IP nenhuma definição é necessária antes do host tentar enviar pacotes para um host com o qual não comunicou previamente.

Estes são exemplos de IPs: 189.78.131.168 , 189.78.131.168 , 10.27.12.11 , 192.168.0.1 , 127.0.0.1

Retirado da Wikipedia

Percebam que existe um padrão na numeração dos IPs: Quatro sequências de até três números separados por pontos. Nas expressões regulares, podemos fazer buscas por digitos usando a expressão \d que significa digito, então para produrarmos um digito usamos \d. Também podemos definir uma quantidades de vezes que esse caracter pode aparecer, no caso, pode aparecer de uma a três vezes. Logo, nossa busca fica assim: \d{1,3}

O ponto também é uma expressão regular, que indica qualquer coisa. Sim! Qualquer coisa, ele procura por uma letra, número, espaço, pontuação, <CR> (Carriage Return, ou tecla enter), então para “desconvertermos” essa expressão regular, usamos uma barra invertida antes. Logo nossa busca por IP é: \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} ou simplesmente (\d{1,3}\.){3}\d{1,3} que indica uma busca de três sequencias de \d{1,3}\. e uma de \d{1,3}

Expressão Regular em busca de IPs de um texto

Como vocês podem constatar na imagem, a expressão regular funcionou perfeitamente. Eu uso essa extensão do Firefox (Regular Expressions Tester) para de auxiliar no dia-a-dia, já que uso expressões regulares muitas vezes por dia.

Outra coisa interessante em expressões regulares é que podemos definir uma lista de palavras ou expressões que queremos que apareça em nossa sequência. Fazemos isso através de parênteses e “pipes[bb]” (ou barrinha em pé). Eis um exemplo prático, queremos procurar a palavra menino e menina. Basta fazermos a seguinte sentença menin(o|a)

[Nota] A busca anterior também poderia ser dada por menin[oa] uma diferença básica entre parânteses e colchetes é que em parênteses podemos fazer uma busca por outras expressões ou palavras, já que nos colchetes apenas por caracteres específicos. Logo, cas(a|inha|arão) irá procurar pelas três palavras, o que não é possivel fazer com os colchetes.

Vamos pensar em entradas de usuário, ou seja, frases ou listas simples (lembre-se que o nosso objetivo é a classe de criação de tabelas, logo as entradas são pequenas). Então, queremos procurar uma determinada expressão no inicio da entrada do usuário[bb]. Algo como dois pontos e uma palavra e depois dois pontos.

Explico: Digamos que queremos que o usuário entre com os seguintes dados, sequencialmente:

  • Nome
  • Sobrenome
  • :centro: Idade
  • :tel: Telefone
  • :tel: Celular
  • CPF
  • Filiação (Pai)
  • Filiação (Mãe)

Perceba que o usuário quer colocar um atributo na entrada que alinhe ou ajuste as celulas para uma determinada classe. Podemos resolver este problema usando a mágica do circunflexo (^). Quando colocado no inicio da expressão regular, ele indica o inicio da entrada. Então, nossa expressão regular irá iniciar com ^:

Assim como os digitos (\d) também existe o \w que indica um caractere alfa numérico, ou seja letras de A a Z (maiusculas e minusculas) e números de zero a nove. E também podemos definir que deve existir um ou mais desta expressão regular na oração. (Lembram do {n,m} onde n e m são os numeros limites de caracteres?) Com o mais, podemos definir que deve existir um ou mais elementos da expressão regular anterior. Assim, nossa expressão regular fica assim: ^:\w+: Com isto, pegamos o que queremos, se não existir, ele não pegará nada.

Bom, a nossa expressão regular está quase no fim. Como você é esperto, vou deixar a expressao regular final e deixarei que você pense como ela foi criada com base no que foi dito anteriormente:

^(:((\.|#)\w+|(r|c)\d+))+:

Com esta expressão regular, podemos esperar que o usuário entre com as seguintes condições e mais suas subcondições possiveis:

  • :.classe:
  • :#id:
  • :c12:
  • :r1:
  • :.classe:#id:
  • :.classe:r12:
  • :#id:c21:
  • :.qualquerClasse:#qualquerId:c21:r18

Tendo isto em mente, podemos tratar a entrada do usuário, permitindo saber que classe e/ou id ele vai querer colocar na determinada célula, e qual o numero de colspan e rowspan ele vai querer. Onde colspan é junção de colunas e rowspan é junção de linhas, como você pode ver aqui, aqui e aqui.

Digo e repito, estude expressões regulares, vale a pena! Como você pode ver para fazermos um monte de validações em nossa entrada usamos apenas 26 caracteres. Faremos o tratamento dos mesmos na próxima edição, mas adianto que usaremos as funções preg_match e preg_replace.

No Comments yet »
Tagged as: acrónimo, bloco de texto, busca, célula, classe, colspan, digito, entrada, expressões regulares, html, id, Internet Protocol, ip, links, padrão, php, Protocolo de Internet, rede, Regular Expressions, rowspan, Semântica, simples, tabelas, Tutorial, usuário, wikipedia

FatorW no WeLoveWordPress

Posted in Amigos, CSS, Cotidiano, Inspiração, Trabalho, tableless by DGmike
Apr 08 2008
TrackBack Address.

O fatorW é escrito pelo Walmar Andrade, um cara muito inteligente formado em comunicação que escreve bons artigos em seu blog. Obviamente, ele se encontra em meus feeds e leio o seu conteudo pelo menos uma vez por mês. Recentemente ele mudou o layout do blog e anunciou. Isso caiu no meu gReader. Um tempo depois vejo, também no meu gReader, que o pessoal lá fora gostou do que viu no blog do Walmar.

Parabéns Walmar. Aprenda e se aprimore cada vez mais. É um prazer ver que o pessoal lá fora gosta dos profissionais daqui.

No Comments yet »
Tagged as: artigos, blog, comunicação, fatorW, inteligente, Walmar

Revolução no WLWP

Posted in Amigos, CSS, Inspiração, tableless, xHTML by DGmike
Mar 19 2008
TrackBack Address.

Eu assino o feed do We Love WordPress e mais alguns outros feeds voltados para design de sites em CSS. Hoje, quando fui checar meu e-mail fui ver alguns feeds e me deparei com o site do Henrique Pereira, um ótimo escritor que fez mostra várias novidades e testes de teorias como os microformats.

É bom ver alguém que conheço (pelo menos de leitura) num ranking internacional. Um tempo atrás a @s1mone falou que o site da agencia que ela trabalha também saiu em um rankin assim. O interessante (e bom, diga-se de passagem) é que a presença de sites nacionais é bastante intenso.

1 Comment »
Tagged as: CSS, Design, feed, henrique pereira, Inspiração, microformats, ranking, sites, we love wordpress
Next page »

Categorias

  • Cotidiano  (132)
    • Amigos  (16)
    • Dia-a-dia  (33)
    • Diversão  (18)
    • Games  (1)
    • Não categorizado  (26)
  • Design  (15)
    • Ilustração  (6)
    • Imagem  (8)
    • Inspiração  (5)
    • Vetorial  (5)
  • eventos  (10)
    • PHP Conference  (3)
  • flash  (4)
  • Navegadores  (22)
    • Chrome  (6)
    • extensions  (11)
    • Firefox  (18)
    • Internet Explorer  (6)
  • pagseguro  (13)
  • Programação  (106)
    • CSS  (20)
    • html  (7)
    • javascript  (36)
      • jQuery  (7)
      • yui  (2)
    • php  (44)
      • icephp  (4)
    • plugin  (3)
    • python  (5)
    • sql  (9)
    • tableless  (18)
    • wordpress  (2)
    • xHTML  (23)
  • Tecnologia  (70)
    • Semântica  (16)
    • Tutorial  (25)
    • video  (8)
      • video-tutorial  (5)
    • Windows  (4)
  • Trabalho  (33)
    • cases  (4)

Tags

ajax artigo banco de dados biblioteca blog browser classe CSS data Design Dia-a-dia dinheiro evento eventos Firefox framework google html icephp internet Internet Explorer javascript jQuery loja mysql opera pagseguro palestra php plugin Programação python retorno automático simples site solução sql tableless Tecnologia Trabalho Tutorial twitter visie web wordpress

Arquivo

SlideSare

Últimos Posts

  • PagSeguro – Gravando log com ASP
  • Vá com calma
  • Vírgula em html5 e css3
  • Youtube e HTML5, agora ficou mais fácil
  • Novo emprego!

Tags

ajax artigo banco de dados biblioteca blog browser classe CSS data Design Dia-a-dia dinheiro evento eventos Firefox framework google html icephp internet Internet Explorer javascript jQuery loja mysql opera pagseguro palestra php plugin Programação python retorno automático simples site solução sql tableless Tecnologia Trabalho Tutorial twitter visie web wordpress

Conteúdo

  • Artigos
    • JavaScript (parte 1)
  • Códigos prontos
    • Bancos, bancos e mais bancos…
    • Classe sqlsimples e sql – PHP
    • PHP: Função __auloload()
  • Guia Rápido jQuery
  • PagSeguro
  • Quem é dgmike?
PagSeguro Powered by WordPress | “Blend” from Spectacu.la WP Themes Club