Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

12 May 2012

Doing it the Drupal Way


Official homepage of the open source content management system

There are many different ways to build a website these days. When I first started in this business, you wrote HTML files directly onto a local web server and, if it all looked good, then uploaded these files to the live web server. Later, the introduction of scripting languages made the need for such a staging server all the greater. If your clients wanted their site altered, they'd tell you what to change - in electronic form if you were lucky, but more often via a phone call - and you'd have to implement these as soon as you could.

As websites became more strategically vital to businesses, it became desirable for them to be able to update their sites for themselves. But giving inexperienced users a copy of an authoring tool such as Dreamweaver was a recipe for disaster. Far better to offer a controlled means for users to enter their own content - menus automatically updated, images re-sized according to prior settings. Enter the content management system (CMS).

A CMS is a combination of a database that holds all the content, and an engine that generates visible web pages from it according to pre-established settings. The most popular CMSes were invented by the open source community, using PHP and MySQL. Some people criticize this way of building websites as a "sausage machine", where you turn the handle and out comes yet another unremarkable website. In some cases this may be true, but it doesn't have to be. For sites with a lot of fast-changing content it's the best solution, as it would be impossible for a small group to maintain such sites without the help of a CMS back-end.

Almost all of the larger ISPs nowadays offer build-your-own-website packages based around customized CMSes, and offer hosting of various CMSes that can be installed with a single click. The route to getting started is easy, but as with most things technological, this is just where the fun starts. Most of my work involves building custom web applications using Microsoft technologies, but a while ago my company was asked to quote for a CMS for a new client, and we decided that this should become the new standard within our company for building all such sites. Accordingly, we put a lot of thought and testing into the task of deciding which CMS to adopt - our main criteria were performance, flexibility and ease of use for the end users when updating their own sites.

