posts da categoria Html

Crie sites em questão de minutos com o Pingendo

Sem dúvidas, o Bootstrap é uma das frameworks mais utilizadas ultimamente, porém, para algumas pessoas, ainda é meio complicado lidar com os códigos, sejam eles HTML, CSS ou JavaScript. O que é o Pingendo? Pingendo é um programa de interface simples e de fácil uso. O Pingendo é um criador de sites em Bootstrap 3 que permite a criação de websites de maneira simples e rápida. Drag and drop O programa usa um modo muito popular em criadores de sites online como Wix, Weebly, etc.

por Bruno

Minha experiência com o CT (Centro de Treinamento)

Meu nome é Danilo, tenho 25 anos, e moro em São Paulo. Antes de conhecer o projeto do CT , eu havia trabalhado pouco tempo como Front-end em uma empresa chamada Athos Informática. Minha experiência não foi uma das melhores, e acabou não dando muito certo. Porém, aconteceu algo muito bacana , quando eu fiquei disponível para o mercado de trabalho. Comecei a frequentar todos os Meetup’s que eu podia, conversei com muitos Dev’s da comunidade, e coloquei de fato a mão na massa.

por DaniloAgostinho

Criando uma aplicação de Chat simples com NodeJS e Socket.io

Neste tutorial iremos abordar alguns conceitos do Socket.io criando um simples sistema de chat para browser.

por Daniel Campos

CSS3 — Trabalhando com Múltiplas imagens background-images

Quem nunca se deparou com o um layout com imagens “sobrepostas” que precisavam ficar suspensas sobre múltiplas imagens de fundo, com CSS3, você pode aplicar aos elementos múltiplas imagens como plano de fundo sobrepostas. Sem a utilização do Z-index, é isso mesmo “necas de pitibiriba” de Z-index. Que Z-index que nada, agora a MODA é Background-image !!!

por Moisés Lopes Ferreira

Upload de imagens desmistificado com simpleGallery.js

Upload, certamente, é uma parte difícil na programação, provavelmente você já teve problemas com isso. Por que não simplificar? Confira como o simpleGallery.js pode lhe ajudar nesta jornada.

por Fabio Carvalho

Carrossel descomplicado com HTML, CSS

Não é difícil perceber que muitos desenvolvedores tanto iniciantes como os veteranos de guerra ainda sofrem quando o assunto é carrossel, mesmo utilizando frameworks como BootStrap. Mas seus problemas acabaram! (música de chegada milagrosa), com o conhecimento de poucas técnicas podemos resolver esse “gigante” problema facilmente. Pseudo classe :target – CSS Para resolver o grande problema de transição do carrossel, vamos utilizar a pseudo classe :target, que atribui algumas características do CSS para o elemento HTML.

por Leonardo Camp

Acessibilidade básica no formulário de contato

Um dos itens indispensáveis em um site é o formulário de contato, já pensou deixar ele acessível para todos na web? Na atualidade a acessibilidade vem sendo levada a sério com o avanço das tecnologias web e as supostas padronizações dos navegadores, e a acessibilidade hoje na web é muito importante, e a chegada do HTML5 deixou marcação do HTML mais explicativa para usuários acessíveis. WCAG 2.0 o que é ?

por Orivelton Cesar

Aplicativos Desktop com NW.js – Node Webkit – Introdução

Este é o primeiro artigo de uma série sobre aplicações desktop usando tecnologias web. (HTML, CSS, Javascript e WebGL)

por João A. Zonta

Introduzindo “Rich Cards”, um novo formato de resultados para Buscas

Como uma boa empresa de tecnologia, o Google parece fazer da necessidade de evoluir suas ferramentas uma “obsessão”. Quando o assunto é mobilidade então, essa questão é um pouco superior. Todo mundo sabe que a maneira de interagir em um resultado de busca depende muito de como as informações estão organizadas no topo. Temos uma tendência em clicar nos primeiros resultados, algo que o o próprio Google nos educou. Com os Dados Estruturados (Rich Snippets), temos uma nova forma de obter resultados relevantes, através de imagens, votação entre outros meios que certamente influenciarão nosso clique.

por Rodrigo Fávaro

Criando facebook reactions com css

Criando novos botões de comportamento do Facebook usando apenas CSS e HTML.

por Deivid Marques

Criando seu próprio servidor HTTP do zero (ou quase) – Parte Final

Na última parte deste tutorial, aprenda sobre threads e como transformar seu servidor para receber múltiplas conexões.

por thiguetta

Acessibilidade na web: Como tornar seu site acessível.

Há 5 anos atrás eu escrevi aqui no Tableless um artigo falando um pouco sobre acessibilidade na web. Cinco anos se passaram e os motivos para se ter esse cuidado ao desenvolver sua aplicação não mudaram, mas novas ferramentas surgiram para que você atenda cada vez mais às demandas dessa parcela da nossa sociedade que tem tanto direito de usufruir de seu website quanto as pessoas sem deficiência alguma.

por Thaiana Poplade

Criando seu próprio servidor HTTP do zero (ou quase) – Parte III

