Saturday, May 28, 2011

Back To Business

So my first week at work was not up to par with the recent events and lack of sleep I found it near impossible to be creative let alone at 8am.  Anyways no excuses next week will be better.  I didn't have to work today so I spent it researching new ways to create files and "export" my ideas to html and Css.  As far as I know  THERE IS NO WAY TO EXPORT HTML WHAT SO EVER. DON'T TRY. What I am finding useful is creating ideas on paper FIRST. after I find a layout I head to FIREWORKS. Well I lied.  First I head to ILLUSTRATOR to create my vector graphics, header, footer, what have you, Then I head to FIREWORKS to import my graphics to impliment them into a "lay out" atmosphere.  You may be thinking why not use photoshop or Indesign...well first if you use Photoshop for anything but raster images Shame on you.  Second Indesign is designated for PRINT. K. now lets talk business. In fireworks it allows you to see the deminsions you need for the right placement of your graphics as well as fonts, fonts sizes and all kinds of useful things you need for THE INTERNET. after I placed my graphics in the lay out I had made up on paper I headed to DREAMWEAVER. This is where I yes...created an empty HTML AND CSS.  After creating a folder in my documents and placing all my images in a designated image folder I was on my way.  K.  First off the HTML...its almost like a revision of your work is how you have to see it.  I used Fireworks to get the sizes of my boxes and artwork.  After making <div>'s and handy <id's> for all of the <div's> I went to my CSS file.  there I instructed all my <id's> to do what they were supposed to do as it said it was doing in FIREWORKS.  I will not stress enough that Fireworks is great for getting an idea as to what you need in order to create CSS and HTML. I still don't understand why there are any Export HTML functions in Adobe it is so messy and just wrong.  If you find it useful, then explain to me how you read the code it presents all the "computer generated" names and code is a nightmare.  Anyways I am currently creating E-blasts at my internship which are little emails that act as HTML pages inside a email.  They are great but not when you are tired.  I have to create a sales pitch for the marketing purpose, I have to know the target audience and use appropriate graphics and fonts as well as maintain the companies image.  Its a task at the least.  After I finished the first one need less to say there are easier ways than creating your file in Indesign and slicing in Photoshop.  If you want to do web...learn web. Otherwise your cheating yourself.  Alright enough with the blabbing and I'll show you what I created in 45 minutes :)

First the FIREWORKS FILE:

Now for the HTML CSS work in DREAMWEAVER:

Not that it's too different but The Browser view:



Friday, May 27, 2011

My experience through the May 22nd Joplin Tornado

