Course Reflection

Well the spring 2015 semester is coming to an end. There is so much I have learned this semester in my Web Graphics Software class. Before I came into the class I had no idea whatsoever about HTML, Web 2.0, coding, blogging, and how to design and make a website. Web Graphics Software taught me all of that! I learned how to design a website and what is needed to do so effectively. I then learned how to code using Brackets software. By the end of the semester I had created my own portfolio website. It may not look the best, but going from no experience to having a website, I think I did pretty well!
I really liked getting to learn about computers and the internet and websites this semester. It was completely fascinating to me when the code actually worked. Coding is intense and I give props to those who want to go into web design. It is definitely some cool stuff!
The only thing I would change about this course would be more interaction with the teacher. I think I could have learned better having that one-on-one help. The times she did help me one-on-one I learned so much and things made more sense to me. If we focused the whole course on creating our website from the beginning, I think we could have whipped out some amazing, more professional –looking work in the end.
However, my overall opinion of the Web Graphics Software class at Pittsburg State University is that it is a very good class for those getting started and developing skills in web design. This class takes you through the basics of what everything is, all the way up to applying those skills. It gives a better understanding of it all and helps you learn.
To see the website I created visit:
psugit.com/students/lzimmerman

Pinterest Boards

Pinterest is a cool way to “pin” or save things that you like so you can go back and review them anytime you want. There is also a lot of interesting ideas and designs that can inspire you or you can use later. I enjoy Pinterest variety of topics and interesting ideas. One could definitely use it for coming up with career ideas and something of that sort. For my Web Graphics Software class I was asked to make a Pinterest board of web designs I liked that I could use for ideas for my website I am designing.

https://www.pinterest.com/leahzimmerman14/project-mood-board/

Pinterest is becoming a good way of marketing as well. They are partnered with SkimLinks which will automatically link the post to the website. This helps direct people interested in that topic to be able to go straight to your site. With all the pinners repining all sorts of things, more and more people will view the images and make it easier for others to see what your site has to offer allowing you the opportunity to get an abundance of business.

Web Page Layout

When creating a web page, your layout is very important. Most use a grid layout to help with proportion and structure. However, sometimes the web designer selects their grid layout from scratch to better meet the needs of the site. The grid layout used for a web page can be different depending on the requirements of the site, screen resolution sizes of the targeted audience, and what the creator likes.
This is an example of a layout most web designers would use.

 

 

 

 

This page reveals an effective page layout. It has the topic and logo at the top (header), some informational facts in the middle in nice and easy-to-read format (feature content), sections at the bottom for you to choose where you want to brows, followed by the company’s information (footer). The format House of Mulben used was very effective which helps get the point across and is viewer friendly.

As you see this web page is not like the previous one.

This page’s header may be there but it is so cluttered you cannot tell. The drop down pages is hard to find and they are randomly shoved up by the header. The rest of this web page consists of featured content and sections randomly placed together in the body of the page with the footer at the bottom. Mrbottles Company did not do an effective job in designing this website. It does not make me want to even read what it is about. It is hard on the eyes and too much thrown at you all at once. The worst part is this random guy pops up over lapping content of the page and you cannot get rid of him until he is done talking.

As far as the layout, I believe to make this site better they could use a simple header with drop down tabs, a simple featured content paragraph, a gallery for their pictures, and some columns for sections people may want to visit. When it comes to the design, they need a more calm background and type color that is easier on the eyes to read.
I hope these examples help you better realize the importance of a web page layout and using a grid.

Cascading Style Sheets (CSS)

A cascading style sheet document acts as a blueprint for an HTML website. They are like the decorating notes for your web page lay. After you make your HTML code for your page, to give it style you will need to create a style page and give codes for color, designs, fonts, and things like that. These documents give your site the style and personality you’re looking for on things such as a layout for a webpage, mobile phone, or different devices. Each device needs a specific setup to fit the product and accommodate the functions that they have.
CCS documents are supported by web browsers allowing your viewers to enjoy your page layout. If the browser did not support the document it would go to default and it would be very boring. Cascading Style Sheets must be accessible to the browser making it easy for it to download your codes made to design your page. CSS3 now has:
• Selectors – can now use DOM elements based on their attributes
• Rounded corners – spruce up a website
• Boarder image – instead of a plain boarder now you can incorporate an image for your boarder
• Box shadow – this allows you to create a drop shadow on elements
• Text shadow – allowing a drop shadow on text
• Gradient – gives your page the look of a fading color
• RGBA – this lets you use RGB and one other color of your choice to make the page
• Transform – enables rotating web images
• Web fonts – lets you embed your own fonts
With these new elements web design will look a lot better than before.

