Tribo do C.I.

Só mais um blog de informática (só que não)

DOM: id dos elementos são variáveis globais

março 31st, 2014

Vi no twitter e no facebook, algumas pessoas falando que para mostrar um elemento do HTML no Console do Groogle Chrome, você precisa apenas escrever o ID desse elemento. O @johnjbarton esclareceu que isso acontece porque todos os IDs dos elementos SÃO variáveis globais no javascript. Veja mais detalhes abaixo:

O Padrão:

O HTML5 especifica que o objeto window pode ter uma chave de propriedade na qual o valor dela é um elemento html se:

  • Existe exatamento 1 elemento DOM em que a propriedade ‘id’ tem o valor da chave
  • Existe exatamente 1 elemento DOM que a propriedade ‘name’ tem o valor da chave. O elemento deve ser um tipo: a, applet, area, embed, form, frame, frameset, iframe, img, object.

Exemplo, no site da Tribo do CI  você pode abrir o console do chrome e digitar: window[‘branding’] ou simplesmente branding. Aparecerá a tag header com id=’branding’. Se existe mais de uma tag encontrada, regras diferentes são aplicadas. Com isto em mente, veja outro exemplo abaixo:

<div id=”foo”></div>

O elemento acima pode ser acessado via window.foo ou, como todas as propriedades de window, apenas foo. Por exemplo, no console do Chrome, você pode fazer:

> "foo" in window
    true
> foo
    <div id=?"foo">?</div>?

Firefox

No firefox funciona um pouco diferente

> "foo" in window
    false
> typeof foo  // Essa variável existe?
    object
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> foo
    [object HTMLDivElement]
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> "foo" in window
    true

O que aconteceu? inicialmente não existe a propriedade window.foo. Mas após a primeira chamada, seja diretamente ou pela variável global, a propriedade é criada.

Conclusão

Existe uma padronização do HTML5 na qual os ID’s dos elementos se tornam propriedades de window, por isso que essa facilidade é uma novidade para nós. Cabe agora, aos maníacos de boas práticas, nos dizer qual seria a maneira mais correta de utilizar essa feature.

Esse post é uma versão brasileira de 2ality – DOM: elemtn IDs are global variables.
Cheap buy levitra online cheap candian levitra celebrex buy cheap brand viagra
Best Prices For All Customers! Cheap Prednisone 20mg . Fastest Shipping, buy prednisone Australia.
4 days ago – Estrace -cream 15gm – Low prices and discounts buy estrace -cream Online – Click Here Find store pill estrace -cream in canada online fedex

Dica Rápida: Desafio CSS (iMasters) – Especial Cone

julho 29th, 2013

 

cone

Há alguns dias atrás foi lançado no iMasters um desafio de css, criar um cone usando somente uma div, no html. No artigo do desafio, o Bernard de Luna estabeleceu algumas regras, dentre elas, que o único código HTML dentro do body seria este

 <div class="cone"></div>

GITHUB

Com intuito de inaugurar/divulgar o Github da Tribo do CI nós disponibilizamos a nossa implementação do Cone CSS no GitHub, feito por mim: Sheldon Led. Vamos explicar um pouco do código.

Algumas explicações sobre o código.

