Tag Archives: coding blog posts

How to add professional contacts to a Personal Learning Network (PLN)

Posted on by
Professional Learning Network (A. O'Brien 2014)

Professional Learning Network (A. O’Brien 2014)

Hello!

I found a new mind mapping tool for my second Personal Learning Network. I discovered a great resource for different brainstorm and mindmap tools. I  stopped at number nine, Bubbl.us. It was actually the first tool I checked out, unfortunately I can’t really tell you about any others. I plan to try a new tool again for my third PLN; not to say I didn’t like Bubbl.us.

Content wise, This time around I feel more comfortable listing people I haven’t known  very long. I looked up contacts for my new position working with CLA, and I added undergrads from my classes. It was nice to separate my professional contacts by industry; because before I had people from very different professional backgrounds crowded all together.

The tool was very easy to use–I didn’t Google, seek embedded help, or flounder once in the couple hours I spent working on this. BUT- It was tedious to consider aesthetics. My colors are arbitrarily assigned, and most of the child bubbles are pined haphazardly in a frustrated attempt to move the shapes.

Usability wise, I never really got the hang of the curser-bubble techniques to move, connect or add child bubbles. Although that didn’t stop me from one-by-one colorizing and sizing my connections. Every. Single. One. Well, actually… the orange Restaurant Connections were a default color, and some of the child bubbles would change color to match their parent(?) bubble. I may have been exaggerating a bit.

I hope you check out the tool. It’s great to chart interconnected mindaps.

How to use basic web building to make information beautiful

Posted on by

How I used HTML to improve my blog posts on WordPress

Hello friends!

Thank you for checking on my site. Today I want to share a couple examples of my recent experiments with my blogs. We’ve been learning about basic HTML coding for web writing and my assignment is to use code-writing to adjust some of my web content.

Luckily, I’ve been revising my blogs this entire time.

Unfortunately, I hadn’t been documenting the changes.

Fortunately, WordPress is prepared to help someone as indecisive as myself, and there are ways to see every single edit and version made since creation of a blog post.

I want to show you a couple examples of the changes I made to two of my blogs. I added a header, added typeface color, floated a media image, added a margin to that image, and adjusted the dimensions of a photo to correct the stretched faces. Take a look!

Before- PLN

First Draft- Awkward image/text positioning with crowding

The first version shows the PLN media image first thing in the post. Immediately, without a space, the text begins at the bottom of the image.

What you cannot see from the picture, is that the photo is not linked to the media file, so if a reader clicked on the image, a small image of the PLN (The same size displayed) is the largest viewable option.

After- PLN

Current Version After Code-Edits: margin, border and padding, also float next to text

I changed the blog post a couple days after a lecture from Professor Joe Moses taught my class how to code a couple tricks with images.

Professor Moses taught us the difference between padding and margins and how to float an image next to the text. He also showed how to add color. I got a little help to code this revision from a great resource: www.w3schools.com.

The best part about this website is that there are embedded sample boxes that you can practice and view the changes as you change the code.

My next example is for my visual analysis for CRS. For this, the changes may be subtle to some. This was actually my first attempt to change the font color, and I changed it simply by coding the word “maroon”, eerily intuitive!

CRS- Before

Before width/height correction, before header established

I also noticed I hadn’t made this vital information searchable via search engines because it was not being recognized as a header. I changed it to h1, and I was able to go through the rest of the blog to format the other headings to the “strong” formatting previously assigned to the now header.

How the code changed from version to version.Code- CRS

After- CRS

Current Version- Adjusted Header/Photo

During class, Professor Moses cringed at the sight of my distorted photographs. He advised me to forgo the lecture on floating and fix the dimensions. It was actually kind of funny he was so disturbed by something I made a conscious choice to overlook.

As soon as I had some spare time, I fixed the dimensions by guess and check, comparing my distorted images to the BuzzFeed website where I retrieved them.

I hope my story inspires you to take a little extra time and make your information more beautiful!