Wednesday, December 19, 2018

Coding Projects For The Next Level!

When you are tired of the Blockly-Style coding that is used on some programs and projects, check out the following resources to create interactive webpages and other fun ideas:

Thisissand.com:  Create your own Sand Drop Drawing!

WordArt.com:  "WordArt.com is an online word cloud art creator that enables you to create amazing and unique word cloud art with ease.
Professional quality results can be achieved in no time at all, even for users with no prior knowledge of graphic design."

THIMBLE (MOZ://A):  "Thimble is an online code editor that makes it easy to create and publish your own web pages while learning HTMLCSS & JavaScript."  Projects include aPrivacy Avatar CardFill-In-The-Blanks StoryHacker Card Game, and a Homework ExcuseGenerator!




Note:  If you create an account on THIMBLE, you will soon need to create an account on Glitch to save, and share your work.  Read the information found here about the chang es.


Code Club:  "Here you’ll find step-by-step instructions for our coding projects, which will teach you how to create games, animations and more with code."  Projects include using Scratch,HTML & CSSPython, and learning how to use a Raspberry Pi!  One of the most popular projects is learning about Pixel Art, you should try it!

BreakoutEDU:  Here is a BreakoutEDU Virtual Escape Room to try!  Let me know what your best time is!

BreakoutEDU #2:  Birthday Party Puzzler digital escape room!  

Tuesday, December 18, 2018

Programming Unit Final Project - Holiday Coding Projects For Everyone!

This is your chance to turn your coding experience into a holiday project.  Follow the links below to the different activities today.  Enjoy these this week!  - Mr. S


Dancing Yeti Project: Make the Yeti Dance, a digital animation project from Made with Code!
https://www.madewithcode.com/projects/

Holiday Emoji Project:  You’re about to design a custom holiday emoji that you can share digitally or IRL.

Codecademy is the easiest way to learn how to code. It's interactive, fun, and you can do it with your friends. 

Twelve Days of Christmas Code:  Nice, simple implementation of the Twelve Days of Christmas. As jhixson puts it, “Pretty straightforward … in JS with a few ES6 bits.” Run it today, there are still a couple of days left! That is of course, assuming the twelfth day of Christmas is actually Christmas, which I believe is out of scope of this blog article.

Snowstorm Project:  A fancy, customizable JavaScript-driven snow effect which you can easily add to your homepage to eat up the user’s CPU! Also included, if you are feeling a bit Clark Griswoldy, is an experimental Christmas Lights script, which you can find at the top of the page.

Java Christmas Lights:  Great idea and execution, Anvaka! As noted on the README.md, “The tree is built of two spirals. These 11 lines of code render one line on spiral. It includes 3d projection and background shadow.”

Hannakuh CSS Menorah Here is a Menorah written entirely in CSS. Neat!SANTA TRACKER by  GOOGLE Leave it to Google to outdo everyone on the list. Enter stage north, the Santa Tracker. As Google puts it, the Santa Tracker is, “an educational and entertaining tradition for the December holiday period.” While this project appears quite jolly on the surface, Santa actually is currently involved in litigation with Google over this tracking system. Expert witness, Rudolph. Either way, enjoy!

Original Post by SourceToad.com at https://www.sourcetoad.com/code/5-holiday-code-ideas/

BONUS SITE:  Christmas Experiments

Thursday, December 13, 2018

JavaScript 134-part Course Online (FreeCodeCamp.org) 18-19 S1

Learn JavaScript - Full 134-Part Course for Beginners

This complete 134-part JavaScript course for beginners will teach you everything you need to know to get started with the JavaScript programming language. The font-size in this course is large, making it perfect for viewing on small screens.

(FreeCodeCamp) created this course to go along with the freeCodeCamp.org JavaScript curriculum. However, the course works on its own so going through the free curriculum at freeCodeCamp.org is not required.

By then end of this course, you will be ready to start using JavaScript to create your own projects.



Here is a list of online JavaScript (and other programming languages) editors you can use to try out the code you are writing:


You should be able to code in JavaScript without the Blockley-style for beginners. (code.org and other formats).  This is also a good way to learn how coders use different editing environments to help them.  Most of the editors allow you to quickly add items that are remembered, similar to autocorrect when you are texting, or predictive keyboards.

Show off some of your projects by emailing a link to your programs.  We will take a look at them as a class, and help you troubleshoot if necessary.

Monday, December 10, 2018

Digital Portfolios using Google Sites (CCS.US) 18-19 S1

Resumes used to be the only tool you had to showcase your academic and professional achievements when you were looking for a new job. Today you have so many more options, one of which is to create a Digital Portfolio. This visual representation of your history and greatest achievements provides employers with proof of what you can do and helps them see why they should consider hiring you. It also sets you apart from all the other candidates who simply send in a resume and cover letter.

A DIGITAL PORTFOLIO IS AN ONLINE COLLECTION OF YOUR VERY BEST WORK, THAT VISUALLY PROVES WHAT YOU CAN DO!


"If you’re in the process of developing a digital portfolio, you can’t afford to view it as a mere collection of work samples; you need to think of it as your preeminent marketing piece." 
- Ram Castillo (Award Winning Designer and Art Director)

"One of the inherent dangers with digital portfolios, for example, is that the technological novelty of the product could overshadow the purpose of the portfolio."
Digital portfolios: fact or fashion?" by Helen Woodward & Phil Nanlohy
Resource:  https://www.tandfonline.com/doi/abs/10.1080/0260293042000188492?journalCode=caeh20

According to Inc. Magazine (Online) and the Young Entrepreneur Council you should turn experiences into a story worth sharing.  According to the article "How to Create a Digital Portfolio That Stands Out From The Pack", some of the main reasons to create a Digital Portfolio are to:
  • SHOW OFF YOUR BEST WORK
  • TELL YOUR STORY
  • FEATURE REFERENCES & RECOMMENDATIONS
  • EMBED A VIDEO OR PROJECT

One of the best resources for creating a Digital Portfolio is at https://info.portfolium.com/blog/digital-portfolio-tips.  There are 10 PRO Tips that are discussed in the article that you should consider using in this project.

Here is the Process of Creating an Electronic Portfolio developed by Helen C. Barrett, Ph.D.:
  1. Creating an Interactive Portfolio with Google Sites
    1. 1.1 Getting started
  2. Keeping a Learning Journal
  3. Authoring an electronic portfolio
    1. 3.1 Create a first page - Introduction & Table of Contents
    2. 3.2 Set up a structure using goals (or themes) as organizing framework
    3. 3.3 Create one page for each section
    4. 3.4 Upload artifacts/create hyperlinks
    5. 3.5 Write reflections for each goal/skill and each artifact
    6. 3.6 Write future learning goals
    7. 3.7 Publish Portfolio - Seek Feedback
  4. Evaluating Portfolios


STEP BY STEP INSTRUCTIONS

Step 1:  Sign-In to Google

Step 2:  Click your "Waffle" (Upper Right Corner) to open your list of Google Applications

Step 3:  Click on Google Sites

Step 4:  Watch The Video Below:


Step 5:  Design Your Site Heading
  1. Upper Left Corner - Change the Site Name to CCS Student Portfolio, and ADD a Logo of your choice.
  2. Change the Site TITLE to your Full Name.
  3. Move the Pointer to the Lower Left Corner of the Heading and choose the type of Image used for the Background.  You may also Click Header Type to change the Header area.
  4. Click on the TEXT BOX button (under Insert in the menu on the right side of the screen), and add space below the Header for a Personal Mission Statement / Memorable Quote / Job or Position you are interested in.
  5. Click on one of the Layouts (under Insert in the menu on the right side of the screen), and add an "ABOUT ME:" section below the Text Box.  See the sample site at https://sites.google.com/ccs.us/hscribnerportfolio/home for what to write in this section.
  6. Click on one of the Layouts (under Insert in the menu on the right side of the screen), and add an additional section for at least 2 of your most recent projects that you are proud of.
  7. Click the PAGES link in the menu to the right side of the screen.  Add a PAGE labeled "CCS-515 Projects".  Add TEXT Boxes for Title Bars, and Insert Sections to add all of your work for each project.  You can Upload files, or link directly to your Google Drive.
  8. Click the PAGES link in the menu to the right side of the screen.  Add a PAGE labeled "CEW Evidence".   Use this page to link/post information about anything that would qualify as evidence for PA Career Education & Work Standards.  These can include resume's, cover letters, career project investigation surveys or worksheets, individual assessment forms, and any other documents from work you have completed.  Remember, 8th-Grade students are required to have at least eight (8) items in this section prior to heading to high school.  You MUST have an Individual Career Plan started as well.  See your counselor for help with this.
  9. At any time during the design process you can click the PREVIEW Button and see what your site will look like. 
Once you are in high school, or with your parent's permission, create a personal Gmail Account and use the following link to transfer your work to your own account.  This way you will not lose this as you graduate, and stop using your ccs.us account:


PROJECT REQUIREMENTS

You must have the following items for credit:

Header and Home Page:  Student must have a legible header with your site title (CCS Student Portfolio) and a small logo of some sort.  Student must also have a "Personal Mission Statement / Memorable Quote / Job or Position You Are Interested In" section.  The "About Me" section must include a tasteful, professional-looking picture of the student (Collegium I.D. picture is recommended), and a paragraph or two as outlined on Mr. Scribner's Sample Site.  Student must also have at least two (2) current projects outlined, with images, on the Home Page.  Make sure all titles and additional pages are accessible from this page.

Morning Meeting/CR Journal:  Student will create this page as a place-holder for Constructed Response Items, Journal, or other posts as required.  Student can use this space to comment on news, events, or other interests.  Make sure that anything posted is school-appropriate, and in good taste, even when it might be a controversial or inflammatory topic.  Be respectful at all times.

CCS-515 Projects Page:  Student must add sections for Computer Skills & Applications or STEAM-E, and include enough sections for every project to date.  Student should review their Google Drive and the Class Assignment Site's Archive Section (collegiumtech.blogspot.com) to make sure they have all the previous projects.  Add additional sections for other classes.  There should, at minimum, be spaces for English Language Arts, Social Studies, and Science.  Make sure to LINK any work from your Google Drive for each class.

CEW Evidence Page:    Students should scan any external document to their Google Drive prior to adding them to this page (Try to add them as a PDF).  Make sure to add all items from CSA or STEAM-E classes that qualify as CEW Evidence here, instead of on the previous page.

Additional pages may be created for other projects, specific reasons, or at the request of other teachers.  This site should be updated regularly with new work, and evidence for PA CEW Requirements.  Use this site to reference work during interviews for jobs or college entrance meetings.  Make sure that your parents see this site, and approve of anything you post.

TURN IT IN BY EMAIL THE PUBLISHED LINK TO MR. S (hscribner@ccs.us) FOR CREDIT!

Wednesday, December 5, 2018

CS Education Week 2018 - CS Discoveries Unit 2 - Lesson 4: Headings in HTML

In this lesson, students continue to use HTML to structure text on web pages, this time with headings. Students learn how the different heading elements are displayed by default and practice using them to create page and section titles. Students then start to decide how they will organize their content on their own personal web pages. In the last level, students begin the project that they will continue to work on throughout the unit.

Web Lab

Overview

In this lesson, students continue to use HTML to structure text on web pages, this time with headings. Students learn how the different heading elements are displayed by default and practice using them to create page and section titles. Students then start to decide how they will organize their content on their own personal web pages. In the last level, students begin the project that they will continue to work on throughout the unit.

Purpose

This lesson introduces the heading tags that students will use in their pages for the rest of the unit. It also reinforces the general structure of HTML (opening tag / content / closing tag) so that students are ready to begin adding their own content in the project.
The personal web page that students work on at the end of the lesson will follow them throughout the unit. As they learn more HTML and CSS, they will improve the page, adding images, colors, and different fonts. This lesson is a chance for them to start the page, knowing that they will continue to improve it over the next few weeks.

Agenda

View on Code Studio

Objectives

Students will be able to:

  • Use heading tags to change the appearance of text on a web page.
  • Structure content into headings, subheadings, and paragraphs.

Vocabulary

  • Heading - A title or summary for a document or section of a document.

Introduced Code


Goal: The goal of this discussion is to review the tags that students saw in the previous lesson.
  • <!DOCTYPE html> - Tells the computer that this is a document written in HTML
  • <html> - Indicates the beginning of your code written in HTML
  • <head> - Contains information (sometimes called "metadata") about your web page
  • <body> - Contains all the main content of your web page
  • <p> - Defines a paragraph

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming

If you are interested in licensing Code.org materials for commercial purposes, contact us.

Monday, December 3, 2018

CS Education Week 2018 - CS Discoveries Unit 2 - Lesson 3: Intro to HTML

In Unit 2, you’ll learn how to create and share the content on your own web pages. After deciding what content you want to share with the world, you’ll learn how to structure and style your pages using HTML and CSS. You’ll also practice valuable programming skills such as debugging and commenting. By the end of the unit, you’ll have a personal website that you can publish to the Internet.


Lesson 3: Intro to HTML

Web Lab

Overview

In this lesson students are introduced HTML as a solution to the problem of how to communicate both the content and structure of a website to a computer. The lesson begins with a brief unplugged activity demonstrating the challenges of effectively communicating the structure of a web page. Students then look at an exemplar HTML page in Web Lab and discuss with their classmates how HTML tags help solve this problem. Students then write their first HTML. A wrap-up discussion helps to solidify the understanding of content vs. structure that was developed throughout the lesson.

Purpose

This lesson introduces many new concepts and tools to students. They are introduced to HTML, the Web Lab tool, and how to navigate lesson resources on Code.org in general. While the understanding of HTML as a way to communicate the structure of a web page is a critical learning objective, this lesson has students do minimal programming since there are many other new ideas and tools to grasp. In the next lesson students will have more time to spend programming in HTML.

Agenda

Vocabulary

  • HTML - Hypertext Markup Language, a language used to create web pages
  • HTML Element - A piece of a website, marked by a start tag and often closed with an end tag
  • HTML Tag - The special set of characters that indicates the start and end of an HTML element and that element's type
  • Website Content - The raw text, images, and other elements included in a web page
  • Website Structure - The purpose of different pieces of content in a web page, used to help the computer determine how that content should be displayed

Introduced Code


Example Site:

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)



