Week 6 – HTML5 Media tags and JavaScript object creation

Standard

In my group meeting this week I focused on teaching my team about HTML5 media tags, and I focused on video and auto tags to start off. I touched briefly on camera as well, but needed to do more research about how to integrate it more fully.

Below are my notes with a few interesting tidbits:

Video

Example code:

<video width=”400″ controls>

 <source src=”/test-run.mp4″ type=”video/mp4″>

 Your browser does not support HTML5 video.

</video>

<p><a href=”https://youtu.be/gv2w5A5rno8&#8243; target=”_blank”>Test Run on Youtube</a></p>

  • You can and probably should add height/width
  • Controls gives you the bar, but can be other things (ex: autoplay)
  • There can be multiple sources listed, and it will play the first valid option
  • If the browser doesn’t support video tags, then it will just show the text

Audio

File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Resources

http://www.w3schools.com/html/html5_video.asp

http://www.w3schools.com/html/html5_audio.asp


I also decided to do a review on JavaScript objects and to start to wrap my head around JSON. It ended up being much more straight forward than I initially expected.

Java Script Object Creation, Properties, Methods, Instantiation

How to make objects, assign properties and methods

JavaScript objects are containers for named values (called properties) and methods!

Making a JavaScript Variable

An example would be: var book = “Atlas”; The example below is also using javascript to define the variable and then access it, printing it here:

Atlas

Making a JavaScript Object

Javascript objects can have multiple properties, for example: var book = {type:”Atlas”, genre:”resource”, section:”D8″}

The example below is using these definitions and accessing book.genre and printing it out here:

resource

Make an Object literal

An object literal is a comma-separated list of name-value pairs wrapped in curly braces. They are used to make things tidy and avoid using globals.

An example would be var book = {type:”Atlas”, genre:”resource”, section:”D8″};

Accesscing JavaScript Objects

Note that there are 2 different ways, using property.propertyvalue or property[“propertyvalue”].

Ex: book.genre or book[“genre”]

Actions, or Methods, can be done on objects

These are stored inside of properties as function definitions.

Take for example, D8-C is actually a function that is combining two properties together. The function is then going to return them as one.

var book = {type:”Atlas”, genre:”resource”, section:”D8″, row:”C”, location:function() {return this.section + “-” + this.row;}};

The JavaScript is working below:

An Atlas is a part of the resource collection, found in D8-C.

It is important to note that the function needs to include () otherwise it won’t work. Ex: location.function()

JavaScript Instantiation

There are 4 types of instantiation:

  1. Functional Instantiation
  2. Functional-shared instantiation
  3. Prototypal instantiation
  4. Pseudoclassical instantiation

More about these coming soon…

Advertisements

Week 5 – CSS Styling with JavaScript and more CSS

Standard

This week I taught my group about using JavaScript to use CSS styles, and how you can add or remove them as well. I found it super fascinating, and below you can see my notes:

Setting CSS Styles using JavaScript

You can use JavaScript to directly set a style on an element, and you can also use JavaScript to add or remove class values on elements which will alter which style rules get applied.

Why would you want to use JavaScript?

  • You want items to change in style as people do things, not just when they load.
  • While CSS does offer pseudo selectors (ex: hover), they are not numerous and limited.

Two ways to style with JS

  1. Set a CSS property directly on the element
  2. Remove or add class values, which can add or take away style rules

Style Directly

  • You can select only one by using a class or id and targeting it
  • You can select all assigned to a class and write a for loop to change it

*Pay attention to how things are written in CSS and JavaScript. Ex. font-weight in CSS is fontWeight in JavaScript. They also may need px or em to make it work.

Add or Remove Classes

  • Can use classList API (see resources for more info)
  • Use add or remove
  • Useful with CSS that is already set

Example Code

http://codepen.io/jnetlar4/pen/JGeGOX

Resources

https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

https://developer.mozilla.org/en-US/docs/Web/API/Document

https://www.kirupa.com/html5/using_the_classlist_api.htm


I also learned more about animation, transitions and transforming with CSS3. I feel like I have a solid grasp on it now and am working on a card flip action that can be used on our group app (a study card app).

Week 4 – AJAX and deciding functionality

Standard

AJAX

Jumping into AJAX this week as my teaching topic was definitely not easy. I have a very basic understanding of JavaScript, so it became extra difficult to pull apart the different parts of code. However, I did a lot of readings and tried many examples to get started. Here are some notes:

What is AJAX?

It is basically a way to enrich what the viewer sees, but adding new information to a page without refreshing it entirely.

In short, Ajax gives you the benefit of server-side dynamic content while still looking like client-side dynamic content.”

Why is it valuable paired with remote services?

“A rich client experience coupled with services accessible anywhere on the Internet.”

How is it done?

Uses XMLHttpRequest DOM API, and is done through a GET or POST.

GET grabs information, and POST is useful when getting information from the user and working with it.

Resources

http://www.w3schools.com/ajax/

http://www.ibm.com/developerworks/library/wa-aj-webservices/

http://www.w3schools.com/xml/dom_http.asp

https://web-design-weekly.com/2014/08/18/ajax-without-jquery/

http://www.tutorialspoint.com/ajax/index.htm

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started


 

App Functionality

