Posts Tagged ‘Web Design’

JS Meetup Day 3, Stuck because one sign… Oh, and new graphic design project!

Web Design

= vs ===.

I even blogged about it for my JS Day 2 blog post. I couldn’t believe I got stuck for 30 minutes thinking I got the wrong value or variable name when all I did was forgot to add a = sign.

I am an idiot.

Graphic Design

I just got a new book, The Graphic Design Exercise Book.

Very neat with all sort of projects to work with. First up is design a package for an eco laundry product. Shall read more and report back later!

Share/Bookmark

Array, Pen Review, and Adobe Cloud

Web Design

I have been working a bit more on my JavaScript skill so I can understand JQuery. So far, I am still at array portion of the tutorial, and I was getting sleepy there for a moment because I felt like I was repeating my Java and Python class. So, that’s what the professors meant when they say that once we learn a language, the others are pretty much the same. Still, array is something I am always confuse with, so it is a good review. For one, when .length is use in array, it means the number of elements in it, and not the number of letter in the array name. I don’t remember learning that from my other classes, so that’s good.

I printed out the jQuery code of the sample gallery template that I want to use for my ePortfolio. It’s definitely more advance than what I am learning. I am thinking maybe I should find another template, but I really like the one I found… Maybe I will borrow an actual book on jQuery and see where it takes me, then decide.

Calligraphy

I have also been practicing my calligraphy skill. Good handwriting is a useful skill to have. Being able to make art out of handwriting is even better. So far, I am doing the basic font, Chancery Italic Hand. The pen I am using is Sheaffer Viewpoint, medium 1.5mm nib size. I brought it on a total impulse after going ga-ga mode on fountain pen discussion with the store owner at Sunset Stationary. It is pretty much an economy student pen. Pretty good for what I am doing. The flow is smooth most of the time. The soft grip is nice, though I must say that I prefer heavier pens. Viewpoint is a pretty cheap pen make of plastic, and it is far too light for my preference. That’s what happen when you buys things impulsively, I guess. Once I move pass the basic Calligraphy font, I think I will invest in a higher end pen, one made of metal – I have always prefer metal even when I was just a high school student doing basic drafting my architecture class. The weight gives a sense of sturdiness to my drafting pencil that I really like… but back to Viewpoint – I don’t use the pen as much as I should, but the ink don’t dry or evaporate into a mysterious black hole. Can’t say the same for my VFM pen, whose ink cartridge empties itself without me even using it once. I just brought a Pilot Parallel for an artist friend though, and after reading the review and seeing the pretty pictures, I want another pen too! But I must not. It is not an expected expense at current time – in the future, yes. Currently? No. I must save for Adobe Create Suite! Every $20 must be carefully spend! Budget must be follow!

Ownership vs Subscription

Speaking of Adobe Creative Suite, I got a bit irritated after researching about the recent trend. I know about Adobe Cloud for a while, but after recent readings, it seems like Adobe is planning to stop selling the program itself and sell subscription instead. Digital subscription is not true ownership. It is one of the reason I am not a big buyer of ebook despite being a bookworm. Digital subscription and digital ebook are link to the manufacturer, and they can cut off that link. Amazon, for example, have taken ebooks from customers before. Fortunately, with ebook, there are ways to severe that connection once you purchase it. I, for one, like to keep a copy of every ebook I purchased. A digital subscription of an entire program by a company like Adobe is a bit hard to do so. Quite frankly, with the numerous cyber attacks – particularly DoS, I wouldn’t want any thing related to the operation of my professional material depended on the network connection and safety. If I am paying hundreds of dollar, I want to own the program for sure. I want it to operate at all time, at all situation, and at my computer without connection to the web. Fortunately, there is still old version of Adobe Creative Suite on online website like eBay and Amazon. Unfortunately, after this, I will probably not update my own Adobe for a long time. Better yet, I may switch to Corel and other alternatives where I can keep a physical DVD copy. After all, I am just buying Adobe now because I am taking classes at community college and wants to take advantage of the student discount. So far, the program I have been using have been Gimp, Inkscape, and Scribus for my portfolio. As a free open-sourced program, they are actually quite good and gets jobs done for people who may have budget problems.

… Internet Began In Department of Defense? And CCSF Offers Ethnic Hacking Certificates?

Internet had began in the US Department of Defense.

… The thought never even cross my mind before. I have to say, I am quite surprise. I have heard that many of our technologies were originally developed by the government’s defense and engineering teams. Just take instant noodle for example: originally developed for the astronaut in Japan to eat in space. But the internet. Wow. With the trouble it created for the government entities in term of information leaks and legal law restructure, talk about irony.