Estamos entrando na terceira parte do tutorial, e quem está acompanhando até aqui já sabe então como funciona a comunicação entre cliente e servidor, envio de requisição pelo cliente e recebimento de resposta (na duvida só voltar e releia a Parte I e/ou Parte II), porém o que a gente quer é criar o servidor, receber as requisições e enviar a resposta ao cliente. O Servidor A idéia do servidor é bem simples e estende a do cliente, como assim?

por thiguetta

Material Design com Materialize

Crie seu site utilizando um Framework totalmente material design, que não deixa a desejar em nada e seus resultados podem te surpreender. Do Conceito à prática com layout Material.

por Tiago Luiz

Criando seu próprio servidor HTTP do zero (ou quase) – Parte II

Se chegou até aqui é por que você terminou de ler a primeira parte do tutorial (Caso não, leia a Parte I ), mas não desista, a parte legal vai chegar, mas antes de começar, falta mais um item de teoria – sim eu sei que é chato, mas juro que é importante – os Sockets. Sockets e portas Falamos muito de requisições e respostas no último post mas ainda não falamos de conexão e troca de informações.

por thiguetta

Criando seu próprio servidor HTTP do zero (ou quase) – Parte I

Sou apaixonado por tecnologias livres e como sou extremamente curioso, gosto de saber como as coisas funcionam. Como também sou cinestésico, não me contento em apenas em entender, tenho que criar, recriar, escrever, rescrever, inventar, reinventar, enfim sentir realmente como se faz. Nesse vai e vem de aprendizado, minha última curiosidade foi entender como os servidores HTTP funcionam e criar um do zero (ou pelo menos quase). É claro que para fazer isso eu não fui tão lá embaixo a ponto de utilizar C, utilizei da linguagem de programação da qual me sinto mais confortável e que já oferece algumas facilidades que em C teria que sangrar pra fazer o mesmo porém não impossível, mas enfim, optei por desenvolver em Java, os passos vou contar pra vocês aqui, mas utilizando os mesmo conceitos nada impede que utilize qualquer outra linguagem de programação.

por thiguetta

Processo front-end na Locaweb

Nosso processo e stack de front-end na Locaweb.

por Diego Eis

Acelere o desenvolvimento front-end com Jade

Aprenda a criar mixins, recursos de include, laços de repetição for, variáveis e muito mais no HTML com Jade.

por Harryson Guimarães

Desenvolvendo apps para SmartTVs com HTML, CSS e Ajax

Entenda como funciona o básico do desenvolvimento pra SmartTVs.

por WillBliner

Material Design Lite: O framework do Google

A biblioteca de componentes e templates já conhecida dos aplicativos agora para websites em CSS, HTML e Javascript.

por Isaque Melo

Como criar um Chrome App com o seu Chromebook

Criando seu primeiro App para Chrome direto do seu Chromebook!

por Roger Albino

Ícones – SVG Sprites com CSS na prática

Criando um sprites usando ícones SVG.

por rogerio dias moreira

HTML: Encode UTF-8

Entendendo um pouco mais sobre encode e como funciona o UTF-8.

por Alan Cezar

Material Design na barra de navegação & status do Chrome

Saiba como customizar a barra de navegação do Chrome no Android usando apenas HTML.

por Joédyson Bezerra

Email Marketing – Testes e CSS Inliner – Parte 2

Testando e melhorando o fluxo de produção de código de email marketing.

por Diego Eis

O poder do atributo “ALT”

Técnicas que podem resolver vários problemas que desenvolvedores web enfrentam, caso não utilizem a atributo <strong>ALT</strong> corretamente.

por Leonardo Lima

Em um relacionamento sério com generators front-end – Parte 3

Nesta terceira parte da série, iremos abordar o Slush Generator, que é um Scaffolding Generator baseado em NodeJS e que tem uma forma diferenciada para criação de seus scaffolds.

por Beto Muniz

Formulário responsivo com MailChimp

Cada dia mais estamos utilizando serviços disponíveis na web, principalmente aqueles que tem um plano básico gratuito que permite integrações.

por Palloi Hofmann

Entendendo o Outline do HTML

Entenda porquê não usar tantos H1 e como funciona o fluxo de outline do HTML.

por Daniel Ramos

Simples modal com CSS responsivo

Continuando com os artigos, vamos utilizar novamente os seletores de css para exibir nosso modal.

por Palloi Hofmann

Seletores CSS Nível 4 – O que vem por aí

Saiba quais os seletores que irão salvar sua vida muito em breve.

por Diego Eis

Destaques responsivos

Estou de volta como prometido anteriormente com uma séria de artigos, hoje criaremos 3 destaques com um comportamento totalmente responsivo.

por Palloi Hofmann

Extract for Brackets by Adobe

Conheça o Extract, da Adobe. Esse serviço mostra, direto de um PSD, o código CSS dos elementos selecionados.

por Diego Eis

Em um relacionamento sério com generators front-end – Parte 2

Na parte 2 de nossa série, vamos falar de Yeoman, um generator que, na minha opinião, é bem completo e atende a grandes necessidades na criação de um projeto.

por Pedro Polisenso

Header responsivo somente com css

