posts da categoria Técnicas E Práticas

Teste de carga em APIs utilizando Artillery

Independente do produto que você esteja criando, é sempre importante assegurar a qualidade do mesmo fazendo uma bateria de testes antes de colocar no mercado. Se tratando de desenvolvimento de software, existem algumas métricas que são essenciais para deixar claro para todos os envolvidos no projeto, incluindo seus usuários, o quanto determinado sistema/aplicativo é confiável para suportar o uso do público. Dentro da área de qualidade de software, existem diversos tipos de testes que visam atingir o objetivo citado acima, de mostrar a todos que o produto é estável e robusto, alguns deles: teste de integração, teste unitário, teste de penetração, teste de regressão e por aí vai.

por Ulysses Marins

Código Limpo – Escreva seu código hoje sem esquecer da manutenção de amanhã

Seu código é legível e fácil de dar manutenção? Veja neste post porque escrever código limpo é importante e como equilibrar isso com os prazos dos projetos.

por tableless

O que aprendi em 5 dias como Front-end, e uma pergunta: você esta preparado para se tornar um desenvolvedor?

Gostaria de partilhar um pouco de minha experiência como front-end. e neste link explico como consegui uma vaga na área front-end. Minha experiência com o Centro de Treinamento. Tudo no inicio pra mim foi uma aventura, uma história curta e imprevisível, cheia de quebras de paradigmas, dogmas, conceitos e preconceitos. Acho bem claro, que cursos técnicos e faculdades não te preparam para o mercado de trabalho, apenas te dão um norte de como fazer algo e um bocado de coisas mais, pois para se tornar um desenvolvedor existem alguns pontos a serem esclarecidos.

por DaniloAgostinho

Integração Contínua com Travis CI — Parte 01

O objetivo geral do artigo é mostrar como fazer uma Integração Contínua (técnica de desenvolvimento agile) com Travi CI, criando um repositório no O objetivo geral do artigo é mostrar como fazer uma Integração Contínua (técnica de desenvolvimento agile) com Travi CI, criando um repositório no e publicando nosso projeto em um Host utilizando o Heroku. Nesse primeiro post iremos montar toda nossa estrutura de diretórios e configuração de arquivos.

por Jaime Neves

Como camuflar seu ip like a ninja

Temos algumas formas de camuflar ip, alguns programas que nos auxiliam a fazer isso de forma fácil. A um tempo atrás eu estava usando o sistema operacional WHONIX para poder fazer esse tunelamento pra mim, ele é realmente eficaz e eu não precisei me preocupar muito com detalhes, porém eu testei algumas outras opções e tiveram duas que eu realmente gostei, uma é o PROXYCHAINS e a outra o JONDO:

por Júlio Carneiro

Proteja seu código usando o Webpack

Não é um eufemismo dizer que que as ferramentas de front-end avançam rapidamente. Por um tempo, Grunt foi o principal automatizador. E desde então a comunidade adotou o Gulp, uma alternativa de streaming. Embora essas ferramentas sejam ótimas, você ainda precisará trabalhar dura para manter o seu sistema. E é aí que entram os empacotadores como o Browserify e Webpack. Como usar um empacotador Os empacotadores resolvem o problema fundamental no desenvolvimento front-end.

por Jscrambler

Trabalhando com serviços no Javascript

JavaScript é uma linguagem multiparadigma. Pode-se “_emular_” várias técnicas de programação com ele, e isso é incrível pois podemos decidir qual o melhor paradigma para a resolução dos problemas dos nossos projetos. Porém se por um lado isso pode parecer poderoso para a linguagem, também pode deixar os iniciantes bem confusos, é muito comum escolher a abordagem errada para o problema. Por esse motivo que o JavaScript em sido polêmico nos últimos anos.

por Vinicius Reis

Como boas práticas de escrita de código podem influenciar em uma melhor rotina de trabalho

Observei que alguns itens estão me ajudando na rotina de trabalho, como obter um melhor tempo de produção e um melhor controle sobre o que estou fazendo. São alguns hábitos simples que podem lhe ajudar muito. É apenas questão de implementar no seu dia a dia e demonstrar para a sua equipe (caso trabalhe em equipe) o quanto é mais organizado e produtivo trabalhar desta forma. A seguir listei algumas técnicas que podem ajudar bastante no seu dia a dia como desenvolvedor front-end.

por helderburato

Invertendo o Redux

Introdução   Já faz um tempo desde que implementei pela primeira vez o Redux. Numa época que só se falava nos frameworks, ele apareceu do nada, pelo menos para mim. Eu já conhecia o Flux, mas ainda não era o que estava procurando. O Redux realmente é uma das melhores idéias que vi, para mim faz todo o sentido e ainda é simples de entender e de se implementar.

por Javiani

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

Deixando seu site online com Surge.sh

Com apenas seis caracteres na linha de comando você pode deixar seu site estático online.

por Fabio Soares

Começando com o Angular Material  – Parte 1

Decidi começar essa série de posts sobre Angular pois ultimamente é o que mais estou estudando, e pirando também rs, estou viciado no angular confesso, e não podia deixar de escrever sobre o angular material pois ele realmente me surpreendeu com sua facilidade que junto a sua beleza o torna bem interessante. Vou escrever uma série com alguns posts baseados no que eu aprendi do angular material nesses tempos estudando na internet, espero que possa ajudar uma galera que queria muito conhecer porém não sabia por onde começar ou tem dificuldade de achar algo em português.

por Júlio Carneiro

Você conhece AMP?

O projeto AMP - Accelerated Mobile Pages, é uma iniciativa Google em conjunto com alguns publishers como Chartbeat, Vox, Wordpress.com, Twitter, The Washington Post, UOL, etc; de trabalhar uma estrutura de rápido carregamento de conteúdos em Smartphones.

por Thaiana Poplade

Entendendo a indentação no Javascript

Código sem indentação não é legal de se ler, mas tem uma coisa um pouco pior que isso, ou tão ruim quanto, que é a falta de um padrão na indentação do projeto. Por exemplo, eu uso tab pois consigo ajustar meu editor para que ele exiba a quantidade que eu julgue necessária de espaços, mas pode ser que alguém da minha equipe use os próprios espaços, eai já imagina a beleza que vai ficar o código né?

por Júlio Carneiro

O básico sobre Expressões Regulares

Desmistificando as Expressões Regulares.

por Diego Eis

Fluxo de execução assíncrono em JavaScript – Generators e Async Functions

Tardou mas não falhou e veio como presente de ano novo. Este é o terceiro artigo de uma série que trata sobre execução assíncrona no JavaScript. Veremos a seguir como funcionam Generators e qual a sua aplicação em conjunto com Promises. Tratando um pouco do que vem por ai, faremos uma análise sobre a especificação de Async Functions.

por Jean Carlo Emer

Não se preocupe tanto com o Time To First Byte

O pessoal da CloudFlare fez um teste muito interessante, provando que a medida TTFB (Time To First Byte) não é tão precisa para provarmos que a resposta do servidor de um site é rápida. O que eles fizeram: em um servidor de teste eles criaram um delay de resposta HTTP para entender o que realmente é medido. A resposta foi que o TTFB não é uma medida tão útil assim. Quando um browser faz o request de uma página no servidor, ele envia alguns headers para especificar algumas coisas como os formatos de respostas aceitos.

por Diego Eis

O básico sobre o automatizador de tarefas Make

Vocês trocariam seu Gruntfile (ou semelhantes) por um Makefile?

por Cristiano Santos

Introdução ao Redux

Uma breve explicação sobre a arquitetura Redux e suas principais características

por Henrique Sosa

Lodash ou Underscore? Talvez, nenhum!

Durante os últimos anos, bibliotecas como Underscore e lodash, encontraram seu espaço no cinto de utilidades de muitos programadores JavaScript. Embora essas bibliotecas ajudem a escrever e até facilitar a sua vida em partes do seu código, não necessariamente, esse código, fica simples ou de fácil entendimento. Quem estiver lendo ou mantendo o código será obrigado a, além de conhecer a linguagem e sua biblioteca padrão, também conhecer a biblioteca de utilitários que está sendo usada.

por Eduardo Rabelo

Fazendo a animação do coração de like do Twitter

Fazendo a animação do coraçãozinho do Twitter.

por Diego Eis

Por que Python? (parte 2)

Por que escrever código Python é tão bom? Por que os programadores Python são tão apaixonados? Parte da resposta é a própria sintaxe da linguagem.

por Elcio Ferreira

Uma visão detalhada sobre instanciação de variaveis no JavaScript

Sabe quando a variável acaba ganhando um valor que você não esperava ? Pois bem, o JavaScript tem algumas formas de tratar variáveis e é sobre isso que vamos tratar aqui neste artigo. Escrevi este texto para o curso beMEAN - Instagram criado pelo Jean Suissa, fundador da Webschool. Gostaria de compartilhar com a comunidade, especialmente com os iniciantes. Vamos la! ;)

por Alex Miranda

Detectando navegadores com Bowser

Projeto hospedado no GitHub ajuda a detectar versões e detalhes do navegador utilizado

por Raphael Guastaferro

Usando GIT para atualizar arquivos no servidor de hospedagem II – Final

Esta é a segunda e última parte do artigo que explica como fazer um esquema simples para deploy automático usando GIT + Bitbucket A mesma configuração pode ser usada em qualquer servidor GIT e qualquer serviço de hospedagem que tenha acesso via ssh e git instalado Se você ainda não leu a primeira parte, segue o link: http://tableless.com.br/usando-git-para-atualizar-arquivos-no-servidor-de-hospedagem No artigo anterior, criamos as chaves SSH para autenticação no Bitbucket, criamos um repositório GIT e manualmente executamos o comando | git pull | para atualizar o nosso repositório.

por João A. Zonta

Introdução ao Electron

Desenvolvedor web também pode construir aplicações desktop. Com o Electron, você usa HTML, CSS e JavaScript.

por Henrique Sosa

10 Dicas Simples Para Acelerar Seu Site Até 278 Vezes

É fundamental que seu site seja rápido. Isso atrai e fideliza clientes. Veja aqui 10 dicas simples que podem acelerar seu site até 278 vezes

por Roberto Beraldo

Uso acessível: O cumprimento das premissas na web contemporânea

Motivações ao desenvolvimento acessível.

por Gabriel Ramos

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

Slack Time – Sua preguiça também pode gerar resultados

Aprenda mais sobre esta técnica utilizada em metodologias ágeis e saiba usar seu tempo de folga para melhorar seus processos.

por Henrique Schreiner

Centralizando conteúdo na vertical e horizontal com CSS Flexbox

Centralize conteúdo e elementos na vertical e horizontal usando Flexbox do CSS.

por Diego Eis

Harvest: Boilerplate de Gulp para seus projetos

Um boilerplate de Gulp com tarefas básicas de build e gerenciamento do projeto.

por Diego Eis

DeployBot faz o build e deploy do seu projeto para produção

Eu suponho que você não usa mais FTP. Nem preciso dizer que isso é coisa do passado e faz mal para sua saúde. Mesmo que você use hoje GIT, um monte de tasks runners e etc: fazer o build e deploy da sua aplicação pode ser muito chato e trabalhoso. Mas o DeployBot tem a missão de tentar mudar isso tudo. A ideia é que o DeployBot centralize o deploy do seus projetos desde a fase inicial de testes, homologação e depois produção.

por Diego Eis

Property accessors e porque você deveria saber usá-los

Notações diferentes para acessar as propriedades de um mesmo objeto em JavaScript

por filipemerker

Raspagem de dados com Node.js

Raspagem de dados, ou Web scraping, é uma técnica de extração de dados onde é possível recuperar informações de websites. Existem diversas maneiras de fazer raspagem de dados: pode ser feito manualmente copiando e colando, utilizando uma ferramenta online, usando uma extensão para o navegador Google Chrome (como o Webscrapper), etc. Neste artigo será mostrado um passo-a-passo de como fazer raspagem de dados no site Portal da Transparência. O site Portal da Transparência é mantido pelo Tribunal de Contas da União, órgão que fiscaliza as contas do governo.

por Rennan Martini Rodrigues

Crie seu jogo em HTML5 com enchant.js

Com poucas linhas de código é possível criar um jogo simples em HTML5 utilizando o framework enchant.js.

por Ezequiel M. Mello

Fluxo de execução assíncrono em JavaScript – Callbacks

Este é o primeiro artigo de uma pequena série a respeito de execução de código assíncrono. Definiremos o que é fluxo de execução e veremos o que é e quão importante é dominar as callbacks na escrita de código JavaScript.

por Jean Carlo Emer

Entendendo os valores ‘initial’ e ‘inherit’ do CSS

Qual a razão da existência dos valores 'initial' e 'inherit' na maioria dos atributos do CSS? Suas propriedades tem bastante significado, confira e entenda.

por João Guilherme

NodeSchool – Um jeito fácil para aprender Node e JavaScript

NodeSchool, um workshop de código aberto, presencial ou online.

por Diego Eis

nth-child() e calc() – Uma proposta para o abandono de frameworks de grids responsivos

Conheça mais sobre estas duas propriedades para a construção de layouts responsivos sem o utilizar frameworks de grids.

por rogerio dias moreira

Animações fluídas à 60fps

Fazendo animações a 60fps nos browsers atuais.

por Alan Cezar

Cache busting: entrega inteligente de assets

Sabe quando você faz o deploy com aquele ajuste no JS ou CSS e o usuário não consegue visualizar essas alterações por conta do cache do browser? Então, cache busting pode lhe poupar desse contratempo.

por James Clébio

Jails – O Framework e a Arquitetura do Javascript

Eu escrevi meu próprio framework por que estava insatisfeito com os oferecidos no mercado. E foi ótimo!

por Javiani

Iniciando com Symfony 2 – Parte Final

Nesse tutorial, vamos instalar o bundle FOSUserBundle, para fazermos a autenticação para a área administrativa do nosso blog.

por Candido Souza

Iniciando com Symfony 2 – Parte 09

Nesse tutorial, vamos instalar o bundle StofDoctrineExtensionsBundle, para fazermos os slugs de nossos posts.

por Candido Souza

HTML: Encode UTF-8

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

por Alan Cezar

Foco e Produtividade. Você tem muito a ganhar com isso

Recentemente tenho me cobrado muito na questão de organização, parei para pensar e vi que minha vida estava desorganizada e consequentemente perdia algo preciso, o tempo.

