L.O. (Learning Objectives) Week 1:¶ ¶ • Communicate an initial project proposal • Explore and use website development tools • Identify and utilise version control protocols 1.0. Notes during the class and workshops:FABLAB¶ Version Control isn’t obvious; it does many different things. • manages history • handles branching and merging • handles merging work • handles managing remote, as well as local version Web Development • You need to view the website on your local computer (before synchronizing it and pushing it onto the central server). o Can view the file with the URL: file:// o Code references: HTML: Hypertext Markup Lanauge (https://developer.mozilla.org/en-US/docs/Web/HTML) HTML5 (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) Templates (https://html5up.net) o View source code o Source/raw code editor: https://www.vim.org o Format webpages: Mark Down (https://guides.github.com/features/mastering-markdown/) Project Management Principles *You define the time division before you start working. – Each week. *Spiral model. – You keep coming back to the complete version, on each spiral/circle. Each time completing the loop, add features to the spirals. *Hierarchy, modularity. – each time add complexity. Bottom Up model. *Book: “The Mythical Man-Month” by Frederick Brooks Git • Tutorial (https://git-scm.com/docs/gittutorial) Mistakes you will make • Key path, permissions o Chmod go-rwx ~/ .ssh/key_name • Check what you’re going to commit before doing it o “Git status” – Before you commit your work, you need to check your status. o Surprising mistake: You have the class site, you might drag in your pictures from your weekend trips, shopping list, something unrelated, or work in progress. Then accidentally commit all of your files. o Git really makes it hard for users to change history. o So, before you commit your work, you want to see what’s gonna be commited. • Likewise, you want to “pull and merge” before you push. • ? Use relative rather than absolute links to files. • Archive size o O MBs /person /week o Check size before commit NCDU (https://dev.yorhel.nl/ncdu) – very useful for seeing file size. o Compress, resize pictures for Web ImageMagick (https://imagemagick.org) GIMP (https://www.gimp.org) o Compress, encode videos for Web ffmpeg 1.1. Plan and sketch a potential final project ¶ To see this part, please click here 1.2. Work through a git tutorial:¶ Git • Tutorial (https://git-scm.com/docs/gittutorial) 1.3. Make a website and describe how I did it:¶ To start with this process, I researched the websites that previous fablab students built. I personally found Emma's website interesting, and I decided to adopt her code. Emma's Website To see her code, I clicked the "inspect" menu on Chrome. I also refered to my classmates' code and how they structured their html codes. I was able to find a particular code by hovering over an area where I wanted to see the code for, after clicking this button: Then I started to build website by coding in html and uploading the html files on my gitlab repository. How I uploaded the files on my gitlab repository is written in the section below. 1.4. Introduce myself:¶ To see this part, please click here 1.5. Document the steps for uploading files to archive:¶ I'll give an example on uploading image files to archive. (Fab Academy uses the GitLab website. https://gitlab.fabcloud.org) First, I structured the overall flow of the website by categorizing into a few sections. In my case, I categorized what will go in my gitlab archive into four -- 1) About, 2) Classes (assignments), 3) Images, and 4) Project (final project). Then, under yunjo-lee > repository > docs > images, I uploaded an image named "yunjo_trading_card". When an image file is successfully uploaded into my gitlab repository (archive), it is shown in the list in the "images" page, like this: Later when I use the uploaded image file in my html code, I type this code: < img src="images/yunjo_trading_card.jpg" width="700" > There are a few things to be aware of: 1. Image files uploaded in gitlab should be jpg, not png. 2. File names are case-sensitive; capital letters should not be used. 3. Minimize the file size as much as I can, while maintaining the appropriate file/image quality. 1.6. Document how to push to the class archive:¶ This section is written above, along with the 1.5 section's content. 1.7. Sign and upload Student Agreement:¶ **Fab Academy Student Agreement** *The Fab Academy is responsible for:* - Teaching principles and practices of digital fabrication - Arranging lectures, recitations, meetings, and events for the class - Evaluating and providing feedback on student work - Offering clear standards for completing assignments - Certifying and archiving student progress - Supervising class preparation - Reviewing prospective students, instructors, and labs - Providing central staff and infrastructure for students, instructors, and labs - Fund-raising for costs not covered by student tuition - Managing and reporting on the program's finances, results, and impacts - Publicizing the program - Promoting a respectful environment free of harassment and discrimination *I am a Fab Academy student, responsible for:* - Attending class lectures and participating in reviews - Developing and documenting projects assigned to introduce and demonstrate skills - Honestly reporting on my work, and appropriately attributing the work of others - Working safely - Leaving workspaces in the same (or better) condition than I found them - Participating in the upkeep of my lab - Ensuring that my tuition to cover local and central class costs is covered - Promoting a respectful environment free of harassment and discrimination Signed by committing this file in my repository, Yunjo Lee The Student Agreement is also uploaded on my gitlab repository.