Meeting Announcements & Notes

February 26, 2016 Meeting

This week, the Fox Valley Girls Coding Club will meet in the boardroom at 25N.

Meeting Agenda:

  • Continue our Overview of Web Page Languages:
    • HTML: Hypertext Markup Language – the “skeleton” of the page
    • CSS: Cascading Stylesheets – the “skin” or “outfit” for the page
    • PHP: PHP Hypertext Preprocessing language; one of many programming languages, and the one used for WordPress coding – the “muscle”  behind the page
    • SQL: Structured Query Language – the way the page and the database talk to each other
  • Major Super-Secret Surprise!
  • Community Project:
    • Continue to layout Film Details page using HTML and CSS

 

Meeting Announcements & Notes

February 19, 2016 Meeting

This week, the Fox Valley Girls Coding Club will meet at Fox.Build, a new co-working maker space in St. Charles.

fox-build-logo

Meeting Agenda:

  • Continue our Overview of Web Page Languages:
    • HTML: Hypertext Markup Language – the “skeleton” of the page
    • CSS: Cascading Stylesheets – the “skin” or “outfit” for the page
    • PHP: PHP Hypertext Preprocessing language; one of many programming languages, and the one used for WordPress coding – the “muscle”  behind the page
    • SQL: Structured Query Language – the way the page and the database talk to each other
  • Intro to HTML and CSS:
    • PowerPoint presentation
    • Hands-on exercise: build your own HTML page using a text editor
    • On-line tool for HTML/CSS/Scripting: jsFiddle – allows you to type your HTML and CSS and preview the output
  • Community Project:
    • Continue to layout Film Details page using HTML and CSS
Meeting Announcements & Notes

February 12, 2016 Meeting

In our 6th meeting this is what we covered:

  • Demonstration of Piper:  an engineering toy that teaches kids about how computers are put together
  • Overview of Web Page Languages:
    • HTML: Hypertext Markup Language – the “skeleton” of the page
    • CSS: Cascading Stylesheets – the “skin” or “outfit” for the page
    • PHP: PHP Hypertext Preprocessing language; one of many programming languages, and the one used for WordPress coding – the “muscle”  behind the page
    • SQL: Structured Query Language – the way the page and the database talk to each other
  • Intro to HTML and CSS:
    • PowerPoint presentation
    • Hands-on exercise: build your own HTML page using a text editor
    • On-line tool for HTML/CSS/Scripting: jsFiddle – allows you to type your HTML and CSS and preview the output
  • Community Project:
    • Begin layout for the Film Details page using HTML and CSS
Glossary and Concepts

Intro to Web Technology

