Kelvin's Problem log

As I am trying to make a data base website, uniform style, layout and format is needed. However, it is hard to change every single page for update, especially when the data base grow bigger. 

Wordpress is almost impossible to do that.

Jenn's Problem Log

I'd like to create an online portfolio of my writing and work. I currently have a blog that is very minimally updated, but I would like to build of the content I started it with. I would like my site to be easy to update like a blog, but I do not like how all blogs feel like.... a blog. I want it to be more visually appealing and look more like a website. I am interested in pursuing multimedia journalism, so I want my website to be able to showcase what I am able to do on various platforms. It might be a bit difficult at first as I am still learning how to do multimedia work so part of the project is making sure I can create the content I want to include.

Currently I am looking at Wix and Wordpress. I have more experience working with Wordpress including working on the school site, the Eagle's Eye and my personal blog. I like that wordpress is easier to customize  but I don't like that it's general apperance is that of a blog. I like that Wix is a bit flashier but I haven't found a template that fits my needs, and it is not as easy to customize.

3/6 I needed to format pictures and text within a table, experimenting with sizes and ways to change the layout led me to find the "Erase Formatting" button. If you can't figure out why the formatting is so weird, this will probably fix it.

 Building a table in html - This link contains the code to start a three column table. I've used to to organize text and photos on the "about me" page. It's super easy to modify to create whatever size table you need.

How to import your wordpress blog to your wordpress website:

Open your blog (for example www.nosnowsnakes.wordpress.com)  On the dashboard under "Tools" there will be an option for "Export" clicking this creates a .xml file that you can save to your computer. ( example: nosnowsnakes.wordpress.xml)

Now open your website (Example: nosnowsnakes.com) Look again under the dashboard >Tools > Import

This will give you the option to install the wordpress import plugin. Once the plug in is installed it will prompt you to upload the .xml file. The blog won't import perfectly but most of the content will be there and ready for some minor tweaking.


I'm having issues formatting text within my HTML table. I'll let you know when I figure out how to resolve it.

Problem: Formatting within the HTML table - Reverted back to default theme fonts and avoided using the third column until I learn how to resize content within the middle column

Problems 3/28:  - Creating two columns within a table - I used <div> float tags.... I had a problem with getting the content in the "float right" to line up with the content in the "float left" <div> boxes... this was solved by changing the lengths of lines in the text with a soft return.

I've also worked to link items on my resume page with examples of my work (for example linking resume content including my work on the SNC website and social media with SNC's web and social channels)

4/2

I found a widget to embed instagram, but I haven't figured out how to make it work properly yet. May be finding a new widget soon. http://davidmregister.com/instagram-widget-for-wordpress

I also began using a new widget for photo galleries and video uploads. Also not sure if I like it yet, but we'll see http://www.cincopa.com/media-platform/wordpress-plugin.aspx

Wix Problems - Matt Braley

My website is directed towards specific snowboard companies. I am trying to get my name out there for snowboarding. I am trying to get sponsored so I can save a little money so that I can continue with my racing. I am using Wix and have not really played around with Wordpress  I might look at it next class and see which I like better.

Problems: Wix not lining things up.
Solution: Ruler on my computer screen. I couldn't really find a legitimate solution.

Problems: Not very customizable
Solution: I have just tried working around the really limited stuff. Like the background image. I didn't want to upload one so I just used one that went with the rest of my website.

Alex's Problem log

My website is a site for my photography to be displayed and purchased. It will be geared toward the action sport crowd and outdoor enthusiast. Right now I am looking to build the website on either Wordpress or Wix.
There are a few problems with each platform I have noticed so far. One problem is Wix is far less customizable than Wordpress. Another is Wordpress is going to be a little bit more complicated to add a video intro of some sort. The solution I found for adding the flash video is a HTML code for adding a flash intro video into Wordpress.

I think I am going to going to build the website in Wordpress because it is more customizable and gives me more freedom to make the site a little more unique than other photo websites.