A cada novo projeto queremos alcançar o máximo de usuários, não importa se o dispositivo seja grande ou pequeno, tem que funcionar.

por Palloi Hofmann

Em um relacionamento sério com generators front-end – Parte 1

Essa é uma série que vai abordar generators usados por desenvolvedores front end no mercado. Um post que vai mostrar desde conceitos até a prática, que convém a nós é o que mais interessa.

por Pedro Polisenso

Gerando arquivos estáticos com o Middleman

Criar projetos usando geradores de arquivos estáticos podem ser uma saída estratégica para evitar ambientes complexos, o Middleman pode te ajudar a desenvolver projetos simples e rápidos.

por Diego Eis

Validação de formulários com HTML5

Validar formulários sempre demandou algum tempo e dependências como bibliotecas JavaScript. Com HTML5 podemos passar essa responsabilidade para o navegador, ganhando tempo de desenvolvimento e economizando no peso da página.

por Raphael Fabeni

O futuro chegou: O elemento picture

Se você tinha problemas com imagens responsivas, agora não tem mais...

por Victor "reidark" Matias

Web Components: Introdução

Entenda os principais tópicos e as informações iniciais sobre Web Components.

por Diego Eis

File API – Trabalhando com Arquivos Locais Usando Javascript

Trabalhar com arquivos no lado do cliente antes do HTML5 era dificultoso e e tinha pouco suporte. Com o File API, agora é possível capturar informações e ler o conteúdo de arquivos usando apenas o navegador por meio do javascript.

por Bruno Ruiz

Code Guide by @mdo

Tradução do Code Guide do @mdo.

por Diego Eis

Fault Tolerance: a base do Progressive Enhancement

Entenda por que o Fault Tolerance é a base para o Progressive Enhancement e também do Adaptive web Design.

por Diego Eis

Utilizando as metatags de OpenGraph

O tutorial para compartilhar o conteúdo do seu site no Facebook de forma eficaz.

por Victor "reidark" Matias

O grande desencontro do HTTP com o HTML

Duas tecnologias criadas sob o mesmo projeto que possuem uma falha de compatibilidade. Vamos conhecer um pouco da história do HTTP e HTML, boas práticas e como manter interações coerentes entre cliente e servidor.

por Jean Carlo Emer

O que falamos em 2013?

E o que vamos falar em 2014? Confira alguns do assuntos que fizeram a cabeça em 2013 e podem ser grandes promessas para 2014.

por Thaiana Poplade

WAI-ARIA – Estendendo o significado das interações

Saiba como você pode aumentar a acessibilidade da sua página de um jeito fácil com WAI-ARIA.

por Diego Eis

Servindo sites estáticos com Jekyll

Entenda como o Jekyll funciona e como ele pode te ajudar a fazer websites estáticos, sem banco de dados e fáceis de gerenciar.

por Diego Eis

Workflow para cuidar dos seus assets

O termo assets é utilizado na economia para caracterizar todo recurso que se poderá tirar proveito no futuro. Mas não se preocupe, nosso assunto aqui é sobre desenvolvimento web.

por Jean Carlo Emer

Fazendo um slide menu mobile – sem plugin

Entenda como fazer um menu como nos aplicativos mobile, como o facebook.

por Diego Eis

Ferramentas e sites para tornar mais ágil o seu desenvolvimento

No dia-a-dia, a correria em cumprir prazos nos faz buscar e fazer uso de ferramentas que possam auxiliar na velocidade de desenvolvimento. Seja no front ou no design, em tempos de mudanças e transições, nada mais justo que uma lista de algumas ferramentas especiais para que você mantenha seu processo profissional e ágil.

por Thaiana Poplade

Sobre organizar informação

Um pensamento sobre organização de informação.

por Diego Eis

Dicas de como fazer seu próprio framework CSS

Anotações da minha palestra sobre como fazer seu próprio framework CSS.

por Diego Eis

Tridiv – Dominando 3D com CSS

Brinque com 3D em um editor online baseado em CSS.

por Diego Eis

Emmet LiveStyle

Uma nova maneira de editar CSS.

por Diego Eis

Pré-processadores: usar ou não usar?

Meus dois centavos sobre a utilização de pré processadores de CSS.

por Diego Eis

O Cenário do Web Design Responsivo

Site responsivo é muito mais que media queries, breakpoints e redimensionamento de imagens. Nesta tradução de artigo da Smashing Magazine, Stéphanie Walter mostra o que é, o que será possível, e o que precisa ser melhorado no RWD.

por Will Sales

Guia para Iniciantes – Ajude

Precisamos da sua ajuda para elaborar um guia para os iniciantes na área.

por Diego Eis

Usando o plugin 960gs e o Photoshop

Entenda como funciona o Grid 960. Ideal para iniciantes.

por Flavio Santana

O que é Sass? Entenda esse outro método de escrever CSS

Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos. Então, os pré-processadores e frameworks para CSS vem suprir essa necessidade. Com vocês, um pouco de Sass.

por Thaiana Poplade

3 parâmetros de HTML que você deve usar em um futuro próximo

Imagens responsivas, downloads automáticos e logos em vetor sempre atualizados. Não é sonho. Conheça algumas novidades que nos esperam em um futuro próximo.