Online Image Editors

A couple of online image editors that I use are Fotor and Picsart. These are places you can go online and edit pictures you have taken. Although they are both for editing, they each have different ways to edit. I will go over some pros and cons of both online editors.
Some of Fotors top features are changing the brightness, adding filters, cropping, and being able to implement words on your images. The pros of Fotor are that the filters are really cool and they give you a variety to choose from. I like how you can crop to an image size you want and the enhancements leave your photo with great quality. Being able to add words is nice too when you want to put a date the picture was taken or a name of whom the photo was taken of. Also if you are into memes, this is an easy way to create your own meme. The cons of Fotor, is that those elements mentioned above are the only things offered. It is limited compared to other online image editors but it does a good job for simple editing.
Top features for Picsart are basically the same as Fotor giving you a lot of effects options, cropping, and adding text. However, Picsart also allows you to add clipart, callout word bubbles, lens flares, and textures to all your images. A couple of my favorite features is the ability to go in and fix blemishes and flaws and after applying an effect you can undo certain parts of the picture you want to keep from the original photo. This makes it possible to have an all black and white photo with pink flowers if that’s what you want. You can also get different textures applied to your image such as old paper, rock, and even bricks. It has some simple editing but I believe it is mostly for the bigger editing effects. Some cons of Picsart may be that you have to sign up to use it. It is not a big deal but you cannot just jump right in and start editing like you can on Fotor.
I would recommend both. I use Fotor to touch up my photography just a bit when I do not get the settings perfect on my camera. However, I like messing around and making pictures look cool on Picsart.

Picsart Edit

Fotor Edit

Good and Bad Web Writing

When browsing the web people like having a website that they can find needed information fast. They do not want to come across a web page with a lot of information in paragraphs just staring at you with nowhere to lead your eye. This can be overwhelming and make one not want to even begin reading the site.
A good example of a website that is overwhelming with a massive amount of words in a paragraph, I’m sure we all have experienced, is Wikipedia (wikipedia.org). No matter what you search in Wikipedia, it just gives you an abundance of information. Although you may be interested in the topic you searched, Wikipedia makes it very boring to read about. Often times I find myself going to a more visually interesting website with easy-access information or not even finishing one paragraph in Wikipedia.
Make sure if you are creating a website to not make it look wordy. If your page has a lot of information, be sure to chunk similar information and add titles and headings to break up the paragraphs. Most people will quickly read a shorter paragraph before they read a big paragraph that will take a lot of time to get through. Another element to help readers are making list. This will draw their eye to steps, ingredients, and information such as that. I believe if Wikipedia applied these elements in their web page it would be more visually pleasing and draw more viewers.
An example of a web page that has been written well is Texas Lions Camp (lionscamp.com). This website was created for a camp for children with physical disabilities and provides information for parents to register their kids. This information could easily be boring; however, they use correct elements to make it visually appealing. Texas Lions Camp used a title at the top of the page, smaller paragraphs to make it easy to read, headings that separated chunked information, links to extra material parents might want to know, and a list of dates for registration.
Using these elements made lionscamp.com pleasant visually and easy to find valuable facts. If they did not use such elements, parents would not want to read the page content and a kid with a disability would miss out on one of the best summers of his or her life. You do not want someone to miss out on what your website has to offer them.

HTML