por Felipe Chama

Grid simples com SASS

Criando um grid simples com SCSS.

por Diego Eis

Iniciando com Symfony 2 – Parte 08

Nesse tutorial, vamos instalar e configurar o bundle Knp Paginator, para fazermos a paginação de nossos posts.

por Candido Souza

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

HTTP2 para Desenvolvedores de Web

Entenda um pouco mais como o HTTP2 vai ajudar na construção de sites.

por Marcelo Paiva

Otimize a performance do seu site com o Kraken

Usando Kraken para otimizar suas imagens.

por FelipeMartinin

Iniciando com Symfony 2 – Parte 07

Nesse tutorial, vamos usar um componente do Symfony, o http-foundation, para usar UploadedFile, onde criaremos um upload de imagens para que possamos incluir em nossos posts.

por Candido Souza

Tendências Web 2015 para desenvolvedores

Algumas tendências fortes que ainda veremos em 2015 e que podem perdurar ainda mais.

por Paula Berrocal

Email Marketing – O Inferno – Parte 1

Um overview sobre a construção de Email Marketing.

por Diego Eis

Iniciando com Symfony 2 – Parte 06

Nesse tutorial vamos estruturar e estilizar nossas páginas com Bootstrap e com o mecanismo de template para PHP, o Twig.

por Candido Souza

Iniciando com Symfony 2 – Parte 05

Nesse tutorial vamos configurar nosso projeto, e criar a página index, para que nossos posts, sejam visualizados pelos usuários.

por Candido Souza

Alergia à SQL

Introdução Quem nunca ouviu as seguintes frases: “Escrever SQL nos dias de hoje não é uma boa prática” ou “Tente não escrever SQL, usa os recursos do ORM”, ainda não trabalhou o suficiente. O mercado de startups parece cada vez mais alérgico ao SQL, um dos recursos mais poderosos e antigos(1974!) no mundo dos bancos de dados. O que as pessoas esquecem ou escolhem ignorar é a capacidade que um banco de dados tem e pode te oferecer para resolver problemas banais.

por grillorafael

Iniciando com Symfony 2 – Parte 04

Nesse tutorial vamos criar uma entidade Author e fazer o relacionamento com a entidade Post criada anteriormente, usando o componente Console do Symfony em conjundo com Doctrine ORM.

por Candido Souza

Editor Vim – Encontrar e Substituir

Dicas de comandos no Vim que podem te ajudar a poupar tempo, dinheiro e deixar o seu cliente feliz e satisfeito.

por Henrique Schreiner

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

Introdução ao webpack

Conheça o webpack: um bundler que permite dividir seu código em múltiplos módulos para serem lidos sob demanda.

por Leo Cavalcante

HTTP/2 – Atualização do protocolo base da internet

O protocolo HTTP vai receber oficialmente uma grande atualização em breve. Saiba o que mudou.

por Diego Eis

Iniciando com Symfony 2 – Parte 03

Nesse tutorial vamos criar uma entidade e fazer o CRUD para nossa aplicação, e para agilizar nosso processo, continuaremos a usar o componente Console do Symfony 2, porém, em conjundo com Doctrine ORM.

por Candido Souza

Código Limpo

Um dos assuntos que costumo discutir bastante com a galera é sobre qualidade de código. Nesses papos sempre vem questões como: quais práticas podemos adotar para ter um código de alta qualidade? E como sabemos se o nosso código está bom? Como temos certeza de que estamos no caminho certo? Vou explicar meu humilde ponto de vista com exemplos e opiniões sobre qualidade de código. Vou abordar casos de uso com JavaScript, mas nada te impede aplicar muitas dessas dicas usando outras linguagens.

por Alan Cezar

Iniciando com Symfony 2 – Parte 02

Neste tutorial veremos como o Symfony facilita nosso processo de desenvolvimento e produtividade com o seu componete console.

por Candido Souza

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

Entendendo o Event Delegation da função on() no jQuery

Um pouco sobre event delegation com a função <code>on()</code> do jQuery.

por Diego Eis

Closure Tools

Uma excelente ferramenta de minificação de arquivo javascript. Vou falar alguma coisa sobre Closure Tools e alguns exemplos de código fonte.

por Leonardo Lima

Iniciando com Symfony 2

Neste simples tutorial, vamos fazer a instalação do Symfony 2 e abordar alguns conceitos inicias.

por Candido Souza

Simples modal com CSS responsivo

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

por Palloi Hofmann

Workflow Front-end

O desenvolvimento em html, javascript e CSS é uma forma mágica de se construir um mundo novo a cada linha de código. Os mágicos do front-end precisam de cartolas para que retirem seus coelhos.

por Bruno Ruiz

Comandos iniciais do Git

Conheça os comandos básicos do Git nesse artigo simples.

por Candido Souza

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

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

Design Patterns em JavaScript – Observer

Entenda um pouco mais sobre o pattern JavaScript Observer.

por Bruno Ruiz

7 Plugins do sublime text que você deveria conhecer

Conheça 7 plugins de Sublime Text que podem ajudar a sua produtividade diária.

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

Desenvolvimento de temas para Tumblr

Entenda como blogs e redes sociais podem andar de mãos dadas, veja como criar uma diagramação diferente para cada tipo de conteúdo e desenvolva temas para Tumblr utilizando variáveis dinâmicas e HTML.

por Dani Guerrato

Padrões de Código de CSS do WordPress

Os padrões de código WordPress são para tornar mais legível, significativo, consistente e bonito o seu código PHP, HTML, CSS e JAVASCRIPT. E nesse artigo veremos alguns pontos sobre o CSS WordPress.

por Wanderson Macêdo

Criando um aplicativo simples de chat com Firebase

Um exemplo de utilização dessa poderosa plataforma de armazenamento e sincronização de dados em tempo real.

por Cosme Lopes

Web Notifications API

Aprenda o básico da API de Web Notifications.

por Diego Eis

CSS Filters – Aplicando filtros em imagens com CSS

Veja como aplicar filtros em imagens e elementos apenas com CSS.

por Diego Eis

Construindo sua própria biblioteca javascript

E se um dia você criasse sua própria biblioteca JavaScript, no estilo da jQuery?

por Clovis Neto

Um pouco sobre OpenType

Como adicionar tipografia à web com recursos OpenType.

por Fabiano de Lima Abreu

OOCSS, SMACSS, BEM, DRY CSS: afinal, como escrever CSS?

Conheça os principais estilos de escrita de CSS e aprenda o que você pode extrair deste mar de siglas para escrever código melhor.

por Jean Carlo Emer

Como publicar aplicação NodeJS no Heroku

Neste artigo vou utilizar uma <a href="http://minhas-midias-sociais.herokuapp.com/" rel="noreferrer">aplicação <em>single page</em></a> para demonstrar passo a passo as etapas necessárias para publicar uma aplicação no <a href="https://www.heroku.com/" rel="noreferrer">Heroku</a>.

por Igor Ribeiro Lima

Criando uma aplicação Single Page com AngularJS

O AngularJS oferece muitos recursos ao desenvolvedor, neste artigo vamos conhecer o de Single Page, utilizando ngView e ngRoute.

por Lucas Caprio

Dominando o uso de prototype em JavaScript

