io lab: more html/css version control with...
TRANSCRIPT
![Page 1: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/1.jpg)
IO Lab:
More HTML/CSS
Version Control with Git
Info 290TA (Information Organization Lab)
Kate Rushton & Raymon Sutedjo-The
![Page 2: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/2.jpg)
More HTML/CSS
![Page 3: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/3.jpg)
Adding CSS
• Inline
• Embedded
• External
![Page 4: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/4.jpg)
Adding CSS
Inline CSS <button id=“btn” style=“color:#222;”>Save</button>
Embedded CSS
<head> <style> button { color: #222 } </style> </head>
![Page 5: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/5.jpg)
Adding CSS
External Stylesheet <head> … <link rel="stylesheet“ href=“main.css" /> </head>
![Page 6: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/6.jpg)
Browser CSS
![Page 7: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/7.jpg)
Recall: CSS selectors
HTML <button id=“save-button” class=“btn btn-blue”>Save</button>
Output (No CSS)
![Page 8: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/8.jpg)
<tagname>
HTML <button id=“save-button” class=“btn blue”>Save</button>
CSS button { margin-bottom: 5px }
![Page 9: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/9.jpg)
.class
HTML <button id=“save-button” class=“btn blue”>Save</button>
CSS .btn { padding: 5px 20px; } .blue { background: #2e70db;} .btn.blue { color: #ffffff;} Output (With CSS)
![Page 10: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/10.jpg)
#ID
HTML <button id=“save-button” class=“btn blue”>Save</button>
CSS
#save-button { box-shadow: 1px 1px 3px #999; } Output (With CSS)
![Page 11: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/11.jpg)
Descendant Selector
HTML <div id=“content”> <button>Save</button> </div>
CSS #content button { … }
![Page 12: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/12.jpg)
Other Selectors
CSS #content > button { … } applies immediate children only
#content * button { … } all descendants except immediate children
#content + button { … } adjacent sibling selector
![Page 13: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/13.jpg)
Attribute Selector
HTML <div id=“content”> <input type=“text” name=“user”> </div>
CSS input[type=“text”] { … }
![Page 14: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/14.jpg)
Combination Selector
HTML <div id=“content”> <button class=“btn”>Save</button> </div>
CSS div#content button.btn { … }
![Page 15: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/15.jpg)
“Cascading” Style Sheets
HTML <div id=“content”> <button id=“mybutton” class=“btn” style=“…”>Save</button> </div>
button { … } #mybutton { … } #content button { …} .btn { … } div button { … } div .button { … }
![Page 16: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/16.jpg)
“Cascading” Style Sheets
![Page 17: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/17.jpg)
“Cascading” Style Sheets
General Rules and Guidelines
1. Inline styles override other styles
2. More specific selectors win
id > class > element
3. All other things being equal, styles applied
last will override earlier styles
4. Start with least specificity, add more as
needed
5. Avoid !important
![Page 18: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/18.jpg)
Version Control with Git
![Page 19: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/19.jpg)
Why Use Version Control?
• Save your work
• Undo
• Safe experimentation
• Documentation
• Collaboration
![Page 20: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/20.jpg)
Abortion
(Wikipedia) Viégas, Wattenberg, and Dave
![Page 21: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/21.jpg)
Types of Version Control
• Manual
• Local (rcs)
• Centralized (Subversion, Perforce, etc.)
• Distributed (Mercurial, Git)
![Page 22: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/22.jpg)
Centralized VCS
• Version control managed by a central
server
• Users check out files from the server,
then check back in with changes
• Optionally can lock files
• Server keeps track of files, and
revisions to those files over time
![Page 23: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/23.jpg)
Centralized VCS
Source: ProGit
![Page 24: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/24.jpg)
Centralized VCS
Source: ProGit
![Page 25: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/25.jpg)
Distributed VCS
• Every client has a copy of the full
repository
• Users commit files after making
changes, which takes a snapshot of the
state of the file system, noting which
files changed
![Page 26: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/26.jpg)
Distributed VCS
Source: ProGit
![Page 27: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/27.jpg)
Distributed VCS
Source: ProGit
![Page 28: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/28.jpg)
History of Git
![Page 29: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/29.jpg)
Git States
Files in a git repository can be in 1 of 3
states:
• Committed
• Modified
• Staged
![Page 30: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/30.jpg)
Command Line Git
1. CD into your project directory $ cd myproject 2. Initialize a new repository with init $ git init 3. Edit files, then use add to stage
$ git add “file.txt” add 1 file $ git add –A add all
![Page 31: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/31.jpg)
Command Line Git
4. Commit the files with commit and include a
message stating what changed
$ git commit –m “fixed bug in file.txt”
![Page 32: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/32.jpg)
Other Helpful Commands
$ git status to see the current status of the repo
$ git log
to view commit history.
$ git checkout <filename> removes any changes to unstaged files since
the last commit
![Page 33: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/33.jpg)
Other Helpful Commands
$ git reset HEAD <filename> unstages a staged file, but keeps the changes
made since the last commit
![Page 34: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/34.jpg)
Git GUI - SmartGit
![Page 35: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/35.jpg)
Git GUI - SmartGit
Modified files
appear here
![Page 36: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/36.jpg)
Git GUI - SmartGit
Diff of changes -
before
![Page 37: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/37.jpg)
Git GUI - SmartGit
Diff of changes -
after
![Page 38: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/38.jpg)
Git GUI - SmartGit
Press commit
button to commit
![Page 39: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/39.jpg)
Git GUI - SmartGit
![Page 40: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/40.jpg)
GitHub
• Free web-based hosting for Git
projects
![Page 41: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/41.jpg)
GitHub
If you have a repo on your local machine, link
it to github with remote add origin
$ git remote add origin https://<github filepath>.git
Or clone an existing repository from Github
$ git clone https://<filepath>.git
![Page 42: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/42.jpg)
GitHub
![Page 43: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/43.jpg)
GitHub
After making changes and committing, push
the changes back up to origin
$ git push origin master
Unless others have made changes, in which
case you’ll need to resolve on your end first –
the simplest way is with pull
$ git pull
![Page 45: IO Lab: More HTML/CSS Version Control with Gitcourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-0… · More HTML/CSS Version Control with Git Info 290TA (Information](https://reader038.vdocuments.net/reader038/viewer/2022100506/5f069af27e708231d418d278/html5/thumbnails/45.jpg)
For Next Time
HW0
1. Install a text editor
2. Install an FTP client
3. Make a test HTML page
4. Install Git