We spent some time looking at the .NET solutions available, and while Umbraco (http://umbraco.com) has its charms, there were problems between versions and the modules, and support via the forums seemed limited. On talking to our existing clients, they too were wary of using a CMS they hadn't heard of, and so we decided to take a longer, harder look at old favorites Joomla. Drupal and WordPress.

We had built sites with Joomla in the past, but discovered that clients found it confusing to use. WordPress is great for building blog-style sites, and while you can get it to do amazing things, we wanted a more basic framework to which we could add functionality depending on clients' needs. Performance was also an issue, and scouring the forums and blogs suggested that Drupal (http://drupal.org) was highly thought of in that respect. I'm sure many readers will have other equally justified views about this matter, and you could argue over it forever, much the way you argue over the best car to buy down the pub. Often, in the end, it comes down to "gut feeling": if you like a product yourself, then it's going to be far easier to sell it to your clients. I felt that Drupal's administrative front-end was clear and concise, and it didn't log me out every few minutes like some CMSes, which was a definite plus!

The major criticism of Drupal is its steep learning curve - it's a basic empty framework to which you have to add modules before it can do anything at all. By default, it doesn't even come with a Wysiwyg editor to enter content. Things like this can put off the casual user - it does mean, however, that you can choose your favorite editor and install that.

The time came for us to set up and test an installation of Drupal. Before you even start thinking about going live with a CMS, it's critical to have a local copy of it on which you can test modules and settings before exposing them to the public. Rather than going through the whole process of configuring web servers, databases and server scripting languages, it made sense to use one of the pre-rolled configurations. As we were running a Windows desktop, the easiest way to do this was by employing the usually excellent Microsoft Web Platform Installer, or the free Microsoft WebMatrix. However, I said "usually excellent" because this time I couldn't get the Drupal package to work correctly on either of two machines, one of which had a fairly clean Windows installation.

Another reason for giving up on this way of configuring is that I've found, while you can run packages such as Drupal. WordPress and Joomla under Windows with IIS and Microsoft SQL. the level of support for the Microsoft route is considerably weaker than for Linux with Apache and MySQL. If. like us. you decide it's better to go down the Linux route, your hosting will also be cheaper.

When it comes to hosting your Drupal site, most web houses will use the hosting provided by their ISP rather than configure their own server, so the choice of OS isn't really an issue, but it does make sense to use the same OS on your development box as a live server to avoid any strange compatibility problems. The easiest way to get a local Linux box up and running on your Windows desktop is to use a virtual machine pre configured for that purpose.

I found the free BitNami range (http://bitnami.org/stacks) particularly useful in this respect, as it will run in the free VMware player (www.vmware.com/products/ player), providing a Linux machine preconfigured with MySQL and Drupal for you to get cracking with.

You'll need to do some basic editing of a few text files to get FTP access running, after which you can access and edit any other files via an FTP client such as FileZilla (http://filezilla-project.org)or Notepad++ (http://notepad-plus-plus.org). You'll need Notepad++ or similar rather than the Windows-supplied version of Notepad, because the latter won't handle the end-of-line breaks in Unix text files. The current version is Drupal 7, for which the module installation process has been made extremely easy. Via a web page, you point to a previously downloaded module archive file (http://drupal.org/project/modules), and once a module has installed, you can enable and configure it via the same web interface, with no cryptic command-line stuff, nor wrestling with Unix's Vi Text Editor. Version 7 also uses a different database schema from previous versions, so it's important you download the correct version of any modules.

I found the online help to be excellent, most of my questions being answered via the official Drupal site with little need to traipse through lesser forums. It would be dishonest, however, to say that this process was completely without its frustrations. My first site took about two weeks to get to a level that we were happy with, but then our next site - which had an e-commerce element - took only two days to get to a stage good enough to show the client.

As with many CMSes, Drupal's content is structured into content types, which are categories such as "articles", "stories", "blogs" and 'books", plus any of your own devising you wish to add. These types determine what can be entered by the client, and the basic format of how it will be displayed. Where a piece of content will get displayed on the site is controlled by "blocks": normally your content will be displayed in the "content" area, but you can have versions that display the same content in different formats on different areas. A "page" is known as a "node", and its look is decided by the blocks and content types.

The final appearance of the site is decided by a template. Menus are generated automatically, but can of course be customized. Before your clients can edit the content, they'll need to log in to the site, but one pet peeve of mine is having login forms on publicly visible web pages: if you're not allowing the public to log in, then why display a visible page to tempt them? Far better to reserve a URL that you can give only to your clients, and this is easy to achieve in Drupal.

When developing a non-CMS-based website, it's usual to work on the design first and then add content afterwards, but when using a CMS it's often better to add content and get familiar with the structure of the data that you'll need to work with, and only then add design features to it. Of course, it's a good idea to achieve a reasonable-looking design before showing it to the client, as otherwise all the feedback you'll get from them will be about cosmetic matters, such as the colors being wrong and so on. Getting clients to understand this often isn't easy, but coming up with a new design and all the tweaking that follows can be time-consuming.

One useful ploy is to use the rather excellent Artisteer program (www.artisteer.com), which features not merely a vast number of pre-made designs, but shows the effect of any changes you may make to them immediately in its preview. You can literally sit with your client and show them what their site will look like, complete with curved boxes, graduated fills or any other of hundreds of "tweaks" you can apply.

It would be foolish to suggest that Drupal provides the answer to all the problems of building websites - far from it - but once you get your head around its basic concepts, it really is quite easy to use. The latest version has laid many of the previous Unix-related frighteners to rest.
 

07 November 2010

Improve Your Web Designing Skills with HTML5

 "Good Web Designers can give an edge to enhance your company's image." 

Introduction 

Html5 is considered to be the updated version of Standard HTML. Currently it is in designing phase. Moreover Html5 is the next generation of web markup language created in the era of web applications. Html5 is the advance version of HTML with more incredible features to improve your Web designing skills

 

What is Html5 is All About?

Basically Html5 uses specific script, which reduces the effects of Rich Internet Applications such as Flash Player and JavaFx.

Highlighted Elements Used in Html5

Consider the following features of Html5:


1. New Doc Type

There is no need to type the traditional xHtml Doc type in Html5

2. Figure Element
 
Unfortunately there is no way to associate the caption to the image tag. Html5 rectifies this issue.
 
3. Small Redefine
The "small" tag has been redefined by the html5, and now refers to "small print". Imagine this case if this tag would be applied in the footer of your website as a copy right statement.
 
4. No More Types for Scripts and Links
 
In the Html5, it is not required to place a “type” attribute to the link or Script Elements.
 
5. Make Your Content Editable

In new versions of the Browsers, there is a feature named as “Contenteditable” which can be applied of any html element. In which you can edit the content on the run time.
 
6. Email Inputs
 
In Html5, the input element will be added by type attribute is equal to email. Due to this you will be required to enter the valid email address. By default form validation will be supported.
 
7. Local Storage
 
LocalStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.
 
8. The Semantic Header And Footer
 
It’s fully appropriate to have multiple headers and footers in your projects. Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the header and footer elements.


How HTML5 Empowers The Web Designing Experience!
1. Galactic Inbox

Galactic Inbox is a great experiment to show the power of HTML. A game inspired by the webmail galaxy and developed by using “HTML5 Canvas, Processing.js”.



2. FlowerPower

FlowerPower is an Attractive drawing tool with flowers as brushes using Bezier Curves.


 3. The Wilderness Downtown

The Wilderness Downtown is an interactive web application designed by using HTML5 which allows you to experience the run in your own street by entering your home address in the application.



4. Bezier Sketcher

Bezier Sketcher is a simple writing platform allows the user to draw something in new way. It is very easy to use for the people who are familiar with Photoshop pen tool.



5. PlasmaTree

PlasmaTree is a tool to show the visual capabilities of HTML5. Click the mouse left button to and enjoy the growing tree on your screen. Fill up the screen with as many or as few as you like.



6. 3DTin

3DTin is a 3D drawing tool in which you can make 3D things by using the cubes, It also allow you to erase any wrongly added cube and it also allow you to view all the dimension by rotating the image.



[ 3DTin

7. Biolab Disaster

Biolab Disaster is a fantastically retro, shoot-em-up platform with some fantastic game play.


 


8. Darkroom

Darkroom is an online photo editor which allows users to apply simple color and geometry adjustments to photographs. Features include: Exposure, Brightness, Contrast, Saturation, Tint/Temperature, Levels, Color Blindness Simulation, Color Blindness Daltonization, Red-eye Filter, Rotate, Mirror, and Crop.






9. Rumpetroll

Rumpetroll is a very good interactive platform where you can chat with other swimmers. Click around with your mouse to swim around and join up with other groups. Type to chat, and enter “name:” to give your tadpole a display name. Open this experiment in Google Chrome Firefox does not support it.




10. Sketchpad

Sketchpad is an application developed by using HTML and java script which allows the user to experience the online sketching or painting. Sketchpad have all the features that can be allowed by any desktop drawing application such as Text, Shape, Spirograph, Brush, Calligraphy, Pencil, Paint-Bucket, and Stamp, Marquee, Crop, Eraser and Color-Picker.



11. Asteroids Game

Asteroids Game – with modern rendered and retro wireframe graphics options.



12. Tunnelers
Colorful particles start to be generated by clicking on the screen which states to fade out by releasing the click.


[ Tunnelers

13. Impressionist

Impressionist is a web platform that allows you to upload images and recreate them to look as if they were painted.



14. Deep Sea Stress

It’s about a sea creature straight from the unknown depths of a distant ocean. You can adjust different parameters given on top of the window and enjoy the changes made in the creatures.


15. Cubescape

Cubescape is an online tool which allows you to draw 3D structures by dropping the cubes of different colors. Features include: draw cube, remove cube and replay construction.


 [ Cubescape ]


What do you think about these experiments? Will HTML5 be the most powerful web technology in future? share your views in comments.

28 October 2010

How To : Make Reddit More Productive

Previously i was using Digg, but now i am no more a regular user of Digg as it turned from a powerful news source into a site ruled by power users, news by top sites and bad management. I used to find Digg valuable then to discover new websites that I did not know about before. Now, it is just the same day in day out.

Reddit on the other hand managed to keep much of its identity and contents, making it my number one new site discovery service. If there is one thing that could use some improvement, then it’s the layout and look of the site. I’m sure that I’m not the only one who thinks that it looks a bit messy, and could use some polishing because of this.

The following is a list of userscripts and styles to give Reddit the makeover and make it more productive that it deserves. Before we start: Firefox users need the Greasemonkey add-on installed before they can make use of userscripts, and Stylish for styles.



This userstyle is compatible with all modern web browsers. It modifies the Reddit layout giving it a polished and stylish web 2.0 look and feel.

Embedifier – Images and videos are posted often on Reddit. They are usually linked to the source website, which means they need to be opened in a new tab, window or on the same page. This userscript adds arrow icons in front of embeddable media, which will expand the media on the Reddit page on click. No more leaving the page to view an image or video.


Reddit Uppers and Downers Enhanced – ever asked yourself what the ratio of up votes to down votes was? Wonder no more. This userscript displays the total amount of up and down votes on Reddit comment pages to give interested parties an idea on a submission’s popularity.



Reddit Enhancement Suite
– one of the most sophisticated makeovers for Reddit. This userscript adds dozens of features, from loading and displaying all images on the page to keyboard navigation, account switching, auto loading of next pages to saving comments. It is all there and more.
  • Configuration Console
  • Inline Image Viewer
  • Keyboard Navigation
  • Show New Comments
  • filteReddit
  • Account Switcher
  • Never Ending Reddit
  • Never Ending Reddit
  • Uppers and Downers Enhanced
  • Subreddit Tagger
  • User Tagger – now with ignore!
  • Show parent on hover
  • Full Comments Linker
  • Single Click Opener
  • Live Comment Preview
  • User Highlighter
  • Style Tweaks
  • Username Hider
  • Show Comment Karma
  • Hide All Child Comments
Reddit Comment Boxes – draws boxes around comments which makes identification a lot easier.


Top Reddit Comments Preview – Firefox only. Displays a top link next to each submission. Clicking the link displays the two top comments on the same page.


Reddit SFW Check – If you need your Reddit fix at work or a public computer you may find this userscript helpful. It adds a link next to each article listing. Clicking this link will scan all article comments for the words nsfw and not safe for work. It then displays the number of occurrences and the total number of comments, so that the user can decide to view or avoid the linked website.

Reddit Secure Pro – Force https connection when visiting Reddit.

Digg2Reddit – Redirects you to Reddit whenever you load the Digg website (accidentally I presume).

Reddit Top Comments Sidebar – Displays top comments of a submission in the left sidebar. Great for a quick overview of the most popular comments.


Reddit Spam Button – With popularity comes spam. This userscript can be used to submit a spammer’s profile to /r/repotthespammers .

Reddit Comment Highlighter – highlights reddit comments at the 75%, 90%, 95% and 98% levels (you can adjust these in the code) based on the comment points. Also, increases the font size of higher rated comments.


Reddit Username Colorizer – Automatically calculates the character sum of all usernames on a reddit page and colorizes them with it. Usernames will always have the same color no matter what page they are on.

Reddit Jerks – Remembers jerks you come across on Reddit and highlights their comments in the future with a JERK! sign so you can down-vote them again!

You have something more to add? Let me know in the comments.