Instructor Critique

Through the course of my project development, I depended on several "instructors," including Lynda.com, www3 schools, jQuery forums, Peter Rich, and the Hard Core Club.

The first tutorial I did was with Lynda.com on HTML5. That instructor was very specific, had a process that well thought-out before the presentation, and had a very clear voice that I could hear. I was very impressed with this tutorial. However, the next tutorial I did with CSS was not as good. The instructor kept making mistakes and correcting them through the tutorial. It seemed that he could have done a little more work before the tutorial to make it just a little bit more smooth and understandable. But overall I felt that Lynda.com was a good place to go to start on something you know very little about. It took me through all the steps and got me working at a functional level.

I frequently referred to w3 schools for help with how to make horizontal lists, making links display in new windows, and other tricks like that. It was a really nice reference so I could check my syntax with online examples and better understand the code I was using.

After my classmate told me about the JQuery overlay, I had a hard time trying to implement that. I had to look up what others had posted on forums to understand what using that would look like in my code.

For me the best instructor for the course was the course instructor, Peter Rich. Although he often let me do things the wrong way before I learned the right way (which frustrated me), he directly helped me on my project, which help is always the best way anyways. And I often found that after he helped a little, I could figure out for myself what I needed to do.

For setting up the database, I also used Kevin Ashton's Hard Core Club. The only trouble with that was that I also used the tutorials on Lynda.com, which advised other ways to set up the database. Because I felt that both were good sources, I was confused as to which one I should use, and they were conflicting and for a time, having gone through both kept my database from working. I'm still not very clear with the whole process, but I better understand the options.

I was glad to have so many instructors this semester. I feel that through this project, I know where I can go to get assistance on projects, and I have a better feel for the resources that are available to instructional designers. Thank you, teachers!

Step 10: Finishing Touches

The finishing touches were surprisingly difficult. I wrote a list and crossed them off as I completed them. Some things, like the bottom horizontal list, I was never able to work out, despite spending a lot of time looking things up and experimenting with the code, but I got it to a place where I didn't hate it. I am so excited to have it done, and I will soon move it to be my main site. I am very pleased with how it has turned out.

Step 9: JQuery Overlay

I spent a lot of time on this and got very frustrated, but it was also very rewarding when it worked. I didn't figure out how to add a close button, so I still need to do that, but other than that, I think I did a good job! See how it works here.

Thanksgiving Scriptures

D&C 59:21 - Confess His hand in all things.

D&C 78:19 - "He who receiveth all things with thankfulness shall be made glorious; and the things of this earth shall be added unto him..."

D&C 88:33 - Rejoice in the gifts the Lord gives you.

Step 8: PHP and HTML

This week I got data from my database to display in my website. It was neat to see that happen visually and it was exciting because all the things I had been working on came together. Very fulfilling.

I also tried jumping ahead to my next step, adding an overlay, and that got a little out of control. I'll need to clean it up next week. But here is the link to my latest.

This is what I need for my pop-up

http://flowplayer.org/tools/overlay/index.html

Step 7: Putting info in the Database

This was a very important step for my project, because I put the data into my table, and now I have a concrete feel for the data types I'm dealing with. It makes me wonder if I should re-design some parts of my portfolio. For instance, I originally separated the projects by audience, but then I found out that I really only have three audiences, and I wonder if I should sort them by type of project instead. But I think I will stick with the original design for now.

Pecha Kucha Presentation

Watch my Pecha Kucha Presentation: http://vimeo.com/30191848
It's about using the NACD neurodevelopmental approach in creating children's television programs.

Databases on WebhostingBuzz

So after I completed a few of those tutorials to load MySQL and PHP on my computer, I learned that they are already included as part of my cPanel in WebhostingBuzz.

I also learned that there are not yet any capabilities to store images in a database, so in the database, you just store the link to the image, where it is stored on your server. Here is a good website for details about having images in a database.

Connect File:

• Don't put it into a public folder, or other people can hack into it.
• "../" means go up a folder, so you can save it as "../connect.php"
  
• Elements: name (i.e. "test"), Location (i.e. "localhost" or "127.0.0.1"), Password (i.e. "password")
• "$" means variable
• Require vs. require_once - difference is how many times they try to connect to DB
  