| Neste artigo vamos aprender a utilizar um aspecto bastante importante das funções: protótipos.

por Clovis Neto

Produtividade e Tomates

Conheça a Técnica Pomodoro, aprenda a gerenciar melhor seu tempo e entenda como fazer mais pausas pode te deixar mais produtivo.

por Dani Guerrato

Web Components: Introdução

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

por Diego Eis

PHPUnit – persistência e configurações avançadas

Utilizando o PHPUnit para realizar testes com persistência de dados.

por Andre Cardoso

Utilizando o MarkerClusterer no Google Maps

Você utiliza bastante o Google Maps em seus projetos? Já aconteceu de vários pontos ficarem muito próximos uns dos outros? Confira o MarkerClusterer, um recurso do Google para casos desse tipo que melhora a visualização do mapa.

por Raphael Fabeni

Como fazer triângulos (setas ou arrows) com CSS

Como fazer triângulos (arrows) usando apenas com CSS.

por Diego Eis

Composer – um pouco além do básico

Este post visa explicar algumas funcionalidades mais avançadas do composer, se você ainda não conhece o composer por favor leia <a title="Composer para iniciantes" href="http://tableless.com.br/composer-para-iniciantes/">Composer para iniciantes</a> antes de prosseguir.

por Andre Cardoso

Uma coletânea front-end escrito por 11 devs

Um livro de front-end escrito por 11 desenvolvedores brasileiros falando um pouco de tudo. Essa é a Coletânea Front-end.

por Diego Eis

Acelere o carregamento de suas páginas

Também conhecido como o Santo Graal das páginas de internet, encontrar o carregamento perfeito não é tarefa fácil.

por Jean Carlo Emer

Composer para iniciantes

Composer é uma ferramenta para gerenciamento de dependências para o PHP que vem ganhando espaço e se tornando cada vez mais indispensável. Com algumas poucas linhas de configurações você define todas as bibliotecas de terceiros ou mesmo suas que deseja/precisa utilizar em seu projeto, o composer encarrega-se de baixá-las e criar um autoloader deixando-as prontas para uso. Para muitos o composer ainda é um mistério então o intuito deste post é mostrar ao usuário que ainda não conhece como baixar, configurar e utilizar o composer de forma básica.

por Andre Cardoso

Introdução ao Behavior Driven Development

Hoje em dia, se quisermos escrever um bom software. Nossos programadores devem ser especialistas na regra de domínio de nossa aplicação. Não mas...

por Jefersson Nathan

Javascript Observe

A futura implementação do Javascript Harmony capaz de observar e notificar aplicações sobre as mudanças ocorridas em objetos Javascript.

por João Felix

Qual a dose certa de JavaScript

Um pouco de JavaScript não obstrusivo e quais as estratégias para garantir uma boa performance e acessibilidade em aplicações ricas.

por Jean Carlo Emer

Criando efeito de fadeIn e fadeOut com javascript puro

Veja como criar um efeito semelhante ao fadeIn e fadeOut da famosa biblioteca Jquery apenas com javascript

por Clovis Neto

Bower na prática

Um dos grandes problemas encontrados no desenvolvimento de software é o gerenciamento de dependências. Saiba como o Bower pode ajudar.

por Diogo Beato

Wintersmith: Outro gerador de conteúdo estático

Conheça o Wintersmith, mais um gerador de conteúdo estático.

por João Felix

PHPUnit, como iniciar sem dores

Instalando o PHUnit utilizando o gerenciador de pacotes Composer.

por Andre Cardoso

Criando um blog com Octopress e Github Pages

Crie um blog em Octopress, framework baseado em Jekyll.

por Diogo Beato

Introdução ao Selenium 2

Entenda mais sobre Selenium e entenda como ele pode ajudar em aplicações web.

por Igor Ribeiro Lima

TDD, por que usar?

TDD é o desenvolvimento de software orientado a testes. Entenda mais detalhes e como usá-lo!

por Andre Cardoso

Turbinando as Media Queries

Entenda um pouco mais sobre como melhorar o gerenciamento de breakpoints com SASS.

por Átila Fassina

Modularização em JavaScript

Componentes e módulos nunca foram tão mencionados como ultimamente. Ambos são conceitos antigos que devemos entender e passar a adotar o quanto antes. Quem sabe você possa repensar o seu JavaScript hoje mesmo?

por Jean Carlo Emer

Live Coding com Diego Eis

Participe de um micro workshop com o Diego Eis, onde ele implementará ao vivo um layout direto do PSD.

por Diego Eis

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

Testando sua app do Firefox OS em seu device

Como testar sua aplicação em um celular com Firefox OS.

por Willem Allan

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

Meddlers – Aprendendo a estruturar equipes

Como construir equipes e estruturas em diversos cenários.

por Diego Eis

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

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

Emmet LiveStyle

Uma nova maneira de editar CSS.

por Diego Eis

Criando páginas web para seus repositórios com o GitHub Pages

Entenda como funciona o Github Pages.

por William Martins

Contribuindo em projetos open source com o github

Conheça os primeiros passos para contribuir para projetos pelo GitHub. Ideal para iniciantes!

por William Martins

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

JavaScript: Objetos Literais vs. Funções Construtoras

Neste artigo apresento um pouco mais sobre as duas formas disponíveis para criação de objetos em JavaScript, Objetos Literais e Construtores, suas vantagens e desvantagens.

por Davi Ferreira

Desenvolvendo para Firefox OS

Introdução para criar aplicativos para FirefoxOS.

por Willem Allan

Está perdido? Geolocalização!

Entendendo como utilizar a API de Geolocalização (geolocation) do HTML5 com Javascript.

por Daniel Pereira Camargo

AddThis: analisando as mídias sociais do seu site

Conheça algumas vantagens ao utilizar o AddThis em seu site.

por Diego Eis

Prepared Statements no MySQL

Para iniciantes, entenda como o Prepared Statements funciona no MySQL.

por Layo Azevedo

Criando comandos de atalhos no terminal

Criando comandos de atalhos direto no terminal.

por Willem Allan

Grunt: você deveria estar usando!

Entenda como automatizar tarefas com GruntJS.

por Vagner Santana

Sobre prazos e produtividade

Um pensamento sobre prazos e produtividade.

por Diego Eis

Locaweb Style – Como iniciamos

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

por Diego Eis

Repensando CSS Resets

Como melhorar seu CSS Reset.

por Dani Guerrato

Parallax simples com JQuery e CSS

Faça o efeito parallax com 3 passos simples.

por Diego Eis

E-mail Newsletter Responsivo

Entenda como funciona e como fazer um email marketing responsivo.

por Dani Guerrato

Um guia completo de tipografia para a web

Entenda os princípios da tipografia na web e saiba como melhorar a leitura dos usuários.

por Dani Guerrato

Classes Funcionais

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

por Diego Eis

Imagens em alta resolução utilizando SVG

Entenda o que são imagens SVG e como você poderá utilizá-las hoje.

por Dani Guerrato

Git com Interface Gráfica

Aplicações visuais para o Git.

por Diego Eis

Iniciando no GIT – Parte 2

Commit, Push e Pull. Entenda o que fazer depois que modificar arquivos.

por Diego Eis

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

Iniciando no GIT – Parte 1

Entenda o que é o Git e como iniciar um projeto.