AP - Algorithms & Programming



If you are interested in licensing Code.org materials for commercial purposes, contact us.

Monday, November 5, 2018

"Great" Room Design Project

Students will demonstrate their understanding of the basics of design by designing their own "great room," using appropriate color schemes.  Students now have a basic background of interior design principles. They will apply what they have learned about drawing to scale, measuring for design, and space planning requirements & interior design by designing a room of their own.

Check out this cool site:  https://www.oneroomchallenge.com/









Students will:

  • 1. learn about art as a profession as well as an a vocation.
  • 2. practice measuring to scale.
  • 3. convert actual to scale sizes.
  • 4. learn to draw given lengths accurately.
  • 5. integrate with a geometry unit in mathematics.
  • 6. integrate with writing and computer technology by developing a precise description of their dream room.


1. Each student will select furniture for their "great room." They are to plan a pleasing layout and consider the traffic pattern.

2. A focal point should be identified.

3. Students are to color their room. They should include as many samples and pictures as possible to give a reasonable feel of the room.

Items should be downloaded/scanned to produce your final product.

Project Overview:  You are to choose a room in your own home to redesign.  This redesign will include the following details:

Flooring:  Carpeting, wood, panel, pre-fabricated, or tile?

Wall Covering/Paint:  How many gallons of paint, and what colors?  Do you need primer?  1-2 coats?  Per Gallon Square Footage will tell you how much to buy!  Wallpaper, or something else entirely?  Wainscote, panelling?