Step 6: CSS

These past few weeks I've been working on the CSS for my website. I learned a lot about it (see previous web posts on CSS). See the updated version of my site here.

More CSS

Block-level "div" element

• for applying style to a block of content
• separates out the parts of the document.
• people today say not to use div tags because they are becoming more specific, but a lot aren't used yet, so you have to choose what you want.

In-line element "span"

• Used to apply a style to an in-line part of the document (like within the text of the document)
• cool

Parts of a style:

• Selector: which elements in HTML the style will apply to
• property: identifies what property of the element(s) that the style is applied to will be affected.
• value: sets the property to a particular value.

div#content{
color: white;
}

Comments and White space

• To start a comment in a CSS file: /*
• To end a comment in a CSS file: */
• You can put a comment anywhere in the document and it will be parsed out of the functioning CSS text
• Whitespace is typically ignored in CSS, but you can add it for organization.

Statements

• "{" indicates the CSS block. Every style has a selector and a block.
• A block has many statements. Each statement is terminated by a semi-colon. ";" If you forget the semicolon, the other statements will not be understood by CSS parser, unless it's at the end of a block.

Tag, Class, and ID selectors

• Use class selectors if you think you'll use the style again.
• Use and ID selector if the style is specific to a particular element.
  

Psuedo-selectors

• i.e., visited state, unvisited states
• tag selector, link state = a:link
• tag selector, visited state = a:visited
• tag selector, hover state = a:hover
• to get rid of underline= a { text-decoration: none; }
• You can also underline it when you hover over it
• You can also do specific things for the first line of a paragraph

Managing font attributes

• font-weight
• font-family
• font-style

Positioning Content

• Relative positioning is for creating a reference point for absolute positioning.
• z index property: the third dimension--letting things go behind or in front.
• z-index: -1; (0 is the lowest number, so whatever is level 0 gets put in front)
  

Critique #1: Promises of the Book of Mormon

For this first critique, I am looking at Jacob Burdis's project, Promises of the Book of Mormon. Here are some of my thoughts:

• Technology - I am glad he's exploring Corona, because I think I gave him that idea. I don't know enough about the lua language to critique it's organization, but I think it's great that it's a cross-platform building tool, and that he's experimenting with mobile development. Good choice.
  
• Design - I feel that the design is simple and user-friendly, not too busy or too fancy. I think it is a pretty simple list of all the ways you could search for the promises - Conditions, blessings, or saved. Perhaps in the future you could also search by specific book within the Book of Mormon. On the page that lists the references, (step 7, "Abrahamic Covenant"), it looks like the play buttons will go to a video or an audio file. I wonder if there's a better way to display that. I think the navigation is mostly intuitive though.
  
• Teaching Methods - In my opinion, this project is more of an index for further study rather than an instructional piece... if that makes sense. But those indexes are becoming more and more important in the field of education as the supply of resources is increasing, so I feel that this is also a timely tool.
  

Formatting

The Box Model

• Interpreting the size of the object
• content < padding < boarder < margin

Centering on the page

• Viewport = browser, what you view.

Block vs. in-line elements

• Different types of elements
  
• Block fills up the space to the right, has a new line before and after.
• Block examples: h2, p, div
  
• In-line examples: links, section
  
• "Child" elements - everything is always in context of its parents
  
• margin: 0px auto; --> makes the distance from the edge of the viewer on the sides to the start of the content the same no matter how small or large your window
• absolute positioning: absolute within container
• relative positioning: things within it move position to it.
  

In-line only takes up as much space as it takes to fill the content.

Step 5: Installing Apache, MySQL, and PHP

This week I went through the lessons on both Lynda.com and the HardCore Club, and I found that they were very different. This made me realize that there are different ways to do the same things for this installation process. With Lynda, I installed PHP, MySQL, and phpMyAdmin. I also learned about options for downloading WAMP, a server with Apache, PHP, and MySQL.

Relational Database

Elements of an Excel spreadsheet:

• Worksheets - big table
• Workbooks
• Columns
• Rows
• Cells

MySQL Databases:

• Tables (like Excel worksheet)
• Databse (like Excel workbook)
• Entries (rows)
• Fields (columns)

Relationships exist in our designs and in our minds, but that's all. Your design for your database is like the foundation of your building. You definitely want that to be right before you start.

With a relational database, we lose flexibility, but we gain efficiency. You can't just add new fields to a relational database.

Convention: Rules that help for consistency within a database. (i.e. Capitalization/camelcase)

Create new tables for unkown info.

• GradebookTable
• Assignments
• StudentInfo
• Grades

Unique ID, Foreign Key, boolean

Design Blueprints

The purpose of the project:

• Create a visual representation of the Instructional Design projects I've worked on during my graduate experience at BYU.

The approach I'll take:

• Online portfolio, displayed as an art.

Flow

• People will come to the site and click on a category of projects. Some categories are for the intended audience, some are for the organization I made them with, and some are just "Fun." When they click on the category, they will see a list of applicable projects and their thumbnails. When they click on the thumbnail, they will see the design processes used, considerations for each project, and technologies used for each project.

Design Presentations

Keith Proctor

• Using different aspects of a message
• Purpose/problem, main idea, validation/Supporting evidence, values/assumptions
• Graphically helps connect different ideas
• Date stamp and tag references
• Note view: click on links to see the notes - graphically represent the notes you're taking
• XML helps do the search filter
• Generative instruction
• Tag cloud
  
  

Scott Ashton

• CSS, HTML5, a picture-viewer to use if you were a photographer
• Needs a little more direction

QR Codes


Jacob Burdis

• Promises of the Book of Mormon
• Cool draft in Corona
  

Step 3

I worked on the HTML for my home page. The most challenging part was making a horizontal list because I had not yet done any CSS tutorials. But I finally got a horizontal list.

There are still many things I need to do with it, but I think my future CSS tutorials will really help me with that.

New code can be found here: janachapman.com/ipt560

Step 4: Apache Server