I also started looking more into different courses and certification offered by CCSF. At first, I have a singular goal – I wanted to give web development a try. I like graphic designing work for the Botanical Garden, and if I can get a handle on web design techniques, I can expand my design skills on a wider level. Me being me, I want to understand the background work too, so web programming seems like a good path. But after my teacher’s first day orientation, and I looked further into the courses offered by CCSF. Something had caught my eyes back then.

Ethical Hacking Certificates.

I can’t believe there’s a certificates for ethical hacking, and an entire course work to go with it. I don’t think school would want to encourage hacking, after all. Upon further reading, turns out it is a course on network security. It’s kind of like how doctor would take class on toxicity. A person who work in network security can’t fight hackers if they don’t know how hacking works themselves. Since they are learning hacking for a ethical reason, thus the certification.

The name is really fun though. My cousin told me that I should take the course just for the name’s sake. Not that I would have much use for it – I am a Mac user, and our hacking threat is much less. Although, I have to say, the ideal of being able to understand network threats and how to build a computer structure to defend does sound kind of fun. It’s almost like being a police investigator, without the physical danger.

If I do get into web programming as an additional career path, it would be nice if I can build website that safe against hacking. I think I may end up taking a class or two on network security down the line. I doubt I will get an actual certificates – the web programming certificate coursework would keep me busy enough – but an extra class will only help.

Internship and Volunteerism

I have been slowly updating on events I went to or things I observed in San Francisco in this blog for last few weeks. It’s been a very fulfilling few weeks, which unfortunately slowed down my writing quite a bit. The most exciting event of all is… I started an internship! Unpaid, but I am enjoying the learning opportunity.

As of this month, I have officially started as an Advocacy Outreach Intern at the San Francisco Bicycle Coalition. I have always love architecture history and its effect on community development and cultural changes, which why I eventually decided to pursue the Art History minor and almost got the Anthropology minor (realize I wouldn’t get enough classes in time…). When I got to San Francisco and tried to continue bicycling in SF, I notice how much transportation plays into the role of community planning in the city. For one thing, bicycle commuting in the Bayview district is notoriously dangerous. When I look into tips on how to bicycle in SF, I learned about the Coalition. In the last few months, I have attended several events and had really enjoyed them. At the same time, through those events and my membership at SPUR (the local urban planning organization), I really got into the urban revolution that is going on in the city, which was charaterized by the combination of America Cup and the new campus of UCSF. Living in the Bayview, an area that is also going through rapid re-development, allows me to experience that change even more. So when I learn about the internship… I joined.

Of course, that was one of several things that has been going on. I have also started helping at Rebuilding Together – in term of making calls to Cantonese-speaking clients – and Water Conservation Showcase – in term of prepping materials. I have been looking forward to the National Rebuilding Day in April and the Water Conservation Showcase this coming Tuesday. I attended the Showcase last year, and it had been a blast. This year, they will have GBCI CEU credits to boot! I had fun meeting other people in the sustainability field while prepping materials, so I have a feeling I will have a great time volunteering during the actual event as well. For Rebuilding Together, to my own surprise, translation has taught and intrigued me more than I expected. I found myself enjoying being able to help others. I learned some new words as well. I am looking forward to working with the tools during the National Rebuilding Day though – learn by doing is the saying of my college, after all.

I have been attending events at SPUR and PEC as usual, but I have also started attending a series of free WordPress workshops. One of the most recent tool I learned is Buddypress. I probably wouldn’t be using it now since this is an individual blog, but I can see that it will be a real power tool in an office environment.

I have also been dipping into my own hobbies by volunteering and attending at events like Sunday Street, Orchid Expo, and Green Film Festival. Wouldn’t go into detail about those – I plan to write a blog post about them. Teaser: My volunteer position at Sunday Street was “Route Rabbit” and the Orchid Expo has Golden Gate as theme this year. Photos though, can now be seen in my Flickr account!

Yes, I have also set up my Flickr account and started posting photos on there.

Like I say, its been some busy weeks. I think things are settling again though, so I will start posting updates about the events.

XHTML, CSS, DocType Differences (Transitional vs Strict). Internet Explorer is way behind time.

Ok, apparently the book uses XHTML and CSS. I don’t even really understand what is the difference between HTML and XHTM to begin with. That’s just terrific.

*Sigh* Research, research, research. Once again, I must profess my love for Google and Wiki. Don’t tell my college professor.

Let see… XHTML stands for Extensible Hypertext Markup Language

Ah, I like the explanation from w3schools.com:

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

That’s all I really need to know, I think. For now anyway. If you don’t know what all the bold words mean, go to the article at http://www.w3schools.com/XHTML/xhtml_html.asp

Very nicely done. Simple, but informative explanation

Hmm. XHTML is not compatible with Internet Explorer. There are ways around it, but I am not a fan of Internet Explorer anyway. They are not particularly user-friendly for Mac. Their last update (for Mac) is in 2003 and later even remove the download. I really dislike websites that require IE to being with. So…

