VMware, Localhost and django

Run ifconfig vmnet1 in Terminal to get the inet IP address.

My output looks like this:

vmnet1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 00:50:56:c0:00:01 
inet 192.168.249.1 netmask 0xffffff00 broadcast 192.168.249.255

So my inet IP address is: 192.168.249.1

Then, edit your hosts file in the Windows VMWare instance. This file lives here:
C:/WINDOWS/system32/drivers/etc/hosts


192.168.249.1 yourdomain.local
192.168.249.1 localhost

Afterwards, you need to flush your dns on the windows box.
In CMD type in ipconfig /flushdns

If you are running Django, when you do ./manage.py , target for that Ip.

./manage.py 192.168.249.1:8000

Gallery

Accessible Tag Cloud

So based on my research with Tag Clouds I’ve decided to make semantic, accessible, and  Seo friendly Tag Cloud.

The Tag cloud structure is in an ordered list because its more semantic with the most relevant list item to the lest relevant list item. Because it’s in an ordered list this ordering is relevant and is relevant to search engines. Then the Javascript kicks in and re-orders and tabindex’s the items in the initial order they were listed in. On top of that, the Js adds in Wai-Aria info for screen readers. There is also visually hidden text as a descriptor for search engines and screen-readers alike.

https://github.com/michaelguild13/Accessible-Tag-Cloud

<ol class=” class=”tagcloud”>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li>Item 3</li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
</ol>

<script type=”text/javascript”>
$(“.tagcloud”).tagcloud();
</script>

Semantic HTML5 and MicroFormats for better SEO

What is Semantic HTML or Semantic Coding?

In a nutshell, it is two things.

  • Naming all of your ID’s and Class’s so that they are descriptive towards the contents within them.
  • Making sure all your Tags/elements are in the appropriate places plus validate.

EX:
<div id=”news_articles”>
<article class=”news_article the_weather”>
<header class=”news_article_title”><h1>The weather</h1></header>
<div class=”news_article_content”><p>It will be hot today</p></div>
<footer class=”news_article_author”>
<address>Written by <a href=”mailto:michaelguild13@gmail.com”>Michael Guild</a</address>
</footer>
</article>
</div>

I am not going to go any deeper into this because I want to focus on how Micro Formats help you with Semantic Code and makes your code more SEO friendly. For more information on Semantic code, go here:

http://www.codeproject.com/Articles/146409/Semantic-HTML5-Page-Layout

What is MicroFormats and how does that help me with Semantic Code and SEO?

MicroFormats is a standardized way of solving the common day issues of how to go about naming your ID’s and Classes plus making your content more faceted. So instead of trying to think of a good semantic ID or Class, you can just look at the list of supplied names that are SEO friendly. By using the listed names provided, you are allowing search engines to better understand the content within your elements. The search engine looks for these key classes and the way they are nested to define the contents.

EX:
<div id=”hcard-Michael-Guild” class=”vcard”>
<a class=”url fn” href=”https://michaelguild.wordpress.com”>Michael Guild</a>
<div class=”org”>PBS</div>
<a class=”email” href=”mailto:michaelguild13@gmail.com”>michaelguild13@gmail.com</a>
<div class=”adr”>
<div class=”street-address”>5555 This Road Rd</div>
<span class=”locality”>Washington</span>
,
<span class=”region”>DC</span>
,
<span class=”postal-code”>22222</span>

<span class=”country-name”>USA</span>

</div>
<div class=”tel”>555-555-5555</div>
</div>
This code was generated by using the hCard Creator:
http://microformats.org/code/hcard/creator

http://microformats.org/wiki/hcard

Now MicroFormats isn’t something new, it’s been around for a long time ( 7 years ). The reason I am mentioning this now is because it is now becoming more adopted. Google, facebook, Obama’s website and others use it. The future of MicroFormats will become more and more standardized as time goes by.

http://microformats.org/about

http://microformats.org/blog

Vertical Rhythm and Responsive design Rant

Vertical Rhythm and Responsive design go hand-in-hand. Both are necessary for the greatest consistent grid layout. In my thoughts of designing a web layout consistently, in cross-platform and cross-browser, needs to be sought after.

Now the idea of vertical rhythm is still kind of young but I believe its something that has been thought of for a long time. I remember looking back at design-chops and panning between the homepage design to the subpage design thinking of all the inconsistencies. Most, if not all, of these inconsistencies involved spacing. No offense to designers but if they didn’t specialize for web..well, you get the idea. So in a nutshell, vertical rhythm is about consistency in spacing and sizing within a design.

Responsive design isn’t exactly something that is new. The fluid layout has been around for quite sometime now as well as javascript browser detectors. It’s more new in the sense that it pulls all of the ideas of user experiences for the design under one term to rule them all.

Because of new devices that or coming out, as a web designer, you have to thinking about how you would want the user experience to be for users that are using all of these devices. Today, I just read about an interactive window that was developed. It’s like something out of the movie Minority Report. It’s crazy awesome. Yeah, so that’s another new device we need to consider in our designs.

What are our goals for the user experience and what screen resolutions or devices do we target?

A good rule of thumb is to design and architect with the idea of the future in mind. Don’t set constraints to your canvas. Realize that you can’t control how the users use their browsers. They can increase the font size, change font color, shrink the window or anything else for that matter.

Responsive design essentials

