Code Your Constellations IBMSTEM 4 Girls Welcome Your
Code Your Constellations! #IBMSTEM 4 Girls
Welcome! Your star-guides: Felise Chrissie Arlene Rae Andrea #IBMSTEM 4 Girls
Activity outline You will each be given a constellation to document. You will need to: q q q Determine the coordinates for each star in the constellation Get the computer to draw them in the correct position Add some additional information about the stars or the constellation Add some information about you, the author Make your web page look super awesome! #IBMSTEM 4 Girls
Let’s find out the coordinates of the stars in your constellation (we will use this to plot the constellations on the webpage) #IBMSTEM 4 Girls
Let’s find out the coordinates of the stars in your constellation Imagine the sky as an x-y coordinate plane, with the origin (0, 0) positioned at the bottom left corner. #IBMSTEM 4 Girls
Let’s find out the coordinates of the stars in your constellation • y-axis x-axis #IBMSTEM 4 Girls
Let’s find out the coordinates of the stars in your constellation 1 Unit coordinate plane #IBMSTEM 4 Girls
Let’s find out the coordinates of the stars in your constellation (x, y) coordinate plane #IBMSTEM 4 Girls
Let’s plot our constellations! #IBMSTEM 4 Girls
Three Elements of a Web Page A web page is like a house 2. Java. Script “The moving parts” Interactivity and Functionality We’ll be adding your coordinates here! 1. HTML “The house frame” Web page structure 3. CSS “The look” Look and feel A web page!
What is HTML? “The house frame” Hyper. Text Markup Language This language is based on English keywords called tags that tell a web browser how to display content on a web page.
Examples of HTML tags <p> <h 1> <footer> <div> <canvas>
HTML tags Tags always have angle brackets < > on both ends, with a keyword in the middle: “p” stands for paragraph <p> <h 1> Tags typically come in pairs -- an opening tag and a closing tag with a forward slash: <p> </p> <h 1> </h 1> Tags can also be nested inside of another pair of tags, like this: <div><p></div>
HTML tags How do they work? Like a juicy hamburger, HTML needs and opening and closing tag to hold it together <p> Juicy content in between </p>
HTML tags Start tag #1 <p> What geometric shape is your constellation? </p> <p> Tell us something interesting about your constellation </p> Start tag #2 End tag #1 End tag #2
Some useful HTML tags <h 1> … <h 6>: Creates headings in the web page, with heading 1 appearing larger than heading 2, which is larger than heading 3. <p>: Paragraph tag, creates a paragraph for text <div>: Div tag, creates a section for text or picture content <canvas>: Canvas tag, used to draw graphics on a web page <a href=”www. example. com”>An awesome link</a>: Anchor tag, creates a link to another web page. <img src=”http: //placekitten. com/g/200”>: Displays a picture in the web page
Codepen Online HTML/CSS/JS playground that lets you see results immediately Demo A “pen” is a chunk of code that can render a webpage and can be shared with other users.
Let’s practice! USE THE HTML EDITOR 1. Open the Simple Constellation pen: https: //codepen. io/ibmstem 4 girlsgta/pen/Zjv. VRG 2. Find the paragraph tag called “my. Paragraph” and update the text. 3. Add your name, grade, and school in the footer tag.
What is CSS? “The look” Cascading Style Sheets Lets you control the colours and layout of a web page using specific properties
Examples of CSS properties color text-align background-color border font-size padding font-weight margin
What CSS looks like In the CSS: h 1 { background-color: midnightblue; color: white; font-weight: bold; } In the HTML: <h 1>Your constellation name goes here!</h 1>
Some Sample CSS Properties In the CSS: h 1 { background-color: green; color: white; font-weight: bold; }
Some Sample CSS Properties In the CSS: h 1 { background-color: green; color: yellow; font-weight: bold; }
Some Sample CSS Properties In the CSS: h 1 { background-color: green; color: yellow; font-weight: bold; border: solid; }
Some Sample CSS Properties In the CSS: h 1 { background-color: green; color: yellow; font-weight: bold; font-size: 4 em; }
Let’s practice! USE THE CSS EDITOR 1. Try changing the background-color and color of the body element. 2. Change the font-size of the h 1 element. 3. Change the color of the my. Paragraph element. 4. Change the color of the footer element.
Java. Script - the “moving parts” The most widely used programming language A way to add programs to web pages Adds functionality and interaction to web pages Any web page you see today is most likely using Java. Script will be used to add your stars to the webpage!
How do you store information about a star? Saved in key/value pairs in the Java. Script "x_coordinate" : 2 Key Value
How do you store information about a star? Use commas to separate different pairs of data "x_coordinate" : 2, "y_coordinate" : 4, "color": "yellow", "number_of_spikes": 5
How do you store information about a star? Use curly brackets { } to hold information for one star { "x_coordinate" : 2, "y_coordinate" : 4, "color": "yellow", "number_of_spikes": 5 }
How do you store information about all stars? Use square brackets [ ] to hold information for all of the stars in the constellation [ { "x_coordinate" : 2, "y_coordinate" : 4, "color": "yellow", "number_of_spikes": 5}, { "x_coordinate" : 6, "y_coordinate" : 10, "color": "yellow", "number_of_spikes": 6 } ]
How do you store information about all stars? As a JSON object in the Java. Script (Java. Script Object Notation) Stars: Key [ { "x_coordinate" : 2, "y_coordinate" : 4, "color": "yellow", "number_of_spikes": 5}, { "x_coordinate" : 6, "y_coordinate" : 10, "color": "yellow", "number_of_spikes": 6 } ] Value
Let’s add the stars! FOLLOW ALONG CAREFULLY 1. Open the Constellations JSON generator pen in a new tab: https: //codepen. io/ibmstem 4 girlsgta/full/vapvad/ 2. Choose the constellation Name and enter the (x, y) coordinates for your first star, the colour, and the number of spikes. 3. Click on “Add Star”. 4. Repeat steps 3 and 4 until all stars are added.
Let’s add the stars! You should see something like this below: FOLLOW ALONG CAREFULLY
Oops! I made a mistake 1. If you make a mistake, you can delete the star. 2. Find the Star ID. 3. Copy the ID name into top right box and press “Delete Star. ” FOLLOW ALONG CAREFULLY
Let’s add the coordinates! 1. Copy the constellations JSON from the box. 2. Paste the JSON in the Javascript editor of the Simple Constellation pen, after the comment line that says // COPY AND PASTE YOUR JSON HERE. FOLLOW ALONG CAREFULLY
More practice! 1. Add text describing your constellation to the paragraph tags with ids “my-description-1” and “mydescription-2”. 2. Change the font-size of the “. my. Paragraph” element in the CSS. 3. Add a background-color to the footer in the CSS. 4. Add a coloured border to the footer. Hint: Use the border-color and border properties 5. Change the color and the number of spikes on some of the stars in your constellation. 6. Add a coloured border to the canvas element. Hint: Use the border-color and border properties. 7. Create your own constellation. Ask the instructors for a piece of grid paper. 8. Add an image to your webpage.
- Slides: 37