por Dani Guerrato

Otimizando e organizando seu front-end com PHP

Quer ser diferente no mercado? Conheça o PHP e suas vertentes. Auxiliando e organizando seus projetos front-end

por Layo Azevedo

CSS Transition e CSS Animation

Um guia rápido pra você entender e começar a usar essas duas propriedades do CSS3.

por Raphael Fabeni

Slides para Devs #4 – Retina display, imagens de alta resolução e afins

Apresentações sobre retinas displays, imagens em alta resolução e como construir websites retina ready.

por Diego Eis

Como usar linear-gradient em CSS de forma consciente?

Não há mais motivo para você usar nenhum gerador automático de gradiente depois desse GUIA DEFINITIVO DE COMO USAR LINEAR-GRADIENT. Vem comigo e vamos codar.

por Bernard De Luna

Locaweb Style – Como iniciamos

Como iniciamos e por que resolvemos criar um framework próprio aqui na Locaweb.

por Diego Eis

3 ferramentas para criar e gerenciar projetos web

Cada vez mais um número maior de ferramentas surge para auxiliar e agilizar o desenvolvimento web. Conheça alguns frameworks que têm como objetivo controlar e gerenciar o uso de bibliotecas, pré-processadores e utilitários em sites e aplicações web.

por Davi Ferreira

Repensando CSS Resets

Como melhorar seu CSS Reset.

por Dani Guerrato

Como schema pode te ajudar em SEO

Schema são tags padrões que foram adicionadas ao HTML afim de facilitar o entendimento de determinada informação pelos buscadores.

por Daniel Marcos

Performance front-end – Parte 2

O front-end é um dos grandes responsáveis pela performance de um website ou serviço online.

por Diego Eis

A tag MAIN

Conheça a nova tag MAIN do HTML.

por Diego Eis

Guia de Estilos

Entenda mais sobre guias de estilos, padrões para equipes, organização de CSS e mais.

por Dani Guerrato

Criando seu próprio Framework HTML CSS

Um Framework pode ser o responsável pelo sucesso da sua aplicação e lhe poupar milhares de dólares, assim como pode representar o gargalo do desenvolvimento do seu produto e levar o seu projeto ao fracasso.

por Bernard De Luna

Web Móvel e suas aplicações

A implantação generalizada da web em dispositivos móveis torna um alvo de escolha para criadores de conteúdo.

por Giovanni Keppelen

E-mail Newsletter Responsivo

Entenda como funciona e como fazer um email marketing responsivo.

por Dani Guerrato

Classes Funcionais

Crie classes que podem ser reutilizadas de acordo com a sua necessidade.

por Diego Eis

Creme de papaia e Geolocalização

Utilize a API de geolocalização de uma maneira mais útil.

por Reinaldo Ferraz

Brincando com css3

O CSS3 está aí e você pode aprender brincando e usando toda sua criatividade. Conheça o canal da Mozilla onde você pode mostrar seus experimentos.

por Deivid Marques

Web Platform

Sua web documentada.

por Diego Eis

Adobe Edge Inspect: Uma ajudinha no desenvolvimento para múltiplos dispositivos

Saiba como você pode testar seu código em diversos dispositivos com o Adobe Edge Inspect

por Gabriel Nascimento

Adobe Edge

Adobe Edge - uma suíte que reúne diversas aplicações para ajudar os desenvolvedores web.

por Diego Eis

Scoped CSS

Scoped CSS é um novo recurso do HTML5 nos permite definir estilos que serão aplicados apenas em um determinado escopo de marcação.

por Almir Filho

Qual unidade utilizar – Pixel, EM ou REM

Entenda mais sobre as duas unidades prediletas pelos desenvolvedores.

por Diego Eis

Font icons – Utilizando ícones em formato de font

Aprenda a usar font para fazer elementos com ícones.

por Diego Eis

Open Web Device

Um celular amigável para os desenvolvedores.

por Diego Eis

Boas práticas para E-mail Marketing

Algumas dicas práticas para codificação de email marketings.

por Deivid Marques

Como usar os pseudo elementos :before e o :after

Como utilizar os pseudo-elementos :before e :after com a propriedade content.

por Diego Eis

Retina.js – Imagens para telas retina

Mostre imagens de alta qualidade em dispositivos retina sem muito trabalho.

por Diego Eis

Responsive Web Design – Adaptação vs Otimização

O que é melhor: um site que se adapta bem em diversas telas ou um site totalmente otimizado e de alta perfomance?

por Diego Eis

Entendendend a regra @viewport do HTML

Você poderá manipular o viewport diretamente do seu código CSS.

por Diego Eis

Documentos poliglotas com XHTML5

O XHTML5 permite utilizar a sintaxe do XML/XHTML em documentos HTML5

por Talita Pagani

Estruturação de front-end – Parte 1: Preprocessadores, Framewoks e Bibliotecas

Entenda a diferença entre preprocessadores, frameworks e bibliotecas de client-side. Saiba o que usar em seus projetos e quais as suas particularidades.

por Diego Eis

Adobe e os Padrões Web