I have too much to deal with for now anyway, so I will let it go. Firefox is great – friendly and work to to satisfy all platform. That’s what customer service is all about!

For now I have finish the structure layout of my main body document and a stylesheet document. (I don’t know what’s a stylesheet yet. But I am sure the book will make me use it later, so I will know, eventually)

Since the documents used XHTML, I had to declare that it is a XHTML documents with a “declaration”. I use the one that comes with KompoZer, which goes like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

I also had to go to: ZompoZer –> Perferences –> Advanced, I would then set XHTML 1 for Language (or Markup in some programs) and Transitional for DTD (Strict works, too). Why? Take a look at the declaration above. See the beginning? It says DOCTYPE. The perference setting we just need make sure that the DOCTYPE won’t get overwrite (In another word, appear on the web site or create strange effects)

DOCTYPE stands for Document Type Declaration. It declare the file type: HTML? XHTML? That sort. Different declaration tells the browser (IE, Firefox, Safari, etc) to read your document, your web site, differently.

For XHTML, there is two basic DOCTYPE: Transitional and Strict. Transitional was recommended in the book  (I think) because  like its name, it is easier for people to transit from HTML to XHTML. It’s less strict in the language that it uses. Strict creates a language that is more uniformally read by all browser, so all different browser -IE, Firefox, Safari, etc – will read your web site the same or similar manner. But, the language is more different from HTML.

I also notice the book, which uses XHTML, is different from the HTML books I had read before by constantly using <div> and <em> tags. It made me confuse for a while, because I only have a vague idea about what em is, and I had never even seen div.

Div, as it turns out, is short for Division. It is use to define a division or section in a document. It can be use in an HTML document, but it is particularly popular in CSS web site for layouting.

Em stands for Emphasized Text, and is also usable in HTML. It is another way to create italic text

The book also uses a lot of <!–//XXXX–>. I later realize that it is for notes. Notes in HTML only shows up on the Source page (Source page is the page you are working on in the editor). It does not show up on the web site you are making. The “XXXX” is your Note. The “<!–” and “–>” is commend part that tells the editor that it is a Note.

Basically, anything inside “<!–” and “–>” only show up in the HTML editor and does not show up in the browser.

Zompo Guide – Love Zompo ‘s Text Color Coding!

KompoZer has a text coloring system in its Source view!

If you look at the bottom, it says Normal, HTML Tags, Source, and Preview. They let you look at the documents in different… view.

  • When you are typing up and designing the web site – using the XHTML or HTML language – go to Source.
  • When you want to see how it look in an actual browser like Firefox, go to Preview.
  • But! Anything that you type in any of them – Normal, HTML Tags, Source, and Preview – will effect all of them. In another word, if you make changes in the Preview view, the change will appear in the Source view as well. Nice, huh?

Anyhow, once you click Save, the Source view will color your text. It’s really nice, since the color tells you what the words do. The definition of the color is the same that all browser uses. Confuse? Look at the top of your computer screen, go to your browser’s File, then go to Page Setup. You will then see a page that tells you what HTML or XHTML is used to make the web site you are reading right now. They are all in color, too.

The part that is color in black is what will actually appear in the browser – in your web site. The purple words are the commends you send, the words that sets how your document is layout. The green is your own notes – the words that won’t create any effect on the Preview view and just let you remember things.

So, basically:

  • Black: Actual Content. Appear in Browser and in Source page.
  • Purple: Words that commends layout and style. Appear only in Source page.
  • Blue: More detail about the what the purple commend does. Appear only in Source page.
  • Green: Notes. Appear only in Source page.

All the web design Source looks really complicating at first. But, once you know the coloring, it helps a lot.

HTML & CCS + WordPress Theme + KompoZer Editor

After all this recent blogging and internet surfing, plus a few online entries of some of the people I stalk, um…, I mean visits regularly on blog site, I got inspired to start web designing again. At first, I just wanted to brush up on my html skill, and maybe learn some basic CsS. But! While I was walking in Borders Bookstore with my laptop, I came across the book “WordPress Theme Design” by Tessa Blakeley Silver.

One of my favorite online writer had always mentions that she will one day make a CsS theme on her own. She had a livejournal, but I don’t think the different is that much. I am getting bored with my current theme anyway, and nothing I find seems to satisfied my own need. They either don’t appeal to on design base, or have user-friendly problems.

Anyhow…

To design a web site from scratch, you will need a good editor. Since I am doing this for recreational purpose, and since I am an very, very poor college student, I took quite a while to look for a good but free editor.

Thankfully, I did it a long time ago. The program had been gathering dust in my laptop for quite a while.

If a program can get dust, that is. But that’s besides the point. I am getting sidetrack!