Se você observar a figura acima, com um olhar mais analítico, perceberá que o cone nada mais é do que um triângulo com a base arredondada em cima de um losango com uma borda arredondada e mais escura. O código CSS está bem dividido nessas 2 partes, o “triangulo” é o .cone:after e o “losango” é o

  • Pseudo-classes: Existe um artigo bem completo no Tableless sobre Pseudo-classes. Uma pseudo-classe, ou pseudo-elemento, nada mais é do que alguns comportamentos/padrões de elementos HTML em CSS. Para o cone, utilizamos a pseudo-classe :after, que em uma interpretação a grosso modo, interpreta um elemento depois do elemento em questão, que no caso é a div da classe cone.
  • Bordas: Tanto no .cone quanto no .cone:after controlamos cada borda separadamente. Existe uma explicação legal sobre bordas em CSS no site do Maujor.
  • Transform: Novamente, existe um artigo bem detalhado e com exemplos de CSS Transform no site do Tableless. No nosso cone utilizamos o transform para rotacionar o elemento. É possível utilizar vários efeitos inclusive simultaneamente com o transform, porém como ainda não é uma especificação definida, é preciso utilizar prefixos.
  • Prefixos: Os prefixos são propriedades de CSS que funcionam especificamente para um navegador, pelo fato de ainda não ser uma especificação W3C ou por ser uma especificação em teste. No cone utilizamos os prefixos: -webkit (Chrome, Safari e Opera mais recente),  -moz (Firefox, Iceweasel), -ms (Internet Explorer), -o (Opera). Utilizamos os prefixos no css transform e border-radius.
  • Box Shadow: O box-shadow é uma propriedade do CSS3 que desenha uma sombra atrás de um elemento. Ele foi utilizado para desenhar a borda mais escura da base do cone.

Você pode ver o código, no  Github da Tribo do CI e tentar fazer sua própria implementação de exemplo, e ver abaixo (caso seu navegador estiver atualizado) nosso exemplo sendo executado.

 

 

 

 

 

 

 

 

OBS: Usei como base de conhecimento para produzir o cone, esses Exemplos de figuras geométricas em CSS.

Review Aplicativo: Guiato Ofertas

março 2nd, 2013
Tela de Início do Aplicativo Guiato

Tela de Início do Aplicativo Guiato IPhone4

O Guiato é uma plataforma/aplicativo que tem como propósito ajudar você a encontrar as melhores ofertas na hora de fazer suas compras e ele torna isso possível exibindo um catálogo inteligente online com os estabelecimentos e suas ofertas que estejam mais próximos de você, ou seja, todos os panfletos que cabem no seu bolso, acho que Steve Jobs diria isso no Keynote de lançamento 😀

Aplicativos que utilizam a geolocalização já tem alguns pontos reservados comigo pelo meu passado no desenvolvimento de aplicativos GIS ou SIG (Sistemas de Informações Geográficas) e esse é o caso do Aplicativo Guiato, que na verdade é uma plataforma pois o mesmo está disponível tanto para o uso em dispositivos móveis iOS e Android, bem como uma versão para o navegador.

Os testes principais foram feitos utilizando um IPhone 4 no entanto deixamos algumas considerações nas demais plataformas que o Guiato está disponível a começar pela versão que funciona em seu navegador de internet predileto, espero que não seja o Internet Explorer 6, fundamentalismo a parte vamos ao review de fato.

 

Navegador

 

Tentei ir mais cru possível a cada plataforma, pra eu ter a reação de primeiro uso sem nenhuma apresentação, mesmo sabendo que existe manuais no site e vídeos demonstrativos sobre os recursos disponíveis, no site já tem um pequena desvantagem em relação as outras plataformas pois a localização que é possível detectar pelo browser não é muito precisa, consegue no máximo inferir a cidade no qual você está acessando mesmo assim é só você digitar o seu endereço ou o CEP que fica tudo certo, a segunda vez que você acessa o site ele resgata suas preferências de localização, assim não você precisa especificar toda vez onde está.

Basicamente são 3 sessões:

  • Encartes e Lojas – Aqui onde você pode achar uma “cópia” dos panfletos e ou catálogos das lojas, e assim pesquisar promoções ou mesmo zapiar nos produtos disponíveis.
    Guiato Encartes (Clique para Ampliar)

    Guiato Encartes (Clique para Ampliar)

    e ao abrir o encarte:

    Guiato Ofertas: Encarte Aberto (Clique para Ampliar)

    Guiato Ofertas: Encarte Aberto (Clique para Ampliar)

  • Mapa –  Aqui a visão é pelos estabelecimentos, dessa forma você consegue encontrar facilmente as lojas que estão próximas a você.

    Guiato Ofertas: Mapa (Clique para Ampliar)

    Guiato Ofertas: Mapa (Clique para Ampliar)

  • e Guiato Alerta – aqui você pode se “inscrever” para receber alertas por e-mail de novas ofertas e produtos, e você pode filtrar o que deseja ser notificado, evitando assim ser bombardeado com produtos que não lhe interessa para o exemplo eu configurei pra me notificar quando farmácias tiverem Barras de Cereais Diet, bem específico não? Diabetes ta aí com tudo, nova moda do verão e eu como sou um cara antenado nas tendências…

    Guiato Ofertas: Alertas (Clique para Ampliar)

    Guiato Ofertas: Alertas (Clique para Ampliar)

A versão Móvel para o Guiato tem basicamente as mesmas funcionalidades mais explorando bem os recursos do aparelho, como por exemplo as notificações:

Guiato - Alertas (Clique para Ampliar)

Guiato – Alertas (Clique para Ampliar)

E nesse caso a visualização do mapa utilizando o GPS deixa a localização bem mais aproximada:

Guiato: Visualização Mapa (Clique para Ampliar)

Guiato: Visualização Mapa (Clique para Ampliar)

Um recurso que eu espera que tivesse era a possibilidade de filtrar o tipo de oferta que eu gostaria de visualizar e assim não ficar com um tela poluída. Das pessoas que me ajudaram a fazer o review, foi comum dizer até que seria uma boa ter essa opção de cara, já pra trazer as ofertas filtradas.

Guiato Ofertas: Filtro (Clique para Ampliar)

Guiato Ofertas: Filtro (Clique para Ampliar)

Bem como a possibilidade de classificar as ofertas não só pela distância, mais também e popularidade, assim é fácil de avaliar se a economia vale apena.

Guiato Ofertas:  Classificar (Clique para Ampliar)

Guiato Ofertas: Classificar (Clique para Ampliar)

Guiato HD para IPad

 

Aqui agente pode tocar em um assunto que está na moda, que é o design responsivo e o Guiato HD se sai bem no IPad, pois utiliza bem o espaço de tela disponível.

Guiato HD no iPad Retina. (Clique para ampliar)

Guiato HD no iPad Retina. (Clique para ampliar)

Veja mais aqui também.

Guiato HD Ofertas (Clique para ampliar)

Guiato HD Ofertas (Clique para ampliar)

Vamos ficar devendo o teste em um dispositivo de tela grande com Android, fica o convite pra você que tenha um e testou o aplicativo mandar um links para screenshots para vermos como ele se comporta, ficaremos devendo também o teste de acessibilidade.

 

Considerações Finais

 

Embora aplique a mesma ideia em todas plataformas o Guiato explora bem os recursos de cada uma o que é um ponto positivo, no entanto seria interessante ter uma integração entre elas, isso seria bastante pra quem desejar utilizar o aplicativo em mais de uma plataforma ao mesmo tempo.

Outra coisa a se notar nas plataformas de dispositivos móveis é sobre o conteúdo que quase sempre é dinâmico a conseqüência disso é que por um lado você tem um aplicativo bem pequeno pra baixar da sua store, iTunes Store para iOS ou Play Store para Android e por outro usuários que tem franquia de banda de dados acaba sendo “prejudicado”.

Guiato na Play Store (Clique para Ampliar)

Guiato na Play Store (Clique para Ampliar)

Ainda falando sobre consumo de banda eu faço um uso incomum de smart phone, pois embora tenha um iPhone 4 o meu chip é pré-pago, o mais comum é utilizar um plano pós-pago e geralmente vem com planos de dados ilimitado, e nesse caso pode esquecer a preocupação com o consumo de banda. Certo?

Agradecimentos

 

Esse artigo não seria possível sem a colaboração de Eduardo Teles pelo Android, Vinícius Menezes no IPad e por ultimo porém não menos importante Palloma Anchieta da Guiato por sua paciência e apoio na realização desse review.

Agradeço a você também que leu o artigo até aqui, não deixe comentar as suas impressões em qualquer um dos aspectos aqui discutidos (ou não). Espero que tenham gostado e até o próximo artigo.

Links