Another problem I ran into was adding a custom font on wordpress. I had to install a cufon plug-in (http://wordpress.org/extend/plugins/wp-cufon/) on wordpress. I then had to convert the font into a javascript on these website:http://cufon.shoqolate.com/generate/. Then I went to my hosting site and uploaded a font folder with the converted font into the WP-Content folder. I then put in the Cufon replacement code into the Cufon box that is under the appearance tab on the wordpress menu. The Cufon code then finds the header or text you want to replace and changes it for you.

I also have ran into problems where I try to move a menu or slideshow in the CSS stylesheet and it screws up the entire page, so I have learned to save my stylesheet template in a text edit file, not to loose all the changes I have made.

Today 4/2 I worked on adding a shopping cart. The problem I ran into is figuring out how to enlarge the thumbnail picture to full screen. I am using the Ready!Ecommerace shopping cart plugin: http://wordpress.org/extend/plugins/ready-ecommerce/. I like it so far and if I figure out how to enlarge the thumbnail I will continue with this option otherwise I will go with a different one. Otherwise the plugin is pretty custimizable, I just need to explore more with it and figure out the options better.

problem log - diva helmy

           The website for Divaa Media will act as a portfolio website showcasing my cinematography and editing work as well as introducing the services my company offers. The whole site will embody Divaa Media’s unique style with strong imagery (vibrant and dynamic screenshots) as well as an exceptional vision that will set it apart from other filmmakers’ websites. It will be informative and interesting within a beautifully simple layout. The website will be bold and sophisticated putting a strong focus on the video content. Its easy navigation will also encourage exploration. The screenshot slideshows will intrigue the viewer to explore other pages, link them out to vimeo, and connect the pages with a common theme.

           The overall design is directed to appeal to apparel brands, action sports companies, and music artists seeking video/photography work. The site with its fast and colorful features will also appeal to the films end-user, a younger, creative, and active audience (ages 18-24) as well as the companies that are trying to reach this demographic. The various pages will include: films (body of work), mission (mission statement), blog (media/news posts) and contact (company contact information). Its text content will be straightforward and limited. 

            I have explored two potential host sites Wix and Wordpress. I am leaning towards Wix because its templates are ideal for a portfolio site, they are elegant and professional. Wix has features that allow you to easily embed vimeo videos and create photo slideshows. The template I have chosen from Wix puts a strong focus on the media content and is extremely easy to navigate. I feel that Wordpress does not have templates that are as interesting as the templates hosted on Wix when the admin does not have coding experience, and because my site is not primarily a blog I think that Wix will be easier for me to use.

Using Wix:

Problem: Uploaded logo has an undesired background color.

Solution: Go to image > change style > no frame or default.

Problem: Embedding videos in a slideshow.

Solution: This is not yet possible using the new HTML 5 Wix. 

Problem: Uploading personal fonts to Wix.

Solution: Upload a JPEG of the word in the desired font. Add it as an image or button.

Problem: Layout misalignment in my published site.
Solution: I continued to edit and publish the site from the editor until the layout appeared to be centered    in the published version. This issue confused me because sometimes the alignment in the published site was different from the editor. A forum online discussed this issue: wix support

Tuesday assignment: starting your problem log

Due next class, Tuesday the 26th -- I want you to post, to the blog, the first draft of a document that will list out the problems you have encountered and solved in the course of your website project. I'm not looking for a full academic paper, with full sentences, and so on -- but I do want you to make a list of the technical and design issues that have presented themselves to you, and the solutions you found for them. Start your document with an opening paragraph explaining what your site is, who the intended audience is, and then list out the various problems you have encountered and solved. Label the post with the tag "problems."

For instance, two years ago, I know when Ethan Rollo was first using Wix, there was a white halo around some of the graphics he uploaded to his site -- and I believe fixing it was a matter of saving his images in the PNG 24 format. And another issue was the long load-time for his shopping gallery -- fixing that meant finding out what the maximum display size was for the gallery pics, and scaling his images down to that size before uploading them, drastically reducing their file sizes. So a "Problem-Solving" list could simply go:

Problem: uploaded graphics have white halo.
Solution: Used PNG 24 format with transparency for images with a transparent background.

Problem: Long load-time for shopping gallery.
Solution: Found out pixel dimensions of the gallery windows, and downsized gallery pictures to that size before uploading.

If there are helpful links for any of your solutions, include them as well. For instance, I know Nick Cahill, when he took the class, looked at a few options for javascript slideshows -- a list item with a link could go:

Problem: Wanted a slideshow with thumbnails, not flash-driven, so it would show on iPads.
Solution: galleria slideshow: http://galleria.aino.se/; found out it can be modified by changing options in the code (see this page: http://galleria.aino.se/docs/1.2/options/); if there is more than one option used, use a comma between options to separate them.

Not all problems have to be strictly technical problems. For instance, they could relate to decisions you make in terms of using imagery on your website, or the way you name your navigation bars, or the way you manage comments on a forum in your site – problems that relate to design, or to capturing the audience you intend to capture.

I'm interested in having you go through this process for a number of reasons -- one, to develop some documentation on your own problem-solving process, and two, to build up a sort of database of helpful hints that can be posted to the blog -- and which you (and other students) can refer to if you encounter any similar web design problems. This will be a single post that you update as you go along -- clicking on the "edit post" option (the little pencil that appears under your post) to add to your list.

Obviously, you first post is only going to have the beginning stages of this process. This first post should include:

1. What your site is – this should be more than a one-sentence description; it should be a full paragraph, if not two or three. Imagine that you have to write up a description of your prospective website to secure funding, or to explain the details to a design firm you are hiring to design it. What are the features of the site, and how will it stand out from other sites that have similar content?

2. Who the intended audience is. What is their demographic, and what do you intend to do to attract and retain their attention?

3. By now, you should have chosen the two hosting options for your site, whether you are making it from scratch, or using a hosting/template service. Explain which options for hosting you chose, and why. Are their features that will make it easier for you to update content? Are their features that will allow you to capture your audience in some important way? This is a very early "problem" in building a site: what platform (or platforms) are you going to use to create it?

5 Characteristics

5 key characteristics of a website are:

1. functionality
2. content
3. useful and eye catching colors.
4. use of slideshows/ videos/ pictures
5. interactive. Keeps the website visiter active

Kelvin Chiu- 5 element of a web site

1. Comfortable Layout
2. Suitable Color Use
3. Suitable Font Size
4. Good Use of Font Style
5. Content

5 Elements of a Good Site

1. Bold imagery
2. Simple theme and layout - Not distracting from subject or imagery
3. Simple navigation, but not boring - Leave some elements to be discovered
4. Contact Information
5. Fresh content - Update often

Assignment: Research your platform/template

YOUR ASSIGNMENT FOR TUESDAY IS TO REVIEW THE OPTIONS FOR YOUR WEBSITE, LINKED BELOW, INVESTIGATE WHICH ROUTE WOULD MAKE THE MOST SENSE FOR YOUR SITE, AND CHOOSE YOUR HOSTING OPTION.

If you're building a site for that you're hosting yourself, there are many templates available here:

http://www.free-css-templates.com/

For more, google "free css templates"

For a hosted, customizable template solution, you can use:

http://www.weebly.com/

You sign up, enter a name for the site, and hosting with the "weebly" in the url is free (I set up a quick test site at:
http://sncwebclass.weebly.com)

For a hosted, customizable HTML5 solution, you can use:

http://www.wix.com/

Like weebly, this is free with "wix" in the URL; you have to pay something for a domain name without the "wix."

Here's a wix site a student made two years ago (with the flash option):

http://www.wix.com/andremacdrizzle/localknits

For a customizable template with social networking options, there's this (which, at it's cheapest level, costs about $20/yr):

http://www.ning.com/

If you're using a blog platform, here are some options:

blogger.com

You can add static pages to your blog with the "Pages" option in your blog editor.

Here are some wordpress links – wordpress can be easily integrated into your site with godaddy as a host:

http://wordpress.com/

Sites powered by wordpress.

http://www.wordpresstemplates.com/

The jetpack plugin for wordpress:

http://jetpack.me/

Divaa- 5 Elements

1) Dynamic and intriguing imagery on the home page.
2) Bold yet elegant color scheme.
3) Easy to understand my mission and style through layout and images.
4) Simple navigation bar.
5) Straightforward information. Not too much text.