The Last Time I Will Mention This Story In Its Entirety.
May 22nd, beautiful day at work at Olive Garden excited to get out and soak up the sun.  Looking outside ready for the summer ahead.  Internship, Biology class, time with the GF and friends.  Getting ready to clock out of work and poke my head in my managers office and notice a screen full red and yellow blotches all over the screen that is encompassed around the Joplin area.  I laugh and tell my manager, "Psh it doesn't even look that big of a storm, it will be in and out by 7." my managers reply," Ya but thats a pretty condensed storm that could grow."  As being a Joplinite most of my life I've been through a lot of this before.  Whats new some wind some hail some rain, and life goes on.  I continue to clock out and head back to 29th and Missouri.  I arrive at my house gleeful of the week ahead and the opportunities that will arise from the internship at ARC in Joplin.  I get out of my garlic infested clothing and head to the shower. Music blaring through the house, as I sing along I continue to get dressed and proceed to my daily computer checking routine.  Facebook, my bank, blogs, ect. I had lost my phone a couple days before due to shipping it to Apple and getting it given back to me not just unfixed but broken more.  So I had went to ATT for a replacement and found value in seeing if anybody wanted a broken screen Iphone.  I went to Ebay and posted my phone under the cell phone category and thats where the story begins. Preview, enter, "Your Item has been successfully added to Ebay" Great! I then look up and the window in front of me goes dark.  Confused I get up from the chair and proceed to the window.  Looking outside it is calm as ever but in the distance is a storm I have never seen so dense, so dark, so quiet. I continue to look around outside not a motion.  I continue back to my computer and check on Facebook to see if anybody else has seen this.  I hear what I found humorous at the time.  An Ice cream truck blaring its music making its way down the street.  I reply on FB with,
I continue on facebook for a second or two, then the wind starts to pick up outside.  For the most part I never over react...ever. But something instinctual made me call my Girlfriend.  You see earlier she was helping at a theater that day serving and was heading back towards Joplin with her friend to pick me up to take everybody to church.  After a text message or two about where I was and where she was.  I instantly picked up the phone and waited for her to pick up.  I am now wondering around the house now finding the wind to be blowing the trees around and it started to rain.  She picks up,"Hey whats up" I say,"Hey I don't really know whats going on but it is looking pretty bad outside. " she replies, "yeah its not doing anything here I'm on 15th street and Texas." I reply instantly with "You need to get off the road...now," This was the instant that I saw a full sized trampoline with the child safety nets on it float above a yard for a second as if ghostly and then soar across 5 yards north.  She said,"Thats weird its not even raining over here, it just looks dark...really dark."...that was it when she said that the phone lost signal and my lights flickered once...twice...thre...they went out as the hail began to come down.  I looked out side once more in the front yard as I saw the trees go from a peaceful blowing from side to side to a huge push to the right as if stretching to touch the ground.  It was released back to its normal position then as if a convulsion again persisted to push towards the ground, then as if the tree was instantly shocked rushed back up to an upward position and began to shake intensely in circular motions.  I took that as "Get to the Bathroom...NOW" I rushed to the bathroom in the dark, granted I couldn't tell you which was better being alone and being able to calm myself or being with people to keep me rationalized.  As this was all happening I was continuously pressing the call button on my new Iphone4 that I had bought the day prior at ATT, hoping my GF would pick up. Nothing.  I was sporadically getting text messages from people outside the city.  Thats when I knew something was up.  seconds turn to minutes as I see the hail punish the ground outside my bathroom window, I begin to scare myself because if this was a tornado where was really safe? I didn't have a basement and the bathroom had a window in it so I kept wondering around like a chicken with my head cut off wondering into the hallway thinking well this is the center of the house with no windows, then looking up and thinking well if the roof comes off I am completely exposed so I made my way back to the bathroom.  Still trying to contact my GF.  Nothing. Then i began to ease up a little and at that time I was looking outside the front window to witness all the trees I saw prior to laying on the ground heading north, one which was right in front of the window nearly hitting the window by inches.  I finally got a text message from my GF's friend that said," We are ok, but your GFs car has a tree on it" I replied" Big tree or little tree" She replied ," Big tree bye bye Jasmine" ,with the image of this..., 
which was the name of her car.  I wasn't necessarily scared or frightened.  From the looks outside my window it looked like wind damage.  Some trees were down but the houses were in tact and all seemed well now.  I told her that I would be on my way to come get  them since the car was out of commission.  I headed to the front door and opened it up to find that the tree was not going to allow me to exit.  I went back to the back door and found that there was flooding all the way up to the door.  Welp, I guess I'll jungle gym my way through the front yard.  I proceeded through the front yard crawling through a full 25 foot tree to find my self to my car.  I got there and realized, what if I need my camera to take pictures of the car? I returned through the tree and came back, started my car and before I could put it in drive noticed that I wouldn't be able to go forward due to the downed trees.  I backed up and headed towards 32nd street.  I thought Ok this isn't too bad I'll be there pick  them up and be on our way.  Well thats not exactly what happened.  I made it to 32nd and found my self in an instant traffic jam. Hmm what could be the hold up really? I saw a cop pass us and stop to start directing traffic but soon realized it was too chaotic and left.  Shortly after I made my way to Connecticut. Bad idea.  I continued at a slow motion heading towards 20th street.  This is where I came up to where the Olympic Fitness center and Apartments were.  My eyes went from relaxed to mouth wide open and eyes glazed by the horrific effect this wind had taken to the area.  Not only did it look like a mess but the town seemed to have opened as a field in Kansas.  empty and lifeless.  I was crawling through the mess as I saw people crawling out of the wood chips that were left hearing people scream, "HELP US!" "HELP" This drew my attention to a huge crowd of people surrounded around a body on top of car that was limp as his hand was lifeless off the side of the back hatch.  I turned quickly and started shaking and crying.  The emotions took my by surprise.  These people needed help and I had absolutely no clue what to do I was stuck staring at the events around me with nothing to do but stare in disbelief.  We continued to cross over 20th and Connecticut. where you could see where it looked like Big foot came through and flattened everything.  I was amazed to see that the area that my GF turned off of has just the same as the house I was in.  It was still green and trees were pushed to the road.  We met up and continued back to the house where the car and her resided when the monster came through the town.  After days of seeing the disaster and hearing the infamous stories of the surrounding community I have nothing to say, I am fortune and something thought that 2925 Missouri was worth a house not taking.  It astonishes me that the view I had in front of me when I entered my car is only 2 blocks away from people that have nothing.  Images and video can not capture what happened that day.  Even this note will misconceive people as to what happened and what it was like to be in the strongest, deadliest tornado to date.  I was fortunate not to have any house of mine taken away and I can't imagine what it is like to not have a home  but I do know what it feels like to not have a place to stay.  Joplin has been torn apart right through the epicenter and since traveling through the debris I have been lost and for the most part can't remember where my favorite restaurants resided and what streets to turn on to get back to the houses I stay at.  We have come together to help the whole community and will someday get back to where we were.  The school I got my diploma is no more, and the town will go on with out electricity for quite some time but that won't stop everybody from living the lives that were being dreamed of before May 22nd 2011 at 5:40 pm. 

As I plan to move on from this reckoning, I'm sure the community will remember the day that the area came together and worked hard to get back on its feet.  Even though the stories will be told for ages to come, I feel that the community as well as I won't need to share the story in great detail because we shared better moments as we recovered from the devastation. And that is why I say that This is the story of a Joplin resident that will never be told in its entirety again. 

Sunday, May 15, 2011

Web design.

May 19 2011:
onto INTERACTIVITY!


Alright, I came into the studio today and sat back down with my template to smoothen out the rough areas.  the background image originally was a two color background.  That wonderful Green and Dark grey. My main concern was that no matter how it works I want the background to continue for ever.  I am personally not a big fan of boxes, I feel claustrophobic when I am at a site that has a background color and a container color of a different type. So this was working until I realized that in order to repeat either x or y it would repeat the 2 colors. ... not what I was looking for.  So how to correct this? make the body color ONE COLOR and inside the container make a <DIV></DIV> with a ID of what ever you want it to be lets call it GREEN BACKGROUND.  so it should look like this in your HTML....<div id="greenBackground"> and then ALL THE CONTENT YOU WANT TO BE WRAPPED AROUND IT...very important this took me a good 5 minutes to figure out.... aka grey box, logo, menu ect. close the </div> and make it the height and width and all the other fun stuff you want in your <div> to make it pretty.  Fun lil day.  Now that my template is done. INTERACTIVITY TOMORROW! I am going to take a break to go enjoy THIRD THURSDAY IN JOPLIN. sorry for all the caps. The way I plan on making the site function is.... there will be an ABOUT ME video on top of the website that will be viewable on all pages.  The site will not seem to change but when you click on the navigation bar the content below will change accordingly.  The home page will show my most recent work as well as a RSS feed and my Facebook updates ect.  The work will have a functional gallary of everything, that will be the next adventure.  the blog will simply have a formatted version of my whereAbouts in the blogosphere. and my CALL ME button will of course have a handy way to get a hold of me via email, phone, ect.  here is my home page template below on a wonderfully huge screen to capture how the repeat process worked, which you can see other examples such as the Pittstate Website where the header is red and will continue across the x axis. Enjoy:)

Top and bottom of hand written CSS/HTML with a repeat <div> and <body> color to accomplish an open feeling inviting website.



May 18, 2011 Day 4:
Create My Portfolio Site.
The past few days have allowed me to use the skills that I have gained to take off from the template and allow for the reconstruction of my Portfolio site.  I thought I would branch out of the code world for part of the day to spend some of my time in Illustrator, and Fireworks.  Nothing to new or breath-taking in either of the programs.  Fireworks started off great.  I got my initial design but when it came to exporting anything images, html, css.  It all was a complete mess.  So I ended up recreating all the images in Illustrator, and exporting them as .png, creating an image folder and creating <img src:> to put them into dreamweaver.  One thing I haven't really been able to use are Dreamweaver's short cuts.  I attempted to make a navigation bar but all the nasty CSS and HTML made life a bit miserable as I found myself spending half of the time DECODING code that I didn't write. plus since I am pretty new to writing and positioning without tables, It seems that random code doesn't match and can crash your whole design.  Anyways, I created roll over images of my face! ha The colors were thought up to be professional, and clean.  It was a great challenge to create a layout in Fireworks and create it again in Dreamweaver.  Using the features such as the positioning to get the elements in place using CSS was an AH HA moment today .  Using the outer element to be positioned #div outer{position:absolute} and positioning the <div's inside the outer as such #div inner{position: relative} and being able to move the elements inside the inner by using the attributes :top,bottom,left, and right. I plan on making a RSS feed a video intro and a javascript slideshow.  the light grey box up top is where the video intro is going to be.  Enjoy.

