In-Line CSS

CSS, which stands for Cascading Style Sheets, is a style sheet language that is used to describe the presentation semantics of a document written in a markup language. The most common application of CSS is to style web pages written in HTML and XHTML, in addition to any kind of XML document.

In-line styles are one of several ways you can put CSS to use. It is simply the CSS language being plugged straight into the HTML tags, using the style attribute.

Example:

Despite this form of applying CSS, the best practice is to keep any HTML documents as a stand-alone, presentation free document, thus in-line styles should be avoided as much as possible.

Internal CSS

Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.

Example:

This will make all the paragraphs in the page red and all the links blue.

Similar to in-line styles, HTML and CSS files should be kept separate.

External CSS

External styles are used for the whole, multiple-page website. There is a separate CSS file, which should something like this:

If this file is saved as “stylesheet.css” then it can be linked to in the HTML document like this:

To get the most from this tutorial, it would be a good idea to try out the code as I go along, so start a fresh new file with your text editor and save the blank document as “stylesheet.css” in the same directory as your HTML file.

Once you have saved the HTML file, it should then be linked to the CSS file, which is empty in this tutorial, so wouldn’t change a thing.

However, for further learning on CSS code, I would suggest visiting W3Schools.com.

Have you ever taken multiple pictures side-by-side to create a panoramic-like view in your photo album? I know I have, but what if you could actually connect these pictures in perfect perception to create one solid panoramic image? Well you can, and I’m going to show you how step-by-step in Adobe Photoshop CS4.

Original photos used in this tutorial:

Step 1:

From the top menu of the Photoshop application, select File > Automate > Photomerge.

Step 2:

The Photomerge window will open. To run this function though, you will need image files, so make sure you use “Files” in the drop-down menu and click on “Browse.”

Step 3:

In this third step, you will select your image files. There is no limit, but for the purpose of this tutorial I will only be selecting three images. The order of selection does not matter whatsoever because Photoshop will automatically detect the variant connections between each pixel.

Step 4:

After selecting your images, simply click “OK.” Photoshop will then render your image files into sequence by variant pixel connectors in order to properly function the Photomerge tool.

Step 5:

Here we see the finished product of Photoshop’s automating process for the Photomerge function. To our displeasure though, the surrounding edges of the final panoramic image appear to be out of sequence. As a result, we’re not quite finished yet. There’s more to do!

Step 6:

Select the “Crop Tool” on the left-hand menu of tools and then proceed to crop the image by clicking and holding on the surface of the image and dragging to the length you see fit. Once you let go of your mouse, you can refine your width and length by clicking and dragging on the square points that highlight your pending crop.

Step 7:

In the final step, you simply press “Enter” on your keyboard to validate the pending crop. With that, you are finished using the Photomerge automater in Photoshop CS4!

Final panoramic image of this tutorial:

Last week on my blog, I explained the terms of Content Writing for the Internet. This week though, we’ll be looking at Copywriting as I’ll explain what it is and you’ll then be able to draw out the differences between the two.

What Is Copywriting?

Copywriting, not to be confused with the legal terms of copyright, is a term derived from advertising. Written words that are used online to promote a person, business, opinion, or an idea is what copywriting is.

Different Types Of Copywriting

There is a wide variety of ways a copywriter will produce his or her work, but theses types should never be confused with the specifics of content writer on the Internet.

Copywriting can appear in emails, slogans, lyrics, social media networks, online adverts, television, radio, commercial scripts, press releases, white papers, catalogs, billboards, brochures, postcards, sale letters, and web page content; however, if the purpose of the web page content is not relating to any promotional material, the author at hand is called a content writer.

Why Is Copywriting Important?

You can have the best content in the world on your website from text, images, flash, and videos, but if your work is not properly being advertised through copywriting, you’re going to miss out on traffic that could otherwise translate your content into high traffic visits and/or revenue. Copywriters must also understand the ways of SEO, as that skill helps place your online pages high up on search rankings, namely relating to Google.

What Is SEO Copywriting?

SEO Copywriting is text-based composition of relation to web page marketing, which emphasizes skillful manipulation of the page’s wording. This helps place web pages among the first results of a user’s search list, but the content of the website must still be readable and persuasive to keep web surfers attracted to the website, otherwise SEO copywriting can quickly turn into spam.