Carrie's Top 5 Elements of a Good Website

1. Visually pleasing, via color pallate
2. Graphics (in addition to Photographs)
3. A contact option
4. Simple to navigate around
5. Not revealing too much information in the open, but enough not to frustrate the viewer

Spry Elements

Today we'll take a brief look at using DreamWeaver to create java-powered drop-down menus. In class, I'll have you create a drop-down menu using "Spry Elements" in DreamWeaver. I want you to change, or customize, at least four elements of the menu:

1. Create real, external links from the menu.
2. Change the font family of the menu.
3. Change the background color of the menu, the text color in the default state, and the color of the background in the rollover state.
4. Change the size of the menu item boxes.

5 Elements of a good website

1. An intro video or slideshow
2. A unique menu bar/ navigation bar
3. Easy to read text
4. Not alot of clutter, organized
5. Photos

References for 2/14 class: Box Model and Positioning with CSS

The CSS Box Model:

http://www.w3schools.com/css/css_boxmodel.asp

The position declaration:

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Positioning elements with CSS:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Positioning Tutorial below. Note -- there are a couple glitches in the directions. Step 11 should say "{h3}Sidebar" instead of "{h2}Sidebar." Step 17 is completely erroneous, and will result in a file where the bottom of the content in the sidebar will push down all the content in the "Maincontent" div from the second header. Instead of following the directions on the pdf, do the following:

