Arquivo da categoria: html

Site – Descubra o melhor com Tabasco no Foursquare

Campanha pioneira integrando o Foursquare criada pela FocusNetworks para a TABASCO® brand Pepper Sauce com o objetivo de ser um guia colaborativo para mapear estabelecimentos que oferecem a pimenta TABASCO® aos seus clientes, e as melhores dicas de estabelecimentos são premiados com um kit exclusivo de pimenta e no final da campanha com um Ipad2.

Veja mais informações sobre a dinâmica do concurso no site brainstorm9 e no videocase do programa Adnews na TV e Mix Tv.

Site tudocomtabasco.com

Site tudocomtabasco.com

Fui responsável pelo desenvolvimento server-side utilizando Ruby on Rails, SASS e HAML como template e a GEM FOURSQUARE2 para buscar os estabelecimentos com dicas, contribui com o desenvolvimento desta GEM adicionando as funcionalidades de filtrar o conteúdo do Foursquare com determinadas palavras dos quais era necessárias para a camapanha, (assunto abordado neste post), e da programação client-side utilizando jquery, e da conversão do PSD para HTML ( template HAML ) e CSS (SASS).

Website HD Inspeções

hdinspecoes.com.br

hdinspecoes.com.br

Projeto realizado para a empresa HS & Cia, empresa responsável pela área de informática da HD Inspeções.

A HD Inspeções é uma empresa do vale do paraíba que faz inspeções e revestimentos em tubos.

O job foi fazer um site estático, que consistiu em fazer o layout ( do qual foi feito no Illustrator), a conversão HTML/CSS, um script PHP de envio de email e o deploy para o servidor.

Segue o link do site

http://www.hdinspecoes.com/

Player para o podcast Canção Nova

Podcast Canção Nova - player

A Canção Nova tem mais um serviço na internet, é oPodcast CN, e fizemos um player personalizado e sob medida para ele, e como de costume o blog vai ser o canal para explicar seu funcionamento e para você mandar suas criticas e sugestões.

Compartilhamento de podcast
Como já aconteceu com o player para WebTvCN, o podcast da canção tem a intenção de espalhar-se por blogs e sites, por isso há no site do podcast e também no próprio player duas maneiras para compartilhar:

  • via embed: que é o código html para adicionar o player em seu site.
  • via email: enviando o link(url) da página do podcast para um amigo ouvir.

Podcast Canção Nova - compartilhar via email
Teclas de atalho
Para quem utilizar o player com freqüência, poderá usar os recursos de atalho para controlar do player, as teclas de atalho são:

  • play ou pause      =  barra de espaço
  • avança tempo      =  seta direita
  • retrocede tempo  =  seta esquerda

Cronômetro
Há também a opção para alterar a contagem do tempo, clicar no cronômetro para alterar a ordem do tempo para crescente ou decrescente.

Atalho para página do podcast
Clickando no logo do Podcast no canto inferior do player você será redirecionado para a página do canal do podcast

Para experimentar confira abaixo um podcast com a Equipe da Redação do Portal Canção Nova.

O trabalho foi realizado por Marco Moura, que fez o design no illustrator e no flash, e a programação cliente-side em Action-Script 3.

E por Patricia Fernades, que fez a programação serve-side PHP, arquivos de xml e o script de envio de e-mail.

* Post originalmente escrito no blog Artificeweb

Layout do administrador de Podcast da TV Canção Nova

Está  on-line em desenvolvimento o o novo canal de podcast da Canção Nova, desenvolvimento do qual teve a singela participação de um membro da equipe Artifíce Web, Marco Moura.

Marco Moura foi o responsável por desenvolver o layout que será utilizado para a administração dos podcast (área restrita) e para o moderador da comunidade. Então se você vier a ter um podcast na CN, irá utilizar essa interface.

Essa é a página de gerenciamento de autores. Foi feita por Marco Moura (webdesign) e Luciana (programação)

O layout da área pública do site foi feito pelo Nelson, e assim que puder divulgaremos algumas imagens.

Com o layout todo pronto, agora as programadores Luciana e Patricia estão a todo vapor para concluir a programação e logo o novo site de podcast da Canção Nova estará disponível a todos .

Este texto foi originalmente postado no blog artificeweb no dia 30/04/2008

Dicas para aplicar CSS em e-mail

