tech-challenging

I’ve wanted to build my own e-portfolio ever since learning about the project and the amount of freedom we’re given in terms of design and overall purpose, but I knew nothing about HTML/CSS other than they’re used to spell out the general content/style of a webpage.

Codecademy provides a cute lil text editor built in with a series of exercises that take you step by step through fundamentals of whatever course you’re taking, which is super helpful when you don’t know why you’re making a mistake (in programming, every single line you type has the opportunity to mess up your program. I guess the same could be said about writing?). The prompts are also friendly, maybe a little too friendly sometimes (I think even my mistakes come with smiley faces), which again helps with morale considering how frustrating coding can be. And they give you badges! Look!

Screen Shot 2013-11-11 at 7.35.17 PM

I am finding all these discrete exercises a little weird since I’m so used to longer chunks of code all dependent on each other, but HTML is pretty much read top to bottom for content. Anyway, I think Codecademy is a pretty neat resource for anyone looking to learn not only HTML/CSS but other basic programming languages/concepts. That said, I think it’s even more helpful to have a specific project to work on to actually apply them because the exercises can seem really easy and then you realize you actually know nothing…which brings me to my e-portfolio. I’m starting with the basics and finding that even seemingly straightforward elements like navigation bars take a while to implement and customize. Building the portfolio will definitely take more work than I’d anticipated but I think it’ll all come together in the end! And an obligatory screenshot of my current homepage (ft. an awkward placeholder photo of Kilo and me):

Screen Shot 2013-11-12 at 10.06.49 AM
i think i’m more excited about the little c logo for copyright than anything 

The Beauty of Wix

The technology I’m learning to work with through building my website is actually different from the prior experience I’ve had with website design in prior communications classes. Rather than fiddling around with code for hours and becoming incredibly frustrated when things don’t work out, I took a suggestion from Blake and started learning to use Wix HTML Editor/website builder.

This has to be one of the coolest websites out there – it’s so varied in the amount of design choices you can make and it is an incredibly helpful tool for those of us, like me, that don’t want to spend their time running through lines of code to find tiny errors. Since my website is going to be mostly based on visuals, it was important to learn how to input images and videos in a way that looks good and works well. I mostly learned how to use Wix as opposed to learning to code a website, but just by fiddling around with all the options Wix provides, I gained some insight into how web design should work and how sites should look as well as what they should provide for those people visiting the site. It’s a really fun editor to use, so if you have any site-building projects I would highly reccommend it!

Things I Now Know About Myself: I am not a Computer Programmer

I’ve discovered that designing my e-portfolio is an absolutely terrific way to procrastinate productively.  I literally have six different sample e-portfolios going currently.  I could be doing homework, or….I could play on WordPress and Weebly.  I pick the latter.  Why do I have so many of these e-portfolios? I absolutely for the life of me cannot become a productive programmer.

Programming is just as complicated as I thought.  We tend to thing of writing just in formal languages through sentences and paragraphs to convey an argument.  We focus on diction, connotation, and sentence structure to complete a presentation for the piece. As writers, we choose to create our own forms of exploration with words.  Making a website is actually really similar in concept to writing.  How is the layout going to affect how people perceive a sight?  Colors, different Web 2.0 feeds, fonts, and design play into programmers form of exploration just as our choices play into our writing. Writing is something that is so comfortable for us.  All of my non-writing-loving friends don’t seem to grasp this.  I never understood how this didn’t make sense until…..well right now.

We write.  They program. The same way that we think writing is terrific, they seem to really like to program.  I am going to stick to writing I think and let them do their thing.  After thinking I went through the html code to create this masterpiece only to see literally jumbled up madness (I should have taken a screenshot…darn, I had the prophetic epiphany that I am not a computer programmer.  Though fun to mess around with, my effectiveness is quite minimal.

Needless to say, I am baking my friend Danek a batch of cookies this weekend and begging him for help.

I think that I am going to go with E-Portfolio version 4.0... <—click it. (I’ve got random commentary places to play with formatting.  emphasis on random).  What do you guys think?

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!