For the CSS rules for the "maincontent" div, add a "float left" property. In order for the text in the "maincontent" div to have some space between it and the sides of the div, add 20 pixels of padding to the left and right margins. Add 5 pixels of padding to the left and right margins of the "sidebar" div as well. Finally, add the "clearfloat" class to a "br" tag just before the footer, following the directions at the bottom of page 14.

http://www.box.net/shared/e1xxy2tyib

The start.html file to begin the tutorial:

http://www.box.net/shared/fefsodgohv

Follow this tutorial to page 17 only – disregard the last three pages.

References for class: 2/12

Today, in class, I'd like you to choose an html template from Dreamweaver (one of the two-column options with a header and footer), and re-style several elements. Don't just change the elements in a random manner – try to make all your styling cohere into an attractive design. There are at least six elements I want you to alter:

1. Insert new text, instead of the Dreamweaver "dummy" text. You can use Lorem Ipsum text.
2. Style the text differently.
3. Change the margins and/or padding on some elements.
4. Insert a few links in the text, and change the styling of the links.
5. Insert at least two images, and "float" them relative to the text.
6. Change the background color of all the elements (header, footer, sidebar, content).

And here are some links to online color palette resources:

Colour lovers

 Design seeds

Matt's Website:

I want to create a website where I can have my sponsor resume and videos for everyone to see. Some of these websites are a little more complex than I will have mine, for a while at least. I want to have at least a couple pages.
http://www.tylerjewell.com/ This is the main website I chose. It is really simple, but gets the the job done.

These are all the other websites.
http://www.louievito.com/
http://www.fernandoalonso.com/
http://www.rafaelnadal.com/
http://www.gretchenbleiler.com/
http://tonyhawk.com/

Alexa's Website

Hi!

For my project I will be redoing my parent's company's website. Their company is called Home Turf Inc. They are a sod distribution business so the main audience would most likely be families or other homeowners. Ideally I would like to have a simple, friendly, and organic feel to it. Here are a few websites that will influence my design and content:

inhabitat
usavesod
sierrasod
ninespace

Web References for Thursday, 2/7

Using list elements to make a nav bar:

http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/

After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:

1. change the names of all the nav buttons, and make them all external links to actual websites.

2. change the font face in the nav bar.

3. change the color of the nav bar, including in the "hover" state.

4. change the dimensions of the padding on the nav bar.

Your assignment for Tuesday's class is to have:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):



2. Make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):



Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Write and print out a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?

I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes. There's a tutorial here that has some good time on wireframing in Illustrator.

Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.

The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. And since most sites have homepages that function differently than their interior pages, it's necessary two have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.

A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.

The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).

Jenn Sheridan

I want to create a website that can potentially service as a writing/multimedia journalism portfolio. Uh, I guess in other words - a blog.

Semi-Rad
- I like the content on this blog. The layout is clean and easy to do, but kind of boring. It's probably very similar to what I will end up with considering it will take some time to learn more elements to add.

Adventure Journal
Chris Davenport
nice layout!
A Photo Editor

It's funny how most blogs look very similar. I'd like to design something that stood out from the typical blog layout.

Divaa Media

Hello!

I would like to design a website for Divaa Media, the business for my cinematography/editing work. I want my website to be simple, sophisticated and playful. I see the site potentially including samples of my video/photo work as well as a mission statement and contact information. I believe my audience will be young people interested in action sports, music events, and fashion. Here are some links to websites that would help to inspire my website in terms of design.

isenseven
insight51
roxy
lifetime collective
vimeo

Jaka - HomeWork

Hy!

For my final project I will use "the project" I am working on right now.

Among other things, I have to build a website for a start up company that is most likely to launch in summer 2013. Since I have just been "hired" for the job I will be starting with an empty page (that's why there is nothing to show, yet). Also, since the company is still in development mode I can not talk about it.

The Audience will be young adults, males as well as females.

Talking about the web site design, I really like to make websites that are easy to use, very comprehensible and are visually appealing as well as easy on the eye (not too much colors or flashing, but calm and fast). I am definitely looking to build something in that manner, but at the same time I answer to CEO that will make the final decision.

Since the idea is pretty new there are no really similar sites out there.

Here is a "similar" site:
Groupon

And now a few sites I enjoy and visit often:
24ur
eBay
Movie2k
CNet News

Website I'd Like to Design

I'd like to design a website for my photography. The site would include pictures for sale, pictures that have been published and pictures from adventures. I think the site would also have stories from some of the pictures also. Here are some links to sites similar to what I want to get to:

http://stevemccurry.com/main.php
http://www.grantgunderson.com/
http://www.brucepercy.co.uk
http://www.larajade.co.uk/
http://www.bottlebellphotography.com/gallery.aspx

My web page project

I would like to make a data base like web page
http://ae.cnmsl.net/
http://gdroy.pkkings.com/MECHANICS_db_info.asp
http://www.gundam.org/msIdxCodeno.html
http://gundam.wikia.com/wiki/The_Gundam_Wiki

LetsGetBagged.com

I would like to continue working on my website, www.LetsGetBagged.com. I would like to add more components, such as a shopping basket to eventually order jackets. I would also like a menu, where a customer can plug in their measurements to create a custom fit jacket. Adding elements such as a goggle wipe, extra pockets, ect. would be ideal.

websites that I like are:
http://constrvct.com/
http://www.johnnywas.com
http://lilywhiteclothing.com
http://www.kickstarter.com/
http://youngandwhatever.tumblr.com/
The audience of the web site will be targeted to individuals buying outerwear; mountain people. Skiier's and snowboarders ranged between the ages of 15-50, male and females

Assignment for Thursday's (2/7) class

On this blog, post a one or two paragraph description of the website you'd like to make for the first major "website project" for this class, and provide at least five links to websites that are in the same "genre" of the website you'd like to make -- make sure at least two of the links are sites you think are designed particularly well. In your paragraph, be sure to include who you think the audience for your website will be.