Tinker: Technical

--- tags: mstu5003, tinker, technical, tools --- # Tinker: Technical :::info Group Member:Izzy Carpenter-Zehe, Xinyue Zhou, Peijin Shen, Ziyu Wei ::: This Tinker is for your to practice and get familiar with some of the technologies we will be using this semester. Some of the tinker tasks (i.e. the Codepen) might look a little intimidating. > That's okay! Partly, Tinkers _are_ about exploration, challenging oneself, and identifying what we don't understand. ## Slack We've already started playing with Slack and I have provided a guide. If you haven't completed all the tasks in the [Slack Orientation](https://hackmd.io/s/SyWo-ivAM), please do so. ## HackMD We've started playing with HackMD.io in class. Many of the Tinkers you'll be doing ask questions that I'd like responses for from _your group._ Including this one. > I expect all your group Tinker submissions to be written using Markdown and shared/submitted with HackMD.io. Remember, HackMD is is a collaborative real-time tool that should help your group develop the written Tinker response. It will be your responsibility to use all the syntax features available to you in HackMD.io to create a well organized, readable, response format to the Tinker questions I ask. If it's really hard for me to read and understand, it's not good for you. So take advantage of the formatting features. If you are using code in your response you might want to `use a code block`. Or if you have extensive code, ```javascript= You might use a multiline var x = "syntax highlighted"; codeblock. ``` Or if you're quoting people: > Use a block quote. Or to make certain parts more clear: :::info Use an information alert to distinguish it from the rest. ::: You get the point. There is no rule to HOW you organize your work, but there are many tools available so you should make appropriate decisions with your group. > If you want me to provide **you** with cleanly formatted examples, you should be providing **me** with cleanly formatted work. :wink: ## CodePen Follow [this link](https://codepen.io/mstu5003/pen/XeJNjz) to the exercise on CodePen that you will be using. Before you you begin the steps ahead, take a look around the page, read the headings for the different sections. What elements do you recognize? Which ones are unfamiliar? - Notice that you can edit the text in the panes. This will not save the changes, since I have **shared** the link with you but have **not** given you access to **collaborate**. - To save a **copy** of this **Pen** (this is the name given to **files** on CodePen) to your own **Dashboard**, click on **Fork** in the navigation bar. Once you click here, the Pen you should be working on will be **your version** of the Pen that I shared. Confirm this by going to your Dashboard and making sure that the file is saved here. - **Forking** will be an important concept to understand once we begin to use **Github**. - Once you have your own copy of the Pen, you can begin to manipulate it and save the changes. First, observe the **HTML panel** (far left). Some of the tag names should seem familiar to you, but don't worry about the specifics yet. - Look at the **structure** of the code. Does it seem organized or well-structured? A *very* important part of writing code is to keep your code as **clean** as possible. This serves not only you as you read through and de-bug your code, but others as well, especially when you start to peer-assess and pair-program. - On the top right of the HTML panel, click on the dropdown arrow and then on **"Format HTML"**. Notice what this does to the code. Scroll through and try to guess why **Format** organizes the code this way... what is the purpose of **indenting** things the way it does? :::info We notice that all rows are aligned to the left when we use "Format HTML" this function. The purpose is to keep it structured and easy to read and edit. ::: ### COLLAB / PROFESSOR MODES: For the following sections, you will need to work with one or two peers. - Choose one person to be the **owner**. That person should go to **Change View** at the top right, and choose **Collab Mode**. They can then share their url with the other(s). - Have each member make different edits and notice how CodePen updates in **real-time**. - Notice that in **Collab Mode**, only the owner can save changes. - Have the owner **change view** to **Professor Mode**. Again, share the url with the other(s). - What is the biggest difference between the two modes? :::info The professor mode allows you to make changes to the whole document but the collab mode wont let you make changes to the professor mode . This appears to be the case for html, css, and javascript. ::: - Test out the **Chat** and the **Pause and Play** features in Professor Mode. :::info The chat allows you to communicate with your teammates on hackMD and ==we were unable to find the pause and play section== ::: - Go back to **Collab Mode** for the rest of the tasks. ### SHORTCUTS - There are some shortcuts that will be *very* useful when using CodePen (and many other text editors). Test the following one at a time: - Tab Autocomplete: - In the HTML panel, type "p" and then **tab**. - Now try the same with "a" and "img". What is the same? What is different? :::info It automatically adds brackets to the "p" making it a tag, like that: ```javascript= <p></p> ``` When we try the same with "a" and "img", we seperately get ```javasript= <a href=""></a> ``` and ```javascript= <img src="" alt=""> ``` ::: - Now try the same with "f". What happens? - `<f></f>` is not an accepted tag in HTML. What does this say about autocomplete? :::info Even though it is an unaccepted tag, it still gets tagged when using the autocomplete function. ::: - Multiple cursors: - Click anywhere in the HTML panel, hold down **command** (Mac) or **CTRL** (PC), and click somewhere else. What does this allow you to do? :::info It creates multiple select lines, makes it so you can select and edit multiple lines at once. ::: - Go to the **list** in the code. Set your cursor between the `>` of the first `<li>` tag and the "E" of its description. Now, holding down the **alt**/**option** key, scroll down to the last description. How is this useful? :::info Makes it possible to highlight multiple lines together. This could be useful for copy and pasting and to edit content at the same time. ::: - Click anywhere in the HTML panel. Hold down **shift** and press on the **right arrow key** multiple times. Now try the same by holding down **shift** *and* **alt**/**option**, as well as the **right arrow**. Notice the difference. :::info With the shift function you can select letters just using the keyboard keys. When you use the option function you can select by words instead of letters ::: ### CODE: - Look at the code for the images on the page. - What do you notice about the way it is structured? :::info There are three images that are all equal width and height (as seen in the CSS). There is equal spacing in the margins. ::: - What does the `a` part do? What about the `img` part? :::info The a tag + the href tag allows you to insert links. The img + src is where you put the link to the picture, and the alt is the alt text for screen readers. ::: - What similarities / differences do you see between the `a` and the `img` tags? :::info The A has two parts both the a tag and the href, the img tag has three parts with in it, the img tag, the src, and the alt tag. The a tag has to be closed off with a ending / tag but the img tag does not need a closing tag. ::: - How would you change the word "Descriptions" into a **fourth heading**? :::info It looks like it is already in the fourth heading tag h4 ::: - How would you turn the list of descriptions into an **unordered list**? :::info change the ol tag to a ul tag ::: - Take your attention to the **CSS** panel (middle). - What is your first guess as to what CSS does? :::info It's the how you control the overall look and style of the webpage. ::: - Delete line 2 (`font-family: Arial;`). What does this tell you about what **body** is? :::info If you change the body in CSS it changes the whole webpage. When you delete a specific font it changes to the default font on our computer. ::: - Delete line 7 (`color: #e24c31`). What hint does this give you about the structure of CSS? :::info Black is the default color in CSS. The color changes according to the bracket it is encased in. For example the h1 color only changes the first heading. ::: - Replace the **hex code** in line 7 with `#000000`. Then try `#FFFFFF`. - How could we achieve a grey color using hex codes? :::info we googled the hex code for grey and got '#808080' ::: - Change the **margin** in line 12 (under `img`) to something very small, and then something very big. Describe what happens. :::info It increases or decreases the space between the pictures. ::: - Test out the **button** at the bottom of the page. - Where in the code are we telling it to create the **alert**? :::info in the javascript panel ::: - How does the computer know __*when*__ to create the **alert**? I.e., what is the **link** between the **button itself** and its **functionality**? :::info In HTML the adopt button was created in the button tag, and in javascript adopt was assigned a function to, create an alert that says a specfic message. When you click the button its named the action for adopt. :::

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.