From edc41c2d5e7544b5dd4f564daf68023c279ba72f Mon Sep 17 00:00:00 2001 From: Matteo Menapace Date: Thu, 11 Sep 2014 23:59:30 +0100 Subject: [PATCH] Tweaks to the hacktivity --- hacktivity/hacktivity.md | 272 ++++++++++++++++++++++++++++++++++----- 1 file changed, 240 insertions(+), 32 deletions(-) diff --git a/hacktivity/hacktivity.md b/hacktivity/hacktivity.md index dcc301b..5c26f8b 100644 --- a/hacktivity/hacktivity.md +++ b/hacktivity/hacktivity.md @@ -1,22 +1,225 @@ # HACKtivity +#### Before we start + +- If you're **getting stuck** or falling behind, please tell me straight away. Sometimes it's just a matter of a missing semi-colon or so.. + +- If you have an **idea** and want to know how to code it, I may not answer that immediately but note it down and we'll crack it later. + + + +#### Let's code + 1. Search for Webmaker -* Go to Webmaker and sign up (introduce Persona) -* Search for [Web comic template](https://webmaker.org/en-US/search/?type=all&q=web+comic+template), hit **Remix** -* Explain ``, `` and `` as the **skeleton** of any webpage. +* Go to Webmaker and sign in (with Persona) +* Search for [Web comic template](https://webmaker.org/en-US/search/?type=all&q=web+comic+template), hit **Remix*** +* Explain ``, `` and `` as the **skeleton** of every and any webpage. **Like a person**, it has a head and a body. `` is the visible part of an HTML page. -* Inside the code, find the line that says `I'm about to make a Web Comic`, change it. +* Inside the code on the left, find the line that says `I'm about to make a Web Comic`, change it. * Save and preview - If you add `_` at the end of the published URL you get a clean, iframe-less page + **Pay attention here** If you add `_` at the end of the published URL you get a clean, iframe-less comic. + +- Right-click, `Inspect Element`. + + This is the **Web Inspector**, where you can see every page's *source code*, *styles* and much more. + + When you hover over the source code with your mouse, the corresponding HTML element on the page will light up. + + When you click on an HTML tag in the source code (on the **left**), you'll see all its styles (on the **right**). + +- Change the `p` red. Explain this is a **temporary change**. + +- **Show the finished comic**. + + We've got our first line, next step is to create the basic structure of the comic. -* Make an empty panel. + Each key moment in a comic is framed by a **panel**, each **section** of the comic is a panel. + + In HTML we have an element called `section` which we can use to frame things. + +- Create an **empty panel/section**.
-* Make the *empty* panel visible with CSS. +* **Comment** that. + +* Let's **add images** to get our comic off the ground. + + We'll use the browser-waiter image from IMGUR. + ![](http://i.imgur.com/Seem5xZ.png) + + Point people to **[baddeo.imgur.com](http://baddeo.imgur.com)** (later in the day they'll be able to use their own images) + + **Nest it** inside the first panel. + +* Ask **students to make another panel** under the first one. +* Ask **students to add another image**. + + We'll use the server-chef image from IMGUR. + ![](http://i.imgur.com/CxzZKlF.png) + +* Now that we have images, we can start writing our story. + + In comics, you can use **speech bubbles** to make your characters "talk". + +* Add **one paragraph** to the first section, and **two paragraphs** to the second section. + + `

Hello, I'm your browser. What do you want?

` + + `

I'm the server, just got an HTTP request from the browser

` + + `

Now I'm cooking an HTML page

` + +* Create the **third panel/section**. + +* Add the happy browser to it + + ![](http://i.imgur.com/s4apyQC.png) + +* Add a **speech bubble** to the third panel/section. + `

Here's your page as requested. Would you like a cookie with it?

` + +* Add a **link** to a page that explains what cookies are. **Ask students to search** and find out. Then **paste** their URL of choice inside their comic. + + `

Here's your page as requested. Would you like a cookie with it?

` + +* Create the **fourth panel/section**. + +* We want to be a bit *meta* (self-referential) and **embed** the page itself into our comic. A bit like an endless mirror. + + We can use `iframe` to do that. + + `` + + This allows you to embed pretty much anything into a web-page. + + There's a **limitation** on Thimble (it only seems to work with websites served over `https`) + + Also **some companies don't allow** you to embed their websites. For instance if you want to embed something from Twitter, you can't simply paste the URL into it but have to follow their instructions. + + + + +* Now we've got **all our content marked-up**. + + So we're **done with HTML**, the browser knows about all the content of our comic. + + But the browser doesn't know how to **style** it. It simply **stacked** all the ingredients of our comic one on top of one another. We need to change that, right? + +* Let's **save** and head over to the *Inspect tab*. + + On the **left** of the Inspector we can see the HTML code of our comic. + + On the **right** there's the style. Well there's not much of it atm. + +* Add a `background: yellow;` to the first panel, then to the second and third panel.. this is a **pain**! + + We need a way to tell the browser to style all the panels the same way. Some sort of **style guide**.. + + Meet **CSS**. It stands for ***C**ascading **S**tyle **S**heets* and it's the **language** you can use to tell your browser to change colours, sizes and many other **stylistic** aspects of your HTML documents. + + +* Copy the `element.style {...}` from the Inspector into the *Editor tab*, inside the `