A Adobe e suas iniciativas para ajudar o desenvolvimento web.

por Diego Eis

Dicas de sobrevivência em uma era pós o IE6

Confira algumas propriedades importantes do CSS que você não podia usar no IE6, mas pode usar hoje no IE7 ou superior.

por Diego Eis

Seu lugar ao sol

Como você se encaixará em um futuro onde o termo browser não existe mais?

por Diego Eis

CSS3 – Texturizando textos

Com funcionalidades que apoiam resultados visuais exclusivamente à folhas de estilo, o CSS3 está sendo criado para otimizar fluxo e ritmo de trabalho, além de aproximar ainda mais Designers de Interfaces à profissionais Front-End. Com vocês, a texturização de textos via CSS3.

por Thaiana Poplade

Introdução aos padrões de codificação

É mais importante para o time concordar em um único estilo de código do que encontrar o estilo perfeito.

por Diego Eis

O dilema da sintaxe no HTML5

Fechar ou não as tags? Colocar os valores de atributo entre aspas? Estas escolhas nem sempre podem ser uma questão de gosto.

por Talita Pagani

Declarando idiomas no HTML

O conteúdo online pode ser acessado no mundo inteiro, não importa seu idioma. Para tanto o idioma deve ser declarado corretamente para que os meios de acesso entreguem o conteúdo da melhor forma possível.

por Diego Eis

Propriedade background-clip

Entenda como a propriedade background-clip do CSS3 funciona.

por Diego Eis

Introdução ao CSS 3D – Flip Card

Entenda como funciona o CSS 3D e suas aplicações.

por Diego Eis

OOCSS ou CSS do jeito certo

O CSS é algo muito simples de ser escrito mas com apenas um deslize todo o código pode transformar o projeto em um inferno. Saiba como podemos evitar isso.

por Diego Eis

Mobile First – A arte de pensar com foco

Os dispositivos móveis estão tomando conta do mundo. Sendo assim, o que você acha de pensarmos nos dispositivos móveis antes de pensarmos nos desktops?

por Diego Eis

Experiência deve ter começo, meio e fim

A experiência do usuário precisa ser a melhor possível independente do meio de acesso utilizado.

por Diego Eis

CSS dinâmico com LESS

Já imaginou poder declarar variáveis, implementar funções e mixins em suas folhas de estilo? Este é objetivo principal da biblioteca LESS: ampliar o funcionamento do CSS, tornando-o altamente dinâmico.

por Davi Ferreira

Formulários e o Metawebdesign – Parte 1

Como montar formulários quando você é o responsável pelo código e design.

por Alysson Franklin

Utilizando a Biblioteca Modernizr

Alguns browsers não aceitam as novas features de CSS3 e HTML5. Saiba como detectá-los e tratá-los com a biblioteca Modernizr.

por Diego Eis

Biblioteca CSS ou Framework?

O que é melhor utilizar: biblioteca de CSS ou um Framework?

por Diego Eis

Introdução ao CSS Shaders – Parte 1

Shaders CSS é um complemento para Filter Effects. Além disso, shaders CSS introduz uma noção de Vertex Shader para um modelo de filtro.

por Giovanni Keppelen

Quando utilizar (ou não) frameworks CSS

A utilização de frameworks HTML e/ou CSS ainda é um assunto que divide a opinião dos desenvolvedores.

por Talita Pagani

Nem só de client-side vive um site

| É errado pensar que apenas por que você escreveu código HTML semântico seu site aparecerá em primeiro no Google ou ficará mais acessível para deficientes visuais. O código client-side é apenas a porta de entrada para uma série de outras pendências.

por Diego Eis

Introdução ao Responsive Web Design

Responsive Web Design é um nome bonito para um conceito antigo. Hoje seus usuários utilizam diversos dispositivos e meios de acesso para encontrar informação. Saiba como podemos entregar informação de forma eficaz e inteligente.

por Diego Eis

Tenha o DOM

Entenda o que é o Document Object Model e tenha o DOM.

por Alysson Franklin

Entendendo os Reflows

O que são e como os Reflows podem ser otimizados para aplicações ficarem ainda mais rápidas.

por Alysson Franklin

RGB e HSL

RGB e HSL são os formatos que estão se tornando populares no desenvolvimento web. Entenda como cada um funciona e saiba quais suas vantagens.

por Diego Eis

Especificação para touch screens

Interações em interfaces touch são diferentes das interfaces baseadas com mouse. Hoje temos pleno controle das ações baseadas com mouse, mas este controle não pode ser expandido para as interfaces touch. As ações e as forma de comportamento do usuário são diferentes.

por Diego Eis

CSS3 – Sombras em textos e elementos

Sombras em elementos e textos. O CSS3 nos trouxe essa possibilidade. Saiba como funciona as propriedades text-shadow e box-shadow.

por Diego Eis

CSS3 – Módulo Template Layout

Entenda como você não fará mais estruturas com a propriedade float.

por Diego Eis

Em tempo de transição, quais recursos utilizar?

