├── .gitignore ├── images ├── missing-img.png ├── social-icons.png └── search.svg ├── css ├── fonts │ ├── avenir-next-bold.eot │ ├── avenir-next-bold.ttf │ ├── avenir-next-bold.woff │ ├── avenir-next-demi.eot │ ├── avenir-next-demi.otf │ ├── avenir-next-demi.ttf │ ├── avenir-next-demi.woff │ ├── avenir-next-heavy.eot │ ├── avenir-next-heavy.woff │ ├── avenir-next-italic.eot │ ├── avenir-next-italic.ttf │ ├── avenir-next-thin.eot │ ├── avenir-next-thin.ttf │ ├── avenir-next-thin.woff │ ├── avenir-next-italic.woff │ ├── avenir-next-regular.eot │ ├── avenir-next-regular.ttf │ ├── avenir-next-regular.woff │ └── fonts.css ├── .sass-cache │ └── 493032487c537eee4f6b14cdce88c44b2041533a │ │ ├── _lists.sassc │ │ ├── style.sassc │ │ ├── _footer.sassc │ │ ├── _header.sassc │ │ ├── _helpers.sassc │ │ └── _single.sassc ├── _footer.sass ├── _lists.sass ├── _single.sass ├── _header.sass ├── _helpers.sass └── style.sass ├── tags ├── vivosp │ └── index.xml ├── 3d │ └── index.xml ├── css3d │ └── index.xml ├── palestra-visie │ └── index.xml ├── curso │ └── index.xml ├── implementacao-css │ └── index.xml ├── workshop-online │ └── index.xml ├── micro-workshop │ └── index.xml ├── maxthon │ └── index.xml ├── tabeless │ └── index.xml ├── celulares │ └── index.xml ├── apresentacao │ └── index.xml ├── ie10 │ └── index.xml ├── dispostivos-moveis │ └── index.xml ├── surface │ └── index.xml ├── gecko │ └── index.xml ├── news │ └── index.xml ├── tableless-conf │ └── index.xml ├── opensource │ └── index.xml ├── includes │ └── index.xml ├── gratis │ └── index.xml ├── convite │ └── index.xml ├── desenvolvedor │ └── index.xml ├── melhorespraticas │ └── index.xml ├── wimax │ └── index.xml ├── campusonline │ └── index.xml ├── samsung │ └── index.xml ├── writely │ └── index.xml ├── camino │ └── index.xml ├── bugs │ └── index.xml ├── wasabi │ └── index.xml ├── songbird │ └── index.xml ├── web2 │ └── index.xml ├── tableelss │ └── index.xml ├── abril │ └── index.xml ├── live-coding │ └── index.xml ├── brasil │ └── index.xml ├── governo │ └── index.xml ├── gmail │ └── index.xml ├── clear │ └── index.xml ├── humble-bundle │ └── index.xml ├── dev-client-side │ └── index.xml ├── implementados │ └── index.xml ├── pesquisa │ └── index.xml ├── leokzw │ └── index.xml ├── xhtml2 │ └── index.xml ├── blink │ └── index.xml ├── internet-explorer-6 │ └── index.xml ├── release │ └── index.xml ├── frontendunited │ └── index.xml ├── codeshow │ └── index.xml ├── placeholder │ └── index.xml ├── learn │ └── index.xml ├── lógica │ └── index.xml ├── curso-incompany │ └── index.xml ├── promoção │ └── index.xml ├── canvas │ └── index.xml ├── 17elw │ └── index.xml ├── editorconfig │ └── index.xml ├── exercicio │ └── index.xml ├── campus-online │ └── index.xml ├── hp │ └── index.xml ├── polimer │ └── index.xml ├── web-index │ └── index.xml ├── coletânea-front-end │ └── index.xml ├── fitic │ └── index.xml ├── null-coalesce │ └── index.xml ├── bowser │ └── index.xml ├── gdg │ └── index.xml ├── servidores │ └── index.xml ├── zeldman │ └── index.xml ├── browser-detection │ └── index.xml ├── ewd │ └── index.xml ├── ensinar │ └── index.xml ├── slidesparadevs │ └── index.xml ├── web-design │ └── index.xml ├── slides-para-devs │ └── index.xml ├── emmet │ └── index.xml ├── trolls │ └── index.xml ├── dreamhost │ └── index.xml ├── memex │ └── index.xml └── xanadu │ └── index.xml └── author └── joédyson-bezerra └── index.xml /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | uploads 3 | -------------------------------------------------------------------------------- /images/missing-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/images/missing-img.png -------------------------------------------------------------------------------- /images/social-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/images/social-icons.png -------------------------------------------------------------------------------- /css/fonts/avenir-next-bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-bold.eot -------------------------------------------------------------------------------- /css/fonts/avenir-next-bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-bold.ttf -------------------------------------------------------------------------------- /css/fonts/avenir-next-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-bold.woff -------------------------------------------------------------------------------- /css/fonts/avenir-next-demi.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-demi.eot -------------------------------------------------------------------------------- /css/fonts/avenir-next-demi.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-demi.otf -------------------------------------------------------------------------------- /css/fonts/avenir-next-demi.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-demi.ttf -------------------------------------------------------------------------------- /css/fonts/avenir-next-demi.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-demi.woff -------------------------------------------------------------------------------- /css/fonts/avenir-next-heavy.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-heavy.eot -------------------------------------------------------------------------------- /css/fonts/avenir-next-heavy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-heavy.woff -------------------------------------------------------------------------------- /css/fonts/avenir-next-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-italic.eot -------------------------------------------------------------------------------- /css/fonts/avenir-next-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-italic.ttf -------------------------------------------------------------------------------- /css/fonts/avenir-next-thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-thin.eot -------------------------------------------------------------------------------- /css/fonts/avenir-next-thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-thin.ttf -------------------------------------------------------------------------------- /css/fonts/avenir-next-thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-thin.woff -------------------------------------------------------------------------------- /css/fonts/avenir-next-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-italic.woff -------------------------------------------------------------------------------- /css/fonts/avenir-next-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-regular.eot -------------------------------------------------------------------------------- /css/fonts/avenir-next-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-regular.ttf -------------------------------------------------------------------------------- /css/fonts/avenir-next-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/fonts/avenir-next-regular.woff -------------------------------------------------------------------------------- /css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_lists.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_lists.sassc -------------------------------------------------------------------------------- /css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/style.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/style.sassc -------------------------------------------------------------------------------- /css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_footer.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_footer.sassc -------------------------------------------------------------------------------- /css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_header.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_header.sassc -------------------------------------------------------------------------------- /css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_helpers.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_helpers.sassc -------------------------------------------------------------------------------- /css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_single.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/hugo-public/master/css/.sass-cache/493032487c537eee4f6b14cdce88c44b2041533a/_single.sassc -------------------------------------------------------------------------------- /css/_footer.sass: -------------------------------------------------------------------------------- 1 | #tb-footer 2 | background: $gray 3 | padding: 30px 4 | 5 | .tb-social-links 6 | a 7 | background: no-repeat 8 | a[href$=tablelessbr] 9 | color: red 10 | 11 | 12 | //// 13 | // Big Screen version 14 | //// 15 | @media #{$break-mobile} 16 | #tb-footer 17 | margin-top: 300px 18 | -------------------------------------------------------------------------------- /css/_lists.sass: -------------------------------------------------------------------------------- 1 | .tb-list 2 | @extend .tb-container 3 | display: flex 4 | flex-wrap: wrap 5 | 6 | .tb-list h1 7 | flex: 1 0 100% 8 | font: 3rem/1.6 $avenirBold 9 | margin-bottom: 70px 10 | text-transform: uppercase 11 | 12 | small 13 | font: .9rem $avenirRegular 14 | display: block 15 | text-transform: initial 16 | 17 | .tb-list-item 18 | flex: 1 0 275px 19 | margin-bottom: 50px 20 | 21 | &:before 22 | 23 | a 24 | text-decoration: none 25 | 26 | &:hover h2 27 | color: $red 28 | h2 29 | margin: 0 0 10px 30 | font: 1.1rem $avenirBold 31 | color: $gray 32 | 33 | p 34 | color: $text-gray 35 | font: .9rem/1.4 $avenirRegular 36 | 37 | //// 38 | // Big Screen version 39 | //// 40 | @media #{$break-mobile} 41 | .tb-list h1 42 | margin-bottom: 100px 43 | .tb-list-item 44 | margin: 0 30px 90px 0 45 | -------------------------------------------------------------------------------- /tags/vivosp/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vivosp on Tableless 5 | http://tableless.com.br/tags/vivosp/index.xml 6 | Recent content in Vivosp on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | VIVO-SP Tableless 13 | http://tableless.com.br/vivo_tableless/ 14 | Thu, 17 Apr 2003 00:00:00 +0000 15 | 16 | http://tableless.com.br/vivo_tableless/ 17 | <p>Implementei (ainda faltam detalhes), mas quis divulgar para fechar a semana de páscoa.</p> 18 | 19 | <p>Ainda estou ajustando alguma coisa no código, mas já está 99% pronto&#8230; Sugestões e Críticas são bem vindas, não se esqueçam.</p> 20 | 21 | <p><a title="Versão Tableless" href="http://tableless.com.br/wp-admin/vivo" target="_blank">VIVO-SP Tableless</a></p> 22 | 23 | <p>Feliz Páscoa!</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /css/_single.sass: -------------------------------------------------------------------------------- 1 | .tb-post 2 | @extend .tb-container 3 | 4 | .tb-post-header 5 | @extend .tb-container 6 | margin-bottom: 70px 7 | 8 | .tb-post-content 9 | 10 | p 11 | font: 1.1rem/1.6 $avenirRegular 12 | color: $text-gray 13 | letter-spacing: -0.47px 14 | margin-bottom: 30px 15 | 16 | a 17 | color: $red 18 | &:hover 19 | color: #000 20 | 21 | li 22 | font: 1.1rem/1.5 $avenirRegular 23 | margin-bottom: 15px 24 | 25 | ul, ol 26 | margin-left: 20px 27 | margin-bottom: 40px 28 | 29 | h2 30 | margin: 50px 0 10px 31 | font: 2rem $avenirBold 32 | h3 33 | margin: 50px 0 10px 34 | font-size: 1.7rem 35 | h6 36 | margin: 20px 0 10px 37 | font-size: .9rem 38 | 39 | blockquote 40 | padding: 30px 41 | display: block 42 | 43 | p 44 | font: italic 1.2rem/1.5 $avenirBold 45 | 46 | [class*="lang-"], .hljs 47 | padding: 20px !important 48 | margin-bottom: 40px 49 | line-height: 1.2rem 50 | 51 | //// 52 | // Big Screen version 53 | //// 54 | @media #{$break-mobile} 55 | .tb-post 56 | display: flex 57 | 58 | .tb-post-header 59 | margin-bottom: 150px 60 | 61 | .tb-aside 62 | flex: 0 0 360px 63 | order: 2 64 | 65 | .tb-post-content 66 | padding-left: 30px 67 | flex: 1 68 | order: 3 69 | 70 | p 71 | font-size: 1.3rem 72 | 73 | li 74 | font-size: 1.2rem 75 | 76 | -------------------------------------------------------------------------------- /tags/3d/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 3d on Tableless 5 | http://tableless.com.br/tags/3d/index.xml 6 | Recent content in 3d on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Tridiv – Dominando 3D com CSS 13 | http://tableless.com.br/tridiv-dominando-3d-com-css/ 14 | Thu, 22 Aug 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/tridiv-dominando-3d-com-css/ 17 | <p>Quer brincar com 3D? Quer brincar com 3D usando CSS? Então você está procurando algo como o <a href="http://tridiv.com">Tridiv</a>, um editor para criar formas 3D, web-based, usando CSS. Isso, pode chorar&#8230;</p> 18 | 19 | <p>Olha só o exemplo abaixo:</p> 20 | 21 | <p>Nem preciso dizer que roda lindo, sem travar, sem fazer o seu computador gritar. Browsers como Chrome e Safari usam o hardware para renderizar o 3D do CSS&#8230; COISA LINDA.</p> 22 | 23 | <p>Experimente e seja feliz.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/css3d/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Css3d on Tableless 5 | http://tableless.com.br/tags/css3d/index.xml 6 | Recent content in Css3d on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Tridiv – Dominando 3D com CSS 13 | http://tableless.com.br/tridiv-dominando-3d-com-css/ 14 | Thu, 22 Aug 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/tridiv-dominando-3d-com-css/ 17 | <p>Quer brincar com 3D? Quer brincar com 3D usando CSS? Então você está procurando algo como o <a href="http://tridiv.com">Tridiv</a>, um editor para criar formas 3D, web-based, usando CSS. Isso, pode chorar&#8230;</p> 18 | 19 | <p>Olha só o exemplo abaixo:</p> 20 | 21 | <p>Nem preciso dizer que roda lindo, sem travar, sem fazer o seu computador gritar. Browsers como Chrome e Safari usam o hardware para renderizar o 3D do CSS&#8230; COISA LINDA.</p> 22 | 23 | <p>Experimente e seja feliz.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /images/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /tags/palestra-visie/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Palestra Visie on Tableless 5 | http://tableless.com.br/tags/palestra-visie/index.xml 6 | Recent content in Palestra Visie on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Palestra: Implementação de Layout com CSS 13 | http://tableless.com.br/palestra-implementacao-de-layout-com-css/ 14 | Mon, 21 Jul 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/palestra-implementacao-de-layout-com-css/ 17 | <p>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.</p> 18 | 19 | <p><a href="http://visie.com.br/eventos/">http://visie.com.br/eventos/</a></p> 20 | 21 | <p>O valor da palestra é de R$29 e será em São Paulo.</p> 22 | 23 | <p><small>Este post se auto-destruirá no dia 24.</small></p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/curso/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Curso on Tableless 5 | http://tableless.com.br/tags/curso/index.xml 6 | Recent content in Curso on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Assista: [Live Coding] Codificando um Layout com HTML/CSS 13 | http://tableless.com.br/assista-live-coding-codificando-um-layout-com-htmlcss/ 14 | Fri, 13 Dec 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/assista-live-coding-codificando-um-layout-com-htmlcss/ 17 | <p>Fizemos um Micro Workshop Online onde eu codifiquei um layout em PSD para HTML e CSS.</p> 18 | 19 | <p>Se você não viu ao vivo, você pode ver agora, quando quiser, comprando o acesso <a href="https://www.eventials.com/pt-br/tableless/">direto nesse link</a>.</p> 20 | 21 | <p><a href="https://www.eventials.com/pt-br/tableless/">Assista agora</a>{.btn}</p> 22 | 23 | <p>Comprando o acesso, você terá 30 dias para assistir o vídeo 5 vezes.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/implementacao-css/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Implementacao Css on Tableless 5 | http://tableless.com.br/tags/implementacao-css/index.xml 6 | Recent content in Implementacao Css on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Palestra: Implementação de Layout com CSS 13 | http://tableless.com.br/palestra-implementacao-de-layout-com-css/ 14 | Mon, 21 Jul 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/palestra-implementacao-de-layout-com-css/ 17 | <p>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.</p> 18 | 19 | <p><a href="http://visie.com.br/eventos/">http://visie.com.br/eventos/</a></p> 20 | 21 | <p>O valor da palestra é de R$29 e será em São Paulo.</p> 22 | 23 | <p><small>Este post se auto-destruirá no dia 24.</small></p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/workshop-online/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Workshop Online on Tableless 5 | http://tableless.com.br/tags/workshop-online/index.xml 6 | Recent content in Workshop Online on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Assista: [Live Coding] Codificando um Layout com HTML/CSS 13 | http://tableless.com.br/assista-live-coding-codificando-um-layout-com-htmlcss/ 14 | Fri, 13 Dec 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/assista-live-coding-codificando-um-layout-com-htmlcss/ 17 | <p>Fizemos um Micro Workshop Online onde eu codifiquei um layout em PSD para HTML e CSS.</p> 18 | 19 | <p>Se você não viu ao vivo, você pode ver agora, quando quiser, comprando o acesso <a href="https://www.eventials.com/pt-br/tableless/">direto nesse link</a>.</p> 20 | 21 | <p><a href="https://www.eventials.com/pt-br/tableless/">Assista agora</a>{.btn}</p> 22 | 23 | <p>Comprando o acesso, você terá 30 dias para assistir o vídeo 5 vezes.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/micro-workshop/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Micro Workshop on Tableless 5 | http://tableless.com.br/tags/micro-workshop/index.xml 6 | Recent content in Micro Workshop on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Live Coding Online sobre Responsive Web Design 13 | http://tableless.com.br/live-coding-online-sobre-responsive-web-design/ 14 | Fri, 11 Apr 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/live-coding-online-sobre-responsive-web-design/ 17 | <p>O Tableless tem feito <a href="http://https://www.eventials.com/tableless/">uma série de micro workshops</a> sobre diversos assuntos. O próximo assunto é sobre Responsive Web Design onde vamos ensinar umas dicas sobre como fazer um website responsivo.</p> 18 | 19 | <p><a href="https://www.eventials.com/tableless/live-coding-implementando-um-site-responsivo/">Cadastre-se lá</a>! Será dia 29 de Maio, uma quinta-feira, às 20 horas, Online!</p> 20 | 21 | <p>O valor? Uma mamata para você: só R$45.</p> 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /tags/maxthon/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Maxthon on Tableless 5 | http://tableless.com.br/tags/maxthon/index.xml 6 | Recent content in Maxthon on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Maxthon 13 | http://tableless.com.br/maxthon/ 14 | Mon, 14 Jan 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/maxthon/ 17 | <p>Você conhece um browser chamado <a href="http://www.maxthon.com/">Maxthon</a>? Suponho que não.</p> 18 | 19 | <p>O Maxthon é o browser que mais suporta os padrões web atuais. Nem o Chrome Canary &#8211; que é o Chrome ultra power, feito para testarmos novidades que ainda nem foram publicadas &#8211; ganha da versão atual do Maxthon. Pois é&#8230; Ele é um browser que usa dois engines: o Webkit que você já deve conhecer e o Trident, do IE. O design dele lembra o Chrome, mas é um pouco menos rebuscado.</p> 20 | 21 | <p>De acordo com o <a href="http://html5test.com/compare/browser/maxthon345/chromecanary/opera1210.html">HTML5TEST</a> é o browser que mais suporta os padrões web atuais. Fica na frente de todos os outros browsers. Acho que vale a pena testar.</p> 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /css/_header.sass: -------------------------------------------------------------------------------- 1 | #tb-header 2 | padding: 30px $space-default 40px 3 | 4 | .tb-logo 5 | max-width: 200px 6 | display: inline-block 7 | vertical-align: middle 8 | 9 | img 10 | max-width: 100% 11 | 12 | .tb-search 13 | float: right 14 | margin: 10px 30px 0 0 15 | 16 | img 17 | max-width: 100% 18 | 19 | #tb-menu 20 | padding: 30px 0 30px 30px 21 | max-width: 100% 22 | overflow: auto 23 | -webkit-overflow-scrolling: touch 24 | 25 | ul 26 | font-size: 0 27 | width: 100vw 28 | 29 | li 30 | display: inline-block 31 | 32 | a 33 | font: .8rem $avenirBold 34 | color: $light-gray 35 | text-transform: uppercase 36 | text-decoration: none 37 | display: inline-block 38 | margin-right: 10px 39 | &:hover 40 | color: $gray 41 | 42 | .tb-active a 43 | color: $red !important 44 | 45 | 46 | //// 47 | // Big Screens 48 | //// 49 | @media #{$break-mobile} 50 | #tb-header 51 | max-width: 1300px 52 | margin: 0 auto 53 | display: flex 54 | flex-wrap: wrap 55 | justify-content: space-between 56 | align-items: center 57 | padding: 70px $space-default 100px 58 | 59 | .tb-logo 60 | order: 1 61 | flex: 1 0 200px 62 | 63 | #tb-menu 64 | order: 2 65 | flex: 1 0 50% 66 | text-align: center 67 | overflow: initial 68 | max-width: auto 69 | ul 70 | width: auto 71 | 72 | a 73 | text-transform: initial 74 | color: $text-gray 75 | font-size: 1rem 76 | margin-right: 35px 77 | 78 | &:hover 79 | color: $red 80 | text-decoration: underline 81 | 82 | 83 | .tb-search 84 | order: 3 85 | flex: 1 0 50px 86 | max-width: 50px 87 | text-align: right 88 | 89 | -------------------------------------------------------------------------------- /tags/tabeless/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tabeless on Tableless 5 | http://tableless.com.br/tags/tabeless/index.xml 6 | Recent content in Tabeless on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #15 13 | http://tableless.com.br/podcast-15/ 14 | Wed, 28 Dec 2005 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-15/ 17 | <p>Estava ouvindo <a href="http://usina.com/rodaeavisa/">um podcast</a> (ótimo por sinal) por aí, que me fez pensar um pouco sobre os anos vindouros.</p> 18 | 19 | <p>Comecei a pensar então sobre a entrada triunfal dos celulares e outros aparelhos móveis. É melhor começarmos a ficar espertos com eles.</p> 20 | 21 | <p>Você pode <a href="http://tableless.com.br/podcast/podcast15.mp3">baixar o Mp3 direto</a>, ou se quiser receber automagicamente nossas atualizações, <a href="http://tableless.com.br/feed/">cadastre nosso Feed</a>.</p> 22 | 23 | <p>Tamanho: ~14.32Mb</p> 24 | 25 | <p>Tempo: ~15 Min</p> 26 | 27 | <p><small>Você está gostando do podcast? O cara tá falando bem? Precisa de uma consulta com a fonoaudiologa? Comente.</small></p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/celulares/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Celulares on Tableless 5 | http://tableless.com.br/tags/celulares/index.xml 6 | Recent content in Celulares on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #15 13 | http://tableless.com.br/podcast-15/ 14 | Wed, 28 Dec 2005 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-15/ 17 | <p>Estava ouvindo <a href="http://usina.com/rodaeavisa/">um podcast</a> (ótimo por sinal) por aí, que me fez pensar um pouco sobre os anos vindouros.</p> 18 | 19 | <p>Comecei a pensar então sobre a entrada triunfal dos celulares e outros aparelhos móveis. É melhor começarmos a ficar espertos com eles.</p> 20 | 21 | <p>Você pode <a href="http://tableless.com.br/podcast/podcast15.mp3">baixar o Mp3 direto</a>, ou se quiser receber automagicamente nossas atualizações, <a href="http://tableless.com.br/feed/">cadastre nosso Feed</a>.</p> 22 | 23 | <p>Tamanho: ~14.32Mb</p> 24 | 25 | <p>Tempo: ~15 Min</p> 26 | 27 | <p><small>Você está gostando do podcast? O cara tá falando bem? Precisa de uma consulta com a fonoaudiologa? Comente.</small></p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/apresentacao/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Apresentacao on Tableless 5 | http://tableless.com.br/tags/apresentacao/index.xml 6 | Recent content in Apresentacao on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Slides para Devs #1 13 | http://tableless.com.br/slides-devs-1/ 14 | Wed, 13 Mar 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/slides-devs-1/ 17 | <p>Eu perco (ganho) horas do meu dia quando visito o <a href="http://www.slideshare.net/">SlideShare</a> ou o <a href="https://speakerdeck.com/">SpeakerDeck</a>. Fico caçando apresentações de assuntos que eu preciso estudar. Geralmente apresentações são mais objetivas que artigos, principalmente quando é algo bastante técnico. O palestrante não pode perder tempo e por isso ele precisa mostrar a essência do assunto primeiro. Consigo absorver bastante dessa forma, mesmo não tendo o áudio do palestrante para acompanhar.</p> 18 | 19 | <p>Quero começar uma série aqui no Tableless onde vou selecionar 5 apresentações sobre diversos assuntos. Espero que vocês gostem e aprendam tanto quanto eu. A maioria das apresentação serão em ingles, mas prometo colocar algo em português também. Mesmo assim, é bom você aprender.</p> 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /tags/ie10/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ie10 on Tableless 5 | http://tableless.com.br/tags/ie10/index.xml 6 | Recent content in Ie10 on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Internet Explorer dos anos 90 13 | http://tableless.com.br/internet-explorer-dos-anos-90/ 14 | Thu, 24 Jan 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/internet-explorer-dos-anos-90/ 17 | <p>A Microsoft liberou mais um comercial muito, mas muito bom do Internet Explorer.</p> 18 | 19 | <p>Dessa vez ela resolveu fazer uma homenagem a todos que viveram nos anos 90, mostrando todas as &#8220;coisinhas&#8221; que viraram moda naquela época, tipo ioiô, tamagochi e até o tazo.</p> 20 | 21 | <blockquote> 22 | <p>You grew up. So did we. Reconnect with the new Internet Explorer.</p> 23 | </blockquote> 24 | 25 | <p>Eu estou gostando muito dessa abordagem que a MS tem levado com o IE. Você pode ver mais vídeos dessa campanha <a href="http://tableless.com.br/o-browser-que-voce-amou-odiar/" title="O browser que você amou odiar">aqui</a> e <a href="http://tableless.com.br/um-recado-da-ms-aos-trolls-do-ie/" title="Um recado da MS aos trolls do IE">aqui</a>.</p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/dispostivos-moveis/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dispostivos Moveis on Tableless 5 | http://tableless.com.br/tags/dispostivos-moveis/index.xml 6 | Recent content in Dispostivos Moveis on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #15 13 | http://tableless.com.br/podcast-15/ 14 | Wed, 28 Dec 2005 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-15/ 17 | <p>Estava ouvindo <a href="http://usina.com/rodaeavisa/">um podcast</a> (ótimo por sinal) por aí, que me fez pensar um pouco sobre os anos vindouros.</p> 18 | 19 | <p>Comecei a pensar então sobre a entrada triunfal dos celulares e outros aparelhos móveis. É melhor começarmos a ficar espertos com eles.</p> 20 | 21 | <p>Você pode <a href="http://tableless.com.br/podcast/podcast15.mp3">baixar o Mp3 direto</a>, ou se quiser receber automagicamente nossas atualizações, <a href="http://tableless.com.br/feed/">cadastre nosso Feed</a>.</p> 22 | 23 | <p>Tamanho: ~14.32Mb</p> 24 | 25 | <p>Tempo: ~15 Min</p> 26 | 27 | <p><small>Você está gostando do podcast? O cara tá falando bem? Precisa de uma consulta com a fonoaudiologa? Comente.</small></p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/surface/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Surface on Tableless 5 | http://tableless.com.br/tags/surface/index.xml 6 | Recent content in Surface on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Internet Explorer dos anos 90 13 | http://tableless.com.br/internet-explorer-dos-anos-90/ 14 | Thu, 24 Jan 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/internet-explorer-dos-anos-90/ 17 | <p>A Microsoft liberou mais um comercial muito, mas muito bom do Internet Explorer.</p> 18 | 19 | <p>Dessa vez ela resolveu fazer uma homenagem a todos que viveram nos anos 90, mostrando todas as &#8220;coisinhas&#8221; que viraram moda naquela época, tipo ioiô, tamagochi e até o tazo.</p> 20 | 21 | <blockquote> 22 | <p>You grew up. So did we. Reconnect with the new Internet Explorer.</p> 23 | </blockquote> 24 | 25 | <p>Eu estou gostando muito dessa abordagem que a MS tem levado com o IE. Você pode ver mais vídeos dessa campanha <a href="http://tableless.com.br/o-browser-que-voce-amou-odiar/" title="O browser que você amou odiar">aqui</a> e <a href="http://tableless.com.br/um-recado-da-ms-aos-trolls-do-ie/" title="Um recado da MS aos trolls do IE">aqui</a>.</p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/gecko/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gecko on Tableless 5 | http://tableless.com.br/tags/gecko/index.xml 6 | Recent content in Gecko on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Open Web Device 13 | http://tableless.com.br/open-web-device/ 14 | Tue, 14 Aug 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/open-web-device/ 17 | <p>Já pensou em um smartphone que seja baseado em HTML5, onde suas aplicações podem consultar o status da bateria, atender ligações, vibrar e etc?</p> 18 | 19 | <p>A Telefônica e a Mozilla estão trabalhando juntas em um aparelho que torna isso real. É um aparelho tão próximo do desenvolvedor web que chega a ser difícil de acreditar que já estamos num patamar tão elevado.</p> 20 | 21 | <p>Atualmente nós temos acesso a poucos recursos dos smartphones. Além disso, praticamente nenhum dos grandes players de mercado permitem o desenvolvimento de aplicações utilizando HTML/CSS/HTML5 sem a ajuda de algumas ferramentas extras. Um smartphone como esse, mesmo não conseguindo muitos usuários é a porta de entrada para que outros fabricantes possam apostar nessa nova tecnologia.</p> 22 | 23 | <p>Entenda mais sobre o <a href="http://www.openwebdevice.com">Open Web Device aqui</a>.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/news/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | News on Tableless 5 | http://tableless.com.br/tags/news/index.xml 6 | Recent content in News on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Adobe: The Expressive Web 13 | http://tableless.com.br/adobe-the-expressive-web/ 14 | Fri, 11 May 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/adobe-the-expressive-web/ 17 | <p>Essa é antiga, mas muita gente ainda não viu!</p> 18 | 19 | <p>Mais uma iniciativa da Adobe para divulgar as maravilhas do CSS3 e HTML5. O The Expressive Web é um sitezinho maneiro onde a Adobe mostra alguns exemplos das novas features do HTML5 e do CSS3 com exemplos sensacionais.</p> 20 | 21 | <p><a href="http://bit.ly/IYBclM">The Expressive Web</a>, by <a href="http://adobe.com/">Adobe</a>.</p> 22 | 23 | <p>Cada uma das features tem uma pequena descrição, e o mais importante, eles mostram uma porcentagem de quantos usuários veriam aquela feature. CANVAS, por exemplo, seria visto por 75% dos usuários, obviamente, dos usuários que usarem browsers novos, como IE9, Safari, Chrome e etc&#8230;</p> 24 | 25 | <p>Não vá ver isso em um Internet Explorer ruim ou um browser antigo. Estamos falando de web de verdade, aqui. 😉</p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/tableless-conf/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tableless Conf on Tableless 5 | http://tableless.com.br/tags/tableless-conf/index.xml 6 | Recent content in Tableless Conf on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Drops 12 – Dicas de sobrevivência 13 | http://tableless.com.br/drops12-dicas-sobrevivencia/ 14 | Thu, 06 Sep 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/drops12-dicas-sobrevivencia/ 17 | <p>Existem algumas atitudes que devem fazer parte do desenvolvedor. Não adianta entender muito bem da parte técnica se você não consegue entregar o seu projeto na data, ou não cumpre promessas ou se nem sabe onde quer estar daqui 3 anos.</p> 18 | 19 | <p><a href="http://tableless.com.br/categoria/podcasts/feed">Link dos feeds dos podcasts</a>.</p> 20 | 21 | <p>A minha palestra:</p> 22 | 23 | <div style="margin-bottom:5px"> 24 | <strong> <a href="http://www.slideshare.net/diegoeis/manual-de-sobrevivncia-do-desenvolvedor" title="Manual de Sobrevivência do Desenvolvedor" target="_blank">Manual de Sobrevivência do Desenvolvedor</a> </strong> from <strong><a href="http://www.slideshare.net/diegoeis" target="_blank">Tableless</a></strong> 25 | </div> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/opensource/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Opensource on Tableless 5 | http://tableless.com.br/tags/opensource/index.xml 6 | Recent content in Opensource on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Code Guide by @mdo 13 | http://tableless.com.br/code-guide-mdo/ 14 | Fri, 28 Feb 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/code-guide-mdo/ 17 | <p>Alguns devem conhecer o <a href="http://twitter.com/@mdo">@mdo</a>. Se você não conhece, ele é um dos criadores do <a href="http://getbootstrap.com">Bootstrap</a>.</p> 18 | 19 | <p>Ontem a noite ele liberou um Guia de Escrita de Código. É um guia simples onde ele cita uma série de boas práticas e guidelines para escrever código bem estruturado, escalável e legível para todos da equipe. Como eu sigo a grande maioria das regras do guia em todos os meus projetos, achei legal traduzir pra divulgar as boas práticas aqui no Brasil.</p> 20 | 21 | <p>Eu <a href="https://github.com/diegoeis/code-guide/">forkei o projeto e traduzi o guia para o português</a>. Mesmo assim eu preciso ainda de ajuda para revisão. Se alguém quiser ajudar ou apenas estiver curioso para ler o guia em português, visite: <a href="http://diegoeis.github.io/code-guide/">Code Guide by @mdo</a>.</p> 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /tags/includes/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Includes on Tableless 5 | http://tableless.com.br/tags/includes/index.xml 6 | Recent content in Includes on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Isso é coisa básica 13 | http://tableless.com.br/isso-e-coisa-basica/ 14 | Mon, 05 Nov 2007 00:00:00 +0000 15 | 16 | http://tableless.com.br/isso-e-coisa-basica/ 17 | <p>Não é a primeira vez que me perguntam se eu acoselho o uso de includes. Não sei o motivo, mas grande parte do pessoal não usa includes. Parece que isso é uma daquelas coisas de uso exclusivo de programadores. Engano deles.</p> 18 | 19 | <p>Includes (por exemplo) é uma das coisas que ajudam e muito o trabalho da equipe inteira. Menus, cabecalhos, rodapés, e qualquer coisa que você ache que vá se repetir em mais de uma página no site deve ser colocado em includes. Já vi muita gente, em pleno século 21, repetir o código do menu em todas as páginas. E sim, quando algo muda no menu, ele muda na página inteira. Muito triste.</p> 20 | 21 | <p>Faz parte do trabalho parar um tempo por dia para pesquisar novas metodologias, novos meios para agilizar seu trabalho diário. Costumo fazer isso no final do expediente. Normalmente sempre encontro maneiras que resolvem meus problemas mais urgentes.</p> 22 | 23 | <p>PS.: Já já novidades aqui no Tableless.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/gratis/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gratis on Tableless 5 | http://tableless.com.br/tags/gratis/index.xml 6 | Recent content in Gratis on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | 10º Encontro Locaweb de Profissionais de Internet 13 | http://tableless.com.br/10o-encontro-locaweb/ 14 | Fri, 18 Apr 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/10o-encontro-locaweb/ 17 | <p>Está chegando o <a href="https://www.locaweb.com.br/encontro/">10º Encontro Locaweb de Profissionais de Internet</a>, e eu vou participar novamente esse ano. Vou falar sobre produtividade no desenvolvimento, mas com uma abordagem bem diferente da que usei ano passado no Intercon. Dessa vez, vou escrever código.</p> 18 | 19 | <p>E você, nosso fiel leitor, pode ganhar um convite. Vamos publicar posts &#8220;relâmpago&#8221; aqui no Tableless dias antes dos eventos do Rio de Janeiro, Porto Alegre, Belo Horizonte e Curitiba. Cada post vem com uma pergunta sobre XHTML, CSS ou programação. A primeira pessoa que responder corretamente a pergunta ganha um convite. Vão ser dez perguntas e dez convites para cada cidade, fique ligado.</p> 20 | 21 | <p>Já tenho uma mini-aplicação a desenvolver, mas ainda dá tempo de mudar de idéia, ou mesmo de incorporar a ela idéias criativas. Se você tiver alguma sugestão, por favor, deixe um comentário.</p> 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tags/convite/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Convite on Tableless 5 | http://tableless.com.br/tags/convite/index.xml 6 | Recent content in Convite on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | 10º Encontro Locaweb de Profissionais de Internet 13 | http://tableless.com.br/10o-encontro-locaweb/ 14 | Fri, 18 Apr 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/10o-encontro-locaweb/ 17 | <p>Está chegando o <a href="https://www.locaweb.com.br/encontro/">10º Encontro Locaweb de Profissionais de Internet</a>, e eu vou participar novamente esse ano. Vou falar sobre produtividade no desenvolvimento, mas com uma abordagem bem diferente da que usei ano passado no Intercon. Dessa vez, vou escrever código.</p> 18 | 19 | <p>E você, nosso fiel leitor, pode ganhar um convite. Vamos publicar posts &#8220;relâmpago&#8221; aqui no Tableless dias antes dos eventos do Rio de Janeiro, Porto Alegre, Belo Horizonte e Curitiba. Cada post vem com uma pergunta sobre XHTML, CSS ou programação. A primeira pessoa que responder corretamente a pergunta ganha um convite. Vão ser dez perguntas e dez convites para cada cidade, fique ligado.</p> 20 | 21 | <p>Já tenho uma mini-aplicação a desenvolver, mas ainda dá tempo de mudar de idéia, ou mesmo de incorporar a ela idéias criativas. Se você tiver alguma sugestão, por favor, deixe um comentário.</p> 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tags/desenvolvedor/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Desenvolvedor on Tableless 5 | http://tableless.com.br/tags/desenvolvedor/index.xml 6 | Recent content in Desenvolvedor on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Palestra sobre como se tornar um dev front-end 13 | http://tableless.com.br/palestra-sobre-como-se-tornar-um-dev-front-end/ 14 | Thu, 24 Apr 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/palestra-sobre-como-se-tornar-um-dev-front-end/ 17 | <p>Fiz um artigo há um tempo atrás escrevi <a href="http://tableless.com.br/tornar-dev-front-end/" title="Como se tornar um dev front-end">um artigo sobre como se tornar um desenvolvedor front-end</a>. Fiz uma palestra em Florianópolis estes dias e transformei este artigo em uma apresentação. Não deixe de ler o artigo, lá tem mais detalhes do que apenas a palestra. Veja os slides abaixo:</p> 18 | 19 | <div style="margin-bottom:5px"> 20 | <strong> <a href="https://www.slideshare.net/diegoeis/como-tornardevfrontend" title="O que você precisa saber para se tornar um dev front-end" target="_blank">O que você precisa saber para se tornar um dev front-end</a> </strong> from <strong><a href="http://www.slideshare.net/diegoeis" target="_blank">Diego Eis</a></strong> 21 | </div> 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /tags/melhorespraticas/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Melhorespraticas on Tableless 5 | http://tableless.com.br/tags/melhorespraticas/index.xml 6 | Recent content in Melhorespraticas on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Isso é coisa básica 13 | http://tableless.com.br/isso-e-coisa-basica/ 14 | Mon, 05 Nov 2007 00:00:00 +0000 15 | 16 | http://tableless.com.br/isso-e-coisa-basica/ 17 | <p>Não é a primeira vez que me perguntam se eu acoselho o uso de includes. Não sei o motivo, mas grande parte do pessoal não usa includes. Parece que isso é uma daquelas coisas de uso exclusivo de programadores. Engano deles.</p> 18 | 19 | <p>Includes (por exemplo) é uma das coisas que ajudam e muito o trabalho da equipe inteira. Menus, cabecalhos, rodapés, e qualquer coisa que você ache que vá se repetir em mais de uma página no site deve ser colocado em includes. Já vi muita gente, em pleno século 21, repetir o código do menu em todas as páginas. E sim, quando algo muda no menu, ele muda na página inteira. Muito triste.</p> 20 | 21 | <p>Faz parte do trabalho parar um tempo por dia para pesquisar novas metodologias, novos meios para agilizar seu trabalho diário. Costumo fazer isso no final do expediente. Normalmente sempre encontro maneiras que resolvem meus problemas mais urgentes.</p> 22 | 23 | <p>PS.: Já já novidades aqui no Tableless.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/wimax/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Wimax on Tableless 5 | http://tableless.com.br/tags/wimax/index.xml 6 | Recent content in Wimax on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #19 – WYSIWYG, WiMax e a onda móvel 13 | http://tableless.com.br/podcast-19-wysiwyg-wimax-e-a-onda-movel/ 14 | Tue, 14 Mar 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-19-wysiwyg-wimax-e-a-onda-movel/ 17 | <p>Fiz um podcast rápido para não perder o costume. O som não está aquela maravilha e farei aquelas promessas de político: Nos próximos prometo melhorar.</p> 18 | 19 | <p>Falei sobre a TVA e a Samsung trazendo o WiMax aqui pro Brasil &#8211; São Paulo. Falei sobre uma revolução móvel que isso pode acarretar. Falei um pouquinh sobre a aquisição do <a href="http://www.writely.com/">Writely</a> pelo Google.</p> 20 | 21 | <p>E o assunto principal foi Editores WYSIWYG.</p> 22 | 23 | <p>Falei pouco e não falei bonito! 😀</p> 24 | 25 | <p>Mas se quiser, pode baixar diretamente o <a href="http://tableless.com.br/podcast/podcast19.mp3">Mp3</a> ou se preferir, <a href="http://tableless.com.br/feed/">cadastre nosso feed</a> em seu agregador e seja feliz.</p> 26 | 27 | <p>Tamanho: ~4,73Mb</p> 28 | 29 | <p>Duração: ~16m32</p> 30 | 31 | <p>Formato: Mp3</p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/campusonline/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Campusonline on Tableless 5 | http://tableless.com.br/tags/campusonline/index.xml 6 | Recent content in Campusonline on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Video tutorial – Implementando HTML 13 | http://tableless.com.br/video-tutorial-implementando-html/ 14 | Thu, 13 Nov 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/video-tutorial-implementando-html/ 17 | <p>Utilizamos esse layout como exercício nos <a href="http://visie.com.br/treinamento/">cursos da Visie</a>. 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.</p> 18 | 19 | <p><embed src="http://visie.com.br/campus/static/mediaplayer.swf" width="457" height="353" allowscriptaccess="always" allowfullscreen="true" flashvars="height=353&#038;width=457&#038;file=http://visie.com.br/campus/flv/60.flv&#038;image=http://visie.com.br/campus/static/visie.jpg" /></p> 20 | 21 | <p>Esse e outros vídeos estão disponíveis no <a href="http://visie.com.br/campus/">Campus Online da Visie</a>. Lá você encontra <a href="http://visie.com.br/campus/">videos tutoriais de Tableless, Ajax, Javascript</a> e um monte de outras coisas.</p> 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tags/samsung/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Samsung on Tableless 5 | http://tableless.com.br/tags/samsung/index.xml 6 | Recent content in Samsung on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #19 – WYSIWYG, WiMax e a onda móvel 13 | http://tableless.com.br/podcast-19-wysiwyg-wimax-e-a-onda-movel/ 14 | Tue, 14 Mar 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-19-wysiwyg-wimax-e-a-onda-movel/ 17 | <p>Fiz um podcast rápido para não perder o costume. O som não está aquela maravilha e farei aquelas promessas de político: Nos próximos prometo melhorar.</p> 18 | 19 | <p>Falei sobre a TVA e a Samsung trazendo o WiMax aqui pro Brasil &#8211; São Paulo. Falei sobre uma revolução móvel que isso pode acarretar. Falei um pouquinh sobre a aquisição do <a href="http://www.writely.com/">Writely</a> pelo Google.</p> 20 | 21 | <p>E o assunto principal foi Editores WYSIWYG.</p> 22 | 23 | <p>Falei pouco e não falei bonito! 😀</p> 24 | 25 | <p>Mas se quiser, pode baixar diretamente o <a href="http://tableless.com.br/podcast/podcast19.mp3">Mp3</a> ou se preferir, <a href="http://tableless.com.br/feed/">cadastre nosso feed</a> em seu agregador e seja feliz.</p> 26 | 27 | <p>Tamanho: ~4,73Mb</p> 28 | 29 | <p>Duração: ~16m32</p> 30 | 31 | <p>Formato: Mp3</p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/writely/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Writely on Tableless 5 | http://tableless.com.br/tags/writely/index.xml 6 | Recent content in Writely on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #19 – WYSIWYG, WiMax e a onda móvel 13 | http://tableless.com.br/podcast-19-wysiwyg-wimax-e-a-onda-movel/ 14 | Tue, 14 Mar 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-19-wysiwyg-wimax-e-a-onda-movel/ 17 | <p>Fiz um podcast rápido para não perder o costume. O som não está aquela maravilha e farei aquelas promessas de político: Nos próximos prometo melhorar.</p> 18 | 19 | <p>Falei sobre a TVA e a Samsung trazendo o WiMax aqui pro Brasil &#8211; São Paulo. Falei sobre uma revolução móvel que isso pode acarretar. Falei um pouquinh sobre a aquisição do <a href="http://www.writely.com/">Writely</a> pelo Google.</p> 20 | 21 | <p>E o assunto principal foi Editores WYSIWYG.</p> 22 | 23 | <p>Falei pouco e não falei bonito! 😀</p> 24 | 25 | <p>Mas se quiser, pode baixar diretamente o <a href="http://tableless.com.br/podcast/podcast19.mp3">Mp3</a> ou se preferir, <a href="http://tableless.com.br/feed/">cadastre nosso feed</a> em seu agregador e seja feliz.</p> 26 | 27 | <p>Tamanho: ~4,73Mb</p> 28 | 29 | <p>Duração: ~16m32</p> 30 | 31 | <p>Formato: Mp3</p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/camino/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Camino on Tableless 5 | http://tableless.com.br/tags/camino/index.xml 6 | Recent content in Camino on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Bye bye Camino 13 | http://tableless.com.br/bye-bye-camino/ 14 | Sun, 02 Jun 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/bye-bye-camino/ 17 | <p>O <a href="http://caminobrowser.org/">Camino</a>, browser open-source não será mais desenvolvido.</p> 18 | 19 | <p>Os desenvolvedores do browser para Mac resolveram cancelar oficialmente o desenvolvimento do Camino por causa da lentidão da sua produção. Muito por causa de browsers modernos como Chrome e Firefox que tem uma ritmo de atualização frequente. Hoje em dia um browser não pode ficar um segundo sem alguma novidade. Nem que essa novidade demore para ser lançada, mas serve pra mostrar aos seus usuários que o seu desenvolvimento está a todo vapor.</p> 20 | 21 | <p>Embora eles tenham dado a notícia apenas agora, a última atualização que o browser recebeu foi em Março do ano passado.</p> 22 | 23 | <p>Muito triste. Era um bom browser. Eu cheguei a usá-lo durante algum tempo e desisti exatamente pela falta de novidades, embora fosse um dos únicos browsers a ter a interface com o look and feel da Apple.</p> 24 | 25 | <p><a href="http://www.theverge.com/2013/5/31/4384138/camino-mac-browser-ends-development-after-decade">Fonte</a></p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /css/_helpers.sass: -------------------------------------------------------------------------------- 1 | 2 | /// 3 | // Colors 4 | /// 5 | $gray: #333 6 | $light-gray: #CACACA 7 | $text-gray: #494949 8 | $red: #EB191E 9 | 10 | /// 11 | // Mobile 12 | /// 13 | $break-mobile: "only screen and (min-width: 750px)" 14 | $space-default: 30px 15 | 16 | img 17 | max-width: 100% 18 | 19 | .tb-container 20 | max-width: 1300px 21 | margin-right: auto 22 | margin-left: auto 23 | padding: 0 $space-default 24 | 25 | /// 26 | // Fonts 27 | /// 28 | $avenirRegular: AvenirNextRegular, Arial, Helvetica, Sans-serif 29 | $avenirBold: AvenirNextBold, Arial, Helvetica, Sans-serif 30 | $avenirDemi: AvenirNextDemi, Arial, Helvetica, Sans-serif 31 | $avenirHeavy: AvenirNextHeavy, Arial, Helvetica, Sans-serif 32 | 33 | .tb-hero-title 34 | text-transform: uppercase 35 | text-decoration: none 36 | font: 1.3rem/1.2 $avenirBold 37 | color: #000 38 | margin-bottom: 10px 39 | display: block 40 | 41 | a 42 | text-decoration: none 43 | color: #000 44 | &:hover 45 | color: $red 46 | 47 | .tb-hero-p 48 | color: $text-gray 49 | font: 1rem/1.5 $avenirRegular 50 | margin-top: 25px 51 | margin-bottom: 30px 52 | 53 | @media #{$break-mobile} 54 | .tb-hero-title 55 | text-transform: initial 56 | font-size: 4rem 57 | line-height: 1 58 | 59 | .tb-hero-p 60 | color: $text-gray 61 | font-size: 1.5rem 62 | line-height: 2.5rem 63 | max-width: 1000px 64 | margin-bottom: 50px 65 | 66 | //// 67 | // Common 68 | //// 69 | 70 | .tb-author 71 | font: .8rem/1 $avenirDemi 72 | color: #6D6D6D 73 | margin-top: 15px 74 | display: block 75 | 76 | a 77 | color: $red 78 | text-decoration: none 79 | 80 | &:hover 81 | color: #000 82 | text-decoration: none 83 | 84 | img 85 | border-radius: 50% 86 | max-width: 35px 87 | vertical-align: middle 88 | filter: grayscale(1) contrast(.8) 89 | margin-right: 5px 90 | 91 | @media #{$break-mobile} 92 | .tb-author 93 | font-size: .9rem 94 | img 95 | max-width: 40px 96 | 97 | .tb-post-box & 98 | font-size: .9rem 99 | -------------------------------------------------------------------------------- /tags/bugs/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bugs on Tableless 5 | http://tableless.com.br/tags/bugs/index.xml 6 | Recent content in Bugs on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Quer estudar CSS? 13 | http://tableless.com.br/quer_estudar/ 14 | Sun, 08 Jun 2003 00:00:00 +0000 15 | 16 | http://tableless.com.br/quer_estudar/ 17 | <p>É em inglês, mas mesmo assim dá para aprender um bocado.</p> 18 | 19 | <p>Ótimos exemplos de layouts em css, bugs de browsers, dicas de sites, etc&#8230; vale muito a pena ler os source (código fonte), e aprender um pouco sobre o que dá para fazer com CSS.</p> 20 | 21 | <p><a href="http://www.positioniseverything.net/" title="Position is Every Thing">http://www.positioniseverything.net/</a></p> 22 | 23 | 24 | 25 | 26 | Bugs de Browsers 27 | http://tableless.com.br/bugs_de_browsers/ 28 | Thu, 30 Jan 2003 00:00:00 +0000 29 | 30 | http://tableless.com.br/bugs_de_browsers/ 31 | <p>Ter conhecimento dos bugs de renderização dos browsers é sempre bom para se fazer um site TABLELESS. O site <a href="http://css.nu/pointers/point-tip.html">CSSPG &#8211; CSS Pointer Group</a> é um bom site sobre CSS, onde uma das seções é o <a href="http://css.nu/pointers/bugs.html">Browsers Bugs</a>, apesar de ter informações de apenas alguns browsers, dá para fazer um bom proveito.</p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/wasabi/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Wasabi on Tableless 5 | http://tableless.com.br/tags/wasabi/index.xml 6 | Recent content in Wasabi on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #18 – Opera 9, Wasabi, Songbird e Semântica 13 | http://tableless.com.br/podcast-18-opera-9-wasabi-songbird-e-semantica/ 14 | Mon, 13 Feb 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-18-opera-9-wasabi-songbird-e-semantica/ 17 | <p>Nesse podcast falamos um pouco sobre o lançamento Opera 9 Preview&#8230; vocês perceberam que ele veio uma semana depois de sair o Beta 2 do IE7? 🙂</p> 18 | 19 | <p>Falamos sobre o <a href="http://www.wasabi.com.br/">Wasabi</a>! Tá sabendo?</p> 20 | 21 | <p>Falamos sobre o <a href="http://songbirdnest.com/">Songbird</a>: Um player de Mp3 Open Source baseado no motor do Firefox. Parece ser interessante, embora eu não tenha gostado muito do programa. Achei meio dificil.</p> 22 | 23 | <p>Tamanho: ~27,2Mb</p> 24 | 25 | <p>Tempo: ~29m43</p> 26 | 27 | <p>Aconselhamos você a inscrever nosso <a href="http://feeds.feedburner.com/tableless/">Feed</a> no seu agregador preferido, para facilitar seu acesso às novidades, ou simplesmente <a href="http://tableless.com.br/podcast/podcast18.mp3">baixe o mp3 direto</a>.</p> 28 | 29 | <p><small>Estou me esforçando para que o arquivo fique o menor possível. Se você souber de algum bom programa que faça o trabalho de comprimir o arquivo mp3, por favor, diga.</small></p> 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /tags/songbird/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Songbird on Tableless 5 | http://tableless.com.br/tags/songbird/index.xml 6 | Recent content in Songbird on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #18 – Opera 9, Wasabi, Songbird e Semântica 13 | http://tableless.com.br/podcast-18-opera-9-wasabi-songbird-e-semantica/ 14 | Mon, 13 Feb 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-18-opera-9-wasabi-songbird-e-semantica/ 17 | <p>Nesse podcast falamos um pouco sobre o lançamento Opera 9 Preview&#8230; vocês perceberam que ele veio uma semana depois de sair o Beta 2 do IE7? 🙂</p> 18 | 19 | <p>Falamos sobre o <a href="http://www.wasabi.com.br/">Wasabi</a>! Tá sabendo?</p> 20 | 21 | <p>Falamos sobre o <a href="http://songbirdnest.com/">Songbird</a>: Um player de Mp3 Open Source baseado no motor do Firefox. Parece ser interessante, embora eu não tenha gostado muito do programa. Achei meio dificil.</p> 22 | 23 | <p>Tamanho: ~27,2Mb</p> 24 | 25 | <p>Tempo: ~29m43</p> 26 | 27 | <p>Aconselhamos você a inscrever nosso <a href="http://feeds.feedburner.com/tableless/">Feed</a> no seu agregador preferido, para facilitar seu acesso às novidades, ou simplesmente <a href="http://tableless.com.br/podcast/podcast18.mp3">baixe o mp3 direto</a>.</p> 28 | 29 | <p><small>Estou me esforçando para que o arquivo fique o menor possível. Se você souber de algum bom programa que faça o trabalho de comprimir o arquivo mp3, por favor, diga.</small></p> 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /tags/web2/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web2 on Tableless 5 | http://tableless.com.br/tags/web2/index.xml 6 | Recent content in Web2 on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #16 13 | http://tableless.com.br/podcast-16/ 14 | Thu, 19 Jan 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-16/ 17 | <p>Você se lembra quando o flash começou a abrir suas asinhas? Se lembra de como todos ficaram impressionados e boquiabertos com as possibilidades vindouras? Todos faziam sites &#8220;fúteis&#8221;, com pouco conteúdo mas com muitas firulas e coisas que faziam qualquer visitante ficar apaixonado pelos efeitos especiais.</p> 18 | 19 | <p>Talvez o Ajax tenha o mesmo caminho&#8230;</p> 20 | 21 | <p>tempo: ~9m06</p> 22 | 23 | <p>tamanho: 8,33mb</p> 24 | 25 | <p>Cadastre <a href="http://feeds.feedburner.com/tableless">nosso feed</a> no seu agregador preferido, ou <a href="http://tableless.com.br/podcast/podcast16.mp3">baixe o arquivo mp3</a>.</p> 26 | 27 | <ul> 28 | <li><a href="http://webinsider.uol.com.br/vernoticia.php/id/2673">Web 2.0: chega a hora de repensar conteúdo</a></li> 29 | <li><a href="http://www.revolucao.etc.br/archives/web-20-nao-significa-nada-me-desculpe/">Web 2.0 não significa nada</a></li> 30 | <li><a href="http://www.alistapart.com/articles/web3point0">Web 3.0</a></li> 31 | <li><a href="http://brunotorres.net/2005/10/14/web-01">Web 0.1α</a></li> 32 | </ul> 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /tags/tableelss/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tableelss on Tableless 5 | http://tableless.com.br/tags/tableelss/index.xml 6 | Recent content in Tableelss on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast #17 – IE7 Beta 2 e Mercado de trabalho 13 | http://tableless.com.br/podcast-17-ie7-beta-2-e-mercado-de-trabalho/ 14 | Tue, 07 Feb 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-17-ie7-beta-2-e-mercado-de-trabalho/ 17 | <p>Podcast um pouco mais animado. Muita gente deu uma reclamada básica, resolvi mudar algumas coisas no podcast. Vamos mudando aos poucos, afinando aqui e ali até que chegue no ponto. Não só o podcast em si, mas também a minha forma de narrar&#8230; Vou tentar relaxar mais daqui para frente para deixar de ser muito formal. Juro que vou tentar&#8230; :-@</p> 18 | 19 | <p>Nesse podcast foram apenas dois assuntos ( vou tentar aumentar o numero de assuntos e novidades com o tempo), o primeiro fo IE7 e o segundo sobre o mercado de trabalho.</p> 20 | 21 | <p>Tamanho: ~14,4Mb</p> 22 | 23 | <p>Tempo: ~15m45</p> 24 | 25 | <p>Se quiser <a href="http://tableless.com.br/podcast/podcast17.mp3">baixe o mp3</a> direto ou <a href="http://feeds.feedburner.com/tableless/">cadastre nosso feed</a> no seu agregador favorito.</p> 26 | 27 | <p>Links citados:</p> 28 | 29 | <ul> 30 | <li><a href="http://blog.elcio.com.br/mercado-de-trabalho-aquecido/">Mercado de trabalho aquecido</a></li> 31 | <li><a href="http://www.w3.org/Press/">Press Releases and Advisories</a></li> 32 | </ul> 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /tags/abril/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Abril on Tableless 5 | http://tableless.com.br/tags/abril/index.xml 6 | Recent content in Abril on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Devs decidem deixar o SVG e adotar o Flash 13 | http://tableless.com.br/devs-decidem-deixar-svg-e-adotar-o-flash/ 14 | Sun, 01 Apr 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/devs-decidem-deixar-svg-e-adotar-o-flash/ 17 | <p>Depois de muita discussão e debate entre a comunidade e alguns grupos, os desenvolvedores de todo o mundo decidem adotar o Flash como padrão em detrimento ao SVG.</p> 18 | 19 | <p>Como praticamente 100% dos browsers existentes tem suporte ao Flash &#8211; inclusive <del>browsers</del> antigos como o IE6 &#8211; nada mais inteligente do que adotar essa tecnologia como um novo padrão. O Flash também já conta com seu IDE feito pela Adobe, possibilitando a criação de animações e games facilmente por uma interface intuitiva e livre de código, enquanto para fazer animações no SVG ou outras tarefas, o desenvolvedor precisa saber Javascript e pasme, HTML também!</p> 20 | 21 | <p>A ideia é que os desenvolvedores aproveitem a penetração (ui!) do Flash para criarem mais conteúdo multimidia, rico em experiência para o usuário e sites mais interativos.</p> 22 | 23 | <p>Quanto a pergunta sobre a falta de suporte do Flash em aparelhos da Apple, especialistas responderam que se até o IE6 suporta Flash, a Apple deveria abrir mão da bundamolisse e adotar também essa maravilhosa tecnologia.</p> 24 | 25 | <p>E você, <a href="http://en.wikipedia.org/wiki/April_Fools'_Day">o que acha disso</a>?</p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/live-coding/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Live Coding on Tableless 5 | http://tableless.com.br/tags/live-coding/index.xml 6 | Recent content in Live Coding on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | [Live Coding] Implementando um site com WordPress 13 | http://tableless.com.br/live-coding-implementando-um-site-com-wordpress/ 14 | Mon, 13 Jan 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/live-coding-implementando-um-site-com-wordpress/ 17 | <p>Se você <a href="http://tableless.com.br/assista-live-coding-codificando-um-layout-com-htmlcss/">não viu nosso primeiro Live Coding</a>, corre! No primeiro Live Coding, nós fizemos a implementação front-end de uma home de website, partindo de um PSD direto do Photoshop.</p> 18 | 19 | <p><a href="https://www.eventials.com/pt-br/tableless/wordpress-fazendo-um-site-institucional-com-wordpress/">Neste segundo Live Coding</a>, iremos implementar o WordPress em um pequeno website, com o HTML e CSS já feito. Se você sempre teve curiosidade em como fazer desde o início a implementação de um tema de WordPress, nesse micro workshop você vai aprender bastante coisa.</p> 20 | 21 | <p>O valor é apenas R$45 para quem assistir ao vivo e para quem quiser assistir depois será de R$55. Você terá direito a assistir o vídeo 5 vezes durante 30 dias.</p> 22 | 23 | <p>Será dia 13 de Fevereiro, às 20h, <strong>ONLINE</strong>!</p> 24 | 25 | <p>A aula terá duração de mais ou menos 1 hora. Mas acho que pode passar um pouquinho para 1h30, mas não mais que isso.</p> 26 | 27 | <p><a href="https://www.eventials.com/pt-br/tableless/wordpress-fazendo-um-site-institucional-com-wordpress/">Compre agora!</a>{.btn}</p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/brasil/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Brasil on Tableless 5 | http://tableless.com.br/tags/brasil/index.xml 6 | Recent content in Brasil on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Lançamento do escritório do W3C no Brasil 13 | http://tableless.com.br/lancamento-do-escritorio-do-w3c-no-brasil/ 14 | Tue, 27 May 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/lancamento-do-escritorio-do-w3c-no-brasil/ 17 | <p>O W3C está oficializando seu escritório aqui no Brasil. Para isso, eles estão fazendo um pequeno evento com alguns palestrantes e um recado em vídeo do Tim Bernes-Lee. A entrada é gratuita e aberta à todos.</p> 18 | 19 | <p>O evento será dia 4 de Junho às 11h. <a href="http://www.w3c.br/2008/lancamento/cadastro.html">Faça seu cadastro</a> e <a href="http://www.w3c.br/2008/lancamento/">leia mais informações</a>.</p> 20 | 21 | <p></p> 22 | 23 | <blockquote> 24 | <p>O W3C World Wide Web Consortium, entidade internacional que tem como missão levar a web ao seu máximo potencial, tem a honra de convidar ao público em geral para o lançamento público do W3C Escritório Brasil, consolidando as atividades iniciadas em novembro de 2007.</p> 25 | 26 | <p>O lançamento do W3C Escritório Brazil é parte do projeto Fórum Mundial Digital (7th Research Framework Programme da União Européia) que explora as possibilidades de se beneficiar das novas tecnologias de baixo custo para infraestrutura e dispositivos móveis que possam diminuir a exclusão digital e conectar os desconectados.</p> 27 | 28 | <p>Este evento está integrado ao 14º Congresso de Inovação na Gestão Pública que acontecerá em São Paulo, de 2 à 5 de Junho, sob o tema &#8220;Governo 2.0&#8221;.</p> 29 | </blockquote> 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tags/governo/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Governo on Tableless 5 | http://tableless.com.br/tags/governo/index.xml 6 | Recent content in Governo on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Lançamento do escritório do W3C no Brasil 13 | http://tableless.com.br/lancamento-do-escritorio-do-w3c-no-brasil/ 14 | Tue, 27 May 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/lancamento-do-escritorio-do-w3c-no-brasil/ 17 | <p>O W3C está oficializando seu escritório aqui no Brasil. Para isso, eles estão fazendo um pequeno evento com alguns palestrantes e um recado em vídeo do Tim Bernes-Lee. A entrada é gratuita e aberta à todos.</p> 18 | 19 | <p>O evento será dia 4 de Junho às 11h. <a href="http://www.w3c.br/2008/lancamento/cadastro.html">Faça seu cadastro</a> e <a href="http://www.w3c.br/2008/lancamento/">leia mais informações</a>.</p> 20 | 21 | <p></p> 22 | 23 | <blockquote> 24 | <p>O W3C World Wide Web Consortium, entidade internacional que tem como missão levar a web ao seu máximo potencial, tem a honra de convidar ao público em geral para o lançamento público do W3C Escritório Brasil, consolidando as atividades iniciadas em novembro de 2007.</p> 25 | 26 | <p>O lançamento do W3C Escritório Brazil é parte do projeto Fórum Mundial Digital (7th Research Framework Programme da União Européia) que explora as possibilidades de se beneficiar das novas tecnologias de baixo custo para infraestrutura e dispositivos móveis que possam diminuir a exclusão digital e conectar os desconectados.</p> 27 | 28 | <p>Este evento está integrado ao 14º Congresso de Inovação na Gestão Pública que acontecerá em São Paulo, de 2 à 5 de Junho, sob o tema &#8220;Governo 2.0&#8221;.</p> 29 | </blockquote> 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tags/gmail/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gmail on Tableless 5 | http://tableless.com.br/tags/gmail/index.xml 6 | Recent content in Gmail on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Google, por quê? 13 | http://tableless.com.br/google-porque/ 14 | Sun, 18 Dec 2005 00:00:00 +0000 15 | 16 | http://tableless.com.br/google-porque/ 17 | <p>O <a href="http://www.google.com/">Google</a> é aquela empresa que sabe exatamente o que é útil para todo e qualquer (ou quase) tipo de usuário. Eles detém um certo número de aplicações que vão desde <a href="http://picasa.google.com/index.html">organização e tratamento</a> (bem básico) de fotos, até <a href="http://www.google.com/analytics/">análise detalhada de informações</a> sobre o seu site. O Google é um ótimo criador de soluções. E convenhamos, soluções no mínimo interessantes.</p> 18 | 19 | <p>Mas uma coisa me intriga. Depois de muito pensar sobre o Google e suas qualidades de fada madrinha, várias perguntas simples me vieram a cabeça. Umas delas é: Porque a maioria (ou todas) das páginas do Google, não seguem os padrões?</p> 20 | 21 | <p>Muitas vezes abri seu source, e me deparei com tabelas e tabelas, algumas vezes até mesmo tags font.</p> 22 | 23 | <p>Esses dias ele lançou uma versão do <a href="http://gmail.google.com/" title="WebMail do Google">Gmail</a> <a href="http://www.google.com/glm/gmail">para celulares e dispositivos móveis</a>. Poxa, não era só fazer um CSS para HandHelds?! Se algum browser não suporta CSS, ele veria texto puro, como a versão que eles fizeram.</p> 24 | 25 | <p>Bom&#8230; Eu não sei a resposta para essas perguntas. Talvez seja algo óbvio que o cara aqui não viu. Mas fica registrada minha curiosidade, e talvez a de muitos.</p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /css/fonts/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'AvenirNextBold'; 3 | src: url('../fonts/avenir-next-bold.eot'); 4 | src: url('../fonts/avenir-next-bold.eot') format('embedded-opentype'), 5 | url('../fonts/avenir-next-bold.woff') format('woff'), 6 | url('../fonts/avenir-next-bold.ttf') format('truetype'), 7 | url('../fonts/avenir-next-bold.svg#AvenirNextLTW01BoldRegular') format('svg'); 8 | } 9 | @font-face { 10 | font-family: 'AvenirNextHeavy'; 11 | src: url('../fonts/avenir-next-heavy.eot'); 12 | src: url('../fonts/avenir-next-heavy.eot') format('embedded-opentype'), 13 | url('../fonts/avenir-next-heavy.woff') format('woff'); 14 | } 15 | @font-face { 16 | font-family: 'AvenirNextDemi'; 17 | src: url('../fonts/avenir-next-demi.eot'); 18 | src: url('../fonts/avenir-next-demi.eot') format('embedded-opentype'), 19 | url('../fonts/avenir-next-demi.woff') format('woff'), 20 | url('../fonts/avenir-next-demi.ttf') format('truetype'), 21 | url('../fonts/avenir-next-demi.svg#AvenirNextDemi') format('svg'); 22 | } 23 | /* 24 | @font-face { 25 | font-family: 'AvenirNextItalic'; 26 | src: url('../fonts/avenir-next-italic.eot'); 27 | src: url('../fonts/avenir-next-italic.eot') format('embedded-opentype'), 28 | url('../fonts/avenir-next-italic.woff') format('woff'), 29 | url('../fonts/avenir-next-italic.ttf') format('truetype'), 30 | url('../fonts/avenir-next-italic.svg#AvenirNextLTW01ItalicRegular') format('svg'); 31 | } 32 | */ 33 | @font-face { 34 | font-family: 'AvenirNextRegular'; 35 | src: url('../fonts/avenir-next-regular.eot'); 36 | src: url('../fonts/avenir-next-regular.eot') format('embedded-opentype'), 37 | url('../fonts/avenir-next-regular.woff') format('woff'), 38 | url('../fonts/avenir-next-regular.ttf') format('truetype'), 39 | url('../fonts/avenir-next-regular.svg#AvenirNextLTW01RegularRegular') format('svg'); 40 | } 41 | /* 42 | @font-face { 43 | font-family: 'AvenirNextThin'; 44 | src: url('../fonts/avenir-next-thin.eot'); 45 | src: url('../fonts/avenir-next-thin.eot') format('embedded-opentype'), 46 | url('../fonts/avenir-next-thin.woff') format('woff'), 47 | url('../fonts/avenir-next-thin.ttf') format('truetype'), 48 | url('../fonts/avenir-next-thin.svg#AvenirNextW01ThinRegular') format('svg'); 49 | }*/ 50 | -------------------------------------------------------------------------------- /tags/clear/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Clear on Tableless 5 | http://tableless.com.br/tags/clear/index.xml 6 | Recent content in Clear on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Propriedade Float do CSS 13 | http://tableless.com.br/propriedade-float-do-css/ 14 | Fri, 13 Feb 2009 00:00:00 +0000 15 | 16 | http://tableless.com.br/propriedade-float-do-css/ 17 | <p>Se o Internet Explorer não soubesse como funciona a propriedade float do CSS, o advento dos Padrões Web não vingaria tão cedo. A propriedade float é a propriedade responsável por &#8220;administrar&#8221; a diagramação do site. É com ela que você irá organizar as caixas e deixá-las exatamente onde devem ficar. A propriedade float dá mais consistência ao Layout. Diferentemente da propriedade position, que pode trazer uma série de inflexibilidades, deixando o layout mais engessado.</p> 18 | 19 | <p></p> 20 | 21 | <p>Neste vídeo, mostramos um pouco como funciona a propriedade float e sua parceira, clear.</p> 22 | 23 | <p>Se quiser, você pode ver <a href="http://visie.com.br/campus/texto/107">uma versão em textual aqui</a>.</p> 24 | 25 | <p><embed src="http://visie.com.br/campus/static/mediaplayer.swf" width="570" height="434" allowscriptaccess="always" allowfullscreen="true" flashvars="height=434&#038;width=570&#038;file=http://visie.com.br/campus/flv/36.flv&#038;image=http://visie.com.br/campus/static/visie.jpg" /></p> 26 | 27 | <p>Este vídeo e muitos outros podem ser encontrados no <a href="http://visie.com.br/campus/">Campus Online</a>. Visite e <a href="http://visie.com.br/campus/cadastrese/">cadastre-se grátis</a> para ter acesso a vários vídeos e conteúdos sobre Padrões Web, Javascript, Ajax, Python e outras coisas.</p> 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /tags/humble-bundle/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Humble Bundle on Tableless 5 | http://tableless.com.br/tags/humble-bundle/index.xml 6 | Recent content in Humble Bundle on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Humble Mozilla Bundle 13 | http://tableless.com.br/humble-mozilla-bundle/ 14 | Mon, 20 Oct 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/humble-mozilla-bundle/ 17 | <p>Você já deve conhecer o <a href="https://www.humblebundle.com/">Humble Bundle</a>, um site que junta jogos e apps e os vende por um preço baratíssimo, onde você doa qualquer quantia para ter acesso a jogos selecionados. Se você doar um pouco mais do que a média você ganha jogos adicionais exclusivos. O Humble Bundle da vez é da Mozilla, onde um pacote de indie games, que eram jogados via desktops, agora podem ser jogados diretamente do sue browser. Nada de DRM, plugins ou qualquer bullshit.</p> 18 | 19 | <p>Os jogos deste bundle podem ainda ser baixados e jogados no Firefox, Chrome ou qualquer outro browser que suporte WebGL, como o Opera e Safari. O time da Mozilla e do Humble Bundle deram a dica que irão envolver mais plataformas dando suporte a mobiles e SmartTVs. Por agora o time disseq que o Humble Bundle Mozilla roda essencialmente em um ambiente sandbox, por conta da preocupação de privacidade e segurança.</p> 20 | 21 | <p>Aproveita lá!</p> 22 | 23 | <p><img src="http://tableless.com.br/wp-content/uploads/2014/10/Screen-Shot-2014-10-20-at-9.35.17-AM.png" alt="Screen Shot 2014-10-20 at 9.35.17 AM" width="1064" height="987" class="alignnone size-full wp-image-44869" srcset="uploads/2014/10/Screen-Shot-2014-10-20-at-9.35.17-AM.png 1064w, uploads/2014/10/Screen-Shot-2014-10-20-at-9.35.17-AM-149x139.png 149w, uploads/2014/10/Screen-Shot-2014-10-20-at-9.35.17-AM-400x371.png 400w" sizes="(max-width: 1064px) 100vw, 1064px" /></p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/dev-client-side/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dev Client Side on Tableless 5 | http://tableless.com.br/tags/dev-client-side/index.xml 6 | Recent content in Dev Client Side on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Drops 5 – Responsabilidade Dev Front-end 13 | http://tableless.com.br/drops-5-responsabilidade-dev-front-end/ 14 | Wed, 20 Apr 2011 00:00:00 +0000 15 | 16 | http://tableless.com.br/drops-5-responsabilidade-dev-front-end/ 17 | <p>Qual a responsabilidade do desenvolvedor front-end? Ele precisa ser designer? Tem que aprender a programar?</p> 18 | 19 | <!--audio controls> 20 | <source src="http://tableless.com.br/wp-content/uploads/2011/04/drops5-dev-frontend.ogg" type="audio/ogg" /> 21 | <source src="http://tableless.com.br/wp-content/uploads/2011/04/drops5-dev-frontend.mp3" type="audio/mpeg" /> 22 | Se preferir faça o download do arquivo em <a href="http://tableless.com.br/wp-content/uploads/2011/04/drops5-dev-frontend.mp3" title="Audio MP3">Mp3</a> ou <a href="http://tableless.com.br/wp-content/uploads/2011/04/drops5-dev-frontend.ogg" title="Audio OGG">OGA</a>. 23 | </audio--> 24 | 25 | <p>Veja todos os <a href="http://soundcloud.com/tableless">nossos drops no Soundcloud</a>.</p> 26 | 27 | <p>Se preferir faça o download do arquivo em <a href="http://tableless.com.br/wp-content/uploads/2011/04/drops5-dev-frontend.mp3" title="Audio MP3">Mp3</a> ou <a href="http://tableless.com.br/wp-content/uploads/2011/04/drops5-dev-frontend.ogg" title="Audio OGG">OGA</a>. Ou <a href="http://itunes.apple.com/us/podcast/tableless-desenvolvimento/id73330789" title="Drops do Tableless no iTunes.">inscreva no iTunes</a>. <a href="http://tableless.com.br/?feed=podcast" rel="external">Feed direto dos Podcasts</a>.</p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/implementados/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Implementados on Tableless 5 | http://tableless.com.br/tags/implementados/index.xml 6 | Recent content in Implementados on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Samsung e H.Stern convertidos! 13 | http://tableless.com.br/samsung_hstern_convertidos/ 14 | Fri, 19 Nov 2004 00:00:00 +0000 15 | 16 | http://tableless.com.br/samsung_hstern_convertidos/ 17 | <ol> 18 | <li><a href="http://tableless.com.br/convertidos/#samsung">Samsung</a> 19 | 20 | <ol> 21 | <li><a href="http://tableless.com.br/convertidos/#hstern">H.Stern</a></li> 22 | </ol></li> 23 | </ol> 24 | 25 | <p>Aqui no Tableless há uma seção chamada <a href="http://tableless.com.br/convertidos/">Convertidos</a>. 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.</p> 26 | 27 | 28 | 29 | 30 | Samsung Brasil 31 | http://tableless.com.br/samsung_brasil/ 32 | Sun, 30 Mar 2003 00:00:00 +0000 33 | 34 | http://tableless.com.br/samsung_brasil/ 35 | <p>Site da <a href="http://www.samsung.com.br/">Samsung Brasil</a> foi implementado.</p> 36 | 37 | <p><a href="http://tableless.com.br/convertidos/#samsung">Confira.</a></p> 38 | 39 | <p><strong>[update 22/06/08]</strong> 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.</p> 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /tags/pesquisa/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pesquisa on Tableless 5 | http://tableless.com.br/tags/pesquisa/index.xml 6 | Recent content in Pesquisa on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Resultados do Survey 2013 13 | http://tableless.com.br/resultados-survey-2013/ 14 | Mon, 25 Nov 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/resultados-survey-2013/ 17 | 18 | 19 | <p>Eu sei, eu sei&#8230; me desculpe. Demorei para liberar os resultados. Demorei por vários motivos. Mas vamos ao que importa. 😉</p> 20 | 21 | <p>Como muitos já sabem, tive a vontade de entender melhor o mercado de front-end nacional. Queria saber quanto a galera está ganhando, quais suas perspectivas sobre o trabalho, sobre o mercado, onde eles arranjam conhecimento etc&#8230; Por isso tentei promover um survey, nacional, de front-end. Nesse survey os devs poderiam responder às perguntas sobre diversos assuntos relacionados a vida profissional e também seu conhecimento técnico. Por favor, deixem comentários para sabermos se esses dados ajudaram e se podemos continuar no ano que vem com a pesquisa.</p> 22 | 23 | <h2 id="os-dados">Os dados</h2> 24 | 25 | <p>Você pode ver os resultados indo <a href="http://tableless.com.br/survey/">direto para este link</a>.</p> 26 | 27 | <p>Também, preparamos um pequeno infográfico, feita pela designer <a href="http://bit.ly/marasampaio">Mara Sampaio</a>, para facilitar o compartilhamento destes dados. Ele está logo abaixo.</p> 28 | 29 | <p>Há também o PDF <a href="http://bit.ly/pdf-survey-2013">com os dados na íntegra aqui</a>.</p> 30 | 31 | <p><img src="http://tableless.com.br/wp-content/uploads/2013/11/infografico_tableless-2013.jpg" alt="infografico_tableless-2013" width="600" height="4187" class="alignnone size-full wp-image-39600" srcset="uploads/2013/11/infografico_tableless-2013.jpg 600w, uploads/2013/11/infografico_tableless-2013-24x168.jpg 24w" sizes="(max-width: 600px) 100vw, 600px" /></p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/leokzw/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Leokzw on Tableless 5 | http://tableless.com.br/tags/leokzw/index.xml 6 | Recent content in Leokzw on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Front-end United – Leo Kzw 13 | http://tableless.com.br/front-end-united-leo-kzw/ 14 | Tue, 17 Mar 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/front-end-united-leo-kzw/ 17 | <p>Acho que boa parte dos nossos leitores já sabem que estamos apoiando uma campanha para um dos integrantes da comunidade, o Leonardo Konarzewski. Além do nome difícil de se pronunciar, ele tem algo muito difícil para lidar: um câncer raro. Se você ainda não viu o vídeo que ele fez dando início a campanha, veja agora aí embaixo:</p> 18 | 19 | <p>O ponto é que depois que a comunidade resolveu ajudá-lo, a campanha arrecadou mais de R$160.000,00. Foi uma coisa linda de se ver, mas ainda está longe do ideal. Ele já está nos EUA iniciando o tratamento, completando essa primeira fase da campanha. Agora, a segunda fase pode ser ainda mais difícil. Eu estava conversando com ele esses dias e os custos lá são bem altos. Há um remédio que eles podem tentar usar, mas que apenas uma ampola custa USD$10.000,00. Pois é&#8230;</p> 20 | 21 | <p>Pensando nisso, a comunidade se juntou pra levantar mais fundos, mas desta vez estamos dando algo em troca: conhecimento. Em parceria com a <a href="http://eventials.com/">Eventials</a>, programamos uma série de palestras online no próximo dia 21. Sábado. Você vai poder ouvir o Eduardo Shiota, Akita, Caio Gondin, Daniel Filho, Rafael Rinaldi, Bernard de Luna e eu por um preço camarada, que será totalmente revertido, inclusive a porcentagem da Eventials, para a campanha do Leo.</p> 22 | 23 | <p><a href="http://bit.ly/frontendunited-leokzw">Visite este link</a> e entenda como você pode ajudar e também como você pode adquirir mais conhecimento por um valor simbólico, mas que vai ajudar demais nosso amigo na luta dele contra o cancer! Abaixo, veja o vídeo da campanha.</p> 24 | 25 | <p><a href="http://bit.ly/frontendunited-leokzw">Conheça nossa campanha agora clicando aqui.</a></p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/xhtml2/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Xhtml2 on Tableless 5 | http://tableless.com.br/tags/xhtml2/index.xml 6 | Recent content in Xhtml2 on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast Tableless #25 – Validação é importante?! 13 | http://tableless.com.br/podcast-tableless-25-validacao-e-importante/ 14 | Thu, 09 Nov 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-tableless-25-validacao-e-importante/ 17 | <p>Validar ou não validar, eis a questão. Será que validar é realmente importante? Para quem ela é importante? Qual o sentido da vida? Mas <a href="http://en.wikipedia.org/wiki/The_Answer_to_Life,_the_Universe,_and_Everything#The_search_for_the_Ultimate_Question">porque 42 é a resposta</a>?</p> 18 | 19 | <p>Validação sempre foi um assunto muito interessante. Não temos como falar sobre validação sem tocar em assuntos como semântica, xhtml2, html5 e etc. Instigados pelo assunto (um tanto polêmico, confesso) e pelos comentários do <a href="http://tableless.com.br/validar-e-importante">post que escrevi anteriormente</a>, decidimos fazer um podcast madrugada adentro.</p> 20 | 21 | <p>Ao ouvir nosso pitaco, você também pode dar o seu deixando seu comentário aqui ou enviando um correio de voz para o usuário <strong>tablelessbr</strong> do <a href="http://skype.com/">Skype</a>.</p> 22 | 23 | <p><a href="http://tableless.com.br/podcast/podcast-tableless-25.mp3">Podcast Tableless #25 &#8211; Validação é importante?!</a></p> 24 | 25 | <p>Tamanho: ~27Mb</p> 26 | 27 | <p>Duração: ~48min</p> 28 | 29 | <p>Formato: Mp3</p> 30 | 31 | <p>Você pode <a href="http://tableless.com.br/podcast/podcast-tableless-25.mp3">baixar o arquivo diretamente</a>, mas aconselho fortemente que você <a href="http://tableless.com.br/feed/">cadastre nosso FEED</a> em seu <a href="http://tableless.com.br/agregadores-de-feeds">agregador</a> favorito. Mais informações e links sobre feeds: <a href="http://tableless.com.br/assine">tableless.com.br/assine</a></p> 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /tags/blink/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Blink on Tableless 5 | http://tableless.com.br/tags/blink/index.xml 6 | Recent content in Blink on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Blink: o novo motor do Chrome 13 | http://tableless.com.br/blink-o-novo-motor-do-chrome/ 14 | Thu, 04 Apr 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/blink-o-novo-motor-do-chrome/ 17 | <p>O <a href="http://www.chromium.org/">Chromium</a> (que é o projeto por trás do Chrome e do Chromium OS) utiliza uma arquitetura de múltiplos processos que é diferente do WebKit. Essa arquitetura mudou muito durante a existência do Chrome, dificultando a integração entre o browser e o WebKit. Por isso o pessoal do Google está apresentando hoje o Blink, seu novo motor de renderização baseado no WebKit.</p> 18 | 19 | <blockquote> 20 | <p>This was not an easy decision. We know that the introduction of a new rendering engine can have significant implications for the web.</p> 21 | </blockquote> 22 | 23 | <p>O <a href="http://www.chromium.org/blink">Blink</a> é uma decisão da equipe do Chromium de fazer um fork do projeto do WebKit e criar seu novo motor de renderização, que também será open source.</p> 24 | 25 | <p>Essa mudança de caminho não trará quase que nenhuma mudança para os desenvolvedores. Mas eles já adiataram que removerão algo em torno de 7.000 arquivos com mais de 4.5 milhões de linhas de código. &#8220;Over the long term a healthier codebase leads to more stability and fewer bugs.&#8221; <a href="http://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html">diz no post oficial</a>.</p> 26 | 27 | <blockquote> 28 | <p>Throughout this transition, we’ll collaborate closely with other browser vendors to move the web forward and preserve the compatibility that made it a successful ecosystem.</p> 29 | </blockquote> 30 | 31 | <p>A boa notícia é que o Google é super comprometido com o projeto do WebKit. Tanto o Google quanto a Apple trabalharam juntos durante muito tempo para melhorar o WebKit para fazê-lo o que ele é hoje. Novidades virão com certeza. É só esperar.</p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/internet-explorer-6/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Internet Explorer 6 on Tableless 5 | http://tableless.com.br/tags/internet-explorer-6/index.xml 6 | Recent content in Internet Explorer 6 on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | PDF – Browsers antigos: guerra contra o terror 13 | http://tableless.com.br/browsers-antigos-guerra-contra-o-terror/ 14 | Wed, 09 Mar 2011 00:00:00 +0000 15 | 16 | http://tableless.com.br/browsers-antigos-guerra-contra-o-terror/ 17 | <p>É muito difícil tomar a decisão de não suportar browsers antigos. Sempre há diversas desculpas, mas dependendo da empresa ou da popularidade do site/serviço, mesmo uma pequena porcentagem pode significar milhões de usuários usando browsers antigos ou que não tem um bom suporte de Padrões Web. Simplesmente ignorar algumas centenas de milhares de usuários não é algo muito aceitável. O ponto é que você não precisa ignorar estes valiosos 1%. Mas também não precisa gastar milhões nem perder muito tempo tentando resolver os problemas causados pelos browsers antigos que estes usuários usam. A ideia é sempre dar a melhor experiência que eles podem ter, sem prejudicar os outros 99%.</p> 18 | 19 | <p>Com este pensamento, criei <a href="http://bit.ly/1hbexD3">um PDF simples</a>, onde cito os principais problemas no desenvolvimento para browsers ou meios de acesso antigos. É um documento onde você poderá imprimir e dar para o seu chefe e integrantes da sua equipe. É uma ferramenta para que você tenha alguma munição para te ajudar a convencer aqueles que tentam insistir no erro de manter uma compatibilidade perfeita entre browsers atuais e browsers de 12 anos.</p> 20 | 21 | <p><a href="http://bit.ly/1hbexD3">Baixar o PDF &#8211; Guerra contra o Terror</a>{.btn}</p> 22 | 23 | <p><strong>Update</strong> A Microsoft anunciou que a partir de 2012 <a href="http://windowsteamblog.com/ie/b/ie/archive/2011/12/15/ie-to-start-automatic-upgrades-across-windows-xp-windows-vista-and-windows-7.aspx">o IE terá atualização automática nos sistemas Windows XP, Windows Vista e Windows 7</a>. Isso quer dizer que estamos mais perto da salvação.</p> 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tags/release/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Release on Tableless 5 | http://tableless.com.br/tags/release/index.xml 6 | Recent content in Release on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Saiu o WordPress 4.0: “Benny” 13 | http://tableless.com.br/saiu-o-wordpress-4-0-benny/ 14 | Thu, 04 Sep 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/saiu-o-wordpress-4-0-benny/ 17 | <p>O WordPress 4.0, homenageando o clarinetista Benny Goodman <a href="http://wordpress.org/news/2014/09/benny/">está disponível hoje</a>!</p> 18 | 19 | <p>Ele trouxe uma série de mudanças interessantes, mas nada muito grande, basicamente pequenas mudancas de design na interface.</p> 20 | 21 | <p>Uma dessas mudanças é a área de media que toda reestilizada. Sempre foi bastante chato encontrar e gerenciar arquivos que foram incluídos no WordPress. Aquela modal nojenta não faz mais parte das nossas vidas. Amém.</p> 22 | 23 | <p>A tela de edição de conteúdo também recebeu um realinhamento. A ideia é que você ganhe mais foco no conteúdo. Eu ainda acho que dá para melhorar bastante, mas já está bem melhor do que a versão anterior. Quem se acostuma com a interface de edição do <a href="http://medium.com/@diegoeis/">Medium</a> sempre acha que dá para melhorar.</p> 24 | 25 | <p>Vale a pena dizer também sobre a tela de plugins. Eu quase nunca instalo um plugin direto pela interface do WordPress. Geralmente eu baixo, testo localmente, subo via GIT. Mas para alguns websites e clientes a melhor forma é ter como instalar e procurar plugins direto pela interface administrativo. Esse redesign é bastante bem vindo.</p> 26 | 27 | <p>Confira no vídeo abaixo um resumo de tudo ou visite o post do blog deles para ver outros vídeos das novidades.</p> 28 | 29 | <p><embed type="application/x-shockwave-flash" src="http://s0.videopress.com/player.swf?v=1.03" width="400" height="224" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=bUdzKMro&isDynamicSeeking=true"> 30 | </embed></p> 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /tags/frontendunited/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Frontendunited on Tableless 5 | http://tableless.com.br/tags/frontendunited/index.xml 6 | Recent content in Frontendunited on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Front-end United – Leo Kzw 13 | http://tableless.com.br/front-end-united-leo-kzw/ 14 | Tue, 17 Mar 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/front-end-united-leo-kzw/ 17 | <p>Acho que boa parte dos nossos leitores já sabem que estamos apoiando uma campanha para um dos integrantes da comunidade, o Leonardo Konarzewski. Além do nome difícil de se pronunciar, ele tem algo muito difícil para lidar: um câncer raro. Se você ainda não viu o vídeo que ele fez dando início a campanha, veja agora aí embaixo:</p> 18 | 19 | <p>O ponto é que depois que a comunidade resolveu ajudá-lo, a campanha arrecadou mais de R$160.000,00. Foi uma coisa linda de se ver, mas ainda está longe do ideal. Ele já está nos EUA iniciando o tratamento, completando essa primeira fase da campanha. Agora, a segunda fase pode ser ainda mais difícil. Eu estava conversando com ele esses dias e os custos lá são bem altos. Há um remédio que eles podem tentar usar, mas que apenas uma ampola custa USD$10.000,00. Pois é&#8230;</p> 20 | 21 | <p>Pensando nisso, a comunidade se juntou pra levantar mais fundos, mas desta vez estamos dando algo em troca: conhecimento. Em parceria com a <a href="http://eventials.com/">Eventials</a>, programamos uma série de palestras online no próximo dia 21. Sábado. Você vai poder ouvir o Eduardo Shiota, Akita, Caio Gondin, Daniel Filho, Rafael Rinaldi, Bernard de Luna e eu por um preço camarada, que será totalmente revertido, inclusive a porcentagem da Eventials, para a campanha do Leo.</p> 22 | 23 | <p><a href="http://bit.ly/frontendunited-leokzw">Visite este link</a> e entenda como você pode ajudar e também como você pode adquirir mais conhecimento por um valor simbólico, mas que vai ajudar demais nosso amigo na luta dele contra o cancer! Abaixo, veja o vídeo da campanha.</p> 24 | 25 | <p><a href="http://bit.ly/frontendunited-leokzw">Conheça nossa campanha agora clicando aqui.</a></p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/codeshow/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Codeshow on Tableless 5 | http://tableless.com.br/tags/codeshow/index.xml 6 | Recent content in Codeshow on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Codeshow 2010 13 | http://tableless.com.br/codeshow-2010/ 14 | Thu, 25 Mar 2010 00:00:00 +0000 15 | 16 | http://tableless.com.br/codeshow-2010/ 17 | <p>Você gosta de eventos sobre desenvolvimento web e afins, não gosta? Eu particularmente não gosto muito quando o cara abre o notebook, liga na telona e fala 3 horas sem parar repetindo apenas o que está aparecendo nos slides. Isso é chato e você não aprende nada.</p> 18 | 19 | <p>Sabemos também que se você é como nós, você gosta de ver código, entender alternativas para problemas que você tem todos os dias. Saber se o HTML 5 ou o CSS 3 já pode ser o usado e o que exatamente funciona nos browsers de hoje em dia.</p> 20 | 21 | <p>Pensando nisso, projetamos um evento chamado <a href="http://codeshow.visie.com.br/">Codeshow</a>. O Codeshow é um evento num formato novo, em que não há palestras. Você vai assistir à construção de uma aplicação em um dia, a partir do zero, usando ferramentas como Git, HTML5, CSS3, web2py e MongoDB. Iremos separar Programadores e Designers diferentes. Cada sala tratará de assuntos específicos para cada área, mas ambas estarão trabalhando em um mesmo projeto.</p> 22 | 23 | <p>Para quem não sabe, essa é a segunda edição do Codeshow. Desta vez iremos reformatar totalmente o <a href="http://visie.com.br/campus/">Campus Online</a> da Visie. Iremos criar layout para mobiles, utilizar HTML 5 para exibir vídeos e CSS 3 para facilitar a vida. Iremos utilizar Web2Py para levantar o sistema e Git como controle de versão. No final do dia, iremos juntar as salas finalizar o projeto integrando as partes do projeto que Designers e Programadores fizeram.</p> 24 | 25 | <p>Será no dia 27 de Maio de 2010, no Espaço Apas na Rua Pio XI, n° 1200, Alto da Lapa &#8211; São Paulo &#8211; SP, CEP 05060-001.</p> 26 | 27 | <p>Custa apenas R$30 e você pode ver mais informações e <a href="http://codeshow.visie.com.br/">fazer sua inscrição aqui</a>.</p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/placeholder/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Placeholder on Tableless 5 | http://tableless.com.br/tags/placeholder/index.xml 6 | Recent content in Placeholder on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Estilizar e formatar placeholder de inputs 13 | http://tableless.com.br/estilizar-e-formatar-placeholder-de-inputs/ 14 | Wed, 26 Feb 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/estilizar-e-formatar-placeholder-de-inputs/ 17 | <p>O atributo <strong>placeholder</strong> foi uma das maravilhas herdadas do HTML5. Eu me lembro de todas as gambiarras em Javascript e CSS que fazíamos para simular o que o atributo placeholder faz tão facilmente.</p> 18 | 19 | <p>O atributo placeholder é uma pequena dica, uma pequena frase, uma palavra, que tem o intuito de ajudar o usuário a entender como ele deve preencher aquele formulário. Entenda que e o placeholder NÃO deve ser usado como alternativa para a LABEL. Ou seja, aquela prática de colocar um <strong>display: none</strong> nas labels e deixar apenas o placeholder visível não é legal. Também não é aconselhável ter uma descrição gigante. Para isso, use o atributo TITLE.</p> 20 | 21 | <p>Como esse atributo simplesmente insere um texto contextual no campo de formulário, muitos devs acham que não há maneira de formatá-lo, trocando cor, tamanho, font e etc&#8230; Mas há! E é bem simples. Infelizmente você ainda precisa usar prefixos para funcionar, mas logo mais, quem sabe, não será mais necessário.</p> 22 | 23 | <p>Para formatar o atributo placeholder dos campos de formulários e textareas, basta manipular a pseudo-class ::placeholder. Não me perguntem por que é uma pseudo classe não e um pseudo elemento. Mas isso é só um detalhe.</p> 24 | 25 | <p><strong>Dica:</strong> Eu poderia ter agrupado os seletores pra facilitar a leitura, o problema é que se um dos browsers não reconhece um dos seletores, ele acabam invalidando o grupo inteiro, aí nada funcionaria. Nesse caso a solução é colocar separado mesmo.</p> 26 | 27 | <p>Veja a <a href="http://developers.whatwg.org/common-input-element-attributes.html#the-placeholder-attribute">documentação oficial</a> direto do WHATWG.</p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /css/style.sass: -------------------------------------------------------------------------------- 1 | @import "fonts/fonts.css" 2 | @import "_helpers.sass" 3 | @import "_footer.sass" 4 | @import "_header.sass" 5 | @import "_single.sass" 6 | @import "_lists.sass" 7 | 8 | * 9 | padding: 0 10 | margin: 0 11 | box-sizing: border-box 12 | 13 | body 14 | font-size: 100% 15 | font-family: $avenirRegular 16 | -webkit-font-smoothing: antialiased 17 | -moz-osx-font-smoothing: grayscale 18 | counter-reset: list-count 19 | 20 | .tb-feature-post 21 | @extend .tb-container 22 | padding: 0 30px 23 | margin-bottom: 55px 24 | 25 | p 26 | // height: 100px 27 | // overflow: hidden 28 | //position: relative 29 | // &:after 30 | // position: absolute 31 | // bottom: 4px 32 | // right: 0px 33 | // display: inline-block 34 | // content: " ..." 35 | 36 | .tb-post-list 37 | @extend .tb-container 38 | padding: 0 20px 39 | display: flex 40 | flex-wrap: wrap 41 | flex-direction: space-around 42 | 43 | .tb-post-box 44 | flex: 1 0 300px 45 | margin: 0 10px 50px 46 | 47 | img 48 | max-width: 100% 49 | border-radius: 3px 50 | 51 | h2 52 | margin: -10px 0 5px 53 | text-transform: uppercase 54 | font: 1.1rem $avenirBold 55 | 56 | a 57 | color: $gray 58 | text-decoration: none 59 | 60 | &:hover 61 | color: $red 62 | p 63 | color: $text-gray 64 | font: 1rem/1.4 $avenirRegular 65 | 66 | h2, p 67 | padding-left: 10px 68 | padding-right: 10px 69 | 70 | .tb-author 71 | padding-left: 10px 72 | 73 | .tb-categ-flag 74 | display: inline-block 75 | color: #fff 76 | background: $red 77 | border-radius: 3px 78 | text-decoration: none 79 | text-transform: lowercase 80 | padding: 5px 10px 2px 81 | margin: 0 10px 82 | transform: translateY(-20px) 83 | font: .8rem $avenirDemi 84 | position: relative 85 | z-index: 1 86 | 87 | .tb-categs .tb-categ-flag 88 | display: none 89 | 90 | .tb-categs .tb-categ-flag:first-child 91 | display: inline-block 92 | 93 | //// 94 | // Big Screen version 95 | //// 96 | @media #{$break-mobile} 97 | .tb-feature-post 98 | text-align: center 99 | padding: 0 30px 120px 100 | 101 | h1 a:hover 102 | color: $red 103 | 104 | p 105 | margin-left: auto 106 | margin-right: auto 107 | 108 | .tb-post-box 109 | margin-bottom: 30px 110 | 111 | &:hover img 112 | opacity: .9 113 | 114 | h2 115 | width: 90% 116 | font-size: 1.2rem 117 | line-height: 1.4 118 | padding: 15px 10px 0 119 | margin-bottom: 15px 120 | 121 | p 122 | width: 90% 123 | font-size: 1rem 124 | line-height: 1.5 125 | 126 | .tb-categ-flag 127 | font-size: .9rem 128 | padding: 7px 10px 3px 129 | -------------------------------------------------------------------------------- /tags/learn/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Learn on Tableless 5 | http://tableless.com.br/tags/learn/index.xml 6 | Recent content in Learn on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Aprendendo JavaScript online 13 | http://tableless.com.br/aprendendo-javascript-online/ 14 | Fri, 19 Jun 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/aprendendo-javascript-online/ 17 | 18 | 19 | <p>Outro dia eu estava tentando me lembrar de um site bem simpático e simples para aprender JavaScript online. Eu não me lembrava do nome do site, nem o nome de quem havia feito. Joguei no twitter a pergunta e uma pancada de gente trouxe vários websites cuja a abordagem era aprender JS online, grátis, de forma fácil. Nenhum dos sites era o que eu estava procurando, mas eram sites bem legais que talvez você possa se interessar. Abaixo segue o link para todos eles.</p> 20 | 21 | <h2 id="javascript-com">Javascript.com</h2> 22 | 23 | <p><a href="http://javascript.com/"><img src="http://tableless.com.br/wp-content/uploads/2015/06/javascript-com.jpg" alt="javascript-com" width="500" height="300" class="alignnone size-full wp-image-49682" /></a></p> 24 | 25 | <h2 id="codewars">CodeWars</h2> 26 | 27 | <p><a href="http://www.codewars.com/join?language=javascript"><img src="http://tableless.com.br/wp-content/uploads/2015/06/code-wars.jpg" alt="code-wars" width="500" height="300" class="alignnone size-full wp-image-49683" /></a></p> 28 | 29 | <h2 id="codeavengers">CodeAvengers</h2> 30 | 31 | <p><a href="http://www.codeavengers.com/javascript/1#1.1"><img src="http://tableless.com.br/wp-content/uploads/2015/06/code-avengers.jpg" alt="code-avengers" width="500" height="300" class="alignnone size-full wp-image-49684" /></a></p> 32 | 33 | <h2 id="codecombat">CodeCombat</h2> 34 | 35 | <p><a href="http://codecombat.com/"><img src="http://tableless.com.br/wp-content/uploads/2015/06/code-combat.jpg" alt="code-combat" width="500" height="300" class="alignnone size-full wp-image-49681" /></a></p> 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /tags/lógica/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lógica on Tableless 5 | http://tableless.com.br/tags/l%C3%B3gica/index.xml 6 | Recent content in Lógica on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Formulários definitivos e problema de lógica 13 | http://tableless.com.br/formularios-definitivos-e-problema-de-logica/ 14 | Sun, 25 May 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/formularios-definitivos-e-problema-de-logica/ 17 | <p>Dessa vez você ganha um ingresso para a palestra &#8220;<a href="http://visie.com.br/treinamento/formularios-semanticos/">Formulários Definitivos</a>&#8220;. Tente resolver <a href="http://visie.com.br/eventos/charada">esse problema aqui</a>, é fácil. E mesmo que você não consiga, ainda assim concorre a ingressos, com menos chance, mas concorre.</p> 18 | 19 | <p>Por falar na palestra, esse é o programa que temos preparado:</p> 20 | 21 | <ol> 22 | <li><p><strong>19h30</strong> &#8211; <em>Formulários que funcionam</em> &#8211; Elcio Ferreira</p> 23 | 24 | <p>É sempre importante conhecer e relembrar os fundamentos.</p></li> 25 | 26 | <li><p><strong>20h00</strong> &#8211; <em>Semântica e CSS</em> &#8211; Diego Eis</p> 27 | 28 | <p>Como construir bons formulários Tableless</p></li> 29 | 30 | <li><p><strong>20h45</strong> &#8211; <em>Validando Formulários</em> &#8211; Elcio Ferreira</p> 31 | 32 | <p>Construindo um validador de formulários universal e plugável com jQuery</p></li> 33 | 34 | <li><p><strong>21h15</strong> &#8211; <em>Pare de escrever formulários</em> &#8211; Elcio Ferreira</p> 35 | 36 | <p>Como um bom framework server-side livra você do trabalho de escrever formulários.</p></li> 37 | </ol> 38 | 39 | <p>Fizemos pensando nas necessidades mais comuns que aparecem nos <a href="http://visie.com.br/treinamento/">cursos de Tableless e Javascript</a>. Estou mostrando o programa agora porque, embora as apresentações já estejam preparadas, ainda dá tempo de mudar. Se alguém tiver alguma sugestão, por favor, deixe um comentário. Até quinta!</p> 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /tags/curso-incompany/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Curso Incompany on Tableless 5 | http://tableless.com.br/tags/curso-incompany/index.xml 6 | Recent content in Curso Incompany on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Podcast Tableless #24 – Testemunho WCA 13 | http://tableless.com.br/podcast-tableless-24-testemunho-wca/ 14 | Thu, 12 Oct 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/podcast-tableless-24-testemunho-wca/ 17 | <p>Parecido com o <a href="http://tableless.com.br/podcast-tableless-22-primeira-impressao-sobre-padroes-web">podcast #22</a> onde eu fiz com alguns alunos no final de um curso de <a href="http://visie.com.br/cursos/tableless2.php">Tableless II</a> lá na <a href="http://visie.com.br/">Visie</a>, fiz agora uma versão um pouco diferente. Em vez de falar com várias pessoas de empresas diferentes, fizemos com um grupo especifico de uma empresa apenas, a <a href="http://www.wcamentoring.com.br/">WCA</a>. A experiência é quase a mesma, mas como estamos falando de um grupo que trabalha junto, o foco muda um pouco do podcast anterior. Aproveitem.</p> 18 | 19 | <p><a href="http://tableless.com.br/podcast/podcast-tableless-24.mp3">Podcast Tableless #24 &#8211; Testemunho WCA</a></p> 20 | 21 | <p>Tempo: ~54Min</p> 22 | 23 | <p>Tamanho: ~15Mb</p> 24 | 25 | <p>Formato: Mp3</p> 26 | 27 | <p><strong>Obs.:</strong> Como gravei o video pelo celular, o arquivo está com a extensão 3gp. Se eu não me engano o QuickTime consegue ler o arquivo. Pelo menos no Mac funcionou perfeitamente.</p> 28 | 29 | <p>Você pode baixar o video <a href="http://tableless.com.br/podcast/levi-podcast24.3gp">por este link</a>.</p> 30 | 31 | <p><strong>Obs 2.:</strong> No final do podcast ainda tem uma gravação dos bastidores.**</p> 32 | 33 | <p>**</p> 34 | 35 | <p>Se você quiser dar alguma sugestão, critica ou simplesmente elogiar minha linda voz, você pode além de comentar aqui e nos enviar um email, incluir na sua lista de contatos do Skype o usuário <strong>tablelessbr</strong> e nos enviar uma mensagem de audio. Vamos tentar sempre colocar essas mensagens de voz nos próximos podcasts. Participem!</p> 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /tags/promoção/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Promoção on Tableless 5 | http://tableless.com.br/tags/promo%C3%A7%C3%A3o/index.xml 6 | Recent content in Promoção on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Formulários definitivos e problema de lógica 13 | http://tableless.com.br/formularios-definitivos-e-problema-de-logica/ 14 | Sun, 25 May 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/formularios-definitivos-e-problema-de-logica/ 17 | <p>Dessa vez você ganha um ingresso para a palestra &#8220;<a href="http://visie.com.br/treinamento/formularios-semanticos/">Formulários Definitivos</a>&#8220;. Tente resolver <a href="http://visie.com.br/eventos/charada">esse problema aqui</a>, é fácil. E mesmo que você não consiga, ainda assim concorre a ingressos, com menos chance, mas concorre.</p> 18 | 19 | <p>Por falar na palestra, esse é o programa que temos preparado:</p> 20 | 21 | <ol> 22 | <li><p><strong>19h30</strong> &#8211; <em>Formulários que funcionam</em> &#8211; Elcio Ferreira</p> 23 | 24 | <p>É sempre importante conhecer e relembrar os fundamentos.</p></li> 25 | 26 | <li><p><strong>20h00</strong> &#8211; <em>Semântica e CSS</em> &#8211; Diego Eis</p> 27 | 28 | <p>Como construir bons formulários Tableless</p></li> 29 | 30 | <li><p><strong>20h45</strong> &#8211; <em>Validando Formulários</em> &#8211; Elcio Ferreira</p> 31 | 32 | <p>Construindo um validador de formulários universal e plugável com jQuery</p></li> 33 | 34 | <li><p><strong>21h15</strong> &#8211; <em>Pare de escrever formulários</em> &#8211; Elcio Ferreira</p> 35 | 36 | <p>Como um bom framework server-side livra você do trabalho de escrever formulários.</p></li> 37 | </ol> 38 | 39 | <p>Fizemos pensando nas necessidades mais comuns que aparecem nos <a href="http://visie.com.br/treinamento/">cursos de Tableless e Javascript</a>. Estou mostrando o programa agora porque, embora as apresentações já estejam preparadas, ainda dá tempo de mudar. Se alguém tiver alguma sugestão, por favor, deixe um comentário. Até quinta!</p> 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /tags/canvas/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Canvas on Tableless 5 | http://tableless.com.br/tags/canvas/index.xml 6 | Recent content in Canvas on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Cut the Rope 13 | http://tableless.com.br/cut-the-rope/ 14 | Wed, 28 Mar 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/cut-the-rope/ 17 | <p><a href="http://www.cuttherope.ie/">Cut the Rope</a> foi feito primeiramente para iOS. A Microsoft fez uma parceria com o time que produziu o jogo, fazendo com que ele ficasse disponível para todos, totalmente feito em HTML5. O resultado foi o jogo integralmente portado para web, utilizando o melhor do HTML5: gráficos em canvas, audo e vídeo direto do browser, CSS3 e fonts WOFF.</p> 18 | 19 | <p>Você pode jogar Cut the Rope pelo link: <a href="http://www.cuttherope.ie">www.cuttherope.ie</a>.</p> 20 | 21 | <p>Ao transformar o jogo para web, os desenvolvedores quiseram mantiveram a física e a movimentação do jogo original. Eles fizeram uma pesquisa profunda no código original feito em Objective-C para tentar descobrir como poderiam trazer essas particularidades do jogo nativo para web. Foi aí que o Javascript entrou.</p> 22 | 23 | <p>No site, eles dizem que o Javascript tinha a reputação de ser uma linguagem lerda. Por isso ficaram com um pé atrás. Mas hoje em dia a coisa é diferente. Se antes os motores de renderização de Javascript era feitos para executar tarefas básicas, hoje os motores estão mais otimizados, prontos para calcular scripts complexos com velocidade.</p> 24 | 25 | <p>Vendo a qualidade do jogo, pode-se dizer que eles fizeram um ótimo trabalho.</p> 26 | 27 | <p>Eles dizem no site que o jogo online tem quase 15000 linhas de código que são executadas no browser. Antes de ir lá e tentar fuçar, eles minificaram o código, pode ficar meio tenso.</p> 28 | 29 | <p><a href="http://www.cuttherope.ie/dev/">Neste link</a> tem uma explicação completíssima, mostrando as ferramentas e a história da reescrita deste jogo.</p> 30 | 31 | <p>Obviamente você verá um pequeno jabá da Microsoft. Mas isso não vem ao caso. 😉</p> 32 | 33 | <p>Por mim, tanto faz, contanto que continuem o bom trabalho.</p> 34 | 35 | <p>E eu diria mais: <strong>Pega essa, Flash!</strong></p> 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /tags/17elw/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17elw on Tableless 5 | http://tableless.com.br/tags/17elw/index.xml 6 | Recent content in 17elw on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Evento sobre desenvolvimento em Porto Alegre – #17elw 13 | http://tableless.com.br/falando-sobre-desenvolvimento-em-porto-alegre-17elw/ 14 | Wed, 22 Apr 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/falando-sobre-desenvolvimento-em-porto-alegre-17elw/ 17 | <p>Pessoal, estarei no Encontro Locaweb que vai acontecer no dia 07 de Maio, falando sobre desenvolvimento web junto com o <a href="http://about.me/akitaonrails">Akita</a>, <a href="http://jcemer.com/">Jean Carlo Emer</a>, <a href="http://sergiolopes.org/">Sergio Caelum</a>, <a href="http://rinaldi.io/">Rafael Rinaldi</a>, <a href="http://pothix.com/blog">Pothix</a> e <a href="http://diegoeis.com/">eu</a>! E pra alegrar a galera, <strong>arranjei pra gente 5 ingressos cortesia</strong> para o evento.</p> 18 | 19 | <p>Para ser um dos ganhadores <a href="https://twitter.com/tableless/status/590847933957832704">você precisa retwittar este tweet</a> e se certificar que você está seguindo o <a href="http://twitter.com/tableless">@tableless</a> lá no Twitter.</p> 20 | 21 | <blockquote class="twitter-tweet" lang="en"> 22 | <p> 23 | Ganhe um ingresso para o <a href="https://twitter.com/hashtag/17elw?src=hash">#17elw</a> de POA e assista o <a href="https://twitter.com/AkitaOnRails">@AkitaOnRails</a>, <a href="https://twitter.com/sergio_caelum">@sergio_caelum</a>, <a href="https://twitter.com/jcemer">@jcemer</a> falando! RT agora! <a href="http://t.co/Op94GavZWX">http://t.co/Op94GavZWX</a> 24 | </p> 25 | 26 | <p> 27 | &mdash; Tableless (@tableless) <a href="https://twitter.com/tableless/status/590847933957832704">April 22, 2015</a> 28 | </p> 29 | </blockquote> 30 | 31 | <p>Iremos fazer o sorteio de 5 ganhadores na sexta-feira. Se você não é de Porto Alegre e quiser participar, não há problema. Mas você precisará nos dar certeza de que vai viajar para ver o evento.</p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/editorconfig/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Editorconfig on Tableless 5 | http://tableless.com.br/tags/editorconfig/index.xml 6 | Recent content in Editorconfig on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | EditorConfig 13 | http://tableless.com.br/editorconfig/ 14 | Mon, 19 Aug 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/editorconfig/ 17 | <p>Você já deve ter visto discussões em equipes para definir o estilo de código usado em projetos. Discutir se será tabs ou espaços, o tamanho do tab, charset e etc. Todo mundo tem que configurar o editor igualmente para que não quebre nenhum arquivo e fique aquela bagunça. Não existia solução de verdade para isso, até agora. Cada um usa um editor diferente, com configurações diferentes e muito pior, todo mundo tem um gosto pessoal diferente. É aí que entra o <a href="http://editorconfig.org">EditorConfig</a>.</p> 18 | 19 | <p>O EditorConfig ajuda a definir e manter estilos de códigos consistentes entre diversos editores. Ele é um simples arquivo que guarda as configurações de estilo do código, o seu editor predileto lê estas configurações e entende exatamente qual a configuração utilizar para cada formato de arquivo.</p> 20 | 21 | <pre class="lang-json">; Pra todos os arquivos 22 | [*] 23 | charset = utf-8 24 | end_of_line = lf 25 | insert_final_newline = true 26 | 27 | ; Estilo de identação em arquivos HTML 28 | [*.html] 29 | indent_style = tab 30 | indent_size = 4 31 | 32 | ; Estilo de identação em arquivos CSS 33 | [*.css] 34 | indent_style = tab 35 | indent_size = 4 36 | 37 | ; Estilo de identação em arquivos JS dentro do diretório Scripts 38 | [scripts/*.js] 39 | indent_style = tab 40 | indent_size = 2 41 | </pre> 42 | 43 | <p>Interessante, ahn?</p> 44 | 45 | <p>Como funciona? Simples: você baixa e instala um plugin para seu editor, aí você cria um arquivo .editorconfig com as configurações escolhidas, coloca este arquivo na raiz do seu projeto (ou em pastas específicas) e pronto.</p> 46 | 47 | <p>Tem plugins para diversos editores: Sublime Text, TextMate, VIM, Notepad++, gEdit, PHPStorm, PyCharm, RubyMine, Visual Studio e outros.</p> 48 | 49 | <p>Obviamente que os integrantes da equipe devem brigar apenas uma vez, para definir qual será o estilo base do código. Depois disso é só escrever um EditorConfig e pronto.</p> 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /tags/exercicio/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exercicio on Tableless 5 | http://tableless.com.br/tags/exercicio/index.xml 6 | Recent content in Exercicio on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Exercício Básico 13 | http://tableless.com.br/exercicio-basico/ 14 | Mon, 20 Oct 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/exercicio-basico/ 17 | <p>Costumo dar esse exercício para alguns dos alunos aqui da <a href="http://visie.com.br/treinamento/">Visie</a>. 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.</p> 18 | 19 | <p>Esse exercício está <strong>disponível gratuitamente</strong> no <a href="http://visie.com.br/campus/" title="Videos tutoriais sobre Tableless">Campus Online</a> também, em texto e em vídeo na <a href="http://visie.com.br/campus/assunto/1" title="Videos tutoriais sobre Tableless">parte de Tableless</a>!</p> 20 | 21 | <p><a href="http://visie.com.br/campus/">http://visie.com.br/campus/</a></p> 22 | 23 | <p><a href="http://visie.com.br/campus/static/media/exemplos/tableless/layout-tableless/layout-tableless.jpg"><img class="alignleft size-thumbnail wp-image-1026" title="Layout Básico de Tableless" src="http://tableless.com.br/wp-content/uploads/2008/10/layout-tableless-150x150.jpg" alt="Exercício de Tableless do Campus Online" width="150" height="150" /></a></p> 24 | 25 | <p>A idéia é implementar esse layout utilizando CSS e XHTML. O layout, como já disse, é bem básico, indicado para o pessoal que está começando agora na área ou que migrou de desenvolvimento com tabelas para desenvolvimento CSS/XHTML.</p> 26 | 27 | <p>Nesse exercício o camarada vai utilizar as propriedades: margin, padding, line-height, background, colocar, font, clear e float. Além de fazer menu horizontal e e formulários.</p> 28 | 29 | <p>Tem um vídeo, para os assinantes pagantes, com a implementação do HTML e outro vídeo com a implementaçãodo CSS em cima deste HTML. Assim o camarada pode comparar o seu exercício com o do vídeo.</p> 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tags/campus-online/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Campus Online on Tableless 5 | http://tableless.com.br/tags/campus-online/index.xml 6 | Recent content in Campus Online on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Exercício Básico 13 | http://tableless.com.br/exercicio-basico/ 14 | Mon, 20 Oct 2008 00:00:00 +0000 15 | 16 | http://tableless.com.br/exercicio-basico/ 17 | <p>Costumo dar esse exercício para alguns dos alunos aqui da <a href="http://visie.com.br/treinamento/">Visie</a>. 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.</p> 18 | 19 | <p>Esse exercício está <strong>disponível gratuitamente</strong> no <a href="http://visie.com.br/campus/" title="Videos tutoriais sobre Tableless">Campus Online</a> também, em texto e em vídeo na <a href="http://visie.com.br/campus/assunto/1" title="Videos tutoriais sobre Tableless">parte de Tableless</a>!</p> 20 | 21 | <p><a href="http://visie.com.br/campus/">http://visie.com.br/campus/</a></p> 22 | 23 | <p><a href="http://visie.com.br/campus/static/media/exemplos/tableless/layout-tableless/layout-tableless.jpg"><img class="alignleft size-thumbnail wp-image-1026" title="Layout Básico de Tableless" src="http://tableless.com.br/wp-content/uploads/2008/10/layout-tableless-150x150.jpg" alt="Exercício de Tableless do Campus Online" width="150" height="150" /></a></p> 24 | 25 | <p>A idéia é implementar esse layout utilizando CSS e XHTML. O layout, como já disse, é bem básico, indicado para o pessoal que está começando agora na área ou que migrou de desenvolvimento com tabelas para desenvolvimento CSS/XHTML.</p> 26 | 27 | <p>Nesse exercício o camarada vai utilizar as propriedades: margin, padding, line-height, background, colocar, font, clear e float. Além de fazer menu horizontal e e formulários.</p> 28 | 29 | <p>Tem um vídeo, para os assinantes pagantes, com a implementação do HTML e outro vídeo com a implementaçãodo CSS em cima deste HTML. Assim o camarada pode comparar o seu exercício com o do vídeo.</p> 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tags/hp/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hp on Tableless 5 | http://tableless.com.br/tags/hp/index.xml 6 | Recent content in Hp on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Web Platform 13 | http://tableless.com.br/web-platform/ 14 | Tue, 09 Oct 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/web-platform/ 17 | <p>A <a href="http://www1.webplatform.org/">Webplatform.org</a> é um website dirigido por pessoas que fomentam os padrões web, criado por um grupo que inclui W3C, <a href="http://webplatform.org/stewards/adobe">Adobe</a>, <a href="http://webplatform.org/stewards/facebook">Facebook</a>, <a href="http://webplatform.org/stewards/google">Google</a>, <a href="http://webplatform.org/stewards/hp">HP</a>, <a href="http://webplatform.org/stewards/microsoft">Microsoft</a>, <a href="http://webplatform.org/stewards/mozilla">Mozilla</a>, <a href="http://webplatform.org/stewards/nokia">Nokia</a>, <a href="http://webplatform.org/stewards/opera">Opera</a> e outros. O site promete ser uma fonte de recursos importantes para que você, desenvolvedor front-end, tenha uma base atual e principalmente de boas práticas ao produzir seus projetos com HTML5, CSS3, Javascript e etc.</p> 18 | 19 | <p>Eles descrevem muito bem o propósito do site:</p> 20 | 21 | <blockquote> 22 | <p>For years, web developers have had to rely on multiple sites to help them learn web programming or design, each with one piece of the puzzle. Great sites appear, covering one or two subjects, but too often fail to keep up with the rapid pace of changes to the web platform. This may have been good enough when the web was just simple HTML, basic CSS, and maybe a little JavaScript, but that was a long time ago. Today’s web is more than just documents, it’s applications and multimedia, and it’s changing at a breakneck pace.</p> 23 | </blockquote> 24 | 25 | <p>O WebPlatform irá curar, atualizar e indicar referências e tutoriais sobre cada parte do desenvolvimento client-side e também design. Eles mostrarão bugs e explicarão detalhadamente as soluções. A ideia é ótima. Muitos devs me perguntam sobre problemas que tem diversas soluções. É muito bom saber como desenvolvedores destes grandes sites resolvem problemas diários e principalmente como você pode utilizar também essas soluções em seus projetos.</p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/polimer/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Polimer on Tableless 5 | http://tableless.com.br/tags/polimer/index.xml 6 | Recent content in Polimer on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Configurando Bower e Polymer 13 | http://tableless.com.br/configurando-bower-e-polymer-2/ 14 | Thu, 10 Apr 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/configurando-bower-e-polymer-2/ 17 | 18 | 19 | <p>Bower é um gerenciador de pacotes e dependências muito utilizado hoje em dia. O Polymer é um novo polyfill do Google para Web Components. Neste artigo veremos algumas configurações do Bower e criaremos nosso primeiro web component com Polymer.</p> 20 | 21 | <p>[youtube <a href="http://www.youtube.com/watch?v=owT5n9jlzVI?rel=0">http://www.youtube.com/watch?v=owT5n9jlzVI?rel=0</a>]</p> 22 | 23 | <h1 id="bower">Bower</h1> 24 | 25 | <p>Criado pelo Twitter, o Bower promete melhorar o gerenciamento de suas dependências no client-side. Via terminal, você controla tudo, desde instalar uma Dependência até atualizar a Dependência.</p> 26 | 27 | <h2 id="instalando-o-jquery-via-bower">Instalando o jQuery via Bower</h2> 28 | 29 | <p>O caminho normal para usar o jQuery no projeto é entrar no site, baixar o script e salvar no diretório do projeto. Você tem que fazer isso toda vez que o jQuery (ou qualquer outro script de terceiros) é atualizado.</p> 30 | 31 | <p>Com o Bower não: primeiro você instala a dependência:</p> 32 | 33 | <p><code>bower install --save jQuery</code></p> 34 | 35 | <p>e quando sai uma nova versão, é muito mais fácil.</p> 36 | 37 | <p><code>bower install jQuery#version</code></p> 38 | 39 | <p>Simples assim.</p> 40 | 41 | <h1 id="polymer">Polymer</h1> 42 | 43 | <p>Polymer é um polyfill para web components, que é uma especificação bem recente, composta por 4 novas especificações sendo elas: Custom Elements, HTML imports, Templates, Shadow Dom.</p> 44 | 45 | <p>Web Components promete um cenário onde constrói ou estender suas Tags e elementos. O Polymer veio para ajudar nesse processo, trazendo essas vantagens hoje, mesmo antes da especificação ser oficial.</p> 46 | 47 | <p>Via Bower, baixe o Polymer:</p> 48 | 49 | <p><code>bower install --save polymer</code></p> 50 | 51 | <p>Para ter mais detalhes, veja o vídeo no início do artigo.</p> 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /tags/web-index/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Index on Tableless 5 | http://tableless.com.br/tags/web-index/index.xml 6 | Recent content in Web Index on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Web Index 13 | http://tableless.com.br/web-index/ 14 | Wed, 05 Sep 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/web-index/ 17 | <p>O <a href="http://thewebindex.org/">Web Index</a>, projeto liderado pelo Tim Berners-Lee, foi lançado hoje. Trata-se de um projeto interessante e muito importante que mostra qual a real penetração (ui&#8230;) da Web nos diversos países do mundo.</p> 18 | 19 | <p>As pesquisas e bases de dados que existem hoje mensuram apenas dados quantitativos, tipo: número de assinantes de internet, velocidade de conexão, número de usuários e etc. O Tim Berners-Lee e o pessoal da Web Foundation entende que esses dados não são suficientes para construir uma Web aberta e significativa, que seja uma ferramenta real de transformação e que aumente os padrões de vida, que reduz conflitos e que melhore o governo. É importante entender os impacto sociais, econômicos e políticos que a Web agrega. Ok, você sabe que a conexão é rápida, mas será que as informações que os usuários tem disponíveis sobre as iniciativas governo são de qualidade? Entende a diferença da informação que a Web Index quer compilar?</p> 20 | 21 | <p><img src="http://tableless.com.br/wp-content/uploads/2012/09/Screen-Shot-2012-09-05-at-10.41.32-AM.png" alt="gráfico que mostra o impacto político da web no Brasil" title="Impacto político da web no Brasil" class="size-full" /></p> 22 | 23 | <p>Com essa ideia, eles construíram um index de informações sobre a <strong>qualidade</strong> da Web (e não internet, não vá confundir) em diversos países, compilando dados em diversas dimensões para mensurar a saúde da Web, transformando e disponibilizando esses dados para que a tomada de decisões em setores públicos ou privados sejam mais corretos e conscientes.</p> 24 | 25 | <p>O Web Index funciona como um termômetro, mostrando qual o ranking do País e sua pontuação. O Brasil está no 24 lugar com um score de 56.6. Não é uma posição ruim, estamos na frente da Rússia e da Argentina, mas tem muito o que melhorar. A Islândia está em primeiro lugar, seguido dos Estados Unidos, Reino Unido, Canadá e Finlândia. O Zimbabue está em último. Veja o <a href="http://thewebindex.org/data/index/">ranking aqui</a>.</p> 26 | 27 | <p>Vale a pena explorar.</p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/coletânea-front-end/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coletânea Front End on Tableless 5 | http://tableless.com.br/tags/colet%C3%A2nea-front-end/index.xml 6 | Recent content in Coletânea Front End on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Uma coletânea front-end escrito por 11 devs 13 | http://tableless.com.br/uma-coletanea-front-end-escrito-por-11-devs/ 14 | Tue, 01 Apr 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/uma-coletanea-front-end-escrito-por-11-devs/ 17 | 18 | 19 | <p>Um grupo de desenvolvedores, encabeçado pelo glorioso <a href="http://sergiolopes.org/">Sérgio Lopes</a>, se juntou para escrever o primeiro de alguns livros sobre desenvolvimento web. Esse primeiro livro chama-se <a href="http://bit.ly/1hfDzMc">Coletânea Front-end: Uma antologia da comunidade front-end brasileira.</a></p> 20 | 21 | <p>Eu tive o prazer de escrever um capítulo, juntamente com um grupo de 10 outros devs, sendo eles: Almir Filho, Bernard De Luna, Caio Gondim, Deivid Marques, Diego Eis, Eduardo Shiota, Giovanni Keppelen, Luiz Corte Real, Jaydson Gomes, Reinaldo Ferraz e Sérgio Lopes!</p> 22 | 23 | <p>O livro já está a <a href="http://bit.ly/1hfDzMc">venda em formato digital e também em papel</a>.</p> 24 | 25 | <h3 id="o-que-você-vai-encontrar-no-livro">O que você vai encontrar no livro</h3> 26 | 27 | <p>Além de outros assuntos, você vai ler sobre:</p> 28 | 29 | <ul> 30 | <li>Desmistifique o progressive enhancement</li> 31 | <li>Saiba a relação entre Responsive Design, Adaptive e Fault Tolerance</li> 32 | <li>Aprenda a criar um framework front-end</li> 33 | <li>Conheça o AngularJS</li> 34 | <li>Aprenda a fazer sites com as diretrizes de acessibilidade</li> 35 | <li>Saiba o que é WAI-ARIA</li> 36 | <li>Veja as novidades da web moderna</li> 37 | <li>Conheça as APIs do HTML5</li> 38 | <li>Debugue sua web app sem complicações</li> 39 | <li>Teste seus códigos Javascript</li> 40 | </ul> 41 | 42 | <p>Esperamos ajudar mais ainda a comunidade front-end, divulgando e compartilhando conhecimento que as vezes é melhor em um formato mais tradicional, como um livro, do que em blogs e artigos.</p> 43 | 44 | <p>Estou também escrevendo outro livro sobre front-end. Esse é um livro solo e vai ser lançado pela <a href="https://casadocodigo.refersion.com/c/7442">Casa do Código</a> também. Aguarde e verá! 😉</p> 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /tags/fitic/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Fitic on Tableless 5 | http://tableless.com.br/tags/fitic/index.xml 6 | Recent content in Fitic on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | FITIC – Feira Internacional de Tecnologia de Informação e Comunicação 13 | http://tableless.com.br/fitic-feira-internacional-de-tecnologia-de-informacao-e-comunicacao/ 14 | Wed, 29 Jun 2016 00:00:00 +0000 15 | 16 | http://tableless.com.br/fitic-feira-internacional-de-tecnologia-de-informacao-e-comunicacao/ 17 | <p>A FITIC, realizará a sua primeira edição no São Paulo Expo em Dezembro. Com uma área de 20.000 m², a FITIC será a maior Feira de Tecnologia e Inovação da América Latina, focando o consumidor final, com expositores já confirmados nos segmentos de Realidade Virtual, Drones, Impressão 3D, software, hardware, eletrônica de consumo, inovação, entre outros e conta com o apoio do Sebrae-SP, Softex – Associação para promoção da excelência do software brasileiro, Canaltech, Tableless, Rede HCNOAR, VR Tech News, entre outros patrocinadores e parceiros a serem anunciados brevemente.</p> 18 | 19 | <p>Entre outras atividades vamos promover em parceria com a Futuriste workshop de montagem e pilotagem de drones com certificação e palestra com os temas &#8221;Empreendedorismo no mercado de Drones&#8221; e &#8221;Piloto de drones: investimento e retorno&#8221;. A empresa Boa Impressão 3D também terá presença com o tema &#8221;5 motivos para ter e 1 para não ter uma impressora 3D&#8221;. Apresentação de novos produtos, área de Inovação com startups brasileiras e estrangeiras convidadas, demonstrando protótipos de novas tecnologias, Job Market para carreiras em tecnologia, competição de startups tecnológicas, FPV Drone Racing com pilotos profissionais, e muito mais.</p> 20 | 21 | <p>O público poderá conhecer, experimentar e até adquirir produtos ou serviços em exposição.</p> 22 | 23 | <p>Os ingressos já estão a venda pelo site da FITIC e através do Ingresso Rápido, com preço promocional de lançamento com 50% de desconto (por tempo limitado).</p> 24 | 25 | <p>Quando: 15 a 18 de Dezembro de 2016</p> 26 | 27 | <p>Onde: São Paulo Expo &#8211; Rodovia dos Imigrantes, KM 1,5 – São Paulo – SP</p> 28 | 29 | <p>Horário: 11h às 23h</p> 30 | 31 | <p>Site: <a href="http://fitic.com.br">http://fitic.com.br</a></p> 32 | 33 | <p>Você pode ter 50% de desconto pela Ingress Rápido. <a href="http://fitic.com.br/emkt/22_06/softex/emkt_fitic_convite.html">Veja mais informações aqui</a>.</p> 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /tags/null-coalesce/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Null Coalesce on Tableless 5 | http://tableless.com.br/tags/null-coalesce/index.xml 6 | Recent content in Null Coalesce on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Novidade PHP 7 – Operador Null Coalesce 13 | http://tableless.com.br/novidade-php-7-operador-null-coalesce/ 14 | Fri, 19 Feb 2016 00:00:00 +0000 15 | 16 | http://tableless.com.br/novidade-php-7-operador-null-coalesce/ 17 | <p>Estou começando a estudar as <em>features</em> do PHP 7 e paralelamente irei escrever sobre elas. A primeira <em>feature</em> que vou falar é sobre o operador <strong>Null Coalescing</strong>.</p> 18 | 19 | <p>Este operador já existia em outras linguagens, como C# e Pearl. Eu achei muito interessante como ele melhora a legibilidade do código na checagem de variáveis.</p> 20 | 21 | <p>A lógica do operador é a seguinte: retornar o primeiro valor que exista e não seja nulo dentre os valores passados. Em alguns casos, para pegar o valor de GET, por exemplo, utilizamos a seguinte sintaxe:</p> 22 | 23 | <pre class="lang-php">$valor = (isset($_GET['id']))? $_GET['id'] : 1; 24 | </pre> 25 | 26 | <p>O trecho acima verifica se o índice ‘id’ está setado em GET, e caso esteja, ele seta na variável $valor, caso contrário, é informado o valor 1.</p> 27 | 28 | <p>Já com o operador <em>null coalesce</em>, este trecho fica muito mais claro e fácil de entender.</p> 29 | 30 | <pre class="lang-php">$valor = $_GET['id'] ?? 1; 31 | </pre> 32 | 33 | <p>O operador <strong>??</strong> (<em>null coalesce</em>) ficará responsável por retornar o primeiro valor que existe e não nulo. Então, se caso não seja passado um ‘id’ via GET, o valor 1 será setado em $valor.</p> 34 | 35 | <p>Agora, vamos imaginar que temos o seguinte cenário: precisamos setar um valor na variável $valor, só que este valor pode vir de diversos lugares e há uma ordem a ser seguida de verificação. Como você faria?</p> 36 | 37 | <p>Com o <em>null coalesce</em> isso torna-se muito simples:</p> 38 | 39 | <pre class="lang-php">$valor = $_GET['id'] ?? $_POST['id'] ?? 1; 40 | </pre> 41 | 42 | <p>Primeiro, o operador verifica GET, caso não exista ou seja nulo, ele irá verificar POST. Caso também não exista ou seja nulo, ele irá retornar 1.</p> 43 | 44 | <p>É isso galera. Qualquer dúvida, sugestão ou crítica é só comentar. Regards!</p> 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /tags/bowser/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bowser on Tableless 5 | http://tableless.com.br/tags/bowser/index.xml 6 | Recent content in Bowser on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Detectando navegadores com Bowser 13 | http://tableless.com.br/detectando-navegadores-com-bowser/ 14 | Tue, 24 Nov 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/detectando-navegadores-com-bowser/ 17 | 18 | 19 | <h2 id="uma-ajuda-para-detectar-e-dar-suporte-a-diferentes-navegadores">Uma ajuda para detectar e dar suporte a diferentes navegadores</h2> 20 | 21 | <h3 id="o-bowser">O Bowser</h3> 22 | 23 | <p>Em muitos projetos, precisamos dar uma atenção especial para alguns navegadores (nosso querido IE, por exemplo). A proposta do <strong>Bowser</strong> é facilitar a detecção de navegadores e suas versões, minimizando os erros de detecção, e facilitando sua vida.</p> 24 | 25 | <h3 id="mãos-à-obra">Mãos à obra</h3> 26 | 27 | <p>Para começar, você precisa fazer o download do arquivo JavaScript do <strong>Bowser</strong> no <a href="https://github.com/ded/bowser" target="_blank">GitHub oficial do projeto</a>, e inclui-lo no seu HTML. Depois, basta fazer suas condicionais utilizando o objeto Javascript Bowser, que contém várias informações sobre seu navegador.</p> 28 | 29 | <p>Podemos facilmente detectar se o navegador é IE, na versão menor ou igual a 8, como a seguir:</p> 30 | 31 | <pre class="lang-javascript,">if (bowser.msie && bowser.version &lt;= 8) { 32 | alert('Atualize seu browser!'); 33 | }; 34 | </pre> 35 | 36 | <p>Ou você pode detectar a <em>engine</em> do navegador:</p> 37 | 38 | <pre class="lang-javascript,">if (bowser.webkit) { 39 | alert('A engine do seu navegador é Webkit!'); 40 | }; 41 | </pre> 42 | 43 | <p>E também pode fazer um tratamento específico pra mobile:</p> 44 | 45 | <pre class="lang-javascript,">if (bowser.mobile && bowser.ios) { 46 | alert('Você está num dispositivo mobile da Apple!'); 47 | }; 48 | </pre> 49 | 50 | <p>Agora você não precisa mais gastar seu tempo escrevendo muitas linhas de JavaScript com <em>regex</em> para todos os lados, tentando detectar navegadores, versões, se é mobile ou desktop&#8230; O Bowser te entrega tudo isso.</p> 51 | 52 | <p>O projeto está disponível no <a href="https://github.com/ded/bowser" target="_blank">GitHub</a>.</p> 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /tags/gdg/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gdg on Tableless 5 | http://tableless.com.br/tags/gdg/index.xml 6 | Recent content in Gdg on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | GDG DevFest Extended 2015 13 | http://tableless.com.br/gdg-devfest-extended-2015/ 14 | Fri, 20 Mar 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/gdg-devfest-extended-2015/ 17 | <p>O Grupo de Desenvolvedores Google (GDG) das cidades de Salvador, Recife, Fortaleza, Belo Horizonte e Curitiba realizam no dia 28 de março o GDG DevFest Extended 2015. O objetivo é ser um evento focado nas tecnologias do Google, tendo como público alvo gestores, empreendedores, desenvolvedores e estudantes acontecendo nos estados com participações locais e remotas.</p> 18 | 19 | <p>O evento terá duração de 1 (um) dia, dedicado a palestras ministradas por especialistas reconhecidos nacionalmente. Contaremos com especialistas em várias tecnologias que apresentarão palestras, permitindo a troca de experiências com profissionais e estudantes de toda a região.</p> 20 | 21 | <p>Estão programadas apresentações de grandes nomes do cenário nacional como Wilson Mendes (Google Developer Expert AngularJS). Juan José Rodriguez (Google Developer Group Lima e Google Business Group Peru), Rafael Verger (JusBrasil), Willian Justen (Queremos!), Beto Muniz (HE:Labs) e muitos outros.</p> 22 | 23 | <p>Informações mais detalhadas, como chegar e também a página de inscrição estão nos sites do evento.</p> 24 | 25 | <p><strong>Salvador</strong></p> 26 | 27 | <p>Senai Cimatec, Av. Orlando Gomes, 1845, Piatã <a href="http://gdg­salvador.github.io/extended.html">http://gdg­salvador.github.io/extended.html</a></p> 28 | 29 | <p><strong>Belo Horizonte</strong></p> 30 | 31 | <p>UNA, João Pinheiro, Av. João Pinheiro, 580, centro <a href="http://www.gdgbh.org/extended/">http://www.gdgbh.org/extended/</a></p> 32 | 33 | <p><strong>Curitiba</strong></p> 34 | 35 | <p>Universidade Positivo ­ Campus Osório, Praça Gen. Osório, 125, centro <a href="http://extends.gdgcuritiba.com.br/">http://extends.gdgcuritiba.com.br/</a></p> 36 | 37 | <p><strong>Recife</strong></p> 38 | 39 | <p>Rua Benfica, 455, Madalena <a href="http://www.gdgrecife.com/extended/">http://www.gdgrecife.com/extended/</a></p> 40 | 41 | <p>Evento:​GDG DevFest Extended 2015 Data:​28 de março</p> 42 | 43 | <p>Horário:​ <strong>08:30</strong></p> 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /tags/servidores/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Servidores on Tableless 5 | http://tableless.com.br/tags/servidores/index.xml 6 | Recent content in Servidores on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Não se preocupe tanto com o Time To First Byte 13 | http://tableless.com.br/nao-se-preocupe-tanto-com-o-time-to-first-byte/ 14 | Mon, 11 Apr 2016 00:00:00 +0000 15 | 16 | http://tableless.com.br/nao-se-preocupe-tanto-com-o-time-to-first-byte/ 17 | <p>O pessoal da <a href="https://blog.cloudflare.com/ttfb-time-to-first-byte-considered-meaningles/">CloudFlare fez um teste muito interessante</a>, 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.</p> 18 | 19 | <p>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. O servidor responde dizendo que a página está disponível e envia mais alguns headers contendo informações sobre a página, depois, finalmente, envia o conteúdo da página.</p> 20 | 21 | <p>No teste da CloudFlare o servidor se comportou um pouco diferente. Quando ele recebe o request, ele enviou a primeira letra do termo <strong>HTTP/1.1 200 OK</strong> (ou seja, a letra H) e depois esperou por 10 segundos antes de enviar o resto dos headers e a página em si. O <a href="https://github.com/jgrahamc/ttfb">código que eles usaram foi escrito em GO</a>.</p> 22 | 23 | <p>Se você fizer um teste no WebPageTest com a página do servidor de teste do TTFB, o WebPageTest vai reportar o tempo do TTFB que o <strong>H</strong> legou para chegar no servidor e não o tempo que a página em si foi enviada.</p> 24 | 25 | <p>Medir o TTFB (Time To First Byte) remotamente, significa que você também está medindo a latência, o que obscurece o que o TTFB realmente tenta medir: quão rápido é o servidor para responder a um request.</p> 26 | 27 | <p>No artigo deles há uma descrição bem completa sobre toda essa história. O que me tira um pouco do peso, porque o WebPageTest avisou que o TTFB do Tableless é de 6 segundos. Nenhuma desculpa para não diminuir isso, mas vale pensar no que é mais importante. 😉</p> 28 | 29 | <p><a href="https://blog.cloudflare.com/ttfb-time-to-first-byte-considered-meaningles/">Confira o artigo na íntegra</a>.</p> 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /tags/zeldman/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Zeldman on Tableless 5 | http://tableless.com.br/tags/zeldman/index.xml 6 | Recent content in Zeldman on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Documentário sobre o Jeffrey Zeldman 13 | http://tableless.com.br/documentario-sobre-o-jeffrey-zeldman/ 14 | Thu, 04 Sep 2014 00:00:00 +0000 15 | 16 | http://tableless.com.br/documentario-sobre-o-jeffrey-zeldman/ 17 | <p>Eu não sei quanto tempo faz que você trabalha com desenvolvimento web. Eu trabalho há mais ou menos uns 14 anos. Quando comecei, eu era apenas um curioso e só alguns anos depois o hobby virou algo sério. Nessa época o mercado de desenvolvimento web já havia começado há tempos. A guerra dos browsers estava no auge e o W3C não tinha força suficiente para educar o mercado a seguirem as especificações.</p> 18 | 19 | <p>Foi nesse tempo que conheci o <a href="http://zeldman.com/">Jeffrey Zeldman</a> e todo seu trabalho. Se você começou a trabalhar nessa área um pouco mais tarde, muito provavelmente você não teve a oportunidade de entender o quão importante foram as iniciativas desse cara para a internet de atualmente.</p> 20 | 21 | <p>Hoje eles lançaram um pequeno documentário sobre um pouco da história do Zeldman e pode ser uma oportunidade para conhecê-lo melhor, além de saber alguns detalhes interessantes sobre a história da internet nesses anos iniciais porque ele esteve lá. Parabéns ao Zeldman pelos 20 anos de trabalho. E que venham mais 20.</p> 22 | 23 | <p>Se precisar de legendas em inglês, <a href="http://www.lynda.com/Web-Documentaries-tutorials/Jeffrey-Zeldman-20-years-Web-Design-Community/167374-2.html">veja o vídeo original</a>.</p> 24 | 25 | 26 | 27 | 28 | 99,9% dos sites web estão obsoletos 29 | http://tableless.com.br/99_dos_sites_sao_obsoletos/ 30 | Thu, 12 Jun 2003 00:00:00 +0000 31 | 32 | http://tableless.com.br/99_dos_sites_sao_obsoletos/ 33 | <p>O <a href="http://www.pedromendes.com/" target="_blank">Pedro Mendes</a> traduziu o artigo do <a href="http://www.zeldman.com" target="_blank">Zeldman</a>.</p> 34 | 35 | <p><a href="http://www.pedromendes.com/words/zeldman-200305-99percent.html" target="_blank">99,9% dos sites web estão obsoletos</a></p> 36 | 37 | <p>Lendo o artigo, eu tive mais certeza de que: <a href="http://tableless.com.br/">Tableless</a> é o bicho!</p> 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /tags/browser-detection/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Browser Detection on Tableless 5 | http://tableless.com.br/tags/browser-detection/index.xml 6 | Recent content in Browser Detection on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Detectando navegadores com Bowser 13 | http://tableless.com.br/detectando-navegadores-com-bowser/ 14 | Tue, 24 Nov 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/detectando-navegadores-com-bowser/ 17 | 18 | 19 | <h2 id="uma-ajuda-para-detectar-e-dar-suporte-a-diferentes-navegadores">Uma ajuda para detectar e dar suporte a diferentes navegadores</h2> 20 | 21 | <h3 id="o-bowser">O Bowser</h3> 22 | 23 | <p>Em muitos projetos, precisamos dar uma atenção especial para alguns navegadores (nosso querido IE, por exemplo). A proposta do <strong>Bowser</strong> é facilitar a detecção de navegadores e suas versões, minimizando os erros de detecção, e facilitando sua vida.</p> 24 | 25 | <h3 id="mãos-à-obra">Mãos à obra</h3> 26 | 27 | <p>Para começar, você precisa fazer o download do arquivo JavaScript do <strong>Bowser</strong> no <a href="https://github.com/ded/bowser" target="_blank">GitHub oficial do projeto</a>, e inclui-lo no seu HTML. Depois, basta fazer suas condicionais utilizando o objeto Javascript Bowser, que contém várias informações sobre seu navegador.</p> 28 | 29 | <p>Podemos facilmente detectar se o navegador é IE, na versão menor ou igual a 8, como a seguir:</p> 30 | 31 | <pre class="lang-javascript,">if (bowser.msie && bowser.version &lt;= 8) { 32 | alert('Atualize seu browser!'); 33 | }; 34 | </pre> 35 | 36 | <p>Ou você pode detectar a <em>engine</em> do navegador:</p> 37 | 38 | <pre class="lang-javascript,">if (bowser.webkit) { 39 | alert('A engine do seu navegador é Webkit!'); 40 | }; 41 | </pre> 42 | 43 | <p>E também pode fazer um tratamento específico pra mobile:</p> 44 | 45 | <pre class="lang-javascript,">if (bowser.mobile && bowser.ios) { 46 | alert('Você está num dispositivo mobile da Apple!'); 47 | }; 48 | </pre> 49 | 50 | <p>Agora você não precisa mais gastar seu tempo escrevendo muitas linhas de JavaScript com <em>regex</em> para todos os lados, tentando detectar navegadores, versões, se é mobile ou desktop&#8230; O Bowser te entrega tudo isso.</p> 51 | 52 | <p>O projeto está disponível no <a href="https://github.com/ded/bowser" target="_blank">GitHub</a>.</p> 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /tags/ewd/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ewd on Tableless 5 | http://tableless.com.br/tags/ewd/index.xml 6 | Recent content in Ewd on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | 14º Encontro de Web Design – SP 13 | http://tableless.com.br/14ewd/ 14 | Fri, 27 Mar 2009 00:00:00 +0000 15 | 16 | http://tableless.com.br/14ewd/ 17 | <p>Desde 2001 atraindo designers, programadores, estudantes e profissionais ligados ao segmento de web de todo o Brasil, o Encontro de Webdesign, evento pioneiro na área de internet, realiza a sua 14ª em nove capitais brasileiras em 2009: Rio de Janeiro, São Paulo, Florianópolis, Curitiba, Porto Alegre, Brasília, Belo Horizonte, Salvador e Recife.</p> 18 | 19 | <p></p> 20 | 21 | <p>Tenho dois ingressos para sortear aqui no Tableless. Como a idéia é divulgar o evento (ótimo, por sinal), vamos botar para quebrar. Se você tem blog, basta escrever sobre o evento, divulgando o realease que está escrito logo aí embaixo. Não esqueça de colocar um trackback para esse post do Tableless. Os dois primeiros trackbacks que eu receber aqui, ganharão o convite! 🙂</p> 22 | 23 | <h3 id="encontro-de-web-design-e-encontro-de-ti">Encontro de Web Design e Encontro de TI</h3> 24 | 25 | <p>Com a ajuda de colaboradores e profissionais da área, foram escolhidos como temas principais Entretenimento e Redes Sociais. Para levar à você o melhor de cada assunto, as palestras serão realizadas por Julius Wiedman, editor da Tashen, e Gil Giardelli, da Permission.</p> 26 | 27 | <p>Este ano a Arteccom traz mais uma novidade: o Encontro de Tecnologia da Informação, que está em sua 2ª edição, vai ser realizado paralelamente ao Encontro de Webdesign, nas mesmas datas e locais, mas em ambientes separados. Para saber mais sobre o ETI, acesse o site <a href="http://www.encontrodeti.com.br/">www.encontrodeti.com.br</a>.</p> 28 | 29 | <p>Profissionais especialistas em empreendedorismo e na ferramenta livre WordPress, ministrarão as oficinas, que serão oferecidas tanto para o EWD quanto para o ETI.</p> 30 | 31 | <p>Outro bom motivo para garantir já o seu ingresso é que você não precisa se preocupar em faltar o trabalho. Todos os eventos serão realizados aos sábados, das 9h às 18h. O que não vai faltar é novidade e informação para quem é apaixonado por design e gosta de estar sempre atualizado e em contato com profissionais de renome.</p> 32 | 33 | <p><a href="http://www.encontrodewebdesign.com.br/ewd-14/index.php/quero-me-inscrever">Inscreva-se agora</a> garanta o seu lugar no evento da cidade mais próxima de você.</p> 34 | 35 | <p>Nos veremos lá!</p> 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /tags/ensinar/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ensinar on Tableless 5 | http://tableless.com.br/tags/ensinar/index.xml 6 | Recent content in Ensinar on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Ensine mais 13 | http://tableless.com.br/ensine-mais/ 14 | Fri, 27 Dec 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/ensine-mais/ 17 | <p>Nosso mercado cresceu bastante durante os últimos 5 anos. Não apenas aqui no Brasil, mas no mundo todo. O front-end amadureceu e ganhou corpo.</p> 18 | 19 | <p>O Tableless existe há 10 anos. O mercado front-end brasileiro nessa época era tão pobre, que eu consigo contar nos dedos os sites e listas de discussão que eu conhecia na época sobre o assunto. Não havia muitas fontes brasileiras para ler e aprender, principalmente quando buscávamos sobre novidades das linguagens. Você precisava garimpar sites gringos ou visitar o tempo inteiro o site do W3C &#8211; que era horrível, diga-se de passagem &#8211; buscando por novidades no HTML, CSS, Javascript e outros padrões.</p> 20 | 21 | <p>Com o tempo isso mudou. Uma pancada de pessoas novas surgiram, renovaram o mercado, se juntaram com quem já estava trabalhando &#8220;na causa&#8221; e a coisa toda mudou. Graças ao esforço de uma pancada de pessoas surgiram de todos os lados blogs, websites, podcasts, palestras, fóruns e listas de discussão. Grupos em redes sociais pipocaram como se não houvesse amanhã. Isso é bom porque não há uma centralização da informação. Há uma certa democratização da informação. Grandes nomes surgiram na nossa área e isso é ótimo. Dá pra citar pelo menos uns 15 nomes importantes que você deve seguir porque produzem conteúdo fresquinho o tempo inteiro.</p> 22 | 23 | <p>Isso não seria possível se não houvessem pessoas engajadas em compartilhar conhecimento, ensinando cada vez mais. Mais importante do que aprender, é ensinar o que se aprendeu. Quando se ensina alguém, você acaba aprendendo mais, não apenas sobre tecnologia, mas também sobre didática, sobre ser sociável, sobre transformar coisas complicadas em coisas simples. Ensinar é uma das tarefas mais difíceis que aprendi na minha carreira.</p> 24 | 25 | <p>Por isso tudo, o meu apelo para você é o seguinte: ensine mais. Inaugure um blog, faça um podcast, abra um fórum, contribua em algum projeto opensource&#8230; Se você não quiser ter o trabalho de fazer tudo isso, ajude as iniciativas que já existem. Aqui mesmo no Tableless, sempre incentivamos que <a href="http://tableless.com.br/seja-um-autor/">você escreva um artigo</a> ou <a href="http://tableless.com.br/forum/">responda perguntas no nosso fórum</a>. O importante é ensinar.</p> 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tags/slidesparadevs/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Slidesparadevs on Tableless 5 | http://tableless.com.br/tags/slidesparadevs/index.xml 6 | Recent content in Slidesparadevs on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Slides para devs #11 – JSON 13 | http://tableless.com.br/slides-devs-1x-json/ 14 | Thu, 03 Oct 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/slides-devs-1x-json/ 17 | 18 | 19 | 20 | 21 | Slides para Devs #6 – Javascript 22 | http://tableless.com.br/slide-para-devs-6-js/ 23 | Sun, 21 Apr 2013 00:00:00 +0000 24 | 25 | http://tableless.com.br/slide-para-devs-6-js/ 26 | 27 | 28 | <h3 id="extra-bônus">Extra bônus:</h3> 29 | 30 | <h3 id="veja-outros-slides">Veja outros Slides</h3> 31 | 32 | <ul> 33 | <li><a href="http://tableless.com.br/slides-devs-1/" title="Slides para Devs #1">Slides para Devs #1</a></li> 34 | <li><a href="http://tableless.com.br/slides-para-devs-2/" title="Slides para Devs #2">Slides para Devs #2</a></li> 35 | <li><a href="http://tableless.com.br/slides-para-devs-3-responsive-web-design/" title="Slides para Devs #3 – Responsive Web Design">Slides para Devs #3 – Responsive Web Design</a></li> 36 | <li>[ 37 | <br /> 38 | 39 | <br /> 40 | 41 | <br /> 42 | 43 | <br /></li> 44 | </ul> 45 | 46 | <h3 id="extra-bônus-1">Extra bônus:</h3> 47 | 48 | <h3 id="veja-outros-slides-1">Veja outros Slides</h3> 49 | 50 | <ul> 51 | <li><a href="http://tableless.com.br/slides-devs-1/" title="Slides para Devs #1">Slides para Devs #1</a></li> 52 | <li><a href="http://tableless.com.br/slides-para-devs-2/" title="Slides para Devs #2">Slides para Devs #2</a></li> 53 | <li><a href="http://tableless.com.br/slides-para-devs-3-responsive-web-design/" title="Slides para Devs #3 – Responsive Web Design">Slides para Devs #3 – Responsive Web Design</a> 54 | *]<a href="http://tableless.com.br/slide-para-devs-4-retina-display-imagens-de-alta-resolucao-e-afins/" title="Slides para Devs #4 – Retina display, imagens de alta resolução e afins">4</a></li> 55 | <li><a href="http://tableless.com.br/slides-para-devs-5-design" title="Slides para Devs #5">Slides para Devs #5 &#8211; Design</a></li> 56 | </ul> 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /tags/web-design/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Design on Tableless 5 | http://tableless.com.br/tags/web-design/index.xml 6 | Recent content in Web Design on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | 14º Encontro de Web Design – SP 13 | http://tableless.com.br/14ewd/ 14 | Fri, 27 Mar 2009 00:00:00 +0000 15 | 16 | http://tableless.com.br/14ewd/ 17 | <p>Desde 2001 atraindo designers, programadores, estudantes e profissionais ligados ao segmento de web de todo o Brasil, o Encontro de Webdesign, evento pioneiro na área de internet, realiza a sua 14ª em nove capitais brasileiras em 2009: Rio de Janeiro, São Paulo, Florianópolis, Curitiba, Porto Alegre, Brasília, Belo Horizonte, Salvador e Recife.</p> 18 | 19 | <p></p> 20 | 21 | <p>Tenho dois ingressos para sortear aqui no Tableless. Como a idéia é divulgar o evento (ótimo, por sinal), vamos botar para quebrar. Se você tem blog, basta escrever sobre o evento, divulgando o realease que está escrito logo aí embaixo. Não esqueça de colocar um trackback para esse post do Tableless. Os dois primeiros trackbacks que eu receber aqui, ganharão o convite! 🙂</p> 22 | 23 | <h3 id="encontro-de-web-design-e-encontro-de-ti">Encontro de Web Design e Encontro de TI</h3> 24 | 25 | <p>Com a ajuda de colaboradores e profissionais da área, foram escolhidos como temas principais Entretenimento e Redes Sociais. Para levar à você o melhor de cada assunto, as palestras serão realizadas por Julius Wiedman, editor da Tashen, e Gil Giardelli, da Permission.</p> 26 | 27 | <p>Este ano a Arteccom traz mais uma novidade: o Encontro de Tecnologia da Informação, que está em sua 2ª edição, vai ser realizado paralelamente ao Encontro de Webdesign, nas mesmas datas e locais, mas em ambientes separados. Para saber mais sobre o ETI, acesse o site <a href="http://www.encontrodeti.com.br/">www.encontrodeti.com.br</a>.</p> 28 | 29 | <p>Profissionais especialistas em empreendedorismo e na ferramenta livre WordPress, ministrarão as oficinas, que serão oferecidas tanto para o EWD quanto para o ETI.</p> 30 | 31 | <p>Outro bom motivo para garantir já o seu ingresso é que você não precisa se preocupar em faltar o trabalho. Todos os eventos serão realizados aos sábados, das 9h às 18h. O que não vai faltar é novidade e informação para quem é apaixonado por design e gosta de estar sempre atualizado e em contato com profissionais de renome.</p> 32 | 33 | <p><a href="http://www.encontrodewebdesign.com.br/ewd-14/index.php/quero-me-inscrever">Inscreva-se agora</a> garanta o seu lugar no evento da cidade mais próxima de você.</p> 34 | 35 | <p>Nos veremos lá!</p> 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /tags/slides-para-devs/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Slides Para Devs on Tableless 5 | http://tableless.com.br/tags/slides-para-devs/index.xml 6 | Recent content in Slides Para Devs on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Slides para devs #11 – JSON 13 | http://tableless.com.br/slides-devs-1x-json/ 14 | Thu, 03 Oct 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/slides-devs-1x-json/ 17 | 18 | 19 | 20 | 21 | Slides para devs #10 – GIT 22 | http://tableless.com.br/slides-devs-10-git/ 23 | Thu, 26 Sep 2013 00:00:00 +0000 24 | 25 | http://tableless.com.br/slides-devs-10-git/ 26 | 27 | 28 | 29 | 30 | Slides para devs #5 – Design 31 | http://tableless.com.br/slides-para-devs-5-design/ 32 | Tue, 09 Apr 2013 00:00:00 +0000 33 | 34 | http://tableless.com.br/slides-para-devs-5-design/ 35 | 36 | 37 | <h1 id="extra-bônus">Extra bônus</h1> 38 | 39 | <h3 id="veja-outros-slides">Veja outros Slides</h3> 40 | 41 | <ul> 42 | <li><a href="http://tableless.com.br/slides-devs-1/" title="Slides para Devs #1">Slides para Devs #1</a></li> 43 | <li><a href="http://tableless.com.br/slides-para-devs-2/" title="Slides para Devs #2">Slides para Devs #2</a></li> 44 | <li><a href="http://tableless.com.br/slides-para-devs-3-responsive-web-design/" title="Slides para Devs #3 – Responsive Web Design">Slides para Devs #3 – Responsive Web Design</a></li> 45 | <li>[# Extra bônus</li> 46 | </ul> 47 | 48 | <h3 id="veja-outros-slides-1">Veja outros Slides</h3> 49 | 50 | <ul> 51 | <li><a href="http://tableless.com.br/slides-devs-1/" title="Slides para Devs #1">Slides para Devs #1</a></li> 52 | <li><a href="http://tableless.com.br/slides-para-devs-2/" title="Slides para Devs #2">Slides para Devs #2</a></li> 53 | <li><a href="http://tableless.com.br/slides-para-devs-3-responsive-web-design/" title="Slides para Devs #3 – Responsive Web Design">Slides para Devs #3 – Responsive Web Design</a> 54 | *]<a href="http://tableless.com.br/slide-para-devs-4-retina-display-imagens-de-alta-resolucao-e-afins/" title="Slides para Devs #4 – Retina display, imagens de alta resolução e afins">4</a></li> 55 | </ul> 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /tags/emmet/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Emmet on Tableless 5 | http://tableless.com.br/tags/emmet/index.xml 6 | Recent content in Emmet on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Emmet LiveStyle 13 | http://tableless.com.br/emmet-livestyle/ 14 | Tue, 06 Aug 2013 00:00:00 +0000 15 | 16 | http://tableless.com.br/emmet-livestyle/ 17 | <p>Dos mesmos criadores de <a href="http://tableless.com.br/bye-zen-coding-bem-vindo-emmet/">Emmet</a>, conheça o <a href="http://livestyle.emmet.io">Emmet LiveStyle</a>.</p> 18 | 19 | <p>O Emmet LiveStyle é um plugin que permite que ao editar o código CSS você veja as alterações na hora, on the fly!</p> 20 | 21 | <p>A iniciativa é simples e você já deve ter visto milhares de outras iniciativas, mas agora eu acho que fizeram do jeito correto. A ideia de um editor bidirecional é que a partir do momento que você edita o código CSS, você consegue ver as alterações na hora, economizando o tempo de alternar janelas, salvar arquivos e etc. Não importa também se você altera o CSS direto no browser ou no seu editor, as modificações serão sincronizadas nessas duas interfaces. O Emmet LiveStyle não altera seu código fonte, ele apenas mapeia as mudanças, mantendo todo o código intacto mas aplicando suas modificações em cima do código já existente.</p> 22 | 23 | <p>Ele funciona em Chrome, Safari em conjunto com Sublime Text. Se você usa dois monitores, vai adorar e com certeza vai ser uma daquelas coisas que depois que se acostumar, nunca mais vai querer editar código de outra forma. Abaixo, veja um vídeo de demonstração:</p> 24 | 25 | <p>O pessoal listou em seu site algumas features:</p> 26 | 27 | <ul> 28 | <li>Instant updates: see changes as-you-type. No file saving, no page reloading.</li> 29 | <li>No local files required.</li> 30 | <li>Cross-platform</li> 31 | <li>Multi-view and multi-device updates. You can open the same page in different windows and get instant updates in all of them. If your monitor large enough, you can easily tweak responsive design as never before! And yes, changes made in DevTools of one window will be automatically applied to other ones.</li> 32 | <li>Multi-site update. You can even live edit different web-sites, for example, desktop and mobile versions of you web-site that shares the same CSS code base.</li> 33 | <li>Extremely easy setup: just open CSS file in editor and associate it with the browser one in LiveStyle browser pane. No complex mappings, patterns etc.</li> 34 | </ul> 35 | 36 | <p>Leia as instruções e <a href="http://livestyle.emmet.io/install/">instale agora</a> para testar.</p> 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /author/joédyson-bezerra/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Joédyson Bezerra on Tableless 5 | http://tableless.com.br/author/jo%C3%A9dyson-bezerra/index.xml 6 | Recent content in Joédyson Bezerra on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | Material Design na barra de navegação & status do Chrome 13 | http://tableless.com.br/material-design-na-barra-de-navegacao-status-chrome/ 14 | Mon, 27 Apr 2015 00:00:00 +0000 15 | 16 | http://tableless.com.br/material-design-na-barra-de-navegacao-status-chrome/ 17 | <p>Recentemente muitos aplicativos já estão seguindo essa nova tendência de aplicar o material design do google no seus aplicativos mas meu foco hoje não são os aplicativos mas sim em sites responsivos, o que isso de aplicar material de design na barra de navegação?</p> 18 | 19 | <p><a href="http://tableless.com.br/wp-content/uploads/2015/04/img.png"><img class="alignnone size-full wp-image-48412" src="http://tableless.com.br/wp-content/uploads/2015/04/img.png" alt="img" width="401" height="200" /></a></p> 20 | 21 | <p>Pois bem vamos aplicar essa barra de status alterada e a barra de navegação também (Obs: Só vai pegar em Android 5.0 ou superior com Chome instalado)</p> 22 | 23 | <p>Eu estava navegando em uma matéria do Tecmundo e quando o site terminou de carregar me deparei com a barra do Chrome customizada nas cores do site. Essa técnica está sendo cada vez mais usados por sites aí fora, não vi ainda websites brasileiros usando a barra customizada, até agora, só percebi no Tecmundo.</p> 24 | 25 | <p><a href="http://tableless.com.br/wp-content/uploads/2015/04/Screenshot_2015-04-23-19-34-26.png"><img class="alignnone size-full wp-image-48413" src="http://tableless.com.br/wp-content/uploads/2015/04/Screenshot_2015-04-23-19-34-26.png" alt="Screenshot_2015-04-23-19-34-26" width="720" height="1280" /></a></p> 26 | 27 | <p>Comecei então a procurar como isso pode ser feito e me assustei com a facilidade: basta inserir uma metatag e pronto: a barra superior do Chrome do Android 5.0 fica customizada.</p> 28 | 29 | <pre class="lang-html">&lt;meta name="theme-color" content="#ea2f4a"&gt; 30 | </pre> 31 | 32 | <p>Esse é o resultado:</p> 33 | 34 | <p><a href="http://tableless.com.br/wp-content/uploads/2015/04/Screenshot_2015-04-23-21-41-17.png"><img class="alignnone size-full wp-image-48414" src="http://tableless.com.br/wp-content/uploads/2015/04/Screenshot_2015-04-23-21-41-17.png" alt="Screenshot_2015-04-23-21-41-17" width="720" height="1280" /></a></p> 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /tags/trolls/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Trolls on Tableless 5 | http://tableless.com.br/tags/trolls/index.xml 6 | Recent content in Trolls on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | BlogBits Podcast #4 – Anúncios na Web 13 | http://tableless.com.br/blogbits-podcast-4-anuncios-na-web/ 14 | Fri, 24 Mar 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/blogbits-podcast-4-anuncios-na-web/ 17 | <p>No ar mais um podcast do <a href="http://blogbits.com.br/">BlogBits</a>.</p> 18 | 19 | <p>Desta vez com a presença de <a href="http://brunotorres.net/">Bruno Torres</a>, <a href="http://meiobit.com/">Leo Faoro</a>, <a href="http://mobilelife.com.br/">Rigonatti</a> e <a href="http://guileite.com/">Gui Leite</a>. Nem eu nem o Danilo Medeiros participamos. Eu gostaria muito de ter participado. Falamos sobre ferramentas como o <a href="http://google.com/adsense">Google Adsense</a>, <a href="http://mercadolivre.com/">Mercado Livre</a>, <a href="http://submarino.com/">Submarino</a> e outras. Discutimos ainda um pouco sobre anúncios em Podcasts e outros assuntos, em um programa com 39 minutos e 17MB.</p> 20 | 21 | <p>A melhor maneira de acompanhar o podcast é adicionar o <a href="http://blogbits.com.br/feed/">feed</a> em seu agregador favorito, mas você pode também baixar o programa em mp3 diretamente <a href="http://blogbits.com.br/podcasts/blogbits-podcast-4.mp3">aqui</a>.</p> 22 | 23 | <p>Esse assunto é um muito polêmico&#8230; eu concordo totalmente com a opinião que o Bruno Torres expressou nesse podcast.</p> 24 | 25 | <p>Algumas pessoas (ou <a href="http://tableless.com.br/nao-alimente-os-trolls">Trolls</a>?) sempre reclamam dos anúncios neste site. Engraçado que eles falam como se os anúncios fossem aqueles feitos em flash que viajam pela tela te impedindo de ler o artigo.</p> 26 | 27 | <p>Eu coloquei algum limite para a propaganda aqui do Tableless. Os adsense do google sempre são textuais e aparecem no máximo 4 por página. O anúncio (a primeira imagem da coluna da esquerda) da <a href="http://visie.com.br/">Visie</a> (minha empresa e do <a href="http://elcio.com.br/">Elcio</a>) não é abusivo. Os outros, Dreamhost, Firefox e etc, ficam lá embaixo na coluna da esquerda&#8230; Muito abaixo da dobra. Realmente não tenho idéia do que eles reclamam.</p> 28 | 29 | <p>E você, o que acha?</p> 30 | 31 | <p><small>Cuidado com as palavras e por favor, se identifique, anonimato eu bloqueio mesmo, não importando o conteúdo do comentário.</small></p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/dreamhost/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dreamhost on Tableless 5 | http://tableless.com.br/tags/dreamhost/index.xml 6 | Recent content in Dreamhost on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | BlogBits Podcast #4 – Anúncios na Web 13 | http://tableless.com.br/blogbits-podcast-4-anuncios-na-web/ 14 | Fri, 24 Mar 2006 00:00:00 +0000 15 | 16 | http://tableless.com.br/blogbits-podcast-4-anuncios-na-web/ 17 | <p>No ar mais um podcast do <a href="http://blogbits.com.br/">BlogBits</a>.</p> 18 | 19 | <p>Desta vez com a presença de <a href="http://brunotorres.net/">Bruno Torres</a>, <a href="http://meiobit.com/">Leo Faoro</a>, <a href="http://mobilelife.com.br/">Rigonatti</a> e <a href="http://guileite.com/">Gui Leite</a>. Nem eu nem o Danilo Medeiros participamos. Eu gostaria muito de ter participado. Falamos sobre ferramentas como o <a href="http://google.com/adsense">Google Adsense</a>, <a href="http://mercadolivre.com/">Mercado Livre</a>, <a href="http://submarino.com/">Submarino</a> e outras. Discutimos ainda um pouco sobre anúncios em Podcasts e outros assuntos, em um programa com 39 minutos e 17MB.</p> 20 | 21 | <p>A melhor maneira de acompanhar o podcast é adicionar o <a href="http://blogbits.com.br/feed/">feed</a> em seu agregador favorito, mas você pode também baixar o programa em mp3 diretamente <a href="http://blogbits.com.br/podcasts/blogbits-podcast-4.mp3">aqui</a>.</p> 22 | 23 | <p>Esse assunto é um muito polêmico&#8230; eu concordo totalmente com a opinião que o Bruno Torres expressou nesse podcast.</p> 24 | 25 | <p>Algumas pessoas (ou <a href="http://tableless.com.br/nao-alimente-os-trolls">Trolls</a>?) sempre reclamam dos anúncios neste site. Engraçado que eles falam como se os anúncios fossem aqueles feitos em flash que viajam pela tela te impedindo de ler o artigo.</p> 26 | 27 | <p>Eu coloquei algum limite para a propaganda aqui do Tableless. Os adsense do google sempre são textuais e aparecem no máximo 4 por página. O anúncio (a primeira imagem da coluna da esquerda) da <a href="http://visie.com.br/">Visie</a> (minha empresa e do <a href="http://elcio.com.br/">Elcio</a>) não é abusivo. Os outros, Dreamhost, Firefox e etc, ficam lá embaixo na coluna da esquerda&#8230; Muito abaixo da dobra. Realmente não tenho idéia do que eles reclamam.</p> 28 | 29 | <p>E você, o que acha?</p> 30 | 31 | <p><small>Cuidado com as palavras e por favor, se identifique, anonimato eu bloqueio mesmo, não importando o conteúdo do comentário.</small></p> 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tags/memex/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Memex on Tableless 5 | http://tableless.com.br/tags/memex/index.xml 6 | Recent content in Memex on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | História da Web – Uma timeline 13 | http://tableless.com.br/historia-da-web-uma-timeline/ 14 | Wed, 03 Oct 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/historia-da-web-uma-timeline/ 17 | <p>Se você trabalha com web deve pelo menos ter a curiosidade de como tudo isso surgiu. Não foi algo criado subitamente, houve um processo, uma evolução que levou a web a ficar do jeito que é hoje. Essa história é muito longa e complicada. Por conta disso um cara chamado John Allsopp passou algum tempo ajudando a formar e entender como aconteceu a história da web e lançou agora o <a href="http://webdirections.org/history/#0">The Web History Timeline Project</a> para ajudar a mapear todos estes momentos.</p> 18 | 19 | <p>A grande questão da história da web é: onde tudo começou? Quão antiga é a ideia de web?</p> 20 | 21 | <p>Mas a ideia do projeto não é mapear a história completa da web. Allsopp está interessado em apontar os pontos mais importantes da história como a publicação de padrões importantes, lançamentos de softwares como o primeiro Browser, a fundação do W3C e outras coisas.</p> 22 | 23 | <p>Interessante é perceber que no começo da <a href="http://webdirections.org/history/#0">Timeline</a> parece que o foco dos antigos pesquisadores e pensadores era entender em como organizar uma grande massa de informação, de forma que essa informação pudesse ser reutilizada. A história do Hipertexto é recheada de ideias interessantes sobre como fazer isso. Daí surgem assuntos que levam ao <a href="http://www.tipografos.net/internet/vanevar-bush.html">Vannevar Bush</a> com <a href="http://en.wikipedia.org/wiki/Memex">Memex</a>, <a href="http://en.wikipedia.org/wiki/Ted_Nelson">Ted Nelson</a> com o <a href="http://xanadu.com">projeto Xanadu</a> e outras histórias mais. Perceba como perto de 1990 um monte de coisas começaram a surgir mudando a forma como desenvolvíamos para internet.</p> 24 | 25 | <p>A foto de destaque deste post é do <a href="http://en.wikipedia.org/wiki/Mundaneum">The Mundaneum</a>, fundado pelo Paul Otlet &#8211; que cunhou o conceito de uma rede de computadores conectada em 1934 &#8211; e o Henri La Fontaine. O The Mundaneum tinha o objetivo de recolher todo conhecimento do mundo e classificá-lo de acordo com o sistema que eles desenvolveram chamado de Classificação Decimal Universal &#8211; Universal Decimal Classification.</p> 26 | 27 | <p>O projeto foi construído com a biblioteca Javascript <a href="http://timeline.verite.co">Timeline.js</a>.</p> 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /tags/xanadu/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Xanadu on Tableless 5 | http://tableless.com.br/tags/xanadu/index.xml 6 | Recent content in Xanadu on Tableless 7 | Hugo -- gohugo.io 8 | pt-br 9 | 10 | 11 | 12 | História da Web – Uma timeline 13 | http://tableless.com.br/historia-da-web-uma-timeline/ 14 | Wed, 03 Oct 2012 00:00:00 +0000 15 | 16 | http://tableless.com.br/historia-da-web-uma-timeline/ 17 | <p>Se você trabalha com web deve pelo menos ter a curiosidade de como tudo isso surgiu. Não foi algo criado subitamente, houve um processo, uma evolução que levou a web a ficar do jeito que é hoje. Essa história é muito longa e complicada. Por conta disso um cara chamado John Allsopp passou algum tempo ajudando a formar e entender como aconteceu a história da web e lançou agora o <a href="http://webdirections.org/history/#0">The Web History Timeline Project</a> para ajudar a mapear todos estes momentos.</p> 18 | 19 | <p>A grande questão da história da web é: onde tudo começou? Quão antiga é a ideia de web?</p> 20 | 21 | <p>Mas a ideia do projeto não é mapear a história completa da web. Allsopp está interessado em apontar os pontos mais importantes da história como a publicação de padrões importantes, lançamentos de softwares como o primeiro Browser, a fundação do W3C e outras coisas.</p> 22 | 23 | <p>Interessante é perceber que no começo da <a href="http://webdirections.org/history/#0">Timeline</a> parece que o foco dos antigos pesquisadores e pensadores era entender em como organizar uma grande massa de informação, de forma que essa informação pudesse ser reutilizada. A história do Hipertexto é recheada de ideias interessantes sobre como fazer isso. Daí surgem assuntos que levam ao <a href="http://www.tipografos.net/internet/vanevar-bush.html">Vannevar Bush</a> com <a href="http://en.wikipedia.org/wiki/Memex">Memex</a>, <a href="http://en.wikipedia.org/wiki/Ted_Nelson">Ted Nelson</a> com o <a href="http://xanadu.com">projeto Xanadu</a> e outras histórias mais. Perceba como perto de 1990 um monte de coisas começaram a surgir mudando a forma como desenvolvíamos para internet.</p> 24 | 25 | <p>A foto de destaque deste post é do <a href="http://en.wikipedia.org/wiki/Mundaneum">The Mundaneum</a>, fundado pelo Paul Otlet &#8211; que cunhou o conceito de uma rede de computadores conectada em 1934 &#8211; e o Henri La Fontaine. O The Mundaneum tinha o objetivo de recolher todo conhecimento do mundo e classificá-lo de acordo com o sistema que eles desenvolveram chamado de Classificação Decimal Universal &#8211; Universal Decimal Classification.</p> 26 | 27 | <p>O projeto foi construído com a biblioteca Javascript <a href="http://timeline.verite.co">Timeline.js</a>.</p> 28 | 29 | 30 | 31 | 32 | --------------------------------------------------------------------------------