Untangling4
Download as PPTX, PDF•0 likes•371 views
This document provides an agenda and overview for a class on untangling the web and modern web development. It discusses reviewing homework, using source code control like GitHub, GitHub Pages, the structure of modern websites including HTML, CSS and frameworks, and an introduction to the business model canvas homework assignment and project 1 requirements. Students will work in groups to develop a concept for a web business and present it using a completed business model canvas.
Untangling4
- 1. Untangling the Web Week 4 AN INTRODUCTION TO HTML AND MODERN WEB DEVELOPMENT
- 2. Agenda Review homework, talk about project 1 Source code control Github pages Structure of modern websites The landing page HTML and CSS Frameworks (light first pass)
- 3. Business Model Canvas Homework Comments and discussion? What idea did people pursue? This is very close to the Project 1 format, except for grading The assignment today is primarily graded on understanding of the technical aspect of the canvas and the elements of the marketing plan The project is graded on feasibility and potential of the idea in addition to those criteria, with an emphasis on user analysis and perhaps even user interviews if possible Need to form groups today! We’ll do that when we go over to the other room
- 4. Source code control Github, Gitlab, SVN +many, many proprietary solutions that you’ll never use (if you’re lucky!) We will focus on github Gitlab is very similar, based on GIT “Global Information Tracker”? Other less savory acronyms May not stand for anything other than not having a UNIX command named git previously and kind of sounding like “get” Written by Linus Torvalds (of Linux fame) to manage linux sources
- 5. Using GIT Avoid most of the GUI tools! They may be easier initially but they will eventually get in your way We’ll talk about concepts in a minute, but first we need an intro to the command line terminal Technically called a “BASH” terminal in the version I’ll be having you install
- 6. The command terminal In the beginning, there was the teletype Well, my beginning. Actually there were punch cards and paper tape before that, but we don’t need to go quite that far back.
- 7. The git bash terminal Demo of git in a bash terminal (we’ll probably do this live, but if you want a refresher later this video is decent. Longer one at https://www.youtube.com/watch?v=HVsySz-h9r4 is even better)
- 8. Installing git and git bash Windows Download from https://git-scm.com/download/win Run to install Open the “git bash” desktop app Mac Might already be there ($ git –version) If not, you can get an installed from https://sourceforge.net/projects/git-osx- installer/files/ Or use homebrew, “brew install git” then check the version
- 9. Short git tutorial walkthrough May or may not have time to walk through this in class https://www.atlassian.com/git/tutorials/using-branches
- 10. Structure of modern websites It’s not just HTML It’s CSS, but on it’s own that’s still cumbersome It’s frameworks Can be major frameworks like react, angular, Jekyll, Django, etc. But we’re going to start with light frameworks like bootstrap and ui-kit These are basically just collections of css and resources that make html easier to put together We also have to talk about package managers and task runners Npm and grunt are the two we’ll touch on today
- 11. Looking at an example website http://3data.ca is hosted on github pages It uses a project at https://github.com/derekja/3data_landing Programmers are lazy! Don’t start from scratch, feel free to copy (academic dishonesty disclaimer! For code that is turned in, it is safest to put a comment in the code indicating where it originally came from. This is not a bad industry practice either, although followed less scrupulously. For the purposes of this class, though, you can copy code whenever and wherever you like as long as you tell me you have done so!)
- 12. Github pages Just an easy way to use a webserver for free! That is driven from a source-code controlled environment https://www.youtube.com/watch?v=FiOgz3nKpgk (again, we’ll probably go through this live, but this if you don’t remember what we did here’s a run- through) Personal and project pages, we’ll mostly use project pages Use by cloning or forking a project and then turning on github pages. Whatever is in index.html will get served up! Few extra steps for a custom URL
- 13. Example of a github pages process I have a website I just created on the weekend. http://3data.ca I want to use that as the framework for another website that I’m going to need to work on. Clone, fork, or copy? In this case, copy since I never want to merge backward Fork would also be a valid approach, if you think the original site might get changes that you want to pick up But we’ll go through a copy example
- 14. Getting the source for a project Create a directory in a git bash window CD to where you want the directory Go to the project on github, there will be a “clone” field, copy that https link and then Git clone “https link” This will create the directory and populate it with the master branch
- 15. Copying the project Create a new directory with the name of your new project mkdir new-project-name In a file browser window copy everything over from the directory you just cloned EXCEPT the .git subdirectory
- 16. Initializing the repository Go into the directory for your new project Git init . Go into the GUI on github.com, select create new repo Copy the new repo link Git remote add origin https://github.com/username/new_repo Git add . Git commit –m “my new project” Git push origin master
- 17. Git repo summary Here is an online tutorial to do this: http://kbroman.org/github_tutorial/pages/init.html Now you have a new repo! What do I do with it?
- 18. Installing NPM NodeJS is a framework for server scripting The node package manager (NPM) is central to how we create modern websites It allows you to bring code in as packages that can be independently updated https://nodejs.org/en/ Install node 4.6.0… Close any git bash shells and reopen them You should now be able to use both git and npm commands from the git bash shell
- 19. Installing package dependencies Cd into the directory your new project is in Type “npm install” and wait for the files to update. These are all the package dependencies you’ll need.
- 20. Segue… .git and .gitignore files .git is a directory managed through the use of git commands, it should never be edited directly .gitignore, though, is a file that determines which files will NOT be saved into your git repository This is everything except for code and (sometimes) images and media
- 21. Seque 2 - editors I like visual studio code - https://code.visualstudio.com It’s free and cross-platform and does code highlighting well If you have another editor preference (atom, sublime text, emacs, vim, notepad++, etc.) please go ahead and use what you like A general word process, or notepad or textedit, etc is NOT appropriate for anything but the smallest edits
- 22. Task runners Grunt, gulp, webpack This are all packages that help you setup and run files for your project They do things like hot-module reloading – where pages reload on the fly as you edit and save state We’ll use a bit simpler mechanism where you have to refresh the page, but it will still update as soon as you do Grunt is what we’ll use right now, although I’ll talk about webpack in a later class
- 23. Installing grunt Navigate into your new project directory Type npm install –g grunt-cli This will globally install the client for grunt, the grunt service was installed when you typed npm install earlier
- 24. Package.json This is set up by npm to store the packages that go with this particular project Let’s look at the ones for this project Npm install –save or –save-dev stores installed packages in package.json Use –save when every deployment will need the package Use –save-dev when only development deployments will need it (ie grunt is used only on development machines, so –save-dev is used)
- 25. Grunt.js Our first javascript file! Don’t worry about the language too much, that is next week. We’ll look at the structure of the file
- 26. Html validation example Looking at how valid and invalid html looks when you run
- 27. Start walking through index.html
- 28. CSS intro
- 29. Intro to ui-kit
- 30. Project 1 – business model canvas and validation In groups of 3-4, come up with a concept for a web business You will not have to stay with this group for projects 2 and 3, but if you change groups it will have to be to another group with this preparatory work done, or you will have to redo it for your new group, so changing is discouraged To present this concept you will have to turn in a completed business model canvas. You will also have 20 minutes to present the concept in class on October 19th. Due date on syllabus is listed as Oct. 17th. I would like the one page summary of the business model canvas to be turned in by then so that I can make copies for other students to make notes on during your presentation, aside from this one-pager the remainder of the project can be turned in on the 19th.
- 31. Project 1grading Different than the homeworks. The homework is really on a best-effort basis, just enough to tell me that you’re trying and getting something out of the course. The project grading counts effort, of course, but is really graded on a more objective basis. If I were a venture capitalist watching the pitch, would I fund it? Of course, you don’t have to meet VC standards, this is an intro class. But the criteria are more stringent than in the homeworks.
- 32. Project 1 grading (cont) 20% of the grade will be on the idea. How compelling is the overall business? This will be evaluated by me, with input from the students in class watching the presentation on the 19th. 30% of the grade will be on the presentation. How well was it presented, how good it the pitch deck (the powerpoint presentation to pitch it, we’ll talk about this in class on the 12th) 40% of the grade will be on the business model canvas and associated materials that are turned in. 10% of the grade will be allocated based on group effort ratings and participation – each group will have a form to fill in to give me an idea of who has participated and in what ways.
- 33. Project 1 – what gets handed in? Oct. 17th – a one page summary of the business model canvas, completed in electronic form Oct. 19th – a powerpoint presentation (or whatever other presentation software you choose to use), a participation form from each group member, any supporting materials to back up the business model canvas. Oct 21st - (Optionally) a revised business model canvas based on feedback from the presentation. This revised version will be graded and averaged with the grade on the first version turned in.
- 34. Homework 4 Create a page on github pages Does NOT need to be on a custom domain The page should be a project landing page I don’t care what the project is, but if you have an idea for project 1 that’s a good way to sell it to your group Due by class time on Oct 5th, send me a URL I don’t get back in town until the 6th, though, so please leave the site up until I send you a reply to your email (the sneaky of you might realize “wow, I can change it until he gets back in town!” *shrug* you might get away with it. But no promises on when I look, so whatever is there when I look gets graded!)