How to do Responsive Design and Media Queries:
http://www.alistapart.com/articles/responsive-web-design/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

How to do Media Queries with Compass ( Sass ):
https://github.com/chriseppstein/compass/issues/302

To do Responsive design or not?
http://www.webdesignshock.com/responsive-design-problems/

W3C Mobile Best Practices:
http://www.w3.org/TR/mobile-bp/

Screen Resolutions:

  • Ipad / Tablets 1280 x 800, 1024×768, 1024 x 600,600 x 800
  • Iphone / Smart Phones 960×640, 480×800, 240×320

Drupal Modules won’t solve all your problems…just some of them

If you are constantly looking for third party Drupal modules to solve all your problems then you need to understanding that you need to think outside the box ( or inside what is packaged ). Drupal 7 is now packaged with basically all the tools you need for most cases.
It comes with jquery, views and cck.

Everything boils down to requirements, work flow and usability. This will cause you to look torwards a module or custom build. For most of the simple issues, just going with a module is great but what is “great”?

Cost vs time vs learning curve vs quality.

It’s really easy to make a dirty drupal site loaded with 20 different modules with a lot of dirty PHP code and horrible html structure that isnt semantic or validates. In doing so, cost over time can be great due to updates and changes to these modules.

php vs python – http://onstartups.com/tabid/3339/bid/20493/Why-PHP-Is-Fun-and-Easy-But-Python-Is-Marriage-Material.aspx

Out of the thousands of “High-Quality” modules out there, only about 10% of them are worth the time. Most of those modules have dirty PHP code with improper hook fucktions (this is a pun). The other reason why it’s so easy to do dirty coding in Drupal is because drupal is PAC not MVC. If you don’t know than google it and refer to these resources.

Does drupal have a MVC? – http://stackoverflow.com/questions/4418552/does-drupal-comply-with-the-mvc-paradigm

MVC vs PAC – http://dsheiko.com/weblog/building-a-site-on-drupal-using-mvc

Some people use about 30 different modules for a simple Social networking site. (they must love loading up their file system with un-used jargon and killing their processing speed). Memory usage in general for drupal is high, which is why you use caching (depending on how huge the site is). Every time you do a page query on the serverside, it’s processing every variable possible.

Again, I am not saying to solve your problems with code all the time. What I am trying to say is that you need to understand the technology driving the Drupal cms (any cms for that matter) and what is packaged with it. I am not saying that you should NOT use Drupal or Drupal Modules.  (hell, turn Drupal into a MVC – http://dsheiko.com/weblog/building-a-site-on-drupal-using-mvc )

All I am trying to say is that you should try your best to avoid overloading with modules, do code review on the modules you are using and don’t blindly just trust any module that is out there. Just because it’s opensourced doesn’t mean everyone follows best practices.

Pro’s and Con’s to Open Source ( don’t assume, just say “maybe”) – http://www.netc.org/openoptions/pros_cons/comparing.html

Drupal Best Practices – http://drupal.org/node/1141442

If you arn’t constantly looking for improvement and re-evaluating process then you are doing it wrong. Be minimal, be exact and code with a clear direction of flexibility with as less dependencies as possible.

 

 

( this post is really just intended for the people on this discussion)

http://www.linkedin.com/groupAnswers?viewQuestionAndAnswers=&discussionID=72407022&gid=35920&commentID=55535332&trk=view_disc&ut=3MKB-cresyu4Y1

Accessable Structure in HTML for Tabs

When I am told to create a chop for a certain structure of a website, the first thing that comes to mind is what is the best structure. Sure there are a lot of simple markup solutions you could go with like a tabbed navigation. But what you have to ask yourself is what will be SEO friendly, User friendly and Accessible for people with disabilities.

In looking for the best solution, I stumbled across jQuery Accessible Tabs by Dirk Ginader.
http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php

This solution takes care of all of the issues I’ve found in most tab markup.
It’s Seo friendly and when javascript is disabled the content is still legible.

How to install the viper alarm 5901, CRX

I stumbled on this installation guide and thought it would be beneficial to everyone that is installing this alarm system.

Here is a pdf on how to install the viper alarm 5901.

Click to access N5702V_2008_08web.pdf


http://www.directeddealers.com/manuals/ … _08web.pdf

Also, here is a link for the tech spec sheet / wire guide for the CRX install:
https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=15Rr2Epk8ec-cZg0PYbimUeZyoYcKm-M2NPY5pAtnnGcb6FRQIhHnvTGFPyPe&hl=en

Power windows and locks Install into CRX

[b]Driver side door power locks and power windows[/b]

Ok, so I figured it would be worth sharing with everyone my install.

So I bought universal power windows and locks off of ebay for like $75.
For what it’s worth, its not that bad quality.
The Cool thing about this install is that everything fit perfectly!
I didn’t drill any holes and just use what was there.
You will notice that the power window sits perfectly on the seat belt thingy 😛

Also, I thought it would be nice to show you a pic of how I tapped into the fuse box.
What I did with the wiring was plug into the fuse for the lighter and the wire that I used has a fuse built into it.
by connecting to the lighter, the power windows only get power when the key is in the car.

As for the power locks, I did the same thing and connected into the 3 slot that wasn’t being used, which always gets power.

I didnt take any pics of the plastics back on the car but I’ve tested it and it fit back on just the way it came off

anyhoo, feel free to ask questions.

crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install
crx power windows and locks install