Window Treatments:  Curtains, blinds, etc.

Furniture:  Any furniture you might need for your new room.

Electronics:  Television, Cable versus Network/Internet Only, computer or laptop, how many remotes, audio componants, lighting (built in vs. lamps, etc.).  Heating/Cooling (vents vs. window/floor based units).

Additional Items as necessary:  These could include cieling fans, refrigerators/snack areas, or other specialty items.  Think about how you could best use space, and what you would want to be doing in this room.

New Windows/Doors if necessary.

GOAL:  You are the designer/salesperson and you need to have your parents (someone at home) approve your design, and the cost breakdown.  You do not need to estimate labor costs for this project.  We will assume, for sake of argument, that you are going to do all the work, with no major changes to electrical, structural, or plumbing.

Activity 1:  Pick a room in your home.  Talk to your parents about this (they are the customer), and get some ideas for how you would like to design it for them (or for you with thier approval).

Activity 2:  Measure The Room:  Draw a scale drawing of your room.  Make sure to include closets, dimensions, windows, doors, and openings. You also need to note exactly where outlets are, cieling hieghts, lighting, and other items.  Make sure your drawing is as detailed as possible.

Activity 3:  Transfer you drawing into FloorPlanner online.  Make sure to double-check your measurements in the digital version to your scale drawing.  You will use this tool to add furniture and other items as you design the room.