por Diego Eis

Passwords em Mobiles

Melhorando a experiência do usuário não mascarando o password em mobiles.

por Diego Eis

Esse texto é pra mim – mercado e atitude

Pensando alto.

por Diego Eis

Tunando o Developer Tools do Google Chrome

Já imaginou poder trocar o CSS da sua ferramenta de Inspecionar Elementos? Pois é, você pode!

por Zeno Rocha

Flexbox – Organizando seu layout

Entenda como a recomendação de Flexbox poderá nos ajudar a organizar a estrutura de sites e aplicações

por Diego Eis

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

Performance front-end – Parte 1

Entenda como você pode melhorar a velocidade do seu site de maneira rápida e simples.

por Diego Eis

Como usar os pseudo elementos :before e o :after

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

por Diego Eis

Identificando os IEs

Utilize dois modos simples para identificar os IEs em seus projetos.

por Diego Eis

Assegurando a qualidade do seu código JavaScript

Conheça ferramentas de análise de código que ajudam a manter a qualidade e o padrão de suas aplicações javascript.

por Davi Ferreira

#1 Tableless Conference

Evento sobre front-end em SP.

por Diego Eis

“HTTP Archive” Ferramenta para performance

| Verifique algumas características importantes sobre performance e velocidade do seu website.

por Giovanni Keppelen

Estruturação de front-end – Parte 2: Designers e Programadores

Entendendo e sincronizando as necessidades dos designers e programadores.

por Diego Eis

Drops 9 – Préprocessadores, frameworks e bibliotecas

Entenda a diferença entre pré-processadores, frameworks e bibliotecas de CSS. Essa é a primeira parte sobre como estruturar uma área de client-side.

por Diego Eis

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

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

Qualidade de Imagens e densidade de pixels

Entenda melhor sobre densidade de pixels em aparelhos como o iPhone 4 e outros dispositivos que carregam Android.

por Diego Eis

Responsive Web Design – focando a coisa certa

Será que todo mundo precisa de um design responsivo? Você pode não estar dando atenção para o que realmente importa.

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

ePub: Aprenda a criar um livro digital

| Conheça as vantagens do formato, aprenda a criar um livro do zero, descubra as melhores práticas e porquê você deve correr dos geradores automáticos.

por Dani Guerrato

jQuery: métodos desconhecidos

Conheça alguns métodos pouco utilizados mas que podem ser grandes aliados dos desenvolvedores jQuery.

por Davi Ferreira

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

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

Habilitando tags em fotos com jQuery

Aprenda a desenvolver uma interface para permitir que usuários apliquem tags/marcações nas fotos do seu aplicativo.

por Davi Ferreira

CSS3 – Módulo Template Layout

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

por Diego Eis

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

CSS 3 – O valor currentColor

O currentColor copia a cor da propriedade color e a aplica em outras propriedades de cor, como background, border e etc.

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

Conteúdo sob demanda com jQuery

Veja como exibir o conteúdo do seu site acabando com a necessidade de paginação e atualização da página.

por Davi Ferreira

Manipulando a metatag Viewport

Aprenda a manipular o viewport de mobiles e outros dispositivos com a metatag Viewport do HTML.

por Diego Eis

jQuery: seletores personalizados

Como se não bastasse ser altamente personalizável através de plugins, o framework jQuery também é bastante flexível com seus seletores. Além de poder localizar objetos e elementos por ID, classe, nome do elemento, expressões e atributos também é possível criar o seu próprio seletor.

por Davi Ferreira

Performance do seu CSS

Entenda o que pode melhorar ou piorar a performance de carregamento do seu CSS.

por Diego Eis

Múltiplos backgrounds com CSS

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

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

Convertidos do Tableless

Os convertidos do Tableless voltaram. Não preciso dizer mais nada. =^)

por Diego Eis

Otimizando seu site em WordPress para SEO

Vamos ver como podemos aperfeiçoar seu site em WordPress para SEO e veja a importância de fazer isso.

por Paulo Rodrigues

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

Criando Menus no WordPress

Aprenda a adicionar menus e edite no seu próprio painel de administração com as páginas ou links que você quer

por Paulo Rodrigues

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

Customizando links

Customizar links do site pode ser algo rápido e útil para o seu visitante. Fazemos essa customização com a ajuda dos seletores complexos, onde conseguimos filtrar e selecionar links específicos de acordo com o valor do HREF.

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

Carrinho de compras com drag and drop

O mercado de e-commerce não para de crescer e este crescimento vem acompanhando de diversas novidades e melhorias nas interfaces das lojas virtuais. Uma delas é opção de arrastar e soltar produtos no carrinho de compras e é isso que você aprende neste artigo.

por Davi Ferreira

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

Aplicando um Plano de Usabilidade – Parte 1

Aprenda a planejar e analisar seu website antes de colocar a mão na massa - quer dizer, no código.

por Alysson Franklin

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

HTML5: Elemento AUDIO

A tag audio é suportada pela maioria dos browsers atuais. Ela representa um som ou um stream de audio e pode ser utilizada agora. Leia como.

por Diego Eis

Templates e jQuery – parte 1

Separar a programação do HTML é uma prática constante no desenvolvimento web. Durante muito tempo, no entanto, o JavaScript ficou de fora dessa. Chegou a hora de reverter este quadro.

por Davi Ferreira

Sections: elemento nav – Parte 2

O elemento NAV agrupa blocos de links de um mesmo assunto ou links internos do website. Ele indica que um determinado bloco é um bloco de navegação.

por Diego Eis

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

Gradientes em CSS

Já é possível criar gradientes apenas utilizando CSS3. Sem imagens e com alguma compatibilidade com a maioria dos browsers do mercado. Vale a pena experimentar.

por Diego Eis

Anatomia de um plugin jQuery

jQuery é um framework JavaScript, o mais sexy do pedaço, que transformou essa linguagem em uma das mais importantes ferramentas presentes no set de um webdesigner ou um desenvolvedor frontend. O que antes era chato e complicado, passou a ser extremamente dinâmico e elegante.

por Davi Ferreira

Modelos de conteúdo no HTML5

Sobre modelos de conteúdo no HTML5.

por Diego Eis

Propriedade @font-face CSS – Fonts externas na web

font-face possibilita utilizar fonts externas em websites. Você já pode utilizar essa regra agora.

por Diego Eis

Codeshow 2010

Quer ver o pessoal da Visie colocar um sistema no ar em um dia? Venha então para o CodeShow 2010.

por Diego Eis

Emuladores para browsers mobiles

São diversos aparelhos com diversas versões de browsers. Qual escolher? Por onde nivelar o desenvolvimento? Qual browser é melhor?

por Diego Eis

Produtividade: editores e snippets

Se você é um desenvolvedor de verdade, você deve conhecer seu editor de códigos. Não importa qual ele seja, contanto que você o conheça do começo ao fim, saiba suas limitações e saiba utilizar suas vantagens para minimizar o tempo de produção.

por Diego Eis

Simuladores de Browsers Mobiles

iPhone, Android e S60. Há simulador de browsers para todos estes smartphones. Versionar sites para mobiles nunca foi tão fácil.

por Diego Eis

Versionamento inteligente para mobiles

