EPortfolio Progress

I had originally chosen Weebly as the platform for my EPortfolio.  I made this decision because I had never created my own website before, and after experimenting with several options, I found that Weebly was the simplest, most easy to use option, at least for me.  I wanted my site to have a simplistic, minimalist look and be very easy for users to navigate.  I had seen sites filled with many different colors, which definitely caught my attention; however, I feel as though users could be just as drawn to a page using less powerful colors like blacks, whites, and grays.  I also think that this could oftentimes be less distracting and more appealing as compared to an extremely colorful page that could be overwhelming and even sometimes perplexing.

I had gathered most of the artifacts I wanted to post on my portfolio and was doing my best to organize them in the way the I had envisioned, but truthfully I wasn’t in love the options Weebly was giving me.  I wasn’t sure if it was worth it to change my platform entirely or just do my best to work with what Weebly was giving me to create a site I was happy with.  I didn’t hear about Wix until a few weeks ago and obviously I didn’t know much about it.  The funniest part about making my decision to switch over to Wix was that I actually saw a commercial on TV about it.  The advertisement was all about businesses being able to create their own websites and personalize it to fit their company’s needs.  I’ll admit, it wasn’t the commercial itself that convinced me to start building my portfolio with Wix, but it definitely intrigued me enough to start playing around with the site, and I eventually realized that definitely preferred Wix over Weebly.

At first, I really liked the different templates Wix had to offer.  They broke them down into different categories such as photography portfolios, architecture portfolios, writing portfolios, etc.  The great part about this is that you don’t have to select a template based on the artifacts that you post on your page.  Instead, you can edit these different templates and add your own artifacts.  The template decision is mainly based on the look you want for your page.

I am still in the process of adding my artifacts and organizing my site but the general idea is to separate my pages into five different sections: Home, About Me, Freshman Year, Sophomore Year, and Junior Year.  Each of these pages can be accessed through a bar on the top of the page.  Lists of my pieces of writing also drop down when hovering over these different page titles on the top bar.  While this is a very simple way for users to access my writing, they could also be accessed through pictures on each of the main pages.  Each picture is in some way related to the piece of writing it corresponds to.  I feel like these pictures give users an extra incentive to read my writing.  Once users click on these pictures or on the titles in the top bar, they can read my writing in the form of a page by page slideshow.  I thought this was a great way to add a different type of media or web writing.  I think its also a clean way to display my writing, giving users an easy way to navigate from page to page.

There is still much work that needs to be done on my portfolio before I my portfolio is complete but it is definitely on the right track.  I am really happy with the decision to change my platform from Weebly to Wix.  I think it was the right decision, and I think I am definitely going to be more happy with my final portfolio as a result

thanks weebly! #techchallenge

For the Tech Challenge to upload an artifact to a web page in a more interactive way, I decided to go back to Weebly and mess around, since the process of messing around with design is a lot faster than writing the HTML manually. I forgot how simple Weebly’s drag and drop interface was, and it’s definitely a nice breath of fresh air to be able to see in real-time exactly how the web page will look.

I put my Why I Write essay up on the Weebly I’d created earlier in the semester when we tried out the different platforms, and I found the column feature especially helpful. I ended up using a decent amount of footnotes in my essay and have been wondering how best to incorporate them on my e-portfolio so readers don’t have to scroll down to the bottom of the page every1 other2 word3. I ended up formatting it like this:

Screen Shot 2013-11-17 at 11.09.17 AM

 

So, if the screenshot isn’t too tiny to tell, the pink words reference the self-reflective comments in the right column, and the light blue [1] refers to the footnote below the reflection. I think the integration of reflection and footnotes in the same column might be too cluttered, but I like the idea of keeping all the references in line with the actual essay. I definitely found Weebly useful for planning the layout of my eportfolio, as it’s a lot easier to work and code from a planned outline of the layout, and I think having an actual webpage instead of just something drawn out on paper will be even more useful.