In Week 6 we will look at basic Web technologies as we work on our Community Project:

  • Client:
    • Browser on computers and mobile devices
    • Sends Request for a URL (Uniform Resource Locator – expects to get HTML back
    • Browsers all know how to read HTML
    • Executes Client-Side code: Many Websites rely on the Browser’s ability to execute JavaScript
  • Server:
    • Runs Web Server software (IIS on Windows, Apache, etc. that “Serves” up the Web pages
    • Sends Response as HTML to the Browser
    • Hosts and executes Server-side code modules
      • Code can be in PHP, Java, C# (ASP.NET), etc.
    • Hosts images and scripts for the site
      • May host HTML pages but the HTML Response could also be generated “on the fly” by the code
  • HTML
    • Hypertext Markup Language
    • Determines structure of the page layout
    • Basic structure of an HTML page
      • HTML <html></html> outer wrapper for the whole page
      • Head: contains metadata and title; note that the title appears on the tabs in browser <head><title>My Web Site</title></head>
      • Body: <body></body> precedes the closing </html> tag; contains the content for the page. Content within the body can be structured with other tags, like <h1> for header, <p> for paragraph.
      • Each tag has to have a matching closing tag
  • CSS
    • Cascading Style Sheet
    • Determines appearance of the page
    • Defines style attributes for specific tags or specific named items on a page or site
    • Can also define style for a class of items (more on this later…)
  • View Source/Developer’s Tools
    • Usually an option from the Browser’s shortcut menu: “View Source” or “View Page Source” allows you to see the actual HTML
    • Developer’s Tools: allows you to see much more of the structure of the site, including the CSS, scripts, etc. You can try out and preview some modifications here as well
Meeting Announcements & Notes

February 5, 2016 Meeting

Agenda:

  • Wireless connection announcements & Housekeeping
  • Introduction to Databases: PowerPoint and discussion
  • Further discussion of our new project – Geneva Film Festival Website
    • Refine requirements
    • Prioritize requirements
    • Get started with the database for the films
  • Demos of any of last week’s Scratch projects (In case anyone created something during the week that they want to share)
  • Continuation of GWC Lesson 1.2 – Video Game Lab
  • Questions/Comments/Discussion

Note: We will be meeting in the board room in 25N.

Coding in the Community

Coding In Our Community

As we work to learn more about the many possibilities that come with learning how to code, our club decided to feature individuals or businesses that we encounter in our own community who have been able to create, improve, streamline or influence through coding.  Here is our first feature of Coding In Our Community.

Featured Coder: Mr. Brian Wis, Music Teacher, St. Charles North High School

Mr. Brian Wis, Music Teacher at St. Charles High School (SCN) in St. Charles, IL has created an app called Note Names that all music students at SCN use.  Note Names is a game that is played in class as well as being used for assessment purposes as part of students’ final exams. The primary purpose and reason for the app design is to help students throughout the music department become more musically literate.

Wis recalls having thought of the idea for the Note Names app for the first time in the 1990s when he was teaching band.  He thought that the kids were having to learn so much at once that if there was a way they could “internalize the names of notes they would be ahead of the game.”

Once Wis decided to make his idea a reality, he became a self taught coder. Originally, he used a language called HyperTalk (a coding language developed by Apple). HyperTalk has now evolved in the form of LiveCode, which is compatible with Windows, Mac, IOS, and Android.

Since its appearance in the app store, Note Names has been downloaded 11,000 times!  Wis says that he is “happy that music teachers are using it.”  He also believes that Note Names has achieved what he thought it would, but as with any functioning app, he has also made changes and updates along the way based on user input.  “Student feedback has definitely helped refine the game,” says Wis.

Along with Note Names, Wis has created other apps for music students such as Rhythm Reactor, Rhythm Tapper, and Interval Mania.  Wis explains how every app is different and “has its own challenges.”  But, he adds, “Once you learn to code one, you can use things that you used in that app to create a new one.”  For example, one feature that all of Wis’s apps have in common is connectivity to Google Docs to record students’ scores and gather their preferences.  Once the code was written for one app, it could easily be plugged into any new app.

According to Wis, “The ability to code gives me the tools I need to help accelerate student learning.  It allows students to do 10 times as much work in the same amount of time that it would take to write out the note names.”

Thank you to Mr. Wis for showing how code can be used to not only help students learn  information more quickly, but for sharing the impact code has had for him as a teacher and musician.

Glossary and Concepts

Intro to Databases

In Week 5 as we start analysis and design for our group project, we touch on basic concepts for Databases

Domain Model: In Software Design, the Domain means the sphere of knowledge specific to the business for which the software is being developed. During design, we usually define a model that abstracts each relevant domain entity and its attributes. Example: to develop a system for managing classes and enrollment at a school, the domain model might include entities for Student, Course, Faculty, etc. The model would need to define the relationships as well

Relationships:

  • One to Many: Example: Course to Section – Each Course can have multiple Sections; a Section belongs to only one Course.
  • Many to Many: Example: Section to Student -Each Section can have many Students; each Student can enroll in many Sections
  • One to One: Example: Faculty to Salary. All columns pertain to just one Faculty member, but may be separated into two tables for security reasons. Or may be in one table with defined Views controlled by permissions

Database: a structured repository for persisting information (data!). In Web Development, the information a user enters into a form and submits is stored in a database if it will need to be retrieved at a later time.  Lists and Detail views of items on a Web Page are often populated by look-ups to the database.

  • Table: a set of data records for a single type of entity (a thing relevant to the domain being modeled) organized into rows and columns. Example: Student table would represent the Student entity within a domain model for a School system.
  • Row: stores one particular record in a table; example: each Student has her own row
  • Column: each column represents a single Attribute of the thing being represented in the table; e.g. FirstName, LastName, DateOfBirth
  • Primary Key: unique identifier for a row in a table; e.g., CourseID for the Course table
  • Foreign Key: a value in a table that links it to another table. Used in One-to-Many relationships, e.g., the Section table would have a CourseID column

SQL: Structured Query Language. Allow us to query the database to retrieve information and to modify the tables and their data using CRUD operations

CRUD: Commonly used acronym for Create-Read-Update-Delete; refers to the types of operations allowed against a database

Learn more about SQL and Try it Out at:  W3 Schools SQL Tutorial