From the Hard Core Club, I learned that you can change the port (Kevin had some really good graphics for ports). I also learned that files saved in Program Files will often be only accessible to the administrator of the computer being used, and I learned how to change the settings to allow me to access them. (It's all the little stuff that will kill you when making a website. php? HTML5? Easy.) It was also neat to change the default file served on the server.

More Loops

Types of Loops

• While
• Do
• For (iterator, start/end point)

Types of Arrays

• Indexed
• Random
• Associative (don't exist in JavaScript, but they they work fine in JQuery). An associative array is NOT indexed; it doesn't look at a number, it looks at the key.

example: $phoneBook = array("Davies" => 5229, "Gibbons" =>3674);

Iterator decides where to start (1, 0, etc.)

Jana Chapman, Number 5

I'm the fifth child in my family. If there was a table with all the children in my family, I would be number 5.

When you get to the end of a playlist, it usually loops.

JavaScript:
for (i=1; i++; i<=10){
document.write(i)
}

php:
for ($i=0; i<101;i++){
print(i)
}

lua:
for i=0, 100 do
print(i)
end

You can use arrays and lists to get through numbered lists/variables.

Arrays

• A box of 12 crayons - "Get the first one from the right."
• An order of family members.
• "Hash" = an associative array

JavaScript: (starts with 0)
for (i=1; i++; i<=10){
document.write(i)
}

var myFamily={"John", "Kimball", "Karen", "Kathryn", "Jana", "Sara", "Kristen"}
alert{myFamily[5]};

Modularizing in your code helps you iterate through your arrays.

JellyBellies and Variables

With a toothbrush, a pen, a quarter, and two pennies, which would YOU use to get jellybellies out of the jellybelly machine??

• Can't add numbers in strings.
• You can add numbers by concatinating them in strings. (4 + 4 = 44)
• Assigning
• Key, Value = definition, term
• TYPES - As you create a variable, you have to be careful about what TYPE of variable it is.

For your information, any coin worked in the jellybelly machine. :)

Corona SDK

Some links about Corona SDK:

• anscamobile.com - Corona's home page. You can download a free trial of this here. (The trial comes with a nice tutorial that demonstrates how to create a "hello world" application.)
• blogger.anscamobile.com - Read about success stories.
• Learning Corona - Here are some online tutorials about learning how to use Corona and program in lua.
• History of Corona - Wikipedia knows everything.

Yep

Lots of resources on the IPT studio

Jacob Burdis: HTML

• Hypercard -
• Bill Atkinson - first Hypercard program (or something like that)
• Shows you your content
• Tim Berners-Lee - CERN: created HTML to facilitate online collaboration

Scott Ashton: Service-Oriented Architecture

• Next level of object-oriented programming
• Takes principle of granularity and makes it more nad more complex.
• Groups functionality and out-sources them to others, including outside members of the cloud.
• Making services interact.

Step 2

For my project this week, I made a mock-up of my portfolio. The outline was helpful, but this mock-up helps me see exactly what I want to do. I thought a lot about what the purpose of the site was and I looked at other examples of online portfolios. I found that most often, people have portfolios for photography or art. So having an instructional design portfolio is kind of a neat concept. It allows me to display the work I've done on my various projects and find patterns among them, and display them as my own kind of art.





I also worked on the Lynda.com and learned about more elements, a few of which I used in my new code.

For next week:

• Use what I've learned to clean up my home page.
• Get ready to put in a database.
  

More HTML5

or vs.

• Italicize vs. emphasize

Pixels, BMP, and TIFF

Today we learned some things about Pixels, BMP, vector, and TIFF files.

• Vector images: use mathematical equations to create the shapes
  
• TIFF files: keep all the pixel information, but if you re-size it, it is

Also, some fancy websites about Corona:

• http://learningcorona.com/
• http://www.anscamobile.com/
  

Step 1

This past week I completed the the Lynda.com beginning HTML5 course on syntax and structure, lessons 1-4. You can view the files here: http://janachapman.com/ipt560/

In addition, I created a site outline:

I. Jana Chapman’s Portfolio

A. Brief summary of me

i. "We shall not cease from exploration and the end of all our exploring will be to arrive where we started and know the place for the first time." - T. S. Elliot

ii. Research Interests

iii. Values

iv. Hobbies

B. Projects (connect to DB)

i. For child audience

1. ISD Skills used

2. Development Skills used

3. Evaluation Skills used

ii. For public audience

iii. For military audience

iv. For corporate audience

v. For academic audience

vi. For no one in particular

C. Links to my favorite sites

HTML5 Stuff, cont'd.

• Navigation element is a flow and a content element
• Not all links need to be in a Nav element--just those with major navigation. Footer, for example, probably doesn't need a nav element.
• Would you want screen reader to read the links? If not, nav probably not necessary.
• Section element is also both flow and content
• Use div if it's simply for styling purposes.
• Sections can be used to break up parts of a blog
• Article: a self-contained composition that can be independently distributable
  
• Aside element - flow and sectioning content, consists of content that is tangentially related to the content around the element, and which could be considered separate from that content. ie. pull quotes, sidebars, etc.
• footer element- NOT a sectioning element.
  
• Pages and sections can have multiple footers
• hgroup element- Belongs to heading content, used to group set of h1-h6 elements when teh heading has multiple levels

Organizing an HTML page

1. Start with content. What do I want on my page? List and quantify the pieces of content. This helps to think what kinds of HTML5 content you're gonna have. Don't need to list every piece of content; just think of structural elements and the outlines that's going to create for assisted technologies, etc.
2. Sketch it up, according to graphical needs.
3. Decide which tags you're gonna use for what content.
4. Code away!

Some of the biggest questions:

• Does it start a new section? Y-Is it major navigation?
  
• Choosing the right structural element

Most important: Use tags consistently across the site and the application.

http://code.google.com/p/h5o : Different sites for HTML5 outlining

More about structure:

• use the id attribute as a unique identifier. Value must be unique.

More HTML5

Specifications for HTML5:
http://dev.w3.org/html5/spec-author-view/sections.html

HTML5 has a whole bunch of content models not previously available.

Header element:

• Header not required in HTML5.
  
• A header cannot contain another header or footer element.
• A header is not sectioning content.

Notes from class:

• Visual object lesson: Money! Which would you choose: 1000-peso bill from Mexico, $1 American bill, or a 2-peso bill from 1976?
• Envelopes to carry them in. But you can't tell which one is which. We need a way to refer to the envelopes: "Yoda," "Obiwan," and "Mace Windu."
• Value of this: You can change the values of each of the envelopes in one place, but you always have an envelope to refer to.
• Envelope = "variable" we can refer to.
• Learn about forms
• Something I learned: There is an input type "password" that lets you type something and it comes up as dots in the field so you can't see it!
• HTML is not case-sensitive.
• When you click on the submit button you create, the url changes.
• Any time you see a question mark, think "Variable!"
• In a POST method, you can't see the destination in the URL.
• In a GET method, you CAN see the destination in the URL.

• Math Magician on TED Talks
  

HTML5

From my Lynda.com tutorial today on Structure, Syntax, and Symantics, I've learned:

• HTML5 is a framework. It is for the programmer, so it doesn't make a visual difference to the user.
  
• You can get a T-shirt for HTML5.
  
• HTML5 is a markup language, not an authoring language

Start next time: Header Element

Mark UP

Difference between static and dynamic: Static is "This is the picture." Dynamic is "Get the picture from whatever is in the database at ___."

Mark-up:

• Just like marking up a document, with highlights and underlines
• You need the attributes: color, start/stop, #, type
• Hyper-text Markup Language = HTML
• If browser receives a text file, it will simply output text

2tailedmonkey.com - A nice place to learn about coding
w3schools.com - Another nice place to learn programming

Which project to do?

1. Personal Portfolio - as an accumulation of all my internships and projects I've worked on while in the IP&T program.
2. Info pages for FrontPaw - teach people about Personal Economic Modeling and how it can help them.
3. Susan Kenney Resources - Allow parents and teachers to learn activities to do with their children, as in Kenney's BYU Music Preschool
4. Phone app for Mothers - Discipline app

JanaChapman:8080

Honing In on my Questions

I started with the idea of using Orff methods of music instruction—combining it with movement and dance—with Instructional Design and then ran into something about the importance of breathing. Then, I thought that if breathing gives us a sense of confidence and beauty (as in vocal instruction), then that should be able to be applied to the world of education and learning so we can make people confident in what we’re training them to do. Using movement in instruction should make people more confident in what we’re training them to do.

I understand that movement in dance is much easier to detect and learn in a dance class, or in a softball game. But movement is not the peak of engagement. There was another study that talked about dancers who teach themselves to “multitask,” and think of other things while they do their dances, thereby losing the emotional connection with the action. (I think that translates to dancers who dance with Flow rather than Focus.) These dancers have to re-teach themselves to focus on the basics of what their bodies are doing as they dance in order to put emotion back in their dances.

· Is the emotional connection is triggered by focus/peak of engagement?

· Is it possible to come up with a peak of engagement for every profession; not just

There are some studies that say that learning is emotionally-based. I started going over my notes of things that have interested me in the past few years, and I remembered a story about a

Qualitative Research Notes

What to do with resulting data?

• Find themes/patterns that can be used again
• There are often blinders on these kinds of studies, because they are often to try to understand rather than to change or "fix" (using research to study research)
• Things are always changing anyways, so... by the time we finish a study, that culture is already in the past. (How do you ever get progress?)
• Can you create something like what you study? (Carl Marx, Rosa Parks, Ghandi)
• There is something divine within us that allows us to innovate.
  
• What if the case study is the "outlier"?
• Describe the root meanings
  
• Thick description: has enough contextual data to defend the bias/conclusion
• Let go of the reins and don't think that you can tell everybody what they will do, because that's not really how it's going to go.
• Case Study: give you the experience that you can't have by yourself. (Like what it's like to give birth, etc.) THIS requires that people who are writing it understand it from a personal perspective, so they can write it in a way that is applicable to people; something others can understand.
• Write a documentary! :)
• An ethnography can be something from middle-class America, even if you are middle-class America. Some of the most interesting ethnographies came from people who are native to that culture.
  

Writing Style

• There is no real stance, just write in the voice that you usually use.
• Don't pretend to be third person omniscient if you're not.