My team decided to meet up an extra time this week to get a head start on our app, and walk through what we actually wanted it to do. This was very helpful because each of us has had various experience with study card type applications and had slightly different visions. It was also great to learn from each other what we thought was possible or how something could be accomplished. I feel like our project is much more obtainable at this point and I am excited to practice things that will be applicable.

Week 3 – Local set up / CSS3 Transitions

Standard

Github, git, version control, Tower, local, Sublime, Bluehost, Filezilla, and on…

Screen Shot 2016-01-30 at 6.18.10 PM.png

These are all things that I had to either have a refresher on or learn about this week. I wanted to be able to work with my files locally, have them version controlled, stored on Github, and then moved easily to the web. I watched a lot of tutorials and spent quite a bit of time getting everything set up. Now that it’s all working out, I’m thrilled and getting comfortable with the workflow.

This gave me a chance to set up my portfolio and start putting in areas that I have learned and sandboxed.

I focused on CSS3 Transitions this week, started to look at animation, and reviewed / put in my notes from topic 2 from last week. You can check out the code (1-25-16 / 1-30-16): http://cit261-portfolio.jenjoystudio.com/topics/5.html.

 

 

Week 2 – Team Assembled!

Standard

We had quite a whirlwind week trying to get all 6 of our team members acquainted, plan a time we could get together (being in 3 different time zones), meet, and then make a plan for another meeting. It actually turned out pretty well though! For our second meeting, 5 out of 6 could come and all came prepared with their topic to teach — huge success if you ask me.

It has been a little confusing trying to figure out what exactly needs to be done each week and for the entire semester. I think I am almost all the way on board now and I’m excited to dig in deeper and starting play with code.


 

This week my topic was: Creative, pleasant, mobile user interface creation

What is mobile UI?

  • I like the example to thinking of it like a grocery store. As a shopper, you don’t want to think about way finding and have a frustrating experience. You want to go, find what you came for, not wait long, have a pleasant interaction, and be on your way.

Why is it important?

  • You want your users to feel comfortable and find what they need no matter the device.
  • By 2011, Apple and Android had announced a combined total of 35 billion apps downloaded.

How to do it effectively? Creatively?

  • Target audience – Take into account the preferences and interests of those using the site.
  • Clear navigation is crucial – People are coming to you your site for a reason; help them find what they want with minimal effort. (Example: xfinity TV)
  • Visual hierarchy – make important things have more weight than others. Keep it simple and effective. “Less is more” is not a cliché in mobile app design, but a standard.
  • Consider conventions – design / Internet (ex: don’t underline things that aren’t links or have call to action buttons without links). Physical actions or gestures are important to consider (swiping, scrolling, vibration feedback, etc.).
  • Typography and color schemes – are important for readability and overall ease on the users eyes and should be an area of focus. (Example: Clear)
  • Scanability – Users want to or even unconsciously scan the page to find what they are looking for, often without reading everything. Consider how you use elements such as: images, headers/sub headers, buttons, navigation, and content blocks.
  • Keep content related – consider grouping, minimal layers or content, and related ads (if they are a must). (Example: Southwest)
  • Things CANNOT be slow – They just can’t. People will leave, or be frustrated and not want to come back.

Resources

http://thenextweb.com/uxdesign/2015/07/07/10-dos-and-donts-of-ui-and-ux-design/#gref

http://www.noupe.com/imho/the-importance-creative-design-for-mobile-app-user-experience.html

Week 1 – Elevator Pitch = Spice App

Standard

I had the chance this week to consider a problem in my life, or something that I think could be bettered or made more efficient with the use of an app.  I used some questions to get me thinking:

  • “What am I looking up information on often?”
  • “What would save me time and effort?”
  • “Are there things I just haven’t considered using technology for?”

I actually started compiling a list as a went throughout my day-to-day life. Here were my top two ideas:

  • News compiler / summary — I often struggle to read enough about the news, especially specific topics. This app could include a few categories that you choose and then show you the few ‘trending’ topics that are relevant. I thought this could encourage myself to just read through this brief synopsis so I am at least somewhat informed.
  • Spice Mix app — I work hard to buy high quality and healthy food ingredients, but I find myself at a loss of ways to season them. The idea is that you could choose your main ingredient you want to use, the meal, and then have marked your current spices. Then the app would give you a nice combination. I constantly think about using something like this.

I decided to go with the Spice Mix app because I think it would help a lot of people, could be simple enough, and I saw that another student also had a news idea.

I did some research on existing apps that might relate to what I was thinking about. I think they will be useful tools to see what is working, but also what is missing or could be improved.

I tried to think of ways to make the app even more interesting or useful, but at it’s core I think the idea is pretty doable.

 

Introduction – Learning for real life

Standard

As I was reading through the syllabus and course objectives for this class, I just kept nodding my head in agreement. I have been working as a web design intern for the past 3 months, and there was and is still SOOOO much I don’t know. I help with projects all the time that I know almost nothing about the skills going in. My employers don’t seem at all concerned about this, at first it was really strange. I felt ashamed almost to ask some of the questions that I did (and still do). But their kindness, patience and understanding has helped me realize — this is how our field works.

You will constantly be challenged to learn more, try, ask questions, and repeat. There is no reason to be overwhelmed, and definitely no place for complacency. I am very much looking forward to the growth and exposure I’ll gain in this course and have already been putting together a list of things I want to learn more about.