Guia de Estudo Front-End

gistfile1.txt

HTML5 E SEMÂNTICA:
    
    HTML5 - http://wbruno.com.br/html/semantica-html5/

    Microdata - https://schema.org/docs/gs.html

        http://tableless.com.br/drops-13-o-basico-sobre-semantica-html5-e-microdata/
        http://tableless.com.br/introducao-a-microdata-no-html5/
        http://diveintohtml5.com.br/extensibility.html
        http://loopinfinito.com.br/2012/05/02/microdata/
        http://loopinfinito.com.br/2012/04/26/marcacao-semantica/
        http://blog.popupdesign.com.br/schema-org-dando-significado-ao-conteudo-na-internet/
        http://www.w3.org/TR/microdata/
        https://html.spec.whatwg.org/multipage/microdata.html

    RDFa - http://rdfa.info/

    JSON-LD - http://json-ld.org/index.html

    Open Graph Protocol - http://ogp.me/

        http://www.modelomental.com.br/web-semantica/conhecendo-o-facebook-open-graph-protocol
        http://blog.popupdesign.com.br/facebook-open-graph/
        http://www.seomaster.com.br/blog/como-usar-o-facebook-opengraph

    Artigos sobre Structure Data

        http://stackoverflow.com/questions/6402528/opengraph-or-schema-org
        http://www.seoskeptic.com/structured-data-markup-validation-testing-tools/
        https://support.modernretail.com/hc/en-us/articles/201419856-Open-Graph-Microdata-RDFa
        http://manu.sporny.org/2012/mythical-differences/
        http://www.agenciamestre.com/marketing-digital/posicionando-o-seu-site-para-o-google-e-para-clientes/
        http://www.agenciamestre.com/blog/ - [seguir]


CSS3, PRÉ-PROCESSADORES, MODULARIZAÇÃO:

    Seletores e Propriedades

        http://css-tricks.com/almanac/

    LESS

        http://lesscss.org/

    SASS

        http://sass-lang.com/

    STYLUS

        http://learnboost.github.io/stylus/

    MODULAR 

        http://tableless.com.br/css-modular-breve-explicacao/
        http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/
        http://newaeonweb.com.br/articles/css-modular-com-smacss/

    SMACSS

        https://smacss.com/

    OOCSS

        http://oocss.org/

    DRY CSS

        http://vimeo.com/38063798
        http://www.vanseodesign.com/css/dry-principles/
    
    ITCSS
    
        http://www.hugobessa.com.br/posts/ITCSS-uma-maneira-de-pensar-arquiteturas-css/
        https://github.com/inuitcss/getting-started
        https://www.youtube.com/watch?v=1OKZOV-iLj4

JAVASCRIPT:
    
    BASICS

        https://developer.mozilla.org/en/learn/javascript

    API DOM

        https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
    
    API BOM

        https://developer.mozilla.org/en-US/docs/Web/API/Window

    AJAX

        https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
    
    Patterns

        Module: http://bit.ly/1wbCbWM
        Singleton: http://bit.ly/ZZY7XH
        Factory: http://bit.ly/1wEIQbO
        Decorator: http://bit.ly/1vcQV3m
        mv*: http://www.sitepoint.com/anatomy-javascript-mv-framework/

    Escrevendo Javascript Modular:
        
        JS Modular 1: http://bit.ly/1tI9PUl
        JS Modular 2: http://bit.ly/1tfuQmt
        JS Modular Final: http://bit.ly/1DsPPF1

    AMD

        http://addyosmani.com/writing-modular-js/
        http://en.wikipedia.org/wiki/Asynchronous_module_definition
        http://dojotoolkit.org/documentation/tutorials/1.9/modules/
        http://dailyjs.com/2011/12/22/framework/

        REQUIRE 

            https://egghead.io/lessons/requirejs-introduction-to-requirejs
            http://requirejs.org/docs/whyamd.html
        