Acompanhar todas as mudanças que o desenvolvimento web vem sofrendo é tarefa muito difícil e bastante trabalhosa. Alguns de nós ainda preferem sentir-se mais seguros quanto a regulamentação dessas diretrizes e outros já estão testando e experimentando. Pra onde podemos direcionar nossa postura às evoluções?

por Thaiana Poplade

CSS3 – Animation e regra keyframe

Saiba como o CSS 3 possibilita a criação de efeitos de animações e transições.

por Diego Eis

CSS3 – Breve introdução ao RGBA

Normalmente em web trabalhamos com cores na forma de hexadecimal. Agora o RGBA nos permite que você aplique em uma determinada cor transparência.

por Diego Eis

Pontuação de especificidade da CSS

Entenda como o browser calcula a especificidade do seu seletor e evite conflitos entre estilos.

por Diego Eis

Keygen: Certificando suas paginas com HTML

Uma tag que ressucitou do passado com mais força e vigor.

por Alysson Franklin

Ferramentas de diagnóstico

Quando algo de estranho acontece, é bom estar preparado.

por Diego Eis

CSS3 com PIE – bordas, sombras e gradiente

Utilizar CSS3 no front-end de websites ainda parece uma realidade um pouco distante devido a incompatibilidade de renderização entre os browsers, mas com o lançamento final dos navegadores IE9 e Firefox 4, esta realidade fica ainda mais próxima da prática efetiva que vai criar a nova etapa do desenvolvimento tableless.

por Thaiana Poplade

Múltiplos backgrounds com CSS

Testando múltiplos backgrounds no CSS3. Isso realmente funciona! ;-)

por Diego Eis

Novo parser HTML5 – FF4

O Firefox 4 trouxe uma série de atualizações, uma das mais importantes é o novo parser de HTML5 que promete ser mais rápido e eficiente.

por Diego Eis

Drops 4 – Validar é importante?

Validar o HTML é importante? Para que serve o validador? O que ele não analisa?

por Diego Eis

CSS3 – Abas com a pseudo-classe :target

Fazer abas sempre foi muito chato para mim. Agora, os problemas acabaram com o :target.

por Diego Eis

PDF – Browsers antigos: guerra contra o terror

Não quero que você gaste tempo e dinheiro à toa se você pode ter resultados melhores se mudar um pouco o foco do desenvolvimento. Quero que você entenda que os visitantes que utilizam browsers antigos são sempre a minoria.

por Diego Eis

The IE6 Countdown – O ultimato da Microsoft

O Internet Explorer 6 é um câncer. A cura desse câncer é a própria Microsoft. Com a campanha The IE6 Countdown, a Microsoft quer diminuir para 1% o marketshare do IE6 no mundo!

por Diego Eis

Um raio-x do seu website

Ferramentas e metodologia para entregar mais e com maior qualidade. O Progressive Enhancement pode nos ajudar como mostramos em outros artigos. E hoje vamos mergulhar em um tópico específico da metodologia.

por Alysson Franklin

Drops 3 – Duas formas de modular seu CSS

Duas maneiras de modular seu código CSS.

por Diego Eis

HTML 5, novos elementos e atributos.

Em meio à tutoriais e artigos a respeito, em alguns minutos consegue-se perceber algumas das novas possibilidades que o HTML 5 proporcionará, mas na prática da construção de códigos para interfaces, o que será possível além de secções, barras de menu, barras laterais, etc?

por Thaiana Poplade

Drops 2 – A palavra Marcação do HTML

A abreviação HTML tem muito a nos dizer.

por Diego Eis

Boas práticas na estruturação de interfaces.

O planejamento estrutural de seu código html é também de grande importância para organização de tags e propriedades css, para o trabalho em equipe e para uma manutenção facilitada.

por Thaiana Poplade

CSS Transforms

"CSS 2D Transforms allow elements rendered by CSS to be trans- formed in two-dimensional space." É aqui que a graça do CSS 3 começa.

por Diego Eis

JQuery para produção de Layouts

Quando falta a compatibilidade de algumas propriedades do CSS nos browsers ou porque quando não é possível manipular o HTML manualmente para suprir suas necessidades, o JQuery poderá ajudar.

por Diego Eis

Bem vindo a Xangri-lá – Parte 2

Voltamos a Xangri-lá, para entender como as coisas funcionam. Veja como aplicar o Progressive Enhancement criando e customizando metodologias de trabalho. As expectativas e considerações do cliente geram o design e a funcionalidade de sua aplicação.

por Alysson Franklin

Desenvolvendo para IE6

Você ainda desenvolve para IE6? Você cobra mais por isso? Eu sim.

por Diego Eis

Bem vindo a Xangri-lá – Parte 1

Progressive Enhancement, Graceful Degradation e um horizonte perdido que precisa ser encontrado no desenvolvimento web

por Alysson Franklin

CSS3 – O que vem por aí…

Além da linguagem de marcação, a semântica e a utilização de bibliotecas Javascript no desenvolvimento HTML5, as folhas de estilo também serão reestruturadas para atender as diversas possibilidades que os novos padrões permitirão. Portanto, com vocês: o CSS3.

por Thaiana Poplade

Vote no Especialista em Usabilidade para Presidente

