Menu ▾ ▴

Home

DMOZ (1) ODP (1)
Abhishek Ghosh

DMOZ Editor Custom Profile

Open Directory Project or better known as DMOZ is owned by Netscape but it is constructed and maintained by a community of volunteer editors. This HTML, CSS and JavaScript actually for editing, customizing the Editors' profile page with Bootstrap Functions. This project is only for fun, there is monetary, backlink etc. benefit from that profile webpage. Mozilla, Netscape or AOL has no relationship with this project. If you are not an existing DMOZ Editor, there is no use of this project. However, anyone can join to do editing in ODP.

All the downloads are licensed under GNU GPL 2.0 ; you can redistribute, modify, repack without any obligation of giving credit or backlink to this project (like WordPress.org or Debian projects). For redistribution with modification, modify the Licence.txt file respecting GNU, to protect from commercialization.

DMOZ Editor Custom Profile is Free Software Pack and Licensed under GNU GPL v 2.0. A custom HTML file has been added to test any modification you will do with the resources.

Features

  1. Mobile responsive, minimalistic design; you test it on my own tool to get an idea how it will look across devices.
  2. It overrides all default settings including Favicon, Apple Touch icon.
  3. If external CSS fails to load, it will fall back to default style.
  4. I compiled all the scripts from dev version, any advanced features provided by Bootstrap can be used, one can use Syntax Highlighting, can use Tabs, Buttons, drop downs, menus etc.
  5. Basically one can all the features of Bootstrap. I have not used them as I shown only the base.
  6. The page can be used for real time update of status (I am sick, I am busy etc.) with own API or any third party RESTful API.
  7. Supports Opera, Chrome, Safari, Mozilla Firefox browser. There is no warranty for Internet Explorer.
  8. You can use Schema.org's tags, this is important if you want to show your real identity to Google.
  9. Others like FAQ are written elsewhere. Those who need will find it.

Note : It is not a method to overcome non indexing, forcing backlink value etc. The pages are roboted out. Only your identity to Google will be clear.

Licensing, Downloads and Readme File

Properly arranged within this project in download zip file. Bootstrap, Twitter parts has own license, for legal purpose please check Bootstrap project in GitHub.

How to use this DMOZ Editor Custom Profile

This wiki is for the purpose of how to use this DMOZ Editor Custom Profile template. You can use all the features of Bootstrap, all needed files are compiled, so you can basically use any custom div class, span class etc. as described in Bootstrap GitHub webpage.

Contents in side the download

After downloading and unzipping the contents on your desktop, you will get :

dmoz-profile-template (Folder)
|
|--static (sub-folder)
----|-css (sub-sub-folder)
----|-js (sub-sub-folder)
----|-images (sub-sub-folder)
|
|---code-for-you.txt
|---index.html
|---License.txt
|---README.txt

When you are online, if you double click to open the index.html file, it will load the offline replica of my customized profile. Internet connection is needed for loading the css files of DMOZ from AOL's CDN. It will look like this (mine one) :

DMOZ Editor Custom Profile

You will basically need :

  • A Good Text Editor Like Gedit. Kindly do not use Notepad, there is Windows version of Gedit.
  • Use a blob based content delivery network for faster delivery. You can use Google's free App Engine to store and deliver. For paid you can use Akamai, Rackspace, HP, Amazon etc. I have shown before how to host a website on Rackspace Cloud Files and Dropbox. You can follow those guides.
  • Knowledge to use Opera Browser. It has fantastic dev tools too see the HTML source nicely plus has a function named Opera Dragonfly to examine the divs with overlay. You can use any browser to see HTML source, but as Opera technically is related to web standardization with modernized CSS, you will get better featured tools for developmental purpose. Firefox has confusing 3D version of Dragonfly, Chrome's one is a bicycle not a car. Safari is next good to Opera for this usage.

Understanding the structure

Do not open any file in Notepad. They will mess up, please use a good text editor with syntax highlighting. Opera plus Gedit is our setup for this example. The major file to allow override is odp.css ; you basically need not to open any other CSS files for basic customization.

First open your Public Profile on DMOZ and my supplied index.html file on Opera using two separate tabs. Now check the source of both (View > Developers Tool > Source or press CTRL + U in Windows). You will notice two HTML comments in mine one starting with :

<-- my code starts-->

code start

and ending with :

<-- /my code ends -->

code end

This is basically to guide you. Within this tags your whole thing will be. To help you more, I have added a text file in the download package named code-for-you.txt which has the things I used with HTML comments. Open it in Gedit to see it in proper format.

How you will proceed

First, after understanding the things, rename the custom div part (a div named abhishekghosh or like that). Name the div as per your choice and change the style name in odp.css too. Both should be same. Change the description, link etc. and replace those with my index.html file's my code markup by opening index.html in Gedit. Save it. Reload in browser, you can thus modify locally on your computer.

Using Advanced features

Please check the Bootstrap documentation on GitHub. You can use any HTML div format used there except the images, icons, which are not supplied in this package. For using a Media Player, use Flow Player or jplayer and follow my guide.

Packaging and Getting the result

So, you got full HTML URLs of all CSS, JavaScript etc. after uploading to a CDN or Cloud Storage. As you know, you can copy paste anything in Editor profile page in that small profile text editing box. After creating the HTML package, use any online HTML compressor to rule out the chance of getting page breaks < / -br- > . Copy that and first test on that supplied index.html file, then on DMOZ profile page.

Using API

You can use Google's API, Twitter's API or Open Stack's RESTful API. Be careful about Twitter's API as probably you allow Third Party Apps in Twitter, they can have access using any vulnerability. You can use JSON to show latest Tweets, that is much safer.

Example Xfn Tag detected by Google

With rel=me tag, you can check the situation with Google Rich Snippet Testing tool. Mine one shows like this in Rich Snippet Test. You can search on Google webmaster Tools for Schema.org's snippets for person. Dublin Core, however will not work as it needs to be within the header tag.