Quando utilizamos CSS em arquivo HTML que será visualizado via browser precisamos lidar com algumas restrições, evitar algumas propriedades CSS que não são suportadas ou que tenham diferenças de render entre browsers, ou seja, o uso de CSS e o suporte aos padrões é diferente entre browsers e ambientes, e o assunto é ainda mais complicado quando é sobre softwares “Leitores de e-mail” .

Precisamos gerar e-mail para várias finalidades, como newsletter, campanha de marketing e mensagens de sistema, e para isso podemos podemos usar os formatos de arquivo TXT e HTML, e no caso utilizar CSS temos que evitar algumas propriedades, pois os leitores de email retiram propriedades que possam comprometer a sua segurança.

Como as propriedades position e float, que seguem a seguinte lógica, imagine lendo um mail via browser(gmail,yahoo) e você recebe um mensagem que através de CSS posiciona um link invisível sobre o logo da aplicação (gmail…) e este link redireciona para um outro site !!

Então evite layout com colunas, por que não é possível alterar o fluxo do conteúdo com POSITION e FLOAT, prefiro evitar ao invés de utilizar tabelas.

Uma outra restrição é que o leitor apenas interpreta STYLE IN-LINE, o leitor de e-mail remove qualquer tag que inclua arquivos externos, como o elemento STYLE e LINK, e qualquer classe, id e seletor CSS que houver em sua mensagem.

Ex: Este trecho é removido em muitos leitores de e-mail

<style>
  #logo{text-align:center}
</style>
<link href="http://site.com/newsletter.css"
      type="text/css" rel="stylesheet" />
  #logo{text-align:center}
  .teste{color:red}
  p{font-size:2em}
</link>

Já isso é permitido pela maioria

<h1 style="text-align:center">
  Logo
</h1>
<span style="color:red">
  Alerta
</span>
<p> style="font-size:2em">
  Loren Lipsun
</p>

Então conclusão,

  • não utilize CSS externo
  • não coloque seu CSS no cabeçalho da pagina
  • utilize style in-line diretamente nas tags HTML.

Segue alguns links com mais informações sobre o assunto
http://del.icio.us/marco.moura/css-email

Botão com a tag botão

Uma tag subestimada, pois com a tag “button” temos mais controle sobre o formulário e sobre o design do botão .
Usualmente em um formulário utilizamos a tag input com o type= submit|reset, com o button obtemos o mesmo funcionamento, para enviar e dar o reset.
Ex de submit|reset com button:

<button  type=”submit”>Enviar</button>
<button  type=”reset”>Enviar</button>

Até aqui está tudo igual, agora duas vantagens com o button.

Aspecto visual: podemos adicionar dentro de uma tag “button” uma imagem, dai vc pensa ‘na tag input também’, certo mas com button você coloca quantas imagens quiser e até mesmo outras tags .

Ex:
<FORM action=”seuform”>
<label for='email'>email:</label> <INPUT type=”text” name=”email” id="email">
<BUTTON name=”submit” value=”submit” type=”submit”>
  <span>E</span>nviar
  <IMG src=”legal.gif” alt=”wow”> <IMG src=”send.gif” alt=”send”>
</BUTTON>
<BUTTON name=”reset” type=”reset”>
  Re<span>s</span>et <IMG src=”oops.gif” alt=”oops”>
  <IMG src=”forum.gif” alt=”forum” />
</BUTTON>
</FORM>

Quando em um formulário o usuário precisa selecionar uma entre várias opções, podemos utilizar um select box ou vários formulários ou várias tags “a” dentro de uma mesma pagína. Neste caso é utilizado o button para adicionar apenas um formulário e enviar apenas um valor para o servidor.

Ex de uma pagínação:

<form class="pagination" action="paginate.php" method="get">
<ol>
<li class=”prev”>
  <button type=”submit” name=”submit” value=”1″>
    1
    <span></span>
  </button>
</li>
<li class=”curr”>
  <button type=”submit” name=”submit” value=”2″>2</button>
</li>
<li class=”next”>
  <button type=”submit” name=”submit” value=”3″>3</button>
</li>
<li>
  <button type=”submit” name=”submit” value=”4″>4</button>
</li>
<li>
  <button type=”submit” name=”submit” value=”5″>5</button>
</li>
</ol>
</form>

É util em algumas situações, diminuindo o tamanho do código HTML e melhorando a semântica da pagína.

http://del.icio.us/marco.moura/button