As each week passes, another blog is written, which is just another piece of content sprouting on the Internet. Also known as the cyber world, the Internet is really a boundless dimension of space, much like outer space because there is no end. The Internet keeps going and going, but what does this have to do with content writing you ask? Well, the two come hand in hand because without one, we wouldn’t have the other.

What Is Content Writing?

Seems like a simple question for a simple answer, but that’s not so. If I were to tell you that content writing is simply writing for the web, that may be true, but that answer does not define the logistics of this job.

So the basic premise of content writing is yes, writing for the web, but in definition it’s a service offered mainly to website owners and businesses. A content writer is one who specializes on providing relevant text to any given party, which in turn requires the content writer to adapt themselves to that particular website of service demand. Typically, the work of a content writer revolves around marketing a particular product or service in which a website is selling or endorsing.

The Popularity Of Content Writing

Hiring a content writer is a golden acquisition for any web owner (or webmaster for tradition’s sake) because it guarantees them time saved to work on other areas concerning their website. To attain a content writer, a web owner will typically produce a brief and outsource the job to professional content writers, who in turn do their research on any given subject due for completion.

Different Types Of Content Writing

Just like any job, there are different approaches to content writing. The finished product is not solely related to website copy, but rather also blog posts, articles, press releases, along with new media incorporated. That can include various types of media from photography, images, videos, or the use of social media networks. There is no glass ceiling concerning the evolution of content writing on the Internet.

Why Is Content Writing Important?

Reason being is that content writing is the way of now. Don’t ever put off any time to learn the ways of content writing because you assume it’s the “way of the future,” because it’s not. It’s right now and good content writers are marketing not only any given product or service, but rather themselves too. So if you’re not contributing to the Internet society in this fashion right now, then you’re going to miss out on any opportunity you had to expand yourself because the competition is only going to get tougher by the day.

Hi folks, it’s Marcus Cyganiak checking in with another week of schooling in the bag at BCIT’s New Media and Web Development program. As a self-taught web developer and graphic designer, I can honestly say I am learning quite a few new tricks of the trade as this is my first time learning about new media design in a professional setting.

My web overview class has made me much more confident when dealing with CSS and XHTML on my own. What I mean by that is that I don’t necessarily have to use Adobe Dreamweaver anymore to assist me in coding, I can just build structures with code from scratch in any text writer, such as BBEdit. With that, we’ve each been developing a make-belief restaurant website and mine’s an Italian-styled restaurant called Vannucci’s Place; a play off of my grandparents’ last name.

The larger project at hand for me though is nothing of relation to that restaurant website, in fact it has nothing to do with BCIT’s curriculum at all because it’s a project of my own. Close to four years now, my father Kris and I have been steadily building thoughts and dreams of a new domain for collecting information and content with regard to the real estate industry. With no website out there that can really claim to be a hub for Internet surfers with such information, we decided to establish BuyRIC.com, where the initials stand for Residential, Industrial, and Commercial and our slogan states us as being The Online Real Estate Magazine and Directory.

That’s been our dream for a few years now but whenever we’ve been wanting to start working on developing this project, we just never found the time to put our thoughts and ideas into any real motion. That is until last month on October 9 to be specific because one month later brings us to today, November 9, where we went forth with a soft launch for BuyRIC.com.

What the soft launch entails is a simple display of the entire design finished on BuyRIC.com. I coded the entire website using the WordPress content management system. We only have a select few pages live right now, some of which include our Terms of Service, Privacy Policy, and Copyright; you know, the legal jargon.

With the website live to a certain degree, we plan to have BuyRIC.com fully functional by December 1, 2009 and that will be when we start offering our flat rate packaged services to realtors in British Columbia. Information about that will become available soon on the website. Through growth, we plan on expanding across Canada and into the United States but we’re being realistic in knowing we can only handle one province for now.

Where BCIT comes into play here is really the initial stage. My learnings in class really motivated me and established a clear vision on how I was to start this project. In my past experiences before BCIT, I’ve worked on a team of web developers where we’ve collaborated on establishing a website, but I’ve never really engaged in a project quite like BuyRIC.com where I had to co-found a new company and trademark our property.

It’s definitely an exciting time for me with this new venture, BuyRIC.com, and even more exciting with the fact that I will continue learning the ins and outs of new media design at BCIT. Together, these two worlds around me right now are definitely going to produce a bright light at the end of the tunnel, come October 2010 when I graduate.