*Cough* The program I would recommend to everyone is KompoZer. It’s a free, cross platform (I do have Macbook, you know) WYSIWYG HTML and CSS editor from NVU. For those who are confuse about what WYSIWYG is, it basically stands for “What You See Is What You Get”. I know, subtle, isn’t it? :D

Oh, I never explain what the differences between HTML and CSS is, either? HTML stands for Hyper Text Markup Language, and CSS stands for Cascading Style Sheets. The HTML creates the contents, CSS organizes it. This is why CSS is so commonly associated with blogging. Blogging, unlike normal homepage, have a much more consistent and set layout. HTML does a bit of layout, but it’s mostly for creating content. CSS is much more suitable for layout setting. It is a bit hard to explain in words, you really have to experience for yourself.

A key to note is that CSS is an addition to HTML. It doesn’t replaces it. You need to know HTML to use CSS. XHTML, another web design language, does replace HTML, but that’s another story altogether. It’s always a good idea to know HTML. It is the beginning of web design language. Kind of like… Italian. Know it, and it makes learning other web design language and technique much easier. I was able to correct the theme I am using right now without knowing anything about CSS because I know HTML basics. (Read earlier post under the tags “Theme” for more info)

Anyhow, KompoZer is real good editor for both HTML and CSS. I downloaded KompoZer a long time ago, but never really use it, until now. For the next few days, I am hoping to explore it a bit more. I don’t have my studio classes next quarter since I took the Summer Studio program, so I may as well put the time to good use!

Fixing my Theme

Oh! I completely forgot to wrote this in!

I had some major problem with my CCS theme (Simple Grunge Theme, in this case), and took me hours of google and testings to fix it. I have some basic knowledge of html – enough not to freak out to much after looking at the CCS codes, anyway. Afterward, I was so tired, I completely forgot to record it down!

The main problem with the Theme is that 1) Can’t doublespace, so the paragraphs squeezed together. 2) After an attempt to fix it, the words runs out of the borders that it was suppose to stay in.

First step of solution – find where I can correct the CCS.

It was surprisingly easy (Gotta love wordpress). I went to Design, then Theme Editor. At the right hand side, there is a line that says ” Select theme to edit”. I selected my theme, and clicked… “Select”

Before I edit, I have to prepare!

I wasn’t familiar with how CCS theme look like, so I downloaded about 6 or 7 other themes that I like and had a quick scan.

I made a extra copy of my current theme, Simply Grunge, on a Text Editor (I use OpenOffice. A free word editor VERY similiar to Microsoft, but free and totally Mac friendly. None of the silly 98 switch to Vista mess either, completely client-oriented… but I will save that for another blog entry…)

Conclusion after reading all the google search and theme CCS, as well as some playing around with the theme’s CCS:

It appeared that changing the “body” wouldn’t do much good. It changed everything I don’t to change, or it changed the good and the bad so that the good become bad.

I had to narrow it down.

Which (the code) turned out to so simply once I get it, I wanted to banged my head against the wall for all the idiotic time I spent researching. Which kind of made sense, the code-writer didn’t made it to torture us after all.

If I look down, the “right” refers to the right, main, blogging column of my blog. The “left” refers to the left, menu-like, function-central part of my blog. Simple, right?

Now moving down. There were labels like “right title” “right h1″. All looked like alien language to me (Well, I know some html, but I learnt it in middle school!!! Ok, I know “h” refered to header, but everything looked like a header! Ok, I will shut up now so I don’t look like an idiot.)

What I needed, was right (or left, if I wanted to fix the menu bar) p.”right p(” is what it should look like. I believe it refers to the paragraph style at the right side.

I changed the line height and the margin bottom (more like I added it? Don’t remember…), so now it looks like:

line-height: 1.2em;
margin-bottom: 10px;

I have no idea what em and px mean, right now at least. And I am too lazy to google it.

*Yawn* Ice skated the whole day today, after not skating since summer… me tired…..

Anyway, it worked, even without knowing the full CCS vocabulary. One step at a time, I guess.

I did some similiar editing for the left side: played around the numbers and added some extra words. That’s why I wanted the original version saved on an editor, so I could fix it if some numbers or wording creates some bizarre results. (Which it did. Some of my post disappear completely when I made some of the numbers too big).

A lot was about basic understanding of what words like headers, titles, left, right meaned in English language, and then tried to guess what it would mean in my blog’s design. A lot of the words – I didn’t google for its meaning; I just guess and checked.

If I have to pick one of the most important thing I learnt about graphic design in my freshman year at Cal Poly, it would be that something is just about experience. You learn something, even if you failed to make the image you want. In another word, most things in graphic design is just about trying, even if it makes some weird, weird, WEIRED results. And I made some really weird things happened before… on the screen… to the computer… in school… in my macbook………

Can’t even create complete sentence now… must sleep… zzzzzzzz……… *Head hits table*