1Isn’t

2This

3Obnoxious?

Websites and You – Everything You Need to Know (probably not everything, but there’s a lot here).

Co-Authored by Katie Brown

What is the range of software options available?
When it comes to website building, there a number of different options that cater to a number of different levels of technical skill and time investment.  Some of the more popular methods and programs include:

Hand Coding (all operating systems), iWeb (Mac), Adobe Dreamweaver (Pay, all operating systems), Weebly (free online), & Wix (a free, online domain).

What is available for users with different levels of expertise?

Hand Coding (html/css) – Though time consuming and kind of difficult to get the hang of, this method offers the most range of freedom of any of the others mentioned here.  This method of creating websites is open to all Macs (through Text Edit/TextWrangler) and PCs (Notepad).

iWeb – Available to Mac users, iWeb makes building websites really simple.  The program has pre-formatted layouts for you to choose from and use as a starting point.  You can add pages, upload images and videos – it’s a really simple way to get a website up fast.  iWeb doesn’t allow for customizing the look of themes very well though, so you lose a lot of creative control with this option.

Adobe Dreamweaver – Dreamweaver is a bit of a hybrid of the last two technologies. You can choose to hand-code your site in dreamweaver or you can select from a pre-made template and edit the code to your liking. However, this still involves a working knowledge of HTML and CSS and may not be the best option if you don’t have the time to learn how to code.

Weebly – A free online resource, Weebly is probably the most friendly of the options thus far.  On the front page of the Weebly website you’ll be prompted to enter your name, email address and password.  After that, you can get started on your site immediately. Making a website with Weebly is a lot like editing a photo with Picnik; there are tons and tons of settings you can play around with. Weebly will also publish your site to the web for free : )

Wix- Another free online website builder. All you need to do is create an account and a variety of tools are at your disposal. It doesn’t take long to learn to navigate and the interface is user-friendly. Option to upgrade to premium membership, but the normal account is usually more than adequate and will allow you to publish your site to the web under the Wix domain. Also great for continuous editing.

Which options are supported by the University?

iWeb, Dreamweaver CS5, and TextWrangler, Fugu, and Fetch  are available on University of Michigan Macs.  Dreamweaver CS5, FileZilla, and Notepad++ are on all University of Michigan PCs.

What support is available online?

The web is full of awesome places to learn how to hand code, but some of the best sites I’ve found are HTML Dog  and W3School.   Both offer great instruction on how to use HTML & CSS to build your websites alongside examples where you can actually manipulate code on your own to see how it affects the layout of the page.

For learning Dreamweaver, Youtube is going to be your best friend. Search “How to use Dreamweaver CS5” and you’ll find a ton of resources to help get you off the ground. Google is always a good starting place as well.

Lynda is another great resource for learning about how to build websites and includes tutorial videos on iWeb, Dreamweaver, and general website design and development.  Some tutorials do require a subscription, however.

What are your favorites (and why), and/or what else should we know?

Josh’s personal favorite is hand coding HTML and CSS into Dreamweaver – it offers a lot of control and freedom in designing simple sites.  It can be a major headache though.

Katie’s favorite is obviously Wix! Takes almost no time to learn and I’ve used it in a variety of classes for a range of different assignments. Great if you are looking for a time-friendly option.

Also, a lot of these resources will help you make a website, but many won’t help you publish it without doing a little extra work.  If hand coding or using Dreamweaver or iWeb, you’ll need to push your site to a server space using an FTP (File Transfer Protocol) program. Fetch and Fugu are available for Mac and supported by the university.  FileZilla is available for PCs and is supported by university computers.

You can buy domain names and space from places like GoDaddy, but each student has his/her own personal space you can upload a site to through the university, which can be accessed through this URL:

www-personal.umich.edu/~uniqname

http://www.umich.edu/~umweb/how-to/homepage.html will walk you through the steps.

Happy website-making!