I’m not being optimistic, I’m being positive. You have to believe you’re going to achieve something to really grasp ahold of that potential success. I believe I can do it.

As someone who has worked as a new media graphic designer for a large organization like TNA Wrestling out of Orlando, Florida, I’ve been an Adobe Photoshop user for numerous years now. So entering my Photoshop class this past Thursday for the first time, I thought I knew it all. Well okay, I wasn’t that cocky, but I thought I at least knew the ground basics. I was humbly wrong though.

All this time I have completely missed out on the “Channels” feature this application has to offer, which is tabbed beside “Layers” on the right hand side. So how did I miss this? I blame it on my narrow vision that remained glued to only what I knew through self-teachings. However, now that I think about it, I did receive some external teachings back when I was hired by TNA in 2004 and it was by a mentor of sorts. His name is Lee South, the head photographer for the company, who is also a web and graphic developer for TNAwrestling.com.

So why am I learning about the “Channels” feature all over again as if it’s brand new to me? I really couldn’t tell you. I think I more or less forgot about it because I was just stuck in a rhythm of my own, the rhythm I knew best from my own self-teachings. My finished products looked no different than anyone else’s in TNA; however, the difference was that I had to work harder when I could have used the “Channels” as a shortcut.

For instance, if I was given a JPG image of let’s say a wrestler named Hulk Hogan; TNA would most likely tell me to cut Hogan out of the action shot or promotional photo and place him into a new scene with promotional art layers that are symbolic to their product. This would then be saved as a PSD file. Well while cutting this wrestler, I would have normally done so by hand-selecting an outline of the individual and then using the Command-X key stroke to cut my selection. I would then use the Command-V key stroke to paste this selection into a new PSD file, where I was to work with all the promotional art. That’s fine and dandy, but what if I noticed that my selection had slightly cut off a part of Hulk Hogan’s shoulder? I would then have to go back to the original JPG image and re-select the entire outline by hand. That not only takes a lot of time, but it’s stressful when you’re dealing with time constraints.

So the easier route I learned was that once you have made your selection on any given image, you can then save your selection through the “Select > Save Selection” file on the top menu bar, which would then place your outlined selection in the Channels menu. Now, what makes this remarkable is that, one, you don’t have to redo the entire process if you need that exact selection again, and two, you can reshape that selection by holding down the SHIFT or OPTION key with the selection tool. These keys can either add or subtract from your selection.

So while I was literally moving at a snails pace secluded to the “Layers” area, everyone else was intermixing their workings on both the “Layers” and “Channels” sections. Had I have known this exact way of working in Photoshop, I would have had my graphic developments done ten times faster. This is no disrespect to Lee South at all because he taught me a lot of functionalities and ways of operating Photoshop that I still use today. This just happened to be one of those things that blew over me without notice.

Time sure goes fast when you’re having fun, but this second week was pretty slow for me. No it wasn’t because school was a pain but rather because I was literally in pain with a bad case of the flu.

It all started with a fever last Wednesday after I finished writing my week one blog. My temperature measured in at a frightening 103 degrees Fahrenheit and that had me secluded to my bed with oddly enough, severe cold shivers, so something was definitely wrong.  Nonetheless, I still wanted to attend BCIT the next morning so I could participate in my first Photoshop class.  Not knowing if I was going to be capable of driving myself there, I got my father Kris to set his alarm clock for 7 AM as well in case I needed him to drive me.  Well as it turned out, our efforts to wake up early were all for nothing because my sickness increased for the worse and his sickness had just begun.  My mother Cristina soon suffered the same fate as we had my brother Derek to thank for passing along his sick love

I guess the least bit of comfort I had in missing that class is the fact that I’ve been a Photoshop user for close to six years now. So being that this was the first class I missed, I most likely only missed the bare basics along with the itinerary of this first term class.

Friday was a different story because I actually found myself at BCIT that day. I hadn’t totally shaken off the flu bug, but I definitely was not going to miss a second straight class because attendance is a big deal for this program and I too don’t want to miss anything.  The class is appropriately called Graphics & Colour for the Web and I learned a lot about what makes up the design process for new media on the web.

As someone who has already done a lot of web and graphic designing, I never really stopped to consider the process pattern of development because everything I’ve done has been self taught.  Over the years that I’ve been involved with new media development, I’ve gone about the process in an order that felt of most comfort to me.  However, the four main points I learned to consider when processing a design are to first, identify the problem or challenge, do your research, develop a concept, and finally implement solutions.  This all goes along with the AIDA guideline, which stands for attention, interest, desire, and action.  Keeping all that in mind, our instructor gave us the criteria for our final term project.