FRAQMEWORK JAVASCRIPT:
    
    Exploring JavaScript MV*

        http://bit.ly/1tJ0xrh - Part 1

    Helping you select an MV* framework

        http://todomvc.com/

    Artigos sobre MV*

        http://www.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/
        http://www.neo.com/2014/06/30/9-things-to-consider-when-choosing-a-javascript-mv-framework
        http://www.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/
        http://www.infoq.com/research/top-javascript-mvc-frameworks
        http://www.airpair.com/js/javascript-framework-comparison

    BACKBONE

        https://www.codeschool.com/courses/anatomy-of-backbone-js
        http://backbonetutorials.com/
        http://javascriptissexy.com/learn-backbone-js-completely/
        https://www.youtube.com/watch?v=FZSjvWtUxYk&list=UUS4PhD6QK_m0C0C2M8xAWNA

    ANGULAR

        https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/
        http://learn-angular.org/
        http://www.w3schools.com/angular/
        http://javascriptbrasil.com/2013/10/18/guia-definitivo-para-aprender-angularjs-em-um-dia/

    EMBER

        https://www.codeschool.com/courses/warming-up-with-ember-js
        http://www.quora.com/What-is-the-best-way-to-learn-Ember-js
        http://emberjs.com/guides/
        http://elweb.co/want-to-learn-ember-js-start-here/

    KNOCKOUT

        http://learn.knockoutjs.com/
        http://www.codeproject.com/Articles/680553/Knockout-js-for-Beginners
        https://www.youtube.com/watch?v=R3O0GyR7U8A&list=UUaicYr6yeMyIrPKO6tbA34Q
        http://www.sitepoint.com/beginners-guide-to-knockoutjs-part-1/

    REACT

        http://facebook.github.io/react/docs/getting-started.html
        http://scotch.io/tutorials/javascript/learning-react-getting-started-and-concepts
        http://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework/

    POLYMER

        https://www.polymer-project.org/docs/start/tutorial/intro.html
        http://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475
        http://stackoverflow.com/questions/25362488/what-are-the-best-resources-to-learn-polymer


RESPONSIVE LAYOUT:   
    
    Grid System

        Jeet.gs

    Framework

        Bootstrap3 - http://getbootstrap.com/

        Foundation - http://foundation.zurb.com/

        AngularStrap - http://mgcrea.github.io/angular-strap/


CROSS-BROWSER TESTING/DEBUGGING:

    FIREFOX DEVELOPER TOOLS
 
        https://developer.mozilla.org/en-US/docs/Tools/Debugger

    GOOGLE DEVELOPER TOOLS
 
        https://developer.chrome.com/devtools/docs/javascript-debugging
        https://www.codeschool.com/courses/discover-devtools


GIT:
    
    http://git-scm.com/

    Documentação

        http://git-scm.com/book/pt-br/v1

    Videos

        http://git-scm.com/videos


AUTOMAÇÃO:

    Gulp - http://gulpjs.com/

        https://www.codefellows.org/blog/quick-intro-to-gulp-js
        http://www.sitepoint.com/introduction-gulp-js/

        Lerning Gulp Youtube

            https://www.youtube.com/watch?v=wNlEK8qrb0M
            https://www.youtube.com/watch?v=Kh4eYdd8O4w
            https://www.youtube.com/watch?v=YBGeJnMrzzE
            https://www.youtube.com/watch?v=0luuGcoLnxM
            https://www.youtube.com/watch?v=cg7lwX0u-U0
            https://www.youtube.com/watch?v=rF6niaDKcxE
            https://www.youtube.com/watch?v=o24f4imRbxQ
            https://www.youtube.com/watch?v=r5fvdIa0ETk
            https://www.youtube.com/watch?v=oXxMdT7T9qU
            https://www.youtube.com/watch?v=v259QplNDKk
            https://www.youtube.com/watch?v=vGCzovUFBIY

EDITOR DE IMAGEM:

    PHOTOSHOP

        http://cristianoweb.net/criacao/layouts/criando-layouts-em-psd-pensando-no-front-end-e-back-end
        http://www.techtudo.com.br/dicas-e-tutoriais/noticia/2013/04/conheca-teclas-de-atalho-do-photoshop-e-facilite-o-trabalho-de-edicao.html
        http://www.creativebloq.com/photoshop/plugins-web-design-41411332
        http://www.pixafy.com/blog/2012/08/shortcuts-in-photoshop-for-front-end-developers/
        http://rafaltomal.com/a-web-developerss-guide-to-photoshop/

    SKETCH

        https://www.youtube.com/playlist?list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
        https://designcode.io/sketch
        http://www.learnsketch.com/tutorials.html


    ARTIGOS

        http://blog.mengto.com/sketch-vs-photoshop/


OSX:
    
    https://www.youtube.com/watch?v=eSLFB5rxSco


BACK-SERVER
    
    Node.JS

    Ruby - Verificar Mercado

DB (SQL e NOSQL)

    mySQL


    postGRE


    RethinkDB