Arquivo da tag: CSS

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

Videocoisas – seu canal de anúncios

Logo, videocoisas.com

Se você quer anúncios com recursos além do bom e velho texto e imagem, eu apresento-lhe videocoisas.com, projeto desenvolvido para a BrazilWeb.

Uma plataforma dedicada à publicação de vídeo-anúncios de seus usuários, ou seja, anúncios de produtos, serviços e habilidades pessoais no formato de vídeo–classificados.

O público anunciante pode classificar seus vídeo-anúncios de acordo com uma série de categorias e localidades. Além disso, podem criar canais, onde todos seus anúncios ficam agrupados, facilitando o contato com os visitantes interessados em seus vídeos.

São aceitos diversos formatos de vídeos, como AVI, MPEG, Quicktime, Real, OGV, e Windows Media e os arquivos dos anúncios devem ter até 50MB (cerca de 10 minutos de duração). A publicação de vídeo-anúncios no Videocoisas é gratuita.

 

O desenvolvimento

O trabalho realizado foi:

  • criação do logotipo
  • arquitetura do site
  • layout do site
  • programação serve-side
  • programação cliente-side (ajax)
  • design e programação do player de vídeo
  • criação de um gerenciador para o moderador
  • configuração do servidor

O Logotipo e o layout foi todo feito no illustrator.

Houve um cuidado especial com a url, a regra foi deixa-la legível e auto-explicativa (URL amigáveis, permalink ), para melhorar a indexão dos buscadores e facilitar a troca de url entre as pessoas .

Cada canal possui seu próprio subdomínio, para que futuramente o serviço possa ser personalizado para cada cliente, onde cada canal terá seu próprio layout e plugins.

As páginas estão seguindo os padrões Web ( webstandards ) o que proporcionou:

  • o tamanho das páginas foi otimizado, deixando-as com uma excelente performance no tempo de resposta
  • melhora no SEO (otimização nos sistemas de busca)
  • acessibilidade

E o restante da sopa de letrinhas de tecnologia utilizado no site é:

  • Microformats
  • Gravatar
  • Ajax
  • Tag-cloud por categorias e localização
  • RSS organizado por canal, categoria e localidade

Então, faça seus vídeos e divulgue produtos, venda, aluguel, ofereça prestação de serviços… ou qualquer outra coisa

 

 

Podcast Canção Nova

Layout que fiz para ser utilizado na administração e pelos moderador do podcast Canção Nova

Mais detalhes e informações veja no blog da equipe de internet da CN

http://blog.cancaonova.com/artificeweb/podcast-cancao-nova/

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

Hot-site: Homenagem Musical para o Dia dos Pais

Para comemorar o dia dos pais 2007, o canal de Música do Portal Canção Nova fez a promoçãoHomenagem Musical para o Dia dos Pais. Três vídeos serão escolhidos pelo portal Canção Nova e serão premiados com kits do Departamento de Audiovisuais (DAVI) e ainda um CD adicional, do qual poderá ser escolhido um dentre vários.


Parabéns pela iniciativa do Anderson (responsável pelo canal de música), o apoio do departamento Davi, e a todos que participaram neste projeto: Tatiane Bastos , Marco Moura (design da página) e a equipe da programação.

Texto originalmente postado no blog artíficeweb

Redesign do Sites Católicos

Olá pessoal.

O primeiro post traz uma “novidade” para o nosso portal. O redesenho da página dos Sites Católicos. O objetivo foi aperfeiçoar e atualizar a página, adicionar novos recursos e melhorar seu aspecto visual.

A página traz links de diversos sites católicos espalhados pelo mundo. As novidades são inúmeras, uma delas é que agora você pode enviar o link do seu próprio site católico.

“Seguindo o aspecto visual da capa do Portal, foi optado em manter a semelhança para melhorar a identidade da capa.”, diz Marco Moura, Web Developer desenvolvedor do redesign.

O “Sites Católicos” possui conceitos sobre acessibilidade que irá contribuir com acesso de qualquer pessoa e em qualquer dispositivo.

“Para deixá-lo com cara de Web 2.0, mudamos o sistema de classificação dos links, agora o conteúdo é organizado com tags.”

O conteúdo fica mais fácil de ser acessado, foi implantado um sistema de busca interna dos links cadastrados.

“Essa nova página possui conceitos sobre acessibilidade que irá contribuir com acesso de qualquer pessoa e em qualquer dispositivo”

Os links para as páginas católicas estão com o recurso de “Preview”, permitindo visualizá-los antes de acessar.

O site está preparado para a umas das tendências na internet, microformats, que logo nos será tão útil como é o RSS.

Para participar do novo conceito de “Sites Católicos” do Portal Canção Nova, acesse o Portal Canção Novawww.cancaonova.com/sitescatolicos

Bom pessoal. Espero que tenham gostado e que participem enviando seus próprios links para que o Sites Católicos cresça em seu objetivo

Dúvida? Sugestão? Crítica? Deixe nos um comentário!

Abraço a todos e fiquem com Deus.

Atualização 23-07-2007

O formulário de sugestão foi turbinado com ajax, quando o formulário é enviado não ocorre o recarregamento da página, tornando mais rápido e prático o envio de sugestão, e foi melhorado a verificação do formulário para checar se o nome e o endereço da sugestão não está vazio.

Atualização 05/10/2007

Foi alterado o método de visualização da imagem de amostra do site, agora é embutido direto na página

Texto originalmente postado no blog artíficeweb

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