Arquivo da categoria: website

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/

Anúncios

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