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

Lecture 8: CSCI E-1 Spring 2013

9e4d3e53f8525fdff00691a8b843e66b?s=47 Tommy MacWilliam
April 17, 2013
Education
0
140

Lecture 8: CSCI E-1 Spring 2013

9e4d3e53f8525fdff00691a8b843e66b?s=128

Tommy MacWilliam

April 17, 2013
Tweet

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
140
Lecture 6: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
260
Lecture 7: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
220
Lecture 5: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
230
Incorporating Version Control into Programming Courses
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
100
Lecture 4: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
200
Lecture 3: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
260
Lecture 2: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
460
Lecture 1: CSCI E-1 Spring 2013
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
300

Other Decks in Education

See All in Education
フォトディレクトリってなに？〜みんなで写真をアップしてみよう！〜｜WordPress Mega Meetup Japan 2022 Spring
5ea209f8c1303acd3863e6d4ba8a64c7?s=48 shuseitoda
0
190
多様なメンター、多様な基準
Fffb9af58e08cf384f2a8c1c40c3d38d?s=48 yasulab
4
14k
【3分でわかるNCS総合研究所】サービス概要
C24a41d50b8af0a7d642a97f68f5b9de?s=48 kojiyamamura222
0
100
革新技術と社会共創A「AIと地図」
5314ec2302336bf68c95bdb5b1476227?s=48 furuhashilab
1
180
Baparekraf Developer Day 2022 - Front-End (Sandhika Galih)
349a7f52975989094c75c055f9f6ba25?s=48 dicodingevent
0
540
Острые кишечные инфекции
Da3e0994b711c4533c457d4bf3edba7c?s=48 msalavei
0
360
Gesture-based Interaction - Lecture 8 - Next Generation User Interfaces (4018166FNR)
1135dc242dcff3b90ae46fc586ff4da8?s=48 signer
PRO
0
680
Monaca Education EdTech導入補助金を活用した 無料導入説明会
49152f9ea4577167477f76489a4bbbf3?s=48 asial_edu
0
460
（広く皆さんに支えられて）勝手にやっています
B2d2db24417f320825916f3c60b22408?s=48 usamiko
0
3.8k
VT22 - DA395A - jQuery & Ajax
1e708b2afb8622d5c5f070a94a3425a9?s=48 tibbelit
0
160
Data Management and Analytics Specialisation
1135dc242dcff3b90ae46fc586ff4da8?s=48 signer
PRO
0
410
東京大学深層学習（Deep Learning基礎講座2022）深層学習と自然言語処理
E75f95452aa223da3346062625346bef?s=48 verypluming
25
18k

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
Imperfection Machines: The Place of Print at Facebook
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
12k
Thoughts on Productivity
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
43
2.3k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.5k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
3k
Building Better People: How to give real-time feedback that sticks.
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
344
17k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k

Transcript

  1. Computer Science E-1 Lecture 8: Web Development

  2. Exam II

  3. Review 4/22 7:30-8:30pm

  4. Web Server

  5. None

  6. HTML

  7. <h1>CSCI E-1</h1>

  8. <h1>CSCI E-1</h1>

  9. <h1>CSCI E-1</h1>

  10. <h1>CSCI E-1</h1>

  11. <!doctype html>

  12. <html>

  13. <head>

  14. <title>Page title</title>

  15. <body>

  16. <!doctype html> <html> <head>...</head> <body>...</body> </html>

  17. <p>Paragraph text</p>

  18. <b>Bold text</b>

  19. <i>Italicized text</i>

  20. <b><i>Bold and italic</i></b>

  21. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

  22. <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  23. <table> <tr> <td>table cell</td> </tr> </table>

  24. <a href=“http://google.com”>Google</a>

  25. <img src=“cat.jpg” />

  26. Example

  27. Valid HTML

  28. http://validator.w3.org/

  29. CSS

  30. Selectors

  31. Selectors • p

  32. Selectors • p • #foo • <p id=“foo”>

  33. Selectors • p • #foo • <p id=“foo”> • .bar

    • <p class=“bar”>

  34. Rules

  35. #foo { color: blue; }

  36. #foo { color: blue; }

  37. #foo { color: blue; }

  38. #foo { color: blue; }

  39. #foo { color: blue; }

  40. #foo { color: blue; }

  41. .bar { background: red; width: 300px; }

  42. p { font-size: 18px; }

  43. Box Model

  44. Box Model

  45. #navbar a { margin: 10px; }

  46. h1, p { padding: 10px; }

  47. Block vs. Inline

  48. <style>

  49. Example

  50. <link rel=“stylesheet” href=“...” />

  51. Example

  52. Layout

  53. <div>

  54. <span>

  55. <!-- comments -->

  56. Example

  57. Bootstrap

  58. http://twitter.github.io/bootstrap/

  59. CSS Grid

  60. None
  61. None

  62. Example

  63. Flat UI

  64. http://designmodo.github.io/Flat-UI/

  65. Example

  66. Setting up a Website

  67. Setting up a Website • find a domain name

  68. http://instantdomainsearch.com/

  69. Registrars • GoDaddy • NameCheap • Network Solutions • Name.com

  70. Setting up a Website • find a domain name •

    find a web host

  71. Web Hosts • 1&1 • BlueHost • DreamHost • HostGator

    • Linode

  72. Setting up a Website • find a domain name •

    find a web host • point the domain to the host

  73. Setting up a Website • find a domain name •

    find a web host • point the domain to the host • upload files via FTP/SFTP

  74. Computer Science E-1 Lecture 8: Web Development