25 anos, carioca, residente da cidade de Nova Iguaçu. Trabalha com web há 6 anos. Foi ouvidor e designer do grupo Telemar por 3 anos, onde desenvolveu projetos e intranets.
As vendas de consoles e jogos de videogame nos Estados Unidos caíram 15% em fevereiro, segundo mês consecutivo de declínio, ...
Publicado em 13/03/2010 - 15:48
Brechas afetavam tanto a versão para Mac como a do Windows, e poderiam ser exploradas em ataques de execução de ...
Publicado em 13/03/2010 - 15:44
É o fim do visual default do Ubuntu: foi anunciado um novo design para o sistema operacional. Segundo o site ...
Publicado em 13/03/2010 - 15:35
A empresa de tecnologia divulgou a criação de um componente capaz de alcançar até 40 gigabits por segundo e 20 ...
Publicado em 11/03/2010 - 16:26
Acompanhe os últimos episódios desse programa que é sucesso na rede.
Salve, salve rapaziada, nesta 4° vídeo aula de tableless, iremos aprender como organizar nosso layout utilizando float, ou seja, iremos “flutuar” nossos blocos para esquerda e direita, deixando nosso projeto mais organizado.
Espero que gostem do conteúdo!
Boa aula!
Aulas anteriores
Veja a Atualização nos blogs da equipe Mx Masters
R$ 40,00
R$ 79,90
R$ 59,90
14/03/09 às 17:58
14/03/09 às 18:11
Essa nova abertura das video-aulas também ficou ótima! Além de bem feita, durando menos tempo, dando mais importancia a video aula mesmo.
[]’s
14/03/09 às 18:13
Felipe teria como disponibiliza uma aula de como fazer um player (de uma radio) com o flash, e depois ensinar a colocar no topo do site? Nesse exemplo seria só na pagina index, que o player ficaria e nas sub-paginas não teria o player. Se tiver como fazer ficaria eternamente satisfeito
Abraço Equipe MX!
14/03/09 às 18:38
body{
padding:10px;
background-color:#CED0D0;
}
fica bem melhor de entender…
“Se você escreve o código de acordo com os Padrões, já economizou código suficiente. Não prejudique a manutenção do site por conta dessa neura. Escreva código legível!”
link: http://www.tableless.com.br/nao-otimize-seu-codigo
essa é minha opnião abração! =]
14/03/09 às 18:39
Justamente. Essa foi a intenção nesta nova abertura. Deixá-la menor, porém, com um efeito legal!
[]´s
14/03/09 às 18:40
Vou falar se o Michel pode fazer esta aula, ok?
[]´s
14/03/09 às 18:42
Cada um com seu cada um!
Todos temos nossas particularidades e formas de ensinar.
O importante e digo, MAIS UMPORTANTE, é todos conseguirem aprender com os conteúdos ensinados. Enquanto isso acontecer, continuo compartilhando o que aprendo
[]´s
14/03/09 às 18:52
Cada um com seu cada um!
ahh e o Mx Web TV quando volta?
14/03/09 às 19:05
Antes de mais nada queria informar que quando disse “Cada um com seu cada um” em momento algum quis ser ignorante, mas sim dizer que cada um tem suas particularidades. Digo isso antes que apareça um me chamando de ditador, ignorante, etc…rs
Mas, essa questão é debate para mais de mil comentários. Já rolou isso no site tableless.com.br, no site do Bruno Dulcetti, etc… Creio que isso não influencie na forma de absorver o conteúdo, mas gosto dessas dicas, pois me incentiva a desenvolver vídeo aulas explicando os dois lados da moeda e deixar que os visitantes postem a melhor forma de ensinar.
Ta aí. Gostei desse desafio. Farei vídeo aula de tableless e colocarei essas questões em pauta e deixar rolar um debate!
[]´s e bom fim de semana!
14/03/09 às 19:50
Só pra deixar claro, sobre o CSS com tabulação, não estou dizendo em otimização do código, tamanho de arquivo, economia de largura de banda, e sim, a melhor maneira dos iniciantes aprenderem e identificarem as propriedades e valores, é sem duvida com tabulação.
14/03/09 às 19:50
Mais uma ótima aula Felipe como sempre muito boa e explicativa.
Mais falando sobre o conceito “CASCATA” e o “LINHA” primeiro sempre fazia em cascata e ñ sabia da importância de fazem em linha ate que vi algumas aulas aqui no MX. Mais importante que isso é porque só comecei a fazer em linha, com o Jonathan disse é meio confuso para algumas pessoas como era pra mim mais com pratica e esforço tudo fica mais fácil neh =).
E ainda pessoas que se profissionalizam em WEBDESIGN OU WEBMASTER praticamente todas gostariam de trabalhar para um empresa grande como a Globo.com que tem milhões de pessoas acessando o site, ai se você não gostasse de fazer porque é muito complicado, como você ñ tem pratica mesmo você sendo um dos melhores WEBDESGIN do mundo não é a mesma coisa.
Mais como você disse Cada um Com o seu Cada um.
14/03/09 às 22:06
Abraço Felipe e a toda equipe MX um bom final de semana!
14/03/09 às 22:50
Brincadeiras a parte .. cara muinto boa a video adorei tava precisando mesmo me ajudo muinto cara valeu forte abraço
14/03/09 às 23:07
ótimas vídeo aulas, parabéns Felipe !
bom, assim como o Jonathan Dos Santos comentou, eu também acho mais fácil de entender colocando o código da outra forma.
mas o que vale mesmo é aprender, e eu estou aprendendo bastante aqui no site.
valeu, grande abraço!!!
15/03/09 às 8:18
então… estou começando a entender um pouco melhor o tabless por conta de sua vídeo aulas, mas confesso que em algumas partes se vc colocasse em cascata eu percebeira melhor!
então… tem como mostrar em cascata e depois dando back space para uma linha???
Se ñ me engano, suas primeiras vídeo aulas de tabless foram em cascata, mas foi mt no início!
e… acabamos com o problema do cada um com cada um… kkkkkkkk
bjão
15/03/09 às 8:30
Abraço!!
15/03/09 às 9:44
Quanto a discussão sobre o css otimizado ou não, vou dar meu “pitaco”.
No desenvolvimento é interessante trabalhar em cascata, aí vc testa, corrige, acerta, etc, etc, etc.
Depois vem a questão da otimização, onde temos algumas ferramentas online que “convertem” o código em cascata para linha, ou seja, temos um formato de código em tempo de desenvolvimento e outro em produção, sem qualquer prejuízo ao produto final.
Costumo uitilizar a ferramenta do CSSDrive no endereço http://www.cssdrive.com/index.php/main/csscompressor/
Quanto ao artigo do site tableless.com.br “não otimize seu código”, posso até concordar desde que soubesse que a maioria dos usuários utiliza-se banda larga, mas como a maior realidade tupiniquim ainda é linha discada vou continuar a otimizar.
15/03/09 às 10:15
15/03/09 às 12:43
15/03/09 às 13:04
Esse efeito foi feito com Particle Illusion (temos vídeo aulas no MX) e seu autor é Ricardo Aleixo!
[]´s
15/03/09 às 18:16
uma continha dessas :X (tbm faço isso)
ótimas aulas tomara que esta aula chegue até a 15ª edição ou mais
e quero pedir para que você pense sobre uma sujestão de vídeo aula que eu mandei sobre um sistema de news integrado na página, mas de fácil de atualização para que os clientes possam atualizar sem problemas.
16/03/09 às 4:02
porquê no desenvolvimento de um website ainda mais se for uma equipe e tals é bem melhor fazer em modo cascata porque fica mais fácil de achar algum erro….
quanto à ” posso até concordar desde que soubesse que a maioria dos usuários utiliza-se banda larga, mas como a maior realidade tupiniquim ainda é linha discada vou continuar a otimizar.”
Também concordo, porque quando agente pega um projeto e faz corretamente um brifing, normalmente se pergunta qual é o seu público álvo…e por ai nós já podemos ter uma ideia e pensar em customizar ou não o css… mas tem uma coisa ai que ainda me deixa encabulado… que é isso:
” Há outro ponto que devemos levar em consideração: imagine que o site pese 40Kb. Estes 40Kb são compostos por 20Kb de CSS e 20Kb de HTML. O CSS tem uma característica interessante: ele é cacheado pelo browser quando visitante entra no site.
Na primeira visita do usuário ele baixará 40Kb de uma vez. Já na segunda visita ele baixará apenas 20Kb relativos ao HTML. Ele não precisará baixar os 20Kb de CSS porque o arquivo já está cacheado pelo browser. “ se isso é real eu acho que escrever em modo cascata seria a melhor opção ever…..
Eu particularmente escrevo o css em modo cascata, acho bem melhor porque assim consigo indentificar melhor algum erro ou encontrar algo. e na parte da customização faço como o David CHC disse: “ nos meus códigos eu tenho hábito se tiver poucas propriedade, em torno 3, eu coloco linear, quando tem mais, ai colocar tabulado “.
Mais ai tem a parte do gosto…porquê gosto não se discute
Mas particularmente eu prefiro em modo cascata quando são várias propriedades. Mais se são poucas faço em linhas….
seletor { propriedade: valor; segunda_propriedade: valor; }
16/03/09 às 12:38
Quanto ao artigo do site tableless.com.br “não otimize seu código”, posso até concordar desde que soubesse que a maioria dos usuários utiliza-se banda larga, mas como a maior realidade tupiniquim ainda é linha discada vou continuar a otimizar.
A otimização do CSS, retirando os espaços e colocando linear, o usuário final não seria o foco, esses procedimentos são utilizados mais pra economia de banda, se vc tiver um tráfego de dados muito grande, isso é bem significativo. Sobre o artigo do tableless, o que Diego coloca é q vc usar o CSS, seguindo os padrões, seu site está otimizado.
Adotar os Padrões, isso sim faz a diferença para usuário final. Acho q discussão nesse caso de usar css linear ou em “cascata” está mais ligado se as pessoas que estão aprendendo vão se sentir confortaveis ou não. Mas temos que levar em conta (sei q tô sendo repetitivo), q cada um trabalha com metodologias e padrões diferentes.
Acho q foco nesse caso especifico, seria se é mais fácil aprender CSS em “cascata” ou linear, isso vai de cada um, na minha opinião, acredito q em Cascata (tabulado) é mais facil para os iniciantes. Então o q seria importante, são as pessoas q estão acompanhando as videos aulas dizerem q é mais fácil para elas.
18/03/09 às 0:01
Sendo que não existe um “FLOAT MIDDLE”, como posicionar a “coluna” do meio?
Grande abraço
19/03/09 às 13:39
19/03/09 às 13:40
19/03/09 às 15:05
Grande abraço
19/03/09 às 15:41
#esquerda{
width:200px;
float:left;
margin:5px;
}
#meio{
width:500px;
float:left;
margin:5px;
}
#direito{
width:200px;
float:left;
margin:5px;
}
Repare, vc poderia fazer todos irem para esquerda, ou vc poderá fazer dois pra esquerda, um para direita como float:right, ou colocar um float para esquerda e outra pra direita, e o do meio ele vai se ajeitar entre os dois, ai vc escolhe a melhor e a opção mais facil.
Tendo duvidas, poste no forum do mxmasters na seção tableless.
19/03/09 às 16:46
show essas video aula sobre tableless.
Qdo vai sair a 5 video aula……
estou ansioso para continuar com as aulas….
ta sendo proveitosas para mim….
quero fazer mudanças no meu blog e preciso aprender isso rapi10…
Porem aki no MXmasters e mais facil de aprender…
fico no aguardo e qualquer coisa me avise pelo -email se puder!
abraços e sucesso…..
Fuisssssssss
19/03/09 às 23:12
20/03/09 às 6:37
20/03/09 às 8:51
clear:left; => Anula a flutuação da esquerda
clear:right; => Anula a flutuação da direita
clear:both; => Anula a flutuação da esquerda e da direta,fazendo o elemento ficar embaixo dos demais q usaram o float..
21/03/09 às 11:04
Pq será . e eu to colocando as div dentro da div content.
valew
21/03/09 às 23:11
[]´s
26/03/09 às 2:09
29/03/09 às 1:47
24/04/09 às 18:42
trabalho com css e php e quando uso flash em minhas páginas no IE 6 em especifico ao carregar a página aparece uma mensagem dizendo pressione ok para carregar o conteudo desta página, porque vc sabe? Percebi que em algumas páginas não desenvolvida por mim isto tb ocorre..aguardo uma resposta valeu…
25/04/09 às 0:47
[]´s
1/05/09 às 12:39
Primeiro gostaria de agradecer e parabenizá-lo Felipe, e a todos do MxMasters pelo excelente trabalho, aprendi muito com ele.
Bem, ao tentar colocar em prática o que aprendi nesta aula, me deparei com um problema com IE6. Ele parece que considera sempre margin-left ou margin-right com o dobro do espaçamento colocado. Então, fui a busca da solução, e a encontrei no fórum http://www.webmasterworld.com/css/3459772.htm, com a utilização de “display:inline”. Se possível, gostaria que você Felipe, ou algum outro participante coloca-se um comentário a respeito deste “comando”.
Obrigado.
1/05/09 às 18:44
Obrigado pela dica. Eu já estava ciente do problema e até esperava que acontecesse. Eu iria fazer as considerações finais desse curso de tableless e falar dos hacks css. Por isso, não havia falado antes.
[]´s
11/05/09 às 22:17
Nota 100000000000000
Abraço!!
12/05/09 às 18:55
parabens pelas suas video aula sobre tableless,
meu site estava praticamente todo pronto em tabelas… dai resolvi deletar tudo e comecei tudo de novo em tableless com suas aulas..
e tenhu ctz q vai fikar nota 10.
to enfrentando um probleminha aqui.. e vou tentar explicar:
eu fiz uma div “geral” para todo o site (topo, content, menu, etc..)
dentro dela.. eu colokei a div topo.. e colokei meu topo do site (nao fatiei ele pq eh muito levinho nao achei a necessidade e tbem pq era apenas um teste).
até ai tudo bem.. o problema foi qdo chegou nos menus..
sao 8 imagens.. e elas estao fikando com um espaçamento entre elas… como faço para retirar esse espaçamento? ja tentei o padding e nao deu certo…tem alguma forma de usar o float para essa operaçao? caso nao entenda meu problema… gostaria de saber se posso lhe enviar um e-mail para que vc possa analizar e esclarecer essa duvida… fico grato…
\\ JP
12/05/09 às 18:58
Tem como você upar a folha de estilo em txt pro seu server e colocar o link aqui para a gente analisar?
[]´s
12/05/09 às 19:02
eu postei ai a minha duvida anterior.. mas resolvi fazer uns testes aqui… e descobri que era pq la no codigo html eu havia dado espaços de 1 img para outra… dai refletiu la no browser…
mesmo assim vlw a atençao ai
12/05/09 às 19:21
[]´s
10/07/09 às 16:56
14/07/09 às 23:49
14/07/09 às 23:49
16/07/09 às 16:17
20/01/10 às 1:48
Eu fiz uma imagem de background para o corpo do meu site, para o “body”. Beleza, só que nada mais cai em cima dele…rsrs
Todos os blocos que eu coloco caem embaixo do body. Fiz um bloco esquerdo e um direito. Estão um na direita e outro na esquerda, legal, mas só que láááá embaixo…aí fiz um topo pra constatar se realmente não estavam caindo dentro do body (da imagem), e também não entra…tá lá em cima, acima da minha imagem de backgroundo, do fundo. E agora..o quê que eu faço?.rs
Será que é porque salvei o background inteiro ? não exportando apenas 1px vertical, em jpg bater quality e com um “repeat-y” ?, enfim….
Se alguém souber, agradeço desde já..
20/01/10 às 11:15