mustERkennung

mustERkennung … stuff about patterns and their recognition

Little Web Site Helpers

leave a comment »

I think, that I could read and write some HTML, and the same goes for CSS. I pretty sure, that I’m not close to any edge techniques so I’m very happy to find some neat tools now and than to help me with my projects. Because finally I really know what I want. Currently there is one thing: Get a home page up and running. For me this means that I use valid HTML and CSS, and that the page does look nearly the same across browsers and their different versions. The other aspect is to be found on search.

Via Smashing Magazine I found the following code snippet, which may be outdated already, but still helps me The original source is css-Tricks.

/* Empty Elements */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {
padding: 20px; border: 5px dotted yellow !important;
}
/* Empty Attributes */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] {
border: 5px solid yellow !important;
}
/* Deprecated Elements */
applet, basefont, center, dir, font, isindex, menu, s, strike, u {
border: 5px dotted red !important;
}
/* Deprecated Attributes */
*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start], *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink], *[align], *[valign], *[hspace], *[vspace], *[height], *[width], ul[type], ol[type], li[type] {
border: 5px solid red !important;
}
/* Proposed Deprecated Elements */
input[type="button"], big, tt {
border: 5px dotted #33FF00 !important;
}
/* Proposed Deprecated Attributes */
*[border], a[target], table[cellpadding], table[cellspacing], *[name] {
border: 5px solid #33FF00 !important;
}

What it does is simple. It highlights now or proposed to be deprecated tags or attributes in various ways. It may lead to a more cleaner HTML because one is slightly forced to put the styling into the CSS. The place, where it intentionally belongs to. I initially put the code at the end of my style sheet and reloaded the page. The result was, that there were some highlighted elements now, due to deprecated attributes. During investigation of the error I recognized that it was not easy for me to see to reason why there was this highlight. I decided, and that is what I would suggest for usage, to put the code into its own css file. Now the investigation was easier as I saw what the source of the style was, my sheet or the check sheet.

The second helper is on SEO. It may be a big marketing hype and shallow business, but I still like the idea of my site being found during search. I came across a little tool of a friend of mine, which offers some simple in-page SEO analysis. It helps me a lot. The original source is Inpage SEO checker.

<script src="http://stephanschmidt.github.com/inpageseo/js/seochecker.min.js" type="text/javascript"></script>

Just put this single line of code at the end of your pages body and luckily you will see nothing. In my case I had a big red box on top of my page indicating that the title seems to short, that META values are missing and other stuff. There is also a configurable version of the tools usage, but I started the simple way.

And now I’m fixing!

Written by Rayk Fenske

March 17, 2013 at 1:23 pm

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: