Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Project Lab Squirrel #1

Project Lab Squirrel #1

Location: My home
Time: 26 April 2014 (Sat)

Mu-An Chiou

April 27, 2014
Tweet

More Decks by Mu-An Chiou

Other Decks in Technology

Transcript

  1.  ḱᙿᖳᔚᩲ᤼࿴
    Project Lab Squirrel #1

    View full-size slide

  2. NOTES

    http://goo.gl/kMDtjt

    View full-size slide

  3. ቝ᮱᧣ᡦᥭፖᙚ
    HOW DO WEBSITES WORK?

    View full-size slide

  4. Domain - IP
    Server - Browser
    ቝ᜼ኍ᳒
    ᑽᏘ࿣ᫌ࿸ ᇧᄸ࿣
    Ộᙈ IP

    View full-size slide

  5. Domain
    google.com
    IP
    192.168.0.0

    View full-size slide

  6. SERVER
    ᑽᏘ࿣ᫌ࿸
    BROWSER
    Chrome, Firefox, IE
     

    View full-size slide



  7. څզhttp://muan.co/doge.html
    ޷ɼڅ㟬
    ᔒ༗ഝݸ౦੢
    200
    404
     http status codes
    oR

    View full-size slide

  8. CODE
    ᩔᙚሳ

     DATABASE
    ᥫᇋນ
    LIVE ON A SERVER

    View full-size slide

  9. FRONT-END
    ᧸ၭ

     DATABASE
    ᥫᇋນ
    BACK-END
    ἦၭ

    View full-size slide

  10. FRONT-END
    ᧸ၭ

    HTML
    CSS
    JAVASCRIPT

    View full-size slide

  11. FRONT-END
    ᧸ၭ

    HTML
    CSS
    JAVASCRIPT

    View full-size slide

  12. BACK-END
    ἦၭ

    RUBY
    PYTHON
    PHP

    View full-size slide

  13. programming
    languageS
    ᩔᙚ᜔ᜡ

    View full-size slide

  14. SYNTAX
    ᜔᎚

    View full-size slide

  15. ᱅የฒᶝᙎ᜔ᜡ HTML
    HyperText Markup Language My WEBSITE

    View full-size slide

  16. ෺༽
    UJUMF.Z8*5&UJUMF
    ᵶ༽
    ျᠤ

    View full-size slide

  17. ෺༽
    EJWDMBTTOBNFNVBOEJW
    ᵶ༽
    ျᠤ
    ATTRIBUTE VALUE
    ᐠิ

    View full-size slide

  18. CPYIFJHIUDMBTTTIJQQFEUPIPNF
    PWFSXFJHIUJECPYGPSCPPLT
    CPPLT
    CPY
    ෺༽
    ᵶ༽
    ျᠤ
    ATTRIBUTE VALUE
    ᐠิ

    View full-size slide

  19. BISFG໢ᅿ࿈໊݁᜝B
    IେඪI
    I෭ඪI
    IதඪI
    IখඪI
    V༗ఈઢతࣈV
    TUSPOHૈᱪతࣈTUSPOH
    JNHTSDᅷย໢ᅿBMUᅷยղᬶJNH
    CS

    View full-size slide

  20. Ყᰘᜀᙚᶡ CSS
    Cascading Style Sheets TABLE { COLOR: RED }

    View full-size slide

  21. ኷ᶝ
    UBCMF\DPMPSSFEQBEEJOHQY^
    VALUE
    KEY VALUE
    KEY
    ᐠิ

    View full-size slide

  22. EJWDMBTTSFEJENVBOTOBNF
    .6"/$)*06
    EJW
    EJW\DPMPSCMVF^
    SFE\DPMPSSFE^
    NVBOTOBNF\DPMPSQVSQMF^
    HTML
    CSS
    Hey HUMAN!
    Hey GIRL!
    Hey MU-AN!
    There might be 20 HUMANS.
    There might be 10 GIRLs.
    There is only one person
    called Mu-AN!
    So this rules!

    View full-size slide

  23. NESTING/
    INDENTION
    ᪫ᖂ᱾፮

    View full-size slide

  24. EJWDMBTTQMBUF
    TQBODMBTTpTI'*4)TQBO
    EJW
    QMBUFpTI\
    DPMPSCMVF
    ^
    HTML
    CSS

    View full-size slide

  25. GitHub Pages
    ෼ڗڅશʂੈʂքʂ

    View full-size slide

  26. Git

    REPOSITORY ఔࣜࢿྉᇄ

    BRANCH ෼ࢧฏߦੈք

    COMMIT ঝ୚ఏަ

    DIFF ࠩҟ

    View full-size slide

  27. PAGES.github.com
    github.com/lab-squrriel

    View full-size slide

  28. ᷀ᮈ฼
    Project Lab Squirrel #1


    View full-size slide