|
|
| Line 1: |
Line 1: |
| [[File:Donut.gif|frame|50px|right|Mmmm...donuts.]]
| |
|
| |
| [https://docs.google.com/document/d/19L8E99wD8VgS4d9JPwT6PX4bVAbnE2zGEvqPxMZmnBs/edit?usp=sharing Class syllabus] | [http://ok.wengage.com/TulsaArts/ Gradebook].
| |
|
| |
| ==Current Projects==
| |
| ===Building a Webpage!===
| |
| ''Step One:'' Find a technology or tech project that interests you. Examples from the class: [http://paperjs.org Paper.js], [https://en.wikipedia.org/wiki/Aerolux_Light_Corporation Aerolux Light Bulbs], [http://www.piskelapp.com/ Piskel], [https://farmbot.io/ Farmbot], and [http://juerglehni.com/works/hektor Hektor, a drawing robot]. The topic is wide, and will serve as the content of your webpage.
| |
|
| |
| ''Step Two:'' Build a wireframe on paper (with real pen or pencil; no computers for this step!). [[File:Profilewireframe.png|thumb|Profilewireframe]] A wireframe is a simple drawing meant to represent your intended webpage layout that does not require coding. Your final project will have a main page and two additional pages, so use this time to decide on an audience for your website, and what they might be looking for when they visit. For example, if your technology is a program used to create things, a gallery page and a tutorial page might be appropriate.
| |
|
| |
| If there are other websites about your topic (or similar technologies), look to the structure of their webpages. You will probably notice that the pages within a site are built similarly: with a header, a navigation section, a content section, and a footer. Be sure to include these in your wireframe. Additionally, websites usually have a vertical rhythm or grid. [https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521 This tutorial] is more in-depth than we need, but check out the first image to get an idea of what we mean when we say "grid"—similar elements are the same size, and things line up vertically and horizontally. Make it easy on yourself by following a grid that each page follows.
| |
|
| |
| ''Step Three:'' Learn about webpage grids, and the newest CSS elements that make this easy. Take a look at the first example on [http://gridbyexample.com/examples/ this page], then click "view example" underneath. Do yours look different? If so, it means you need to update your browser to the cutting-edge.
| |
| * If you're using Chrome, type "chrome://flags" into the Omnibox.
| |
| * If you aren't using Chrome, click [https://www.google.com/chrome/browser/features.html here].
| |
| * Press ctrl+f and start typing "Experimental Web Platform Features" to find that flag.
| |
| * Press "Enable," then restart your browser.
| |
| * Head back to the first example link. They should now match!
| |
| Take a look at the other examples on the page; they become more complex as you go further down, so you might find one similar to your wireframe. Click "View Example" for one, and look at the CSS and HTML. Notice the grid elements in the CSS—these are the magic elements your browser now understands, and make the grid possible.
| |
|
| |
| Now begin to build your website. Start a new GitHub repo, and enable GitHub Pages (see below if you've forgotten how). Start with a few boxes as the examples do, then begin adding your own content.
| |
|
| |
| ''Step Four:'' Now that you have a general grid and page layout, look to the page design of your sources—what makes the information easy to read? How do the sources create a hierarchy of information? How do they guide your eye? [http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html This chapter] has an excellent overview of webpage design. Click "next page" at the bottom to move through the information. Another [http://webstyleguide.com/wsg3/8-typography/index.html chapter] covers web typography; feel free to begin with either, but read both!
| |
|
| |
| ===Inspiration===
| |
| * [https://codemyui.com Code My UI] great gallery; learn some js, as well!
| |
| * [http://www.w3schools.com/html/default.asp This] is the resource used by all who build webpages, from students to professionals.
| |
|
| |
| ==Previous Projects==
| |
| Woo! Coding and webpages!
| |
|
| |
| Begin with videos 1–7 from [http://www.dontfeartheinternet.com/ Don't Fear the Internet]. They are amazing and worth your time. You should come out of the end with:
| |
| # A folder naming your website
| |
| # An .html file (''not'' a .txt file!) that contains your first webpage
| |
| # A .css file that contains the style for your webpage.
| |
|
| |
| Once you have emailed me those, continue on below to learn how to access your page from anywhere! You will:
| |
| # Create a GitHub account to host your work. This will be where you turn in all of your assignments for this class and Computers II, so don't lose your login information!
| |
| # Create a GitHub Pages account to make hosting easier.
| |
| # Upload (or "push") your project from Don't Fear the Internet to a repository on Git, and access it through the browser.
| |
|
| |
| Here is how you'll do it.
| |
| * Go to [http://github.com github.com] and create an account. You'll need to verify your email address, so make sure you can access that, too!
| |
| * Watch the video below to set up GitHub Pages in your account. Where he creates a poem in his .html file, you should copy your .html file from above. You can close the video after he moves to his desktop.
| |
| {{#ev:youtube|https://youtu.be/bFVtrlyH-kc?list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV|||||start=138}}
| |
| * Send me the URL! It should be [yourGitName].github.io/[yourProjectName].
| |
| * Make your website amazing. Can you fix the broken image links? If so, do it, and go to video #8 from Don't Fear the Internet! Make the changes to your new website directly in the browser. I will follow your Git page, so no need to email your progress!
| |
|
| |
| ===Mail Merge===
| |
| Today we will combine the powers of MS Word and Excel to create a '''Mail Merge!''' A mail merge will take a table of information such as names, addresses, salutations, etc. and insert them into a Word document. This allows you to send (semi)personalized letters/handouts/documents to individuals without all of the cutting and pasting it would require otherwise.
| |
|
| |
| Your goal is to write a letter requesting a letter of recommendation from five community members (teachers, counselors, religious leaders, employers) and include a document that will tell them about what you have been up to.
| |
|
| |
| # Download [https://docs.google.com/document/d/11ccFzgBasLSlWB53c86D1cEAgkWz0EtMeioxI1KAs04/edit?usp=sharing this file] to your shared folder and open it in Word. Save this as Last_RecForm.docx
| |
| # Open a blank Excel workbook. Make a list of 5 people who could write you a letter of recommendation* by placing each name in its own row in column A. You should have A1:A5 filled when you have finished. *This can be anyone you are not related to. Save this as Last_RecMerge.xlsx
| |
| # Look over the form. Note that most of page one is specific to one person, not everyone on your list. Mark those questions that require a personalized answer with two hashtags/pound signs/octothorpes: ##
| |
| # Fill out the rest of the questions. Your resume is probably going to be helpful here. Fix the format as you go, and feel free to remove all of the horizontal lines.
| |
| # Create a new Word document and write a letter requesting a recommendation. Use [https://owl.english.purdue.edu/owl/resource/653/01/ this OWL guide] to help with content and formatting. Place your two pound sign around any place that will require something specific to an individual (name, address, pronoun, etc). Save as Last_RecLetter.docx
| |
| # Follow [https://support.office.com/en-us/article/Mail-merge-using-an-Excel-spreadsheet-858c7d7f-5cc0-4ba1-9a7b-0a948fa3d7d3 this guide] to add the information in your Excel spreadsheet to the ## spaces in your Word document.
| |
|
| |
| ===OneNote===
| |
| * Printing
| |
| * OCR
| |
| * Styles
| |
| * Tables
| |
| * Inking
| |
| * Hyperlinks
| |
|
| |
| '''College Search!'''
| |
| Yesterday we looked at OneNote, an excellent program that makes collecting information from many sources really easy. One of the more difficult choices you will be making in the coming year(s) is what to do after high school. We will work on this for the next few days, but I want to give you a head start today. I'll be looking for a unique and neat organization of the information you pull together, and a wide number of universities you are interested in.
| |
|
| |
| Take some time today to look at the colleges you have heard about, or have an interest in. Some things to look for:
| |
| * Important dates. Some accept applications from motivated high school juniors, and others have very early scholarship application dates. Feel free to pull from our [https://calendar.google.com/calendar/embed?src=tsas.org_i84vs3njn8f70184uunhlahqr4%40group.calendar.google.com&ctz=America/Chicago College Info Calendar]
| |
| * Scholarship offerings and their requirements. What ACT scores are necessary? GPAs? If you are younger, there may be time to improve your standing. If you are a senior, it can help you narrow your choices.
| |
| * Talent grants/scholarships. We just heard from [http://www.okcu.edu/ OKCU], which offers a good number of [http://www.okcu.edu/admissions/freshmen/scholarships/index#talent talent scholarships]. Remember that these may require additional applications, auditions, or interviews. Be sure to add these to your calendar of important dates.
| |
| * Size, location, student:faculty ratio, overall cost, majors offered, and notes about your overall impression.
| |
|
| |
| Following are some sources of information about them. Pull the information together in a way that makes sense to you. After the list are some suggestions for using OneNote.
| |
| * [http://collegescorecard.ed.gov College Scorecard] check size, average debt, graduation numbers, and the financial aid calculators.
| |
| * Google "[name of your college] scholarships" to get straight to their financial aid page. This is the place you should start your cost formulations.
| |
| * [http://colleges.usnews.rankingsandreviews.com/best-colleges ''USNews''' list of top colleges and universities]
| |
| * [http://ctcl.org/ Colleges that Change Lives]
| |
| * [http://occf.org/scholarships/ Oklahoma City Community Foundation scholarships]
| |
| * Of course, the primary source for your information should be the college's website itself!
| |
|
| |
| OneNote has many more features than we were able to cover yesterday, but here are a few tips:
| |
| * Make a calendar by typing a date, pressing Tab, then typing the next date in the week. Once you hit the end of the week, press Enter to create a row of blank cells for the events on those dates.
| |
| * Make any text a hyperlink by using the first thing we learned in class: ctrl+k. Highlight the text you want to make into a link, press ctrl+k, then ctrl+v the link into the box.
| |
| * Take a picture of part of the screen with Windows Key+s. The screen will go grey and the cursor will turn into a plus sign; use this to draw a rectangle around the part of the screen you want to copy. (If you just want to move a picture, just click and drag it into OneNote!)
| |
| * Add a "?" tag to those questions you have about a college. Use the Tags button up top to pull them all together. I'll answer all I can, and find answers to those I can't!
| |
| * Use the To-Do tag to create a list of things to complete within this year. It may be emails to send, events to attend, or essays to complete. Again, the Tags button will pull these all together for you.
| |
| * The exclamation tag could be used to mark things you're excited about, or important information about a college.
| |
| * The little plus sign next to each paragraph can be used to easily drag them around and reorganize.
| |
| * I hesitate to add, because it is easy to lose time with it, but you can also use templates under the "Insert" tab up top!
| |
|
| |
| ===Excel Error Cleanup===
| |
| Challenge: apply =IFERROR to your INDEX/MATCH formula, then copy-drag to fill the column.
| |
|
| |
| Now try it with the SUMIF and COUNTA function!
| |
|
| |
| ===Index/Match GPA Calculation===
| |
| [https://docs.google.com/spreadsheets/d/1pNbEXZjIGjvdVR2wHJlmJmtjFNwaTFDwFBccbODUnYw/edit?usp=sharing DOWNLOAD THIS]
| |
|
| |
| Now that we have figured a simple average using the =AVERAGE() function, let's make it a bit easier on the user (and a bit more difficult for us) but using INDEX and MATCH. These will allow the spreadsheet user to enter a letter grade for each class ("A", etc.) and still receive an overall numerical GPA average.
| |
|
| |
| ===Excel Initial Tutorials===
| |
| Thursday 12/8:
| |
| * Zip and email exercises 1-8 if you have not done so.
| |
| * Email your GPA calculator if you have not done so.
| |
| * Head to [http://www.gcflearnfree.org/excel2010/ this series]
| |
| * Work through tutorial 11, saving each new file to a new folder called "[Last] Excel Practice" in your H: (shared) drive.
| |
| * Once finished, zip and email the new folder to me.
| |
|
| |
| Challenge:
| |
| Your GPA calculator works with numbers; can you make it work with letter grades? One way to do it is through INDEX and MATCH. Google around and see what you can come up with.
| |
|
| |
| Wednesday 12/7:
| |
| Create an Excel worksheet that will calculate your GPA for you!
| |
|
| |
| Download [https://drive.google.com/file/d/0B72Ssp8dW8t5aXdDeXl3Q3E4NlU/view?usp=sharing the graduation requirements] and create in Excel.
| |
|
| |
| Add format and formulas that will let you put a number next to each class and retrieve an overall average at the end.
| |
|
| |
| Tuesday 12/6:
| |
| * Head to [http://www.gcflearnfree.org/excel2010/ this series] from yesterday.
| |
| * Following the directions below, work through tutorial 8.
| |
| ** After completing tutorial 8, download the practice sheet.
| |
| ** Change the first employee name in worksheet "2009" from "Allenson, Carol" to your name: "Last, First"
| |
| ** Once you have changed the name, [[How To:Add a Printer|print]] (click the link to learn how to add a printer) the entire worksheet "2009" on a single page to the printer called "Lab 1."
| |
| ** To make it fit, you'll need to adjust the scaling settings on the print screen.
| |
| * Save your practice worksheets to the "[Last] Excel Basic Practice" folder in your H: (shared) drive.
| |
|
| |
| Monday 12/5:
| |
| [http://www.gcflearnfree.org/excel2010/ This series] is an excellent introduction to Excel 2010.
| |
| * Open your H: (shared) drive, and create a folder called "[Last] Excel Basic Practice." (Replace "[Last]" with your last name.) To create a folder, press "New Folder" in the top bar or press ctrl+shift+n.
| |
| * Click the link above, and go over the first '''6''' tutorials.
| |
| * Some tutorials have a spreadsheet at the end to download and modify. Download them as you go, and complete the instructions to practice what you have learned.
| |
| * As you finish each, save the spreadsheet to the folder you created. Name the files "Practice [#]" replacing "[#]" with the number of the tutorial.
| |
|
| |
| ===Résumé Draft===
| |
| <div style="float:right">{{#widget:Iframe
| |
| |url=https://docs.google.com/presentation/d/e/2PACX-1vSRj89xe9URoJDwNtkMQ0e3dIGJXSXhpoMnrVRc59N0dBg4ZghIhw75kb__BIldZWj0Uqza-PSabKPS/embed?start=false&loop=false&delayms=3000
| |
| |width=480
| |
| |height=299
| |
| |border=0
| |
| |allowfullscreen=true
| |
| }}</div>
| |
| Slideshow [https://docs.google.com/presentation/d/e/2PACX-1vSRj89xe9URoJDwNtkMQ0e3dIGJXSXhpoMnrVRc59N0dBg4ZghIhw75kb__BIldZWj0Uqza-PSabKPS/pub?start=false&loop=false&delayms=3000 here].
| |
|
| |
| During this exercise you'll create (or clean up/update) your résumé. We'll use [http://www.docs.google.com Google Docs] for the heavy lifting, and apply some of what we learned from the pretty syllabus exercise. You'll need [https://docs.google.com/document/d/1wRK_WJPf3ZV4Ak4Qo0FX97_vSZqzJpzOchuP0WsiHro/edit?usp=sharing this document], so open it and make a copy to your Drive. Fill in the blanks as thoroughly as possible—dates and addresses are very helpful. Your school's address is 1202 W Easton St. Tulsa, OK 74127.
| |
|
| |
| After filling out the form with your information, look over the templates available from Google. Most are terrible for reasons we have discussed, but there are a few that can be polished nicely. Once you've chosen one, begin moving your information from the form to the template, making sure to keep an eye on formatting. A review of the formatting rules:
| |
| * Two fonts are more than enough.
| |
| * The same information (titles, addresses, descriptions) get the same formatting.
| |
| * Handwritten/script, gothic/blackletter, and decorative fonts have their place. This is not it, unless you [https://www.youtube.com/watch?v=mH85olz1ru8 created it yourself] or are [https://en.wikipedia.org/wiki/Johannes_Gutenberg Johannes Gutenberg].
| |
|
| |
| Once you are satisfied that your résumé is complete, share the file (blue button in Docs) with the person you share a desk with. They should check for the layout rules above, as well as misspellings and missing information. Use the "Suggesting" option in Docs for this. Once they are finished, they should add their name to the footer and let you know they have finished.
| |
|
| |
| Share it with me when both of you are satisfied with your résumés.
| |
| ===MLA Citation Tutorial===
| |
| <div style="float:right">{{#widget:Iframe
| |
| |url=https://docs.google.com/presentation/d/1pBLkNCi_CzdL_Ibe7-o8Q8LzdlWTfO_6O_tmsAp4zfA/embed?start=false&loop=false&delayms=3000
| |
| |width=480
| |
| |height=299
| |
| |border=0
| |
| |allowfullscreen=true
| |
| }}</div>
| |
| Today you will create a tutorial for the new MLA format released this summer. There are [https://www.mla.org/MLA-Style/What-s-New-in-the-Eighth-Edition a few changes] to keep in mind as we learn the new format, and [https://owl.english.purdue.edu/owl/resource/747/01/ OWL at Purdue] has an excellent overview.
| |
|
| |
| # Open a new Word document and create a 2 x 9 table.
| |
| # Insert each core element into its own row in the first column, then provide an explanation for that element in the right column adjacent. Don't forget to include the punctuation necessary.
| |
| # Include an example (or two) for each element.
| |
| # Below the table, write a proper citation of Millie Bobby Brown's performance in episode 2 of ''Stranger Things.'' This will place her in the first element: author (as she is the creator of her performance). Include the director and writer in the fourth element slot.
| |
| # Email the document to me.
| |
|
| |
| ===Inkscape Intro===
| |
| We are going to switch tracks a bit today and start learning Inkscape, a program that will help you create '''vector images''', which are made up of ''nodes'' and rendered mathematically. In contrast, programs like Photoshop, GIMP, and MS Paint create '''raster images''', which are made up of pixels. Here's an illustration of the difference:
| |
| [[File:Bitmap_VS_SVG.svg|center]]
| |
| Most of the images we see on the web are raster images (like .png, .bmp, .jpg, etc.) because they were easy to render on early monitors, and easily represent lots of detail and gradient colors, like photographs and some artwork. Vector images, however, are becoming more widely used when scaling is important and detail is essential. They are used in many video games and for professional publishing and screen printing. It is also possible to control them through simple coding, so we will be using them later when you code your own video games in Computers II.
| |
|
| |
| ====Assignment: Inkscape Tutorial====
| |
|
| |
| Here is a tutorial for creating an adorable doughnut. Open Inkscape on your computer, ([[File:Inkscape_Logo.svg|30px]]) then follow along with the tutorial below. If you do not have headphones, use the closed captioning. This is partly a test of your resilience and problem-solving skills, so if you get stuck, ask a neighbor or Google for an answer.
| |
|
| |
| {{#ev:youtube|https://www.youtube.com/watch?v=s41_-qsmA7s}}
| |
|
| |
| I can't wait to see what you make! We will wrap up your work on Monday, but if you knock it out early, try to make your doughnut look disgusting, radioactive, or give it a face!
| |
|
| |
| ===Document Formatting===
| |
| Make the syllabus look professional, in both Drive and Word.
| |
| # In Drive, open your "ugly" syllabus from yesterday.
| |
| # Press ctrl + a to select everything, then use [[Image:Driveclearformat.png|30px]] to erase the format of your twisted creation!
| |
| # That won't clear up the text arrangement, though, so you'll need to do those by hand
| |
| # ...
| |
| # ''Or'', you can use the Revision History feature to turn back your edits to the beginning.
| |
| ## Click File, then See revision history.
| |
| ## Choose Show more detailed revisions in the bottom right, then choose the earliest revision and click Restore this revision.
| |
| # Once the file is restored to its less-ugly state, download the file to Word. (File -> Download as... -> Microsoft Word)
| |
| # Open the file in Word.
| |
| # Read over the document, cleaning up any errors in grammar and punctuation.
| |
|
| |
| ====Apply Style Format====
| |
| # Click Change Style in the Home ribbon. Select Style set, then Default (Black and White).
| |
| # Select the title, then click Title in the style window.
| |
| # Select each main heading and select Heading 1 in the style window after each.
| |
| # Select each subheading in the document, then select Heading 2 in the style window after each.
| |
| # Select the bullet lists, then select the bullet icon in the Home ribbon.
| |
| # Select the numbered lists, then select the numbered list icon in the Home ribbon.
| |
| # Select the regular paragraphs, then select Normal in the style window.
| |
|
| |
| ====Change Style Format====
| |
| # Select the title, then apply a new font (and size if you'd like). Remember, your heading and title font should be heavier than your body font, readable, and is often (but not always) [https://en.wikipedia.org/wiki/Serif serif]. Here is a list of [http://practicaltypography.com/system-fonts.html respectable system fonts].
| |
| # Highlight the title, ''right''-click Title in the style window, then select Update Title to Match Selection. By doing this, you are changing the style entry for Titles. Any new title you put in the document will have the same style.
| |
| # Select one heading and change the font to match the title. Again, right-click Heading 1 in the style window, then Update Heading 1 to Match Selection. Watch as '''all''' of your headings change to match!
| |
| # Repeat the process with Heading 2.
| |
| # Select a Normal paragraph, then select a font that works well with your header font. It should be lighter, and, above all, '''readable'''. Finding guides to match common Windows fonts is difficult, but [http://www.steptoandson.co.uk/services/10-great-web-font-combinations/ eere] is a great tool to help!
| |
| # Change the Normal style in the style window as above, and you're done!
| |
| # Save to your H: drive, then email to me.
| |
|
| |
| ===MLA Formatting===
| |
| * Type/Font: Highlight ''everything'', make 12pt Times New Roman.
| |
| * Line Spacing: Highlight everything, make double spaced. Remove spaces before and after paragraphs, if needed.
| |
| * Margins: 1" all around.
| |
| * Header: Align your last name and page number to the right. Make sure the font is also 12pt Times New Roman.
| |
| * Heading: Your full name, teacher's name, class name, and date—all on separate lines.
| |
| * Title: 12pt Times New Roman—don't bold or italicize it. Center on page.
| |
| * Paragraphs: Indent each 1/2".
| |
|
| |
| ===UGLY Syllabus, Google Drive===
| |
| Learn about Google Drive login, navigation, document creation, and sharing.
| |
| * Copy [https://docs.google.com/document/d/1lc96cTGCwyioupftXwODPk7jXMggmcPTgIpA4lSZnRQ/edit?usp=sharing this file] to your own Google Drive by pressing File, then Make a Copy. This creates your own version, independent of mine and your peers'.
| |
| * Play with font size, typefaces, color, highlighting, drawing, etc.
| |
| * Share the file with me:
| |
| ** Click Share in upper right
| |
| ** Enter my email, then press send!
| |
|
| |
| ===Copy/Paste Email URL=== | | ===Copy/Paste Email URL=== |
| Learn to copy (ctrl+c), cut (ctrl+x), paste (ctrl+v), and paste without formatting (ctrl+shift+v). | | Learn to copy (ctrl+c), cut (ctrl+x), paste (ctrl+v), and paste without formatting (ctrl+shift+v). |
| Line 248: |
Line 12: |
| ===Better Gmail Names=== | | ===Better Gmail Names=== |
| If your email name is not your name: | | If your email name is not your name: |
| # On your computer, open [gmail.com Gmail]. You can't change your username from the Gmail app. | | # On your computer, open [http://gmail.com Gmail]. You can't change your username from the Gmail app. |
| # In the top right, click Settings. | | # In the top right, click Settings. |
| # Click the Accounts and Import tab. | | # Click the Accounts and Import tab. |