/*scratch*.md Secret
Last active
March 8, 2016 21:55
Revisions
-
zachlatta revised this gist
Mar 8, 2016 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -160,4 +160,5 @@ example of how you used CSS to style the page). - Give an example of what this workshop will help the user build at the very beginning (like a link to a completed text adventure) - Bruggie's might be a good example - Example content is good, but can be expanded/improved upon - Introduction is too long -
Mar 8, 2016 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
Mar 8, 2016 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,163 @@ > # Adventure Workshop > > - Go to Cloud9 and log in. Then, create a new directory for this workshop, > naming it `AdventureGame`. Then, create a new file, naming it `index.html`. > This is where you will introduce the player to your adventure game. - Use snake case for the folder name, `adventure_game` > - In `index.html`, put in the template for a basic HTML page: > ``` > <!doctype html> > <html> > <head> > <title></title> > </head> > <body> > </body> > </html> > ``` - `doctype` should be all caps - Should have newlines before and after the code block - Make sure to clarify that they should _type_ in the basic HTML template. They should not copy and paste. > Before proceeding, we'll briefly go over what this template means. HTML is > language that the browser can understand, and it works by storing information > inside tags. `<html>` is an example of one such tag. Inside `<html></html>`, > we've placed two other tags: `<head>` and `<body>`. `<body></body>` holds > everything you would see in the actual tab/window when you open the page. > `<head></head>` usually contains metadata about the page; for our purposes > we'll only be putting in the title (with `<title></title>`), which you usually > see as the name of the tab or window, in your browser. - Assume that they already know what HTML is, just link them to the personal website workshop or something as a reference. - Ex. "As introduced in the _Personal Website workshop_, HTML is one of the three languages we use to build websites" - Do the same sort of thing for tags - What is metadata? Complex term. > `<!doctype html>` tells the browser what version of HTML to expect. Since it is a language, HTML is constantly growing and updating, so there are multiple versions. In our case, we are going to use HTML5. - Capitalize `doctype` - Description of HTML could be improved. - What does HTML5 mean? - Can probably be simplified to "`<!DOCTYPE html>` tells the browser to use the most recent version of HTML." or something like that. > If you've done the Personal Website tutorial, you've already encountered this > stuff. - Assume that they have, it's the first workshop everyone does. > This structure is common to all HTML pages. If you want to find out more, just > open up any website and inspect it. You'll find each of these elements on > every page-- the doctype, html tag wrapped around a head and body, and a title > in the head. - Can probably remove this > - If we refresh the preview (TODO add instructions for viewing preview in c9), > we'll see nothing but a blank page! That's because we haven't added any > content to the body tag, which is where all the stuff we see in the browser > will be kept. We've also got no title and no favicon! (a favicon is the > little picture in the tab next to the title) (TODO rearrange this) > We can add a title by filling in `<title></title>` with something reasonable. > Probably > ``` > <title>Adventure Game - INTRO</title> > ``` It's unclear what the title is for. Does this title show up as text on the page? > - Now that you have your bare template ready, we can start to add content to > our page. As mentioned before, all information is wrapped in tags. Tags are > predefined in the language; think of them as the words in the language. For > text, HTML provides a number of tags to store text, one of the most basic > ones being the paragraph tag (`<p>`). Just as in the other tags, you can > place information within the paragraph tag by surrounding your content with > an opening `<p>` and closing `</p>` tag, like so: Can be simplified, reference the Personal Website workshop > ``` > <p>Here's some text</p> > ``` > Let's add a description to our adventure, so that the user will be compelled to play the game! > > For mine, I'll add this: > ``` > <p>Go on a night quest in NYC involving tacos, missed trains, and free concert tickets. Press start to begin the adventure!</p> [TODO wow that's horrible] > ``` > My story will be about exploring NYC at night, because I'm not very creative and I can only write autobiographical stories. > > - Now, let's refresh the preview, and voila! Our text can be seen in the page. > But wait, it's a little silly to tell the user to press start when there is no start thing to press, though, isn't it? Let's fix that by creating some clickable text. > > We can then use that text to link to a new page that will designate the start of our adventure. So what's the appropriate tag to contain this text? > > Generally, if we want to link a page to another, we use an anchor tag. It's called this because idfk (TODO), and the tag for it is `<a></a>`. What makes an anchor tag special is that it has an attribute called `href`, meaning hypertext reference, that is, a link to the page you want. I'd ignore what the tag is called and just say that we can use `<a href="blah">blah</a>`. If you could make links your entire life without knowing this, the reader of this workshop will be able to too. > > We're going to add a link to a start page by adding > ``` > <a href="start.html">Start Adventure</a> > ``` > We've set the attribute of `href` to `start.html`, and the text linking to that will say "Start Adventure!" > > - Now we'll create the start page by making a new file called `start.html`. Put the HTML template in `start.html`. Add a reasonable title, like `<title>Adventure Game - START</title>`. We are now ready to start the adventure! Make a `<p>` in which you'll set the scene and describe the surroundings. > If you've written several paragraphs, you may have noticed that one `<p>` doesn't quite cut it. All of the paragraphs have turned into one big blob of text. That's why it's called a paragraph tag! Place each of your paragraphs in its own `<p>`. > > At the bottom, create one or more options to carry your player to the next scene(s)! Repeat what you did in linking the `start.html` to `index.html`-- wrap each option in an anchor tag, and link each to a new page where you'll write the next scene. Here, it'll be handy to come up with some sort of naming convention; it can get quite tangled once you've created a complex network of possible routes in the adventure. What is a naming convention? Give examples. Give examples of the scenes you're creating. > Last step (optional): make an option for the player to go back, by adding an option on every page that links to the preceding page. > > Here's what my start page looks like: > ``` > <html> > <head> > <title>Adventure Game - START</title> > </head> > <body> > <p>It's 2AM. The streets are shiny after fresh rainfall, and the smell of garbage is starting to lift. You're on the corner of 2nd St and Avenue A, and you've got to meet your friend in midtown by 5:30AM to wait in line for Shakespeare in the Park tickets.</p> > <p>It'll take you 15 minutes to bike up there, so you've got time. You've also got a hankering for tacos, maybe because there's a taco truck in plain sight across the street. You</p> > <a href="index.html">Go Back</a> > <a href="tacoTruck.html">cross the street to get to the taco truck.</a> > <a href="walkNorth1.html">ignore the craving and start moving northward.</a> > </body> > </html> > ``` > > Get creative: add images, videos, or even external links! your adventure can go anywhere. the internet's the limit!! Awesome. Give an example of what a completed version of this looks like. > > --- > > ## Epilogue > > Do you hate links? Try buttons, with the `<button>` tag! > > Are you totally frustrated by how many HTML files you've had to make?! Is it driving you mad that the number is expontentially increasing? > > [introduce solutions to this] Might also be worth introducing CSS to style the page (or at least give an example of how you used CSS to style the page). > Overall thoughts: - Good start - Give an example of what this workshop will help the user build at the very beginning (like a link to a completed text adventure) - Bruggie's might be a good example - Example content is good, but can be expanded/improved upon