Filtrar mobiles pelo tipo de aparelho é muito comum. A moda é versionar o site para iPhone. Mas há outros aparelhos com a mesma capacidade de renderização que podem se beneficiar.

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

Efeito cascata, herança e especificidade do CSS

O efeito cascata do CSS é controlado pela especificidade e pela herança das propriedades.

por Diego Eis

Digest – Referências de CSS

Uma listagem de algumas referências e lista de propriedades sobre propriedades do CSS.

por Diego Eis

Propriedade do CSS: nth-child

A pseudo-classe nth-child seleciona elementos dentre uma árvore de elementos se referindo a posição específica de cada um. Você pode por exemplo selecionar os elementos ímpares ou pares.

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

Introdução sobre Media Queries

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

por Diego Eis

Introdução ao CSS Animation

CSS Animation manipula características dos elementos, transformando-os modificando por meio de transições os valores das propriedades definidas dos elementos.

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

Hierarquia de arquivos do WordPress

O Wordpress utiliza uma hierarquia de arquivos para a criação de themes. Para criar bons sites e blogs baseados em Wordpress, é importante que você entenda essa hierarquia.

por Diego Eis

Seletores do CSS: Pseudo-classes

Uma breve explicação sobre pseudo-classes, seus funcionamentos e tipos.

por Diego Eis

Seletores Complexos do CSS

Os seletores complexos mostram como a CSS pode ser dinâmica e direta.

por Diego Eis

Seletores Agrupados e Encadeados

Sobre seletores agrupados e seletores encadeados. Explicação rápida e básica.

por Diego Eis

Propriedade Float do CSS

Vídeo que demonstra a propriedade float do CSS. Essa propriedade é responsável pela administração do posicionamento das caixas do layout.

por Diego Eis

Animando com jQuery

Que tal experimentar fazer uma área onde o usuário clica em um botão de mostrar/ocultar menu?

por Michael Granados

Um 2009 sem fôlego

Este foi um ano de batalhas como qualquer outro. Mas 2009 está chegando e quem sabe qual será o caminho que o desenvolvimento web irá percorrer?

por Diego Eis

Implementar XHTML/CSS é grátis

Você pode ser diferente, mas isso só depende de você.

por Diego Eis

Vídeo Tutorial – Manipulando atributos com JQuery

Depois de encontrar os objetos do HTML, é preciso alterá-los. Aprenda como ler, alterar e remover atributos HTML. Conheça também as facilidades da jQuery para trabalhar com classes.

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

Modulando o CSS

As vezes não é inteligente fazer o código CSS todo em apenas um arquivo CSS. É aí que entra a modularização do CSS.

por Diego Eis

Não “otimize” seu código

Quando fazíamos sites com tabelas, o grande problema era a quantidade de código que escrevíamos. Naquele tempo – 1996, 97, 98 – tínhamos outros pontos que precisavam de uma atenção maior. A conexão era lerda para todo mundo e isso dificultava um bocado as coisas. Por isso, fazer um site pesado era fora de cogitação. Ficávamos “mendigando” cada byte para que o site ficasse milésimos de segundo mais rápido.

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

O Safari para iPhone – Desenvolvimento web para iPhone

O desenvolvimento web para mobiles está se tornando algo comum. Fazer sites para aparelhos como o iPhone deixou de ser coisa de outro mundo, mesmo assim, há certos detalhes que precisamos entender.

por Diego Eis

Mostrar posts recentes no WordPress

Pode ser interessante para você mostrar em seu site os posts mais recentes criados no WordPress, na sidebar, por exemplo, dessa forma você pode deixar seu site mais atrativo aos visitantes pois assim eles não ficariam limitados a ver somente os posts que são listados na home do site. O código para gerar uma lista com os últimos posts é muito simples, basta ter algum conhecimento de HTML para editar os arquivos.

por Pedro Rogério

SEO para iniciantes – O básico

Se você não sabe por onde começar o trabalho de SEO, há alguns passos por onde você pode se aventurar até entender melhor todo o sistema. Os pontos à seguir são muito superficiais e nenhum garante que seu site ficará na primeira página. Mas a combinação de todos eles te garante uma base sólida para os pontos mais profundos do tratamento SEO.

por Diego Eis

Navegando com a jQuery

Para os designers, familiarizar-se com a jQuery é um ato muito sutil. Isso se deve ao fato da mesma basear-se em um comando ( jQuery ou o seu atalho $ ) que referencia elementos e assim atribuir valores ou aplicar ações a eles. O mais interessante é que usamos as mesmas chamadas que usamos para referenciar elementos quando trabalhamos com CSS. Logo:

por Michael Granados

Criar páginas no WordPress

O WordPress permite total controle sobre a criação de conteúdo, inclusive a criação de novas páginas.

Para termos acesso a esse recurso, utilizamos o método wp_list_pages (), método pelo qual, após a criação das páginas, elas são mostradas automaticamente no seu site, pois a grande maioria dos templates para WordPress já vem com essa função, que fica localizada no arquivo header.php do tema do WordPress, gerando uma lista de páginas semelhante a essa:

por Pedro Rogério

Bloginfo Template Tag

A Template Tag Bloginfo mostra informações sobre o blog. A maioria dessas informações são modificadas diretamente no painel de controle da sua instalação do WordPress. Isso pode ser utilizado em qualquer lugar do seu site. A Template Tag é a get_bloginfo().

Por exempo, se você precisa do nome do site para colocar em algum lugar do site, como o Logo, a sintaxe seria:

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

White, Gray e Black Hats

Existem várias técnicas para colocar seu site em primeiro nos buscadores. As técnicas de SEO se encaixam em três grandes árvores: White Hat (chapéu branco) que são as legais e recomendadas pelos buscadores. Gray Hat, que se utilizadas de forma abusiva são consideradas anti-éticas, embora os buscadores não tenham controle sobre sua prática. Há outras técnicas totalmente ilegais, utilizadas para ter alguma vantagem rápida ou burlar os resultados das buscas.

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

WordPress Include Tags

O WordPress tem 3 TemplatesTags para incluir elementos básicos de Cabeçalho, Coluna lateral (sidebar) e Rodapé, são eles: get_header(), get_sidebar() e get_footer(). Essas TemplateTags não aceitam qualquer tipo de parâmetro, portanto são simples de se aplicar. Em todos os themes do WordPress, essas 3 TemplateTags estão sempre presentes, mesmo assim, você pode modificar isso incluindo outro arquivo que não seja o padrão que o WP estabeleceu.

por Diego Eis

SEO – Sitemaps

Saiba como funciona o sitemap.xml

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

Formulário HTML Básico em 8 minutos

update: Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio.

O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid.

por Diego Eis

O LOOP do WordPress

O WordPress tem vários segredos… um dos segredos mais interessantes é o Loop. O Loop é usado no WordPress para mostrar os posts e páginas do site. O WordPress procura pelas páginas ou posts publicados no sistema e exibe seu conteúdo na página de acordo com os critérios que especificamos com as Template Tags. Qualquer código HTML ou PHP colocado no Loop será repetido em cada um dos posts exibidos.

por Diego Eis

Charsets e Encodes – Tabelas de caracteres

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

por Diego Eis

PDF grátis sobre XSLT

A Visie está disponibilizando um PDF grátis sobre XSLT.