A usabilidade é algo muito abrangente e você, profissional front-end, tem muito a ver com isso.

por Alysson Franklin

Usabilidade para desenvolvedores front-end

A usabilidade possui diversos critérios a serem trabalhados durante todo o processo de desenvolvimento de uma interface, mas no dia-a-dia podemos melhorar a experiência do usuário através de pequenos detalhes.

por Talita Pagani

6 dicas para evitar problemas de incompatibilidade entre browsers.

Mesmo com o lançamento de versões beta dos principais browsers, prontos para receber o HTML5, profissionais ainda enfrentam dificuldades em realizar o trabalho de webstandards nos dias de hoje.

por Thaiana Poplade

6 estratégias para melhorar a organização do seu CSS

Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil manutenção.

por Talita Pagani

Afinal, o que muda com o HTML 5?

Há algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que o profissional deverá apresentar na criação de um website.

por Thaiana Poplade

HTML5 Diff

Um resumo do que mudou no HTML5 em comparação com o HTML4.

por Diego Eis

HTML5 e seus companheiros

O HTML5 veio para mudar. Mas o HTML5 sozinho não faz verão. Por isso, é bom que saibamos que o CSS e o Javascript fazem boa parte do trabalho.

por Diego Eis

Conteúdo, Flash e HTML

O HTML não vai tomar o lugar do Flash, entretanto, o Flash não será a única opção.

por Diego Eis

Colocar Rodapé fixo no fim da página

Como deixar o Rodapé fixo fim da página quando houver pouco conteúdo.

por Diego Eis

Camadas de desenvolvimento client-side

Você pode se assustar com isso, mas a tabela foi um marco na história do design para web. Ela abriu portas. Mostrou caminhos.

por Diego Eis

Ah, o maravilhoso mundo real

O que é mais importante, RDF ou bordas arredondadas? O novo formato de especificações modulares do W3C vai ajudar os desenvolvedores, agilizando os releases de navegador, ou vai tornar nossa vida uma bagunça?

por Elcio Ferreira

Prepare-se para a Revolução

O W3C mudou. Isso vai modificar todo um fluxo de trabalho e a velocidade das implementações dos browsers e a forma com que os desenvolvedores trabalham.

por Diego Eis

CSS 3 Columns

O CSS3 facilitará muitas coisas, uma das possibilidades é a criação automatica de colunas em blocos de textos. Para tanto, utilizamos as propriedades de columns do CSS3.

por Diego Eis

Lançado Firefox 3.5

O Firefox 3.5 foi lançado e está com uma série de modificações, principalmente atualizações para facilitar o desenvolvimento com HTML e CSS. Baixe, teste e compartilhe!

por Diego Eis

Propriedade Position do CSS

A propriedade position não serve para criar estruturas de layouts. Você o usará para coisas mais simples. Existem 3 tipos: relative, absolute e fixed. Entenda como eles funcionam e quais as suas relações.

por Diego Eis

Digest 04/09: CSS, HTML e Layout

Um bando de links interessantes sobre HTML, CSS e um pouco de layout.

por Diego Eis

Pulga na cueca e experimentando o HTML5

Tenho pulga na cueca. Não no sentido literal. Claro. Eu não agüentei e mudei novamente o Tableless, por fora e por dentro. Por fora ele ficou mais bonito. Por dentro, ele está implementado com as novas tags de estrutura do HTML5.

por Diego Eis

HTML 5 – Mudanças na estrutura e semântica

Todos os dias sites e mais sites são publicados na internet e nenhum deles com um padrão de nomenclatura de classes e ids.

por Diego Eis

HTML 5 – Semântica e o que é importante na web

Bem como o CSS3 o HTML 5 vem para mudar totalmente a forma que a web é construída.

por Diego Eis

Client-side e sua importância

Dar atenção a um código XHTML bem escrito, é abrir portas para deficientes e usuários de diversos dispositivos.

por Diego Eis

Video tutorial – Implementando HTML

Utilizamos esse layout como exercício nos cursos da Visie. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS.

por Diego Eis

Tabelas semânticas

Você já deve saber que o desenvolvimento utilizando Padrões Web preza pela Semântica no código. Todo código que você escrever deve dar algum significado ao conteúdo. E toda tag sem sua função específica e te ajuda a formar um código mais esperto e legível.

Alguns elementos por dependerem de várias tags para ter um funcionamento pleno, acabam sofrendo com o desinteresse dos desenvolvedores em entender melhor os diversos objetos que compoem um determinado elemento. Um caso bastante comum, além dos Formulários, é a formação das TABLES.

por Diego Eis

Exercício Básico

Costumo dar esse exercício para alguns dos alunos aqui da Visie. Ele é um exercício básico e utiliza as propriedades mais importantes para se construir um site. A idéia é mostrar para o desenvolvedor que está abrindo os olhos agora, como é fácil, em algumas horas de treinamento (tipo 3 horas), o desenvolvimento com CSS e XHTML é produtivo.

por Diego Eis

Palestra: Implementação de Layout com CSS

