Week 8 – DOM Manipulation

Standard

I met with my group and we had a chance to discuss our team plan for the upcoming project. We decided to break into two groups, one doing front end and the other working on backend. I’ll be with Kyle and Zane doing the backend portion. We are going to have an extra meeting each week while we work on our tasks.

I worked a lot on understanding and using DOM manipulation. I ended up making a small quiz with a dynamic button that created a picture and showed a label for it – it was way exciting!!

DOM Manipulation

…The HTML DOM is a standard for how to get, change, add, or delete HTML elements.”

Browsers make a map, or tree of all the HTML on the web page and define them as objects

Then Javascript can:

  • Change the elements, attributes, CSS styles
  • Add new elements or attributes
  • Remove existing elements and attributes
  • Create new HTML events
  • React to all existing HTML events in the page

 

What are the pieces of DOM?

  • property: is a value that you can get or set (think, “What do I want to change?”)
  • method: an action you can do (think, “What change do I want to make?”)

Ex:

<p id=“demo”></p>

<script>

document.getElementById(“demo”).innerHTML = “Hello World!”;

</script>

 

property: innerHTML — this can be used to get or change any HTML element *it’s super useful

  • method: getElementById — good way is  to target a specific HTML element is to use an id that is assigned to it

 

How to Find What You Want to Change

  • Id
  • tag name
  • class
  • CSS selectors
  • HTML object collections

http://www.w3schools.com/js/js_htmldom_elements.asp

Test

createElement, appendChild, insertBefore, removeChild

   <p>What is the strongest bone in the human body?</p>

   <button onclick=”quizCard()”>Quiz Me</button>

   

   function quizCard() {

       var quiz1 = document.createElement(“IMG”);

       quiz1.setAttribute(“src”, “/image/femur_quiz.jpg”);

 

       quiz1.setAttribute(“alt”, “Femur Card”);

       document.body.appendChild(quiz1);

     

       var quiz_answer = document.createElement(‘p’);

     quiz_answer.className = ‘quiz-card’; // can style

     quiz_answer.innerHTML = ‘Femur’;

      

     document.body.insertBefore(quiz_answer, quiz1);

   }

   

Resources

http://www.w3schools.com/js/js_htmldom.asp

http://www.w3schools.com/js/js_htmldom_document.asp – How to access and manipulate HTML

http://coursesweb.net/javascript/createelement-insertbefore

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create

 

Advertisements

[Week 12] 12 14 13

Standard

Why is it important to get links to your site? Because marketing and advertising has undergone a change. Word of mouth and suggestions from people you trust go a long way for your business. It is important to actually get involved in the field that you are working in and be a part of the community. When you start doing that, people can share your work and build you as a credible source. Links drive up your website rank and strength as well.

Here are some links to get started and some great ideas:

Try mapping out a strategy that will work for you and your business, and try being specific and realistic:

  1. Map out your strategy. (Part 1) Who and When?
  2. Map out your strategy. (Part 2) What and How?
  3. Map out your strategy. (Part 3) Where will the links be gathered?

Oh goodness–Google Analytics and Google Adwords are AMAZING (but admitedly complicated) sites that really are so powerful.  They can basically take you through your viewer/potential clients experience on your website and can show you trends. This is important because it can save and make you money and build your business.

Here are some meaty and great tutorials explaining ways to analyze the information you learn:

[Week 11] 12 7 13

Standard

I had a great time learning about how advertising and networking has changed. I want to be a part of that! Now it’s so important to use social media and there are some good skills and things to consider before just jumping in.

These articles help explain some of that:

What I found really interesting were some of the social media sites that are being used for businesses that I wouldn’t have considered. One example is Twitter. There is a great movie explaining the different ways to engage clients or potential clients. And that really is key– being engaging and growing a community. People want to deal with people, even though it’s through the internet.

Being genuine, sharing my passion, respecting others, and creating solid content and products are the keys!

[Week 10]–11 30 13

Standard

I had the chance this week to learn about things that can really help my business to flourish. One super important part is the landing page–this is the first thing that people see. If it isn’t engaging or satisfying then they will leave your page, and with take their business with them to somewhere else. Making a good ‘first impression’ is important on-line too, maybe even more important than in person because you most likely won’t have another chance.

Okay, so maybe when you start you don’t make the best impression and you want to do better. Well experiments can help!

Getting people to your page is important! It’s like having a job interview–you can’t wow them over if you can’t even meet with them. Luckily, there are steps and things that I can do to make my page more search-friendly to bring in more traffic.

[Week 9]–11 23 13

Standard

Okay–you really want to check this out because conversion tracking is a seriously powerful tool!

Here is how you set it up:

Why is it worth doing? It can show you all sorts of activity on your page. Here are some examples:

  • Visitors, and how many are unique
  • Bounce rate
  • Average pages visited
  • Amount of time spent on the website
  • Information about the viewer themselves (location, sex, age, etc.)
  • Conversions

So conversions is crucially important to track in conjunction with your Google Adwords ads. You can see how effective the things you are advertising are!

Here is some information about using conversions:

 

[Week 8]–11 16 13

Standard

This week I learned more about improving the ad that I made last week, and how to better my quality score . This is important because having a better quality score improves the placement and frequency of my ad. Google wants to reward you for having an ad and a landing page that satisfies customers and is relevant to what you’re actually advertising.

This matters also for me because it can save me money! The better quality, relevant, and better placement means that I get less unwanted clicks, and potentially convert more clicks into clients.

This movie explains some of those points:

Okay, here is a whole host of other webpages that explain some of the factors are and how to improve them:

The next important tool, which is actually super cool, is Google Analytics. You can set up tracking tools on your website and track different information. That way you can see how people engage, what they click on, and much more. How awesome!!

Here are some great links on how it works, set up, and making sure you did it right:

I did it so it must not be too difficult!

[Week 7]–11 9 13

Standard

Writing ads for Google Adwords is a tricky business. There are only 4 lines and the characters allowed are fairly limited.

It made me think of when you design a logo– it may SEEM simple, but has to communicate a LOT in a small space. That means that you actually have to do tons of planning and editing before you find a product that works. 

To get started, I think that this page and the movie included by Google is helpful in tips of how to stand out to clients:

Okay, so one thing about using Adwords is organization. It is really important to understand how campaigns, adgroups and ads work. You don’t to have to adjust or re-do them later and lose information, time or money. 

Here is a helpful article that has a chart that sort of layouts it out for you:

After some consideration from all that I read and researched I came up with this ad for my photography business. I wanted to capitalize on the holiday times, and that in the past I have had more customers around this time of year looking for a good deal and to get a few pictures for Christmas cards. 

Here is my ad:

Merry Family Portraits
http://www.jenjoyphotography.com
Just In Time For The Holidays
Mini Shoots–Only 50$. Book today!