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

Lecture 8: CSCI E-1 Spring 2013

Tommy MacWilliam
April 17, 2013
Education
0
440

Lecture 8: CSCI E-1 Spring 2013

Tommy MacWilliam

April 17, 2013
Tweet

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
tmacwill
0
310
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
450
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
520
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
590
Incorporating Version Control into Programming Courses
tmacwill
1
110
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
410
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
490
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
790
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
320

Other Decks in Education

See All in Education
Padlet opetuksessa
matleenalaakso
4
13k
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
2.5k
プログラミング基礎#4（名古屋造形大学）
yusk1450
PRO
0
120
子どものためのプログラミング道場『CoderDojo』〜法人提携例〜 / Partnership with CoderDojo Japan
coderdojojapan
4
15k
Algo de fontes de alimentación
irocho
1
480
あきた地域課題解決インターンMarch2025
toyodome
0
280
情報処理工学問題集 /infoeng_practices
kfujita
0
280
とある EM の初めての育休からの学び
clown0082
1
910
Flinga
matleenalaakso
2
14k
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
signer
PRO
0
2.7k
保育士チームが実践している連続的な観察と多面的な観察を共有するための振り返り / Reflection to share “continuous and multifaceted observations” as practiced by a team of childcare professionals
psj59129
0
3.3k
Mathematics used in cryptography around us
herumi
2
740

Featured

See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
It's Worth the Effort
3n
184
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Six Lessons from altMBA
skipperchong
27
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
A Philosophy of Restraint
colly
203
16k
GitHub's CSS Performance
jonrohan
1030
460k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k

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