The project will be to artistically and creatively create a two-series poster with a dimension of 11’’ x 17’’related to the KidZone Art Museum.  The museum’s mission is to promote a cultural and visual art exchange between children and youth in different countries for the engagement and advancement of success in the arts and education. So that’s a really broad statement that provides a boundless opportunity for any graphic designer.

Our first order of instruction for this project is to develop six thumbnails, which are rough ideas done with pencil on paper.  No applications such as Photoshop are used for this process; in fact, no computers are to be used at all. This process is very new to me because in the past I’ve always started every clean graphical slate on the Photoshop interface but for the first time I’ll be starting on a good ole physical sheet of paper. The thumbnail process is similar to that of a web cluster that you would write with words when doing research in a library or what have you, only in this instance, it’s a collaboration of illustrations.

Now as for what the two-series poster entails…

They will both bare the same conceptual design but both will show off variant differences in appearance.  For instance, in class we were looking at a series of Adidas posters. Each poster looked remarkably similar in that an athlete was showcased in a paint splattered-like fashion, but each was different in its own right because of the different physical athlete in the poster along with a different array of colour tones.

So with that in mind, it’s obvious that this project is largely being attributed to our creativity for concept design and that’s exactly what we’ll be marked on along with problem solving skills.  Our software expertise will not be the basis of marking, which caught me off guard initially when I was handed the criteria without further explanation, but when the instructor explained everything, I understood the reasoning.  To be a true masterful graphic designer, you need that traditional craftiness of illustrating your creativeness with pencil on paper before then manufacturing your development onto a digital platform. This is what I gather to be a full packaged graphic artist when you have the ability to multiplatform your work.

The next and only class I had since my last blog entry was my Information Architecture (IA) class today, and that got really interesting today, especially since I was now healthy and coherent.  Besides already knowing that IA is the foundation for great web and media production design, it is imperative to know the logistics behind IA in that it is the blueprint of a website upon which all other aspects are built, such as form, function, metaphor, navigation, interface, interaction, and visual design.  Initiating the IA process is the first thing you should do when designing or re-designing a website.

Also imperative for any aspiring web developer these days is the knowledge behind a content management system (CMS) and databases, in addition to software such as Photoshop, Dreamweaver, and Flash.  Any good web developer will also know software programs beyond what they regularly use.

Our homework for next week will involve a bit of an imaginary instance, but not too imaginary in that it will be of real matter down the road once we graduate BCIT.  We have to believe that we’ve been hired to develop a website relating to the market of renting electric scooters.  The make-belief compensation for this work is $250/month.

I’m not entirely sure if we will actually be developing a practice website of this nature or not down the road, but for next week we only need to come up with five bullet points where as a web developer, you have done research on the product to show that you are taking a personal approach to your work, which will translate in a better product outcome. So the five bullet points will include rates, pricing, equipment, advantages, and disadvantages.  We have to use the advantages to cop out the disadvantages because the company we are developing a website for will not want to promote their disadvantages. So this is why it’s also important to know of any disadvantages because you don’t want to promote any cons inadvertently.

A website I do know we will be developing is either a re-design of a poorly developed website we know of or one of creation from scratch. This will be our final project so without thinking too deeply into this project yet, I do know I will be choosing the second option since it’s only natural for me to create rather than re-create someone else’s work.

So overall a slow week being that I was working through a sickness and missed one class, but as you can see I did get to dive into a lot of interesting information that will be of use for various projects we’ve been given to complete. In fact, this blog entry you’re reading right now was an in-class assignment for my Communications class today.  It had to be finished between an allotted amount of time and no later, so before I ramble off into space, I guess I’ll sign off until next week.

Ciao for now!

A full week in BCIT’s New Media Design & Web Development program is now in the book’s for me and I can’t be more happier with my decision to travel down this avenue of education.

Following my high school graduation in 2007, I really didn’t clue in on any set direction for my life.  I had spent the past three years working for TNA Wrestling out of Orlando, Florida as a web developer, graphic designer, and writer.  When I decided to leave the company, I then received an offer from World Wrestling Entertainment out of Stamford, Connecticut to work with them; however, their offer meant I had to relocate and that wasn’t something I was quite ready for at 18 years of age.