Tim Bernes-Lee came up with a language used to produce web pages. This language is called Hyper Text Markup Language or HTML, as we know it. This is a markup language written in the form of HTML elements that have tags enclosed in angle brackets (for example <html>). These elements are the main structure of all websites. HTML code is the key points between a user and a website. Users send this data to a website using a browser. The web browsers do not display the HTML tags and scripts but they can read these HTML files and put them into clearly visual web pages for the viewers.
HTML 2.0 was the original version of HTML introduced in November of 1995. It consisted of almost all of the elements but lacked with additions for Netscape and Microsoft. HTML 2.0 tables were not as good in aligning attributes. Just over a year later, in January 1997, W3c released a HTML 3.2 version. This current version’s tables had attribute alignment, heading, and images. More importantly, all web browsers understood it. In December of 1999, the more currently official version of HTML 4.0.1 came out. HTML 4.0.1 improved trademark extensions and supported internationalized documents, CSS and JSS. HTML 5 made its grand appearance in January 2008, making it the latest version of HTML. This version has serialization with XML based XHTML 5 as well as its own HTML serialization. The updated HTML 5 version, in October 2014, is the World Wide Web Consortium (W3C) final and complete revision of the HTML standard.
A designer is going to want to have an idea on what HTML is and how to write HTML code if they want to set up their own website for display or commercial use. It is an impressive trait to have and will come in extremely handy when wanting to get your work out there on the web for everyone to enjoy.

Web Principles

When setting up a website there are some web design principles you will want to follow. These principles include:
 Unity and Variety
 Balance
 Scale and proportion
 Rhythm
 Emphasis
 Simplicity
I have done some research and have found a couple of examples of bad websites. The lack of design principles in the two websites I will be talking about will have you wondering what the heck they were thinking.
The first website, http://www.msy.com , I believe is a technology website where you can purchase electronics and such. I have no idea what MSY stands for and I could not find it on their page, but I did however notice electronics flying by at the top of the site. There were a lot of movement on this page and it basically lacked simplicity. Almost every tab you click on takes you to another webpage or a pdf file that looked like old ads and coupons scanned from the back of an old comic book. Nothing made a whole lot of sense to me due to how cluttered everything was. The emphasis would probably be on the DEAL OF THE DAY screen rolling in front of your face at the top of the screen. I do not think they executed emphasis, scale and proportion, or rhythm in an effective way with their head-throbbing colors and movement. MSY Technology has been nominated for worst website designs for several years now and though they have improved, they are just not quite there yet.
In my opinion, I would definitely simmer down on the colors. Red is very eye catching but can also be kind of aggressive as well. I would also suggest stopping the movement and maybe have the deals of the day evenly balanced across the page as you scroll through them creating a sense of rhythm and simplicity for the viewers.
The second website, http://www.roverp6cars.com , is an online parts and service store for a Rover P6. The colors of this website did not look like it had anything to do with cars. Bright yellow and red jump out at you everywhere you go and all the links you can click on have random color schemes. The background is either a bright yellow with cyan info boxes or maroon background with magenta info boxes. If the color is not enough to give you a headache, the clutter sure will. If balance means throwing as many pictures and as much information as possible on one page, they nailed it. I am pretty sure they did not consider any of the web design principles in the making of this website.
My suggestion to them is to start from scratch. They should have a gallery to show pictures and keep the main page simple and the links readable as well. Keeping things simple will make finding parts easier for the customers. I also think they should come up with an eye friendly color scheme that will complement the Rover P6 to help interest owners of this car.
Following the Design Principles will help make a website successful in every way.

What is Web 2.0?

What is Web 2.0? Have you ever heard this term and overlooked it because you did not think you knew what it was or if it applied to you? What if I told you it did apply to you? We may not realize it, but we use Web 2.0 almost every day we get on the internet. The web was originally set up for websites to share information to the reader but the reader was not able to give any feedback on the information the reader just read whatever was posted. They could not comment their opinion, post a related link to the subject, add a picture, or share a video on the topic. This one way communication process was technically considered Web 1.0. Now we have user generated content giving the user the ability to have an opinion and even give feedback on the information we are reading. This two way communication is what we refer to as Web 2.0. Now one can comment using a comment box, share a related link, picture, or video, and have an option of interacting. There are also 2.0 websites that allow you to have conversations with other people through the website. We know of these three way conversation sites as “Social Media” websites. Social Media helps us keep in contact with family and friends we may not get to see very often or who may live any place around the world. You may know these websites as Twitter, Facebook, Instagram, and even YouTube. Any or all of these websites you may use every day and may be very familiar with, however, you just might not have known that they were a Web 2.0. Being able to interact and give feedback making the website a two way communication process is what sets Web 1.0 apart from Web 2.0.