This here is the most recent article, but you can browse all other sections below.
intoxyka
kokaforart
kokaforart
tosynbucknor
__justkenya
tosynbucknor
joshjohnson
tosynbucknor
jasonhudsonThursday, March 10, 2011
Current or Active Navigation Highlighting in new WordPress Nav Menu
I have fallen in absolute love with the WordPress 3.0x dynamic menu options. This has given WordPress another leverage in being the superior content management system.
I am currently working on a project using WordPress as the Content Management System. One of the requirements for this project was utmost flexibility of the system. Making the navigation easy to customize by the client meant activating the new wp_nav_menu(). For function/API reference, you can check http://codex.wordpress.org/Function_Reference/wp_nav_menu
Not until I got my hand dirty in the WordPress theming process did I realize that there was no room for assigning active classes on the codes dynamically. During my research I have come up with two solutions…at least till the WordPress team add support to this feature.
The first technique is to give your <body> an ID with the name of your current webpage, then using CSS to select the menu element.
Let me explain in ‘english’. Let’s say your is http://yourpage.com/about, you can give your <body> an ID of ‘about’. So it would look like this: <body id = “about”>
How would you do that dynamically?
In your header.php file, add this:
What this does eventually is removes everything from your URL save your ‘page name’. So http://yourwebsite.com/about.php will return ‘about’.
Next, in your CSS you can select the particular element:
body#about ul#extra-nav li.history a{ our_css_property: xxxx; }
Basically, what this does is it selects the anchor in the list item with a class called history under the ul with an ID of extra-nav that particularly belongs to the body tag called about. It then gives it property.
I got this idea from watching a CSS-tricks video. You may find it really explanatory.
Other Alternatives
There are actually many approaches to this. I guess it depends on your choice. I have also found these
- Andrew Turn’s jQuery for Active State navigation
- StackOverFlow: Handling active state in jQuery
- jQuery Active Menu Plugin
Wednesday, January 19, 2011
Unveiling the HTML5 Logo; my thoughts #html5logo
Gone were the days when HTML was just a mark up. Gone were the days when putting together a basic website could be achieved without following strict rules. With the advent of HTML5, there is a segregation of sissies from the real men, of dorks from real geeks.
With HTML5, I dare say designing websites takes a real programming approach. Many web developers who escaped the fine art of proper layout of CSS in HTML will be recalled sooner or later.
The newer and competing browsers have laid their grounds for HTML5 viewing. The most interesting features of HTML5 is its media playback and offline storage capabilities. It allows for websites to directly embed audio or video with the <video> or <audio> tags. Prior to now, that was the work of Flash embed codes or javascript.
For the user, what this means is that with HTML5, you don’t have to worry about installing yet another plugin just to watch the animation on a website or to listen to music from your favorite blog. Companies like Scribd have already adopted it. Youtube has created an experimental version.
Yesterday, the new logo was unveiled. I think the logo is simple and attractive. I also think it reminds me of Superman, He-Man, Star Wars or one of those fantasy images.
According to the Honolulu based company who was commissioned to design the logo, identity and accompanying logos, they thought of something hot, fast and sexy.
The HTLML5 logo goes beyond simply representing the HTML5 spec to embody the technology, and the open web movement, at its core. This starts with standardization — the logo and its progeny follow very strict geometric rules providing an incredibly adaptable yet stable and stylish identity. As you’ve hopefully seen out on the web, the logo, the icons, the colors and the type all work, and work well, in nearly every imaginable context (and probably contexts beyond our imaginations). From favicons to billboards, this mark was designed to hold together in the face any manipulation. Through simple adjustment of hue, the logo conveys incredible depth and dimension without dated or awkward flourishes. With just two shades of orange and two shades of gray, the standard logo offers a thoroughly refined and assuredly lasting visual impact. The container for the logo is shaped as a badge, implying both the formality and respect an undertaking of this magnitude demands, but also as a homage to the progressive community that proudly, and relentlessly, ushers in the future of web technologies. Simultaneously a badge of honor and a coat of arms, this crest represents the spirit and substance of the open web platform and the forward thinking community making it a reality. -read more
Formal and fun, forward and fully evolved, this HTML5 logo is imminently extensible yet refreshingly complete — the W3C encourages you to use it as-is or build on it to make it even better. Just like the technology it lives amidst, setting a common and comprehensive baseline is just the beginning.
Why orange? Orange is a very hot, fast, and striking color, but not nearly as intimidating or aggressive as red. Orange implies excitement, yet with undertones of caution. Orange grabs your attention, but doesn’t scream for it. In Chinese color theory, orange is the color of organization. In medieval heraldry, orange was symbolic of strength and endurance. Sexy with a safety net, organized, powerful and lasting. HTML5, this logo, and orange go quite well together.
I may be hating on this logo with no just cause but I think it they had colored this other logo, it would have been better. For me, it would look a lot formal, serious. I need to even ask why W3C hasn’t changed their logo. It’s still an 80′s design.
In all, I guess this branding puts into our conscious the huge prospects the web has for us in the near future.
According to the W3 website, the 8 different standards of HTML5:
: SEMANTICS
Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
: OFFLINE & STORAGE
HTML5 apps can start faster, and work even if there is no internet connection, thanks to the App Cache, Local Storage, Indexed DB, and the File APIs.
: DEVICE ACCESS
With geo-location just the beginning, HTML5 will help apps to access devices outside of your browser and connected to your computer.
: CONNECTIVITY
More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
: MULTIMEDIA
Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
: 3D, GRAPHICS & EFFECTS
Between SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.
: PERFORMANCE & INTEGRATION
Make your web app, and the web, faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user shall ever wait on your watch.
: CSS3
CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
To read more and to download the new logo in various formats, and the other icons, go to http://www.w3.org/html/logo/
Friday, December 17, 2010
Step-By-Step Website Development – Check List
When developing websites, there are checklists I follow. An interesting one I saw was on Lorelle On WordPress‘s page.
This should help you(web developers) to maintain discipline.
Development
- Gathering of information related to site content
- Website Name (Domain Name) Research
- Competition Researched
- Website Title Chosen
- Website Host Research
- Website Host Chosen and Registered $
- Website Name Chosen
- Website Name Purchase $
- Website Structure and Organization Established
- Link Exchange Researched
- Link Exchange Page Set Up
- Articles/Resources Provided/Researched
- Articles/Resources Chosen
- Advertising Inclusion Implemented
- Search Engine Submission Prepared
- Search Engine Submission Implemented $
- Review Search Engine Submission Results (1-4 months after public release)
Design
- Artwork Compiled
- Logo Designed or Prepared as Digital Art
- Color Scheme Research and Presented
- Layout Design Research and Presented
- Color Scheme Chosen
- Layout/Design Chosen
- HTML and CSS Coding Design
- Content and Articles Added
- Review Web Standards
- Validate Code
- Check Website with Other Browsers
- Check Website with Other Computers
- Check Website with Various Screen Resolutions
- Edit and Review Website Presentation
- Test Website (typically 2-4 weeks)
- Test Links
Website Maintenance
- Frequently Update
- Check for Errors
- Add Link Exchanges
- Check for Bad Links
- Keyword Review and Update
- Check Link Popularity
- Review New Technology
- Review Web Standards and apply
- Check Site Statistics
- Add New Content
- Check Links
- Validate Code
- Re-Submit Site to Search Engines
- Check Web Page Descriptions
- Check Web Page Titles
- Review Meta Tag Standards and Update
- Review Top Searches from Search Engines (potential new content ideas)
Checklist Resources
- SCORE: Web Site Checklist Can Help You Plan for Success
- Skyrme Website Checklist
- Usability Website Checklist
- Max Design Website Code Checklist
- Net Mechanic Web Site Usability Checklist
- Dive in Design Design Checklist
- Site Point – Site Design Checklist
Friday, November 12, 2010
Web Designers vs Web Developers
I chuckled when I read this. I stand at the mid-point of Designer-Developer and a lot of this holds true.
- I do not want to hear of perl
- I don’t want to see anything .eps
- I don’t mind getting a shirt with ‘Helvetica’ written
- My Blackberry Messenger status for a few weeks was “127.0.0.1 is where I belong”
- I don’t give time to my facial hair. It’s been a cause for concern before.
- I am at a cross between cargo pants and skinny jeans.
It’s an incredible world and I am enjoying it.
Saturday, October 30, 2010
Creating ‘Bad-ass’ websites: A thought
“I need a very bad-ass web designer asap“. This is the third time I am seeing this phrase on twitter and also the third time I am being referenced in these tweets.
First it was Kemi Adetiba, then it was Lola Maja, today it was Don Jazzy of Mo Hits.
But when people want a bad-ass web designer, do they really know what they ask for?
In my opinion, a ‘bad ass’ website required two things.
- One, the right assets
- Two, the right person to the job
Talking about right assets, do these guys who call out for ‘bad ass designers’ know that creating a website as bad as the adjective implies means that they need to furnish the designer with all he requires?Will they be ready to give their time while quality planning is implemented? Will they be ready for photoshoots? Will they be ready to listen to the cans and cannots of breaking out of non-bad ass creatives?
Talking assets, are they willing to pay the bad-ass monetary currency? A lot of clients actually think web development is like getting a sheet of paper, scribbling words and pinning pictures to the paper and then gluing the sheet to the computer monitor.
They forget that creating ‘bad ass’ means getting inspiration to sketch ‘bad ass’ graphics, putting these graphics into thousands of lines of code and then optimizing the results for view on all platforms, and not only considering ‘bad ass’ in your eyes but considering the END USER.
Secondly, getting the right person is in fact the most important part. Getting the right person means getting one who is skilled and whose business ethic is well tuned.
Don’t stop at checking the ‘portfolio’. Find out their knowledge of the field. Go online, do your own research on what you want and what to look out for.
Rush projects often don’t come out right!
Time waits for no man. True! We are in the jet age. True! But then just like you can’t because you need a child urgently, get a pregnant woman to give birth after 7months of conception.
There is a life cycle for projects. Creative projects especially when they are to be ‘bad ass’ will take time. Try as much as possible not to push the designer too hard.
I personally have run into loads of trouble because of the client’s refusal to understand these things.
I believe creating bad ass websites is really simple. And the creative process is really fun. But I am yet to find someone who will give bad ass for bad ass.
This article was written by Seye Kuyinu. I am a web applications developer with new interest in UX design.
Lately, I have focused my attention from core web applications development to interface designs and development processes using User Experience principles. I am also an ardent fan of WordPress. I have a hang of the HTML, CSS, PHP, MySQL, ActionScript, JavaScript.
In my spare time I play the violin. You can follow me on twitter: @seye