Essa semana, dia 23, quarta-feira, irei fazer uma palestra de 2 horas exclusivamente sobre Implementação de Layout com CSS. Irei implementar um layout, desde o HTML até o CSS, tudo explicado nos mínimos detalhes. http://visie.com.br/eventos/ O valor da palestra é de R$29 e será em São Paulo. Este post se auto-destruirá no dia 24.

por Diego Eis

Vídeo: Menu horizontal com CSS em 5 minutos

Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS.

por Diego Eis

Layout Fixo / Fluido de 3 colunas em 8 Minutos

Na verdade a gravação foi feita em 7 minutos e 51 segundos.

Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout.

Se quiser ver o exemplo com o código fonte, clique aqui.

por Diego Eis

Charsets e Encodes – Tabelas de caracteres

Entenda como funciona a tabela de caracteres e encodes no HTML.

por Diego Eis

IE8 – O sonho não acabou

Para você se inteirar do assunto, leia Browser Targeting Version.

No artigo que recomendei acima, lá nos últimos parágrafos dei minha opinião sobre a antiga decisão da Microsoft:

Mesmo assim, acho que tudo deveria ser nivelado por cima. Porque os desenvolvedores que se preocupam e utilizam os Padrões da maneira correta, são os que devem marcar o browser? Não seria mais fácil criar uma metatag para marcar os sites que não devem ser renderizados com o suporte avançado de Padrões? Quem deve se preocupar, são os desenvolvedores que não dão a mínima para os Padrões. Eles sim devem trabalhar para deixar seus sites atualizados.

por Diego Eis

Comentários Condicionais – Não use

A utilização de comentários condicionais não é uma excelente maneira de contornar bugs. Os comentários condicionais são comentários incluídos no código HTML escritos exclusivamente para fazer uma parte do código funcionar no Internet Explorer.

Normalmente o uso dos comentários condicionais servem para especificar uma parte do código para a interpretação exclusiva pelo Internet Explorer. Alguns desenvolvedores criam um CSS exclusivo para o IE e utilizam os comentários condicionais para que apenas o Internet Explorer entenda este CSS. Assim é possível corrigir bugs que acontecem apenas no Internet Explorer.

por Diego Eis

Centralizando um objeto na Horizontal e Vertical com CSS

Saiba como centralizar um objeto na horizontal e vertical apenas com CSS.

por Diego Eis

Escrevendo um XHTML válido

Acho que todos já ouviram falar de Web Semântica, para quem não ouviu, em poucas palavras é: Um projeto para organizar e estruturar a informação da WEB. Ter uma Web com as suas informações todas “organizadas” é extremamente importante, isso facilita uma busca pela Web por informações mais precisas. Para que seu arquivo possa ser lido por máquinas além de humanos é muito importante que você escreva um XHTML válido, com isso você está fazendo com que as informações do seu site fique mais acessível para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.

por Diego Eis

HTML 5 – brevíssima introdução

Uma pequena introdução sobre HTML5 e sua história.

por Diego Eis

Desenvolvedor analfabeto (sim, é sobre WYSIWYG)

A idéia é que você saiba HTML de ponta a ponta.

por Diego Eis

WHATWG e o HTML 5

WHATWG and HTML 5 FAQ: Em 2004, depois de um workshop do W3C, Apple, Mozilla e Opera estavam se tornando cada vez mais preocupadas a respeito da direção do XHTML no W3C, perda de interesse no HTML e aparente indiferença para com as necessidades dos autores do mundo real. Então, em resposta, essas organizações ajustaram-se com a missão de enfrentar essas preocupações e o Web Hypertext Application Technology Working Group nasceu.

por Elcio Ferreira

Validar é importante?!

Não sei se você já parou para pensar neste assunto, mas validar seu código é importante? Se é importante, o quanto ele é importante? O que é validar? O que faz de miraculoso o validador do W3C quando você coloca o endereço do site e clica no botão?! Nada. Ué. Nada que você não saiba fazer também. Ele apenas – escute bem – verifica a sintaxe do seu código XHTML/HTML. Sabe aquele código “bonito” que você escreveu em alguma madrugada dessas?

por Diego Eis

Breve introdução: XHTML Mobile Profile

XHTML MP é um subset do já conhecido XHTML. Ele é baseado em um outro subset de XHTML chamada XHTML Basic. O XHTML Basic é uma versão simplificada do XHTML definido pelo W3C. Ele foi feito especificamente para dispositivos com baixo poder de processamento como celulares, PDAs, pagers etc… O XHTML Basic não contém algumas características que esses dispositivos dificilmente suportam, como por exemplo: Frames, Folhas de Estilo em Cascata e scripts.

por Diego Eis

Tutorial Tableless Básico em HTML5 – Layout de 3 colunas

Aqui está! Aprenda agora a construir sites acessíveis em qualquer navegador ou dispositivo, leves, que carregam extremamente rápido, e ganhe muito tempo de desenvolvimento e manutenção. São dois vídeos que explicam a implementação HTML e o CSS de um layout básico. Aproveite! Implementação HTML de um layout básico Implementação CSS do layout O arquivos para você tentar você mesmo estão aqui. Quer ver mais vídeos sobre desenvolvimento web? Visite nosso Campus Online.

por Diego Eis