Activity 4:  GO SHOPPING:  You may do this in person (with your parent's permission), or online.  When shopping you must find each item you are putting in your new room.  Try to record dimensions for each item so you can enter them on Floorplanner. Obviously the items on floor planner will not be exactly like the items you find shopping, so you will need to add pictures to your presentation (see below).  Make sure to save images of all items chosen to include on your presentation.  You will also need quantity, item descriptions, and sources, in addition to pricing and delivery information.

Activity 5:  Create a Google Slides (Click for Template) presentation that outlines your designs, includes images of your room (prior to the changes), and screen shots of the design from FloorPlanner.com with images of the items you chose.  You must also include a breakdown of all your costs, and a final price for the items.

Using the REVIEW FORM (Click Here), you can present the Google Slides project to your parents, and have them give you feedback, along with their approval of this project.  You are also the salesperson for this.  See what it might take to "sell" your parents on the design.  You might need to take suggestions, and adjust your project more than once, before you get a final approval.  This is an important process to learn, not just for this project, but for life!




Monday, October 22, 2018

50 Lego Challenge 18-19 S1


Image result for lego build contestStudents will be given a chance to create using legos during class.  Each student will have access to the "classroom pile" of legos.  Students will create something using only 50 legos.  Creations will be photographed, and placed online for voting by 515 staff and students.  Students will spend another class writing a story about their creation to describe what their inspiration was, and what their project is/does.  There are no criteria for judging other than popular vote.  Subsequent build contests will vary.

Wednesday, October 10, 2018

Design a Closet - Architectural Design / Space Planning Project 18-19 S1

Today we will be learning about how to use our previous lesson (Drawing To Scale) to help us plan to use the space in a closet more efficiently.  Using our knowledge of measurement, math, and utilizing basic tools, we will measure and create a Closet Design System that might be sold at a local home improvement store.  We will measure a closet here at school, and work on the design together.  We will define some of the new terms that we should be using throughout the project, and we will sketch a scale representation of our design.  We will use readily available product specifications from brochures and online sources to design and price our closet organization systems.  Once we understand the basic idea and methods of this process, you will then be required to independently measure, design and present a project from your own home.  You will be given time in class to complete this project.  The lessons learned from this project will help you with our future Room Design Project.  Please use the following website as a reference:




For More Information here is a video about some choices from Home Depot:  

If you are interested in learning more about interior design, and the software application we will be using for a future project (Room Design), please go to the Google Apps Web Store and look for FloorPlanner.  I have already set up accounts for each of you to start designing your spaces.  We will be creating new classroom layouts for some of the teachers in our building.  Have Fun!

CSED Week 2018 Padlet

Made with Padlet