So in January 2008, I decided to upgrade my math to an appropriate mark, which opened more options to contemplate a direction and that’s when my dad Kris helped guide me a path.  I actually upgraded my math at BCIT because my dad graduated some three decades ago from BCIT in the Marketing Management program and that’s exactly where he directed me to; that same marketing program in September 2008.  So I told myself sure, I’ll do it, if my dad is financially stable in life, which I want to be too, then this program must be for me too!

Wrong.

The whole program just didn’t seem to click with me in the sense of collaborative demand.  I’m a very independent person so sometimes it was hard for me to rely on others, thus I found myself giving up on slacking individuals far too quickly.  With the snap of a finger, I’d like things done, if only that could happen!

Bad quality? Not necessarily because it motives me to get the job done as quickly as possible.  So after one semester, marketing was out and BCIT’s Broadcast Journalism program was next on what now seemed to be a path of trials.

The one love I could never cheat on is definitely writing and that’s why I began my part time studies in the journalism field in January 2009.  It was a good thing I started out with the part time program because I got to have a taste of the fundamentals behind broadcast journalism as I got to visit studios such as CBC, Global, and CTV while they were live on the six o’clock news.  You also have to understand that while I was taking these classes, I also had a pending application for the full time enrollment for September 2009 I was waiting to hear back on, but then I had a change in attitude.

I suddenly realized that while I love writing, it’s merely just a hobby for me.  The writer in me is one of spontaneous nature where I get to exemplify the creative juices flowing through my brain.  That’s really what my writing was about with TNA Wrestling because that’s an industry of scripted sports entertainment on television.  So contorting my creativity to the level of someone’s request with boundaries in place just wasn’t going to work for me. Writing about the latest murder rather than an interesting astronomical discovery is the likes of what turned me away.

Before I canceled my application into the full time Broadcast Journalism program though, I had to have security elsewhere.  So I dug deep to the root of what originally attracted me to the Internet society and that’s new media.  From the time I was 13 in 2002, I was developing personal fan sites of what interested me most and that was wrestling. I even developed sites relating to hockey, video games, and believe it or not, The Simpsons too.

Everything I did was self taught with a little help from a trip to a local Chapters bookstore for some guides.  That motivation didn’t come from anyone’s encouragement, it was self motivation that really sprouted out of nowhere.  Then in 2004, my break came when TNA Wrestling hired me because of my expertise as a graphic designer and web developer.  Through that process I was developing and maintaining different versions of TNAwrestling.com from the systematic process all the way to the graphical interface.  We were a team of three working on the project.  Through that endeavor, my skills for writing was also discovered when I was asked to start writing for the company and the rest is history.

I left TNA in 2007 to get myself properly educated and here I am now, full circle with what brought me to the dance in the first place, the aura of new media.

Last week was the first week and it was a series of System Management classes that were basically instructional guidelines on how to use Apple computers.  For the majority of our classes, we’re using 24-inch iMac computers, which is what I have in my home. So these initial classes were merely just quick refreshers on functions I already know for the most part or somehow forgotten due to my lack of use. Regardless, I thought the classes were a lot of fun because it’s always nice analyzing the power of a Mac.

The Overview for Web Technology class was our first proper class on Saturday, yes we have classes on Saturday mornings.  The homework we were given was to purchase a web domain and hosting account that we could use for the finished product of a restaurant website we will be developing this term.  The web domain does not have to be relevant to the make-belief restaurant whatsoever, it’s just a means of learning how to go through the whole process of setting up a website.  I don’t know about the other 24 students in class, but I already have my Cygy.com domain and hosting with GoDaddy.com that I use for my personal blog so I’ll just be setting up either a sub domain or directory there to upload this restaurant website.

Fast forwarding to Tuesday, we began our first classes with Information Architecture along with Communications for New Media.  The former is definitely up my alley because it’s going to be focusing a lot on writing for the web, which I do on almost a daily basis, along with social media outlets.  If you know me then you know that I’m hooked up with all the outlets from Facebook to Twitter and YouTube to Flickr, among others.

One of our main duties in this communications class is to write a weekly blog on our experiences at BCIT in this New Media & Web Development program.  So if you’re on the fence about joining this already great program, then sit back and let me indulge you on all the weekly happenings of what will become my lifelong path with regard to new media.  You can make your decision when I graduate this 52-week program next year.

Till then, ciao for now!