Illustrative navigation bar with a traced pen drawn version of my face that will have a roll over.  

May 17, 2011 Day 3:
NAV BAR DAY! 
Today was a distracting day.  I spent time to take a bike ride since I heard that the rest of the week is supposed to be rainy.  Anyways, I spent the mid part of the night working with the CSS and HTML functions of a traditional navigation bar.  Starting with a simple list function, <ul> <li> </li></ul>.  with the HTML categories set for the navigation I could then set up the CSS to add some color and formatting.  Using a.link, and a.hover to change the states I could change the size, font-color, length, padding, margins, and background color.  The best way to describe how any CSS works its like a really organized librarian.  You first categorize by a whole library, then you locate the Isle, then the Section, then the column, to the Row and then the book, the pages, the word, and the letter.  You can change Globally or locally.  Globally would be like changing the color of the library where locally would be like changing the word in the book inside the library.  So how this relates to web terms.  You can make a LIST.  starting with the UNORDERED LIST AKA <UL><UL> In CSS if you want to change everything inside this list, say the width or color, you would write. ul{ width:100px;} then you can move down to the items in the list aka <li><li> this will change the items contained in the list. Then you can change the attributes within the <a> tag.  Long story short, you can make some snazzy stuff with just CSS and HTML without the use of JavaScript.  I'll get there in a month but this is fine for now.
The example above shows how I chose to have a:link and a:hover to have padding to spread it across the whole site. Using the a:hover as a black background and the a:link to have a baby blue color.  Not too complicated but pretty cool to see in action.  Still writing the code from scratch. 

May 16, 2011 Day 2:
So now that I'm grasping how CSS and HTML work together I can now begin to see how the scripting languages fall into play.  I haven't dove into free hand script yet but the CSS and XHTML are coming together.  I can now see how the use of  *float{} and *clear{} attributes work in moving <div>'s around.  I thought that learning the library that comes with CSS would be a bit challenging but it has come along quite well.  I enjoy how there are no set ways to do one thing and from looking online there are blogs and blogs about how someone found a faster more efficient way to create a navigation bar or position for a <div>.  I still feel as if I'm a bit messy in my writing but I at least see where I can be more efficient.  The best way to describe how I'm learning is like when you first started typing on a keyboard.  You know how it works and you can see how better people can type faster but you can't seem to move your fingers fast enough so you take (shortcuts) to get your way around.  I know that as time goes I'll be able to chunk more info together in order to see the picture more clear but as of now spelling one word on the page at a time watching it come together is really exciting...as tech geek as that sounds.  From my experience the reason why I enjoy this so much is because to me it feels like {#magic} It is a blank canvas until you start adding catch phrases and secret words in order to make something useful.  Its a journey and its day 2 so here is the progress from yesterday..not much but I have re-arranged some <div>'s and feel more comfortable coding.


May 15 2011 Day 1:
So I took the day to smash CSS and XHTML in the face.  Note to self: don't underestimate how easy one may think aligning boxes with CSS is.  9 hours and a serious case of dry eye I have created if you can call it that, a template.  I successfully was able to create Divs that wanted to be around each other without wanting to slam each other off the page, overlap, disappear, or stubbornly do nothing.  It was enjoyable non the less and can say I learned a lot in one day.  I now know how to categorize div's with in CSS and XHTML but all the while doing that the design has suffered greatly.  I have found it a challenge to make the computer do things you want it to while keeping design in the front lobe of your brain.  My internship starts in a week and I feel this will be helpful.  This is the first time I have ever stared at a blank Dreamweaver HMTL/CSS piece of paper and wrote the code from scratch no copy and paste.  The library of CSS strings and HTML principles will be the only thing I will think about through my sleep.  Enjoy the pic :)

Hand Written CSS and HTML from scratch to create a template that is no where near finished.  Hours to learn and get this far : 7 hours.