A linguagem XSLT é utilizada para transformar dados de um formato XML em vários outros formatos. Há implementações de XSLT para praticamente qualquer linguagem de programação disponível hoje, incluindo PHP, JSP, ASP, ColdFusion, Python, Visual Basic, .NET e Delphi. No PDF estudamos os fundamentos e principais comandos da linguagem, permitindo a transformação de conteúdo baseado em XML em formatos como TXT, CSV, HTML e o próprio XML. Entre os exemplos realizados estão a transformação em HTML de um arquivo XML com dados de previsão do tempo atualizados em tempo real, e a criação de um sistema de clipping de notícias baseado em RSS ou ATOM.

por Diego Eis

Metatags – Breve introdução de uso e teoria

Metatags servem dar informação sobre seu site para sistemas de buscas ou outras aplicações. Metadados são estruturas de informações que descrevem características de uma fonte de informação.

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

Criando um Menu Horizontal com CSS

Aprenda como criar um menu horizontal padrão com CSS.

por Diego Eis

Email bom é TXT

Você é um sujeito antenado e sabe disso. Mas talvez seu chefe não saiba. Talvez seu cliente não saiba. (Talvez você mesmo não saiba.) Ou por qualquer outro motivo, você pode se ver obrigado a enviar uma newsletter em HTML. E agora, o que você faz? Chuta o pau da barraca, abre o Dreamwaver e prepara “aquele” layout?

Você ainda pode, mesmo enviando emails em HTML, se preocupar em tornar melhor a experiência de seu usuário. Vejamos:

por Elcio Ferreira

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 simples com XML e CSS

Qualquer um que codifique HTML, ou mesmo use um editor WYSIWYG, já esbarrou no problema. Se você trabalha com internet, já deve ter tido também esse problema. O código se tornou complexo, com várias tabelas, uma dentro da outra. Vários frames, com uma porção de scripts para manter o conteúdo atualizado entre eles. Uma parte da aplicação rodando em um pop-up, com um script que atualiza o conteúdo principal.

por Elcio Ferreira

Image-Replacement x Imagens

Este assunto é muito abrangente e divertido de ser debatido. Portanto, se você discordar deste texto, quero que lembre que é minha opinião… claro, sempre podemos mudar de idéia. 😀 Para não viajarmos muito, vamos pegar como pauta deste texto, o ponto que discutimos na “Lições Sobre Semântica #3”. O ponto era fazer títulos com imagens ou image-replacement? Bem, felizmente temos uma base para nos guiar… O código deve ficar o mais semântico possível.

por Diego Eis

Informação e Formatação; As duas camadas de desenvolvimento web

Se você já leu alguma coisa sobre Tableless, já deve ter percebido que nesse método nós separamos a informação da formatação. Para fazer a formatação do site, ou seja, para literalmente aplicarmos o design do site, nós usamos o CSS (as famosas Folhas de Estilo), que eu julgo ser a principal ferramenta do desenvolvedor para criar sites tableless. Para a apresentação da informação, você pode usar HTML ou XHTML, o que você achar mais apropriado.

por Diego Eis

Lidando bem com os bloqueadores de pop-up

Todo mundo que já experimentou ama bloqueadores de pop-ups. Navegando há anos com Opera e Konqueror e usando Firefox para acessar o Gmail, ainda me assusto quando preciso navegar no IE, seja num cybercafé ou na máquina de um amigo. Como é que as pessoas podem conviver com aquilo? Pop-ups são muito chatos, e se você não acha é porque ainda não experimentou viver sem eles tempo o suficiente.

por Elcio Ferreira

O Caminho Suave para o Tableless

A maior parte dos desenvolvedores web, designers ou programadores, começaram antes do surgimento dos movimentos em prol dos padrões web, usando tabelas para montar layouts em editores WYSIWYG, e ainda hoje este método é usado na maioria dos projetos de internet. Logo, é natural que muita gente, ao começar a entender o valor dos padrões, se pergunte como migrar do desenvolvimento “tradicional” para o desenvolvimento de código semanticamente coerente.

por Elcio Ferreira

Sites para Dispositivos Móveis – MediaType

Felizmente, com a ajuda dos Web Standards, o trabalho para criar um site ficou muito mais fácil, rápida e o mais importante, divertida. Hoje, você troca de layout a hora que quiser, sem se preocupar em ter que refazer todo o código e programação. Eles já estão feitos, por que ter que recriá-los? Então, você troca apenas 1 arquivo CSS, e seu site muda completamente, sem dor de cabeça, apenas mudando a lente de formatação.

por Diego Eis

Implementação HTML

Estava implementando partes do site novo da Visie e resolvi fazer um videozinho rápido da implementação da parte de treinamentos. Fiz sem narração desta vez. Fiz outro vídeo mostrando a implementação CSS. Ainda não consegui colocar no ar, mas logo mais publico por aqui. E já peço desculpas pelo tamanho da letra! 🙁 O vídeo está hospedado no CodeShow Videos. Quem não viu ainda, vale a pena dar uma olhada. Imagine uma espécie de YouTube só que destinado a desenvolvedores e com vídeos sobre desenvolvimento web.

por Diego Eis

Site em Ajax? Site em Flash? Pergunta ruim.

Recebi há poucos dias um email que me deixou intrigado. Um amigo descrevia um site que vai construir em breve e me perguntava: você acha que devo fazê-lo em Ajax? Essa é uma pergunta ruim. A boa pergunta seria: onde, nesse site, eu deveria usar Ajax? Enquanto os cabeças-pequenas ficam discutindo se devem fazer ou não site em Flash, o Flickr faz um site HTML, com um excelente slideshow em Flash.

por Elcio Ferreira

font-face

A propriedade @font-face permite que usemos famílias de fontes que não estão instaladas no computador do usuário. Estamos acostumados a usar (os designers que o digam) um pacote de fontes muito limitado de fonts. O @font-face faz com que o browser baixe, instale e renderize uma font na página. Nem preciso falar que isso pode deixar o site um pouco mais lerdo. Outro ponto é que nenhum dos browsers tem suporte para isso hoje.

por Diego Eis

Referência rápida de CSS em Português

Um guia para você lembrar do que o CSS é capaz.

por Diego Eis

O futuro do CSS

Muito interessante o artigo que o Andy Budd publicou estes dias. Ele fala sobre o futuro do CSS e de outras tecnologias que o W3C cuida. Ele comenta que em vez de o W3C tentar antecipar o futuro e tentar criar soluções para problemas que talvez teremos daqui alguns anos, ele poderia solucionar problemas atuais que temos ao desenvolver sites. Por exemplo, maiores revisões no CSS. Claro, concordo com o cara.

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

Caminhando pelo HTML – parte 1

Vou publicar aqui a série de artigos sobre HTML que escrevi para a revista Webdesign. É uma série de 5 e vai sair um a cada 15 dias. Segue o primeiro:

por Elcio Ferreira

Subjetividade na Semântica

O Bruno escreveu um artigo sobre estruturação de formulários com listas não ordenadas. Este artigo me lembrou um assunto interessante que podem levar alguns à dúvida. Se você ler o artigo, perceberá que o Bruno sugeri uma solução para a estruturação de formulários manipulando listas não ordenadas (UL). Já o Fábio Caparica, fez um comentário dizendo que prefere usar uma estrutura baseada em DL, DT e DD. Eu, posso seguir a mesma linha de raciocínio, só que eu acho “mais semântico” fazer com listas ordenadas, já que o formulário segue uma linha lógica e dependendo das vezes uma linha de prioridade.

por Diego Eis

O que são Media Types do CSS?

Media Types servem para direcionar um determinado CSS para um determinado tipo de meio de acesso.

por Diego Eis

Translation Panel

Sempre é bom ter um bom tradutor por perto. Usando a Translation Panel, isso fica um atalho de distância. Ela usa vários sites para traduzir textos que você preferir.

por Diego Eis

Session Saver

Você estava com uma centena de tabs abertas, todos muito importantes, que se o Firefox ou o Windows travasse nessa hora, você seria capaz de vender seu rim para que pudesse te-las de volta… Pois é… esse medo pode ser deixado de lado.

por Diego Eis

FireFTP

Quem trabalha com Web, usa muito FTP. Quem nunca teve que subir um arquivo às pressas? Pois é. Aquela busca pelo programa de FTP perfeito acabou, pelo menos por enquanto. A Extensão FireFTP transforma seu Firefox em um programa FTP, por sinal, muito completo.

por Diego Eis

Sites para Dispositivos Móveis – Breve introdução

Você tem celular? De acordo com a Teleco, em novembro de 2005, havia mais ou menos 82.351.644 de celulares. Ainda me lembro de quando eles eram artigos de luxo, mesmo sendo grandes e pesados. Hoje, por um preço razoável, você consegue celulares que tiram fotos e fazem outras coisas que nem James Bond ousava imaginar. E quer saber da melhor? Esse é só o começo. Aparelhos com essas e outras possibilidades aparecerão.

por Diego Eis

Descontos no DreamHost – para serviços anuais e mensais

Atenção: Se tiver problemas com o pagamento por ser necessário o Google Checkout, leia as instruções aqui: Pagando o Dreamhost com Google Checkout mesmo sendo brasileiro e outras informações aqui.[Atenção: Se tiver problemas com o pagamento por ser necessário o Google Checkout, leia as instruções aqui: Pagando o Dreamhost com Google Checkout mesmo sendo brasileiro e outras informações aqui.]1 Eu uso Dreamhost a muito tempo. Quase nunca tenho problemas (você já viu este site fora do ar?

por Diego Eis

SVG e o Firefox 1.5

Finalmente podemos falar em SVG na Web. Ou quase… Falta o Internet Explorer. Veja uma breve introdução ao assunto, com alguns exemplos do que é possível. Atenção! Você precisa do Firefox 1.5 para ver esses exemplos. O Opera para Windows trava se você tentar acessar. O Opera 8.5 para Linux se comporta bastante bem.

por Elcio Ferreira

Curso de Tableless

A maneira que o código HTML é escrito pela grande maioria das empresas é uma das grandes causas dos problemas do desenvolvimento web. A perda de tempo, retrabalho, trabalho de manutenção, atrasos na entrega, problemas com designers e programadores, são alguns dos problemas que equipes sofrem ao desenvolver um projeto, seja ele grande ou pequeno. Isso vem de muito antes. Estamos acostumados a desenvolver da maneira complicada. Usamos tabelas para a estruturação de sites, não nos preocupamos com a acessibilidade, tanto de deficientes visuais ou de usuários de mobiles.

por Diego Eis

Ajax para quem só ouviu falar

Sempre que um assunto entra em voga, aparece um monte de gente perguntando as mesmas perguntas de sempre. E, quando eu já estudei alguma coisa sobre o assunto, eu sempre tento, inutilmente, é verdade, escrever um artigo que elimine as dúvidas iniciais e mostre o “camino das pedras” para quem só ouviu falar naquilo e quer saber o que é, pra que serve, e ter uma idéia de como se faz.

por Elcio Ferreira

O que é Tableless?

A Web foi criada para ser um ambiente onde fosse possível trocar informações livremente, e que essas informações pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C (World Wide Web Consortium): um consórcio internacional, onde são desenvolvidas os padrões para a web (Web Standards) tais como: HTML, CSS, XML, XSLT, entre outros. Naquela época, no mercado de browsers, as opções ainda eram poucas: consistiam apenas em Lynx, Mozaic e Netscape Navigator, da Netscape Communications, então liderada por James Clark.

por Diego Eis

FAQ sobre Tableless

Entenda o que são Web Standards, o que é Tableless, quais as vantagens, relação com acessibilidade e tudo mais.

por Diego Eis

Curso de Tableless e Ajax

A Visie é pioneira em ministrar cursos presencias de Padrões Web, Tableless, AJAX e companhia… Você pode fazer cursos individuais ou empresariais treinando grandes equipes. Já treinamos equipes de empresas como Editora Abril, Petrobrás, Terra, Unisys e muitos outros! Nós ensinamos pessoas que tenham interesse pela profissão e pela internet. Que gostem de informação e saibam que a internet é algo que muda o relacionamento das pessoas. Ensinamos no curso de tableless a escrever código com significado semântico, organizado e fácil de ser indexado por buscadores.

por Diego Eis

Samsung e H.Stern convertidos!

Samsung H.Stern Aqui no Tableless há uma seção chamada Convertidos. Nesta seção, colocamos exemplos didáticos de alguns sites que foram convertidos para os Padrões. Na época da conversão os sites não eram tableless. Por isso, a nível didático, voluntários escolheram alguns grandes sites e converteram seu código para Padrões Web.

por Diego Eis

Design e complacência com padrões

Excelente post do Jonas: … A simplicidade de design, simplicidade extrema, que pode ser caracterizada por um estilo focado primordialmente no texto, conteúdo, e não nos ornamentos da página. Esse tipo de design é uma espécie de caminho natural para quem começa a entender a importância de padrões, e passa a utilizar técnicas modernas como o design tableless (layout definido via CSS) … Embora isso tenha acontecido na prática, a questão não é tão preto-no-branco quanto pode parecer ao leitor incauto.

por Elcio Ferreira

Construindo Sites com Padrões WEB

Uma série de artigos sobre Sites com Padrões Web que o Ronaldo M. Ferraz, está escrevendo. Estes artigos são ótimos para pessoas que estão começando a se interessar por Padrões da Web, e querem criar sites Tableless e responde a muitas questões freqüentes sobre o assunto. Já tem dois artigos prontos. É só conferir. Artigo 1 – Introdução Artigo 2 – Ferramentas

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

Samsung Brasil

Site da Samsung Brasil foi implementado. Confira. [update 22/06/08] A reimplementação deste site tem apenas o objetivo de estudo de código. Na época em que a versão deste site era feita em tabelas, resolvemos estudar o site convertendo o código para Padrões Web, criando um código e acordo com os princípios do W3C, ou seja, sem a utilização de tabelas para a estrutura da página.

por Diego Eis

Versões de Browsers Standalone

Normalmente precisamos testar sempre os sites nas duas verões correntes do Internet Explorer. No site Evolt.org, você consegue baixar duas ou mais versões de vários browsers. Se você tem o Internet Explorer 7 instalado, você baixa pelo site da Evolt.org a versão Standalone do Internet Explorer 6 e testa seus sites sem problema nenhum. Como eles aproveitam arquivos do próprio windows para rodar a versão antiga do browser.

por Diego Eis