Attackr.com » Developer Portal for web designers, developers and programmers

Share & Add Link Mash-ups Are Driving Modern Design

Gregory Milby — Sun, 14 Feb 2010 00:57:26 +0000

There seems to be a crescendo of services popping up. Most of the services seem to be outwardly oriented, but a few user-centric applications are also starting to surface. I don’t think anyone can deny that social networking has impacted webdesign, and the rising flood of api’s are making it easier than ever to include one of these tools, and give a designer/site admin more time to dedicate to the website without investing time into “keeping up with the social networking Jones’s”
The one that I’m using on my sites is, “Add This”, but there is an emerging tide of these type of sharing link/mini blogging/social networking web-centric applications springing up everyday.

Add This offers statistical data so you can track how many times your site was referred using their tool, but you will have to sign up for an account to be able to use that feature… After all, they need to know who to give the tally to

The list of networking sites seems to be growing at an unbelievable rate, and it’s great that someone is keeping up with all the js/api links that can connect stories or web items to their ‘circle of friends’ or colleagues.

Another one that has caught my attention is , “Share This“. Share this seems to have a few more dynamic elements – a smoother presentation, but the number of services it can ‘share to’ are probably equal to any other like-service. One thing that seperates Share This apart is the application method – you’re able to literally download the plugin within a ‘format’ (e.g. wordpress, typePad, or generic script for any regular coding website).

As mentioned earlier, there are a few user-centric web applications starting to come to the forefront. One of the most significant is Threadsy. At first I wasn’t sold on the all-in-one web tool idea, but after using it for a month, it’s become an essential tool. It’s so easy to twitter, and if it’s appropriate, I can simultaneously post to Facebook. It keeps all my email in one place (my tens of throw away/ sole-purpose email addresses [that i would never check otherwise?]). The irony is I like Threadsy for the very reasons that I thought I would ever like an application like this… It has a vertical bar (as small as I want it to be) that can show me my twitter account/facebook notices without getting an email… if something scrolls by & I happen to want to reply – it’s a matter of clicking a button after typing my response. At any given time, I used to have up to 20 browser window/tabs open. With Threadsy, it’s reduced to 5.

Regardless which one of these mash-up tools you use, be sure to share your findings in the comments. We appreciate the comments and participation.

Thanks,

Greg

If you liked this post, please follow me on Twitter

No Related Posts

The Primo Top 3 CSS Menu Sites & Generator’s Systems To Add A Stylish Navigation To Your Webpage

Gregory Milby — Thu, 09 Jul 2009 14:31:45 +0000

Creating a functional navigation for your website is key – especially if you want to add any style that retains cross-browser functionality. I’ve gone through hundreds of sites and have found the top 3 primo CSS menu generators that will give you the most options to get that stylish nav menu you’re looking for.

13 Styles offers cross browser/lightweight menu’s that offer a variety of styles ranging from simple to elegant to fun. Most of the menu’s are generic, and can be easily implemented into an exisiting design. The most you would need to do is to adjust some of the colors in the CSS. The stylesheets are using standard property componenets (CSS1/2), and appear to work in backward versions of browsers also. Which is good considering the bulk of corporate America is using ie6 still. If you’re interested, these menu’s offer the PSD’s to totally customize the menu (for a price) if the free version doesn’t work for you.

CSS Menumaker offers more menu’s that are utilizing a more graphic flair, and most seem that they make work well with more conservative color palets (considering the vibrance of the menu’s). These CSS menu’s offer solutions for creating dropdown menus (unique – most CSS sites do not even approach this topic). This generator has a pretty extensive customization feature – allowing you to build more than just the look on the webpage – this generator actually builds the menu items. If you’re creating the menu’s dynamically, then this feature will not matter a whole lot.

CSS Play is the perverbial “Mother-Load” of every configuration imaginable… literally. I was able to look through about half this site, and it’s literally overwhelming as to how many resources are actually offered. The multi-level dropdown menus are new, and the menu’s appear to be consistent. Sometimes CSS/js menu’s will have gaps depending upon the layout or browser used. All of the menu’s appear to “look correct” regardless of how they’re used, and how they’re viewed. If you are concerned about page size, they have some pure text CSS menu’s that are actually appealing.

enjoy.

No Related Posts

Best Of The Rest Opensource Image Gallery Software (Part 1?)

Gregory Milby — Thu, 26 Mar 2009 15:22:16 +0000

There is no doubt that there are a ton of photo gallery scripts out there. When looking for software, it’s easy to fall into the “ooh’s and ah’s” trap. Being mesmerized with features and easily losing track of the original goal or intended use of the gallery. There are gallery applications that literally are their own website – like a Photo Content Management System. Others truly warrant merit and further research because of their usefulness & hopefully their adaptability for multiple applications – as well as – their ability to stand on their own as needed.

Here are my picks for the most versatile PHP gallery scripts. You may be surprised at the findings here as my values are different than the average person who wants to share their pictures. My value is based more-so on the flexibility and adaptability of a gallery script rather than being locked out from customizing it. Gallery scripts are a good asset if you want to show items in a pre-established website/web application and do not want to have to write from scratch. Reusing this code can help deliver an application expediently, but being able to have it resemble the host site is critical – it must be flexible if it is going to be used as “part of another website”.

Server Test Environment: These were tested these on Ubuntu Server (LAMP install) – latest version. Approach to install: Every click and drool wizard feature was attempted – no manual configurations were attempted to ensure the ‘as advertised’ feature would be accurate.

Flexible and adaptable come at a price. Sometimes the only method to add a photo is to ftp it up to the folder (that’s raw/flexible), but it is considered flexible because a script can be written for exisisting application to control how/where a photo is uploaded. So while reading these, keep this in mind. So look for “stand-alone” if having an upload mechnism is a must for you.

You’ll find that most gallery scripts will boast of these features – comments will be limited to the most noticable of these features for each source in this post:

Features:

On-the-fly Thumbnail/Low resolution picture generation
Unlimited Categories and Sub-categories (it uses directories)
Integrated fast text database mode (MySQL also supported if prefered)
Users comments
Rating system
Web/FTP picture upload
Top Rated/Last Commented/Last added pictures pages
Slideshow mode
User level support to protect pictures/directories from unwanted people
EXIF/IPTC metadata support (hot!) (Only found in phpGraphy)
Multilingual support (See TranslatorPage for complete list and status)
Web interface management
Lossless jpeg rotation support (via exiftran/jpegtran)
Video, sound and text files support
Layout/Text very easy to change
Highly configurable (Themes/Templates)
Installation Wizard

phpGraphy

http://www.phpgraphy.org/demo/index.php

phpGraphy did everything it boasted of, and was a snap to setup. This will be one that will be kept around to help the next person that asks for a “quick gallery” install. It’s lightweight, easy to modify (theme/css) – logic was easy to follow, and painless (which is a key feature).

———————————————————————-

Plogger

http://www.plogger.org/demo/

Looks great, hard to integrate into an exisisting site, and install was less than bulletproof, but it worked after the 2nd try. Theme’s were not easy, but for a stand-alone, it’s useful.

———————————————————————-

Simple Picture Gallery Manager

http://spgm.sourceforge.net/spgm/index.php?

As most do, it generates it own thumbnails and has a stripped down – very modern look. Makes this script easy to include into another project if a sub-folder install will work for your circumstance. Ironically, it’s more full-featured than it appears to be (looking at the demo had me believing that this was going to be a very light script). Even has a few themes made specifically for the application available through the SPGM website making it intended to be a stand-alone gallery script.

———————————————————————-

Qdig

http://qdig.sourceforge.net/qdig/qdig-demo2/index-Dark.php

It’s a one-pager script, but it’s quite details for being one page. I’m always leary when a script says, “it will adapt to any server environment, but some settings…. http://qdig.sourceforge.net/Qdig/AboutQdig (details of setup). In my case, setup was a breeze, and it shows well – easily themed, and the flash-like thumbnailing across the bottom made it appear to be more of an application. Regardless, it worked well as promised.

———————————————————————-

bolGallery

http://bolgallery.free.fr/

With some hesitation this was added, but there are just times you need this. If you need something that you can just put a pile of jpeg’s into a folder, and send someone a link – this is the ticket…. There are many times where this is the perfect tool. Want to show someone 340 proofs that you have to individually upload? (No one does!) . Integration was quite easy, but I probably wouldn’t use this as an end user application, but the concept is great for the times you just need to show someone images quickly.

The quantity of findings were unending while searching for opensource gallery scripts. Going through all of these gallery scripts will take time, and the task will be split up into parts. These 5, that I felt were worth mentioning, were the result of going through 50 scripts. Please comment on any other projects you would like to suggest. Part 2 will be coming in the near future.

Web Design For The Beginner

Len Saunders — Tue, 26 Aug 2008 01:04:41 +0000

Web Design For The Beginner

I am in the field of children’s health and fitness, but I just love web design and photography. With no experience, many ask me how I have created some of my web designs, which to me, are still beginner level, but attractive and usable.

The first thing I tell someone is to go visit opendesigns.org and download a few templates. Once you download the templates, unzip them to your desktop. Look for the file called index and open it up in a web editor. I like to use Notebook++ as my HTML editor, which is a free download.

In the Notebook++ program, you can change all the text you’d like to personalize your new web site. I personally like to see what I am doing, so I also open up the index file in my Firefox browser, and click the reload button to see the changes I have made as I go along.

Now, for the newbie, you may want to experiment with the .css file that is enclosed in your download. The .css file controls many things on the site such as the font, headings, colors, forms etc.

Many of the open source designers will tell you in the .css what each part of the .css controls, so you know what you are changing. The key thing is to always backup what you are doing before you make the changes, so in case you mess up, you have the original .css.

I must have done this a least 100 times before I started to try and create my own web template. Once I felt comfortable with this, I found a site by another Open Designs member called, Tinderbox.

On this site, you can find various plain and basic web layouts for you to start to personalize. If I am brave, I may visit css play to try and place in a cool navigation system.

Once I complete the design, I have a couple of my web friends check it out, then submit it to Open Designs for others to download.

If you are interested in learning about web design, this is a great way to start. You can see some of my work at: web.lensaunders.com

Combining flash with HTML/CSS

niemi — Wed, 14 Nov 2007 17:10:13 +0000

Many factors could make you refrain from designing sites completely in flash.

Maybe you like to grab and customize free HTML templates, maybe it’s the fact that you need your content easily to be probably indexed by search engines or maybe you just don’t like flash because it has become tantamount to an inferno of noise and crappy animations.

As a fact there could be various reasons which could make you abstain from designing sites completely in flash. It’s not my intention to convert you to a group of flash lovers.

I’m here to tell you how to combine the best of both worlds. Stick to your HTML layout and then apply the finishing touch by replacing the header with a flash animation.

Well, it could be anything but I think the header as a natural choice so that’s what we are going to focus on for now.

What do we need to get started?

PREPARING OUR HTML TEMPLATE:

Grab a free template. For this tutorial lets use this one designed by Rambling Soul. Unpack the files.
Open index.html and style.css in your favorite text editor. Notepad is suitable for the basic operations we are going to perform.
You need a piece of JavaScript now. Get it from here and unpack it to the same folder the html files and the .css file are stored.
In index.html add this line in the header right before:[CODE1]
Delete everything inside [CODE2], that would be this: [CODE3]
Now let’s add the code that calls our flash animation. Copy the following code and paste it to the very same location from which we just deleted a couple of lines:
[CODE4]
In style.css find this line: #wrap #header { background:url(images/header.jpg) no-repeat; height:229px; margin-top:10px;}
Delete background:url(images/header.jpg) no-repeat;
Now we have removed the original image from the header. The script that we linked to in step 4 and made use of in step 6 will embed the flash movie as seamless as possible in all major browsers. You can just as well get used this way of embedding your flash files as it’s better than any other way.

THE FLASH HEADER, REUSING THE CONCEPT €“ PART 1

We have prepared our template for our flash header now. Let’s create the flash header. Open header.jpg located in the images folder. You can perform the following steps in almost any image editor, for this tutorial I’ll use Photoshop.
Because Ramblingsoul has created such a beautiful frame, let’s reuse it. Select “Rectangular Marquee Tool” (Hotkey is “M”) and select the whole blue area (the actual image inside the frame. Select it all including the cute strawberry-guy. Don’t select the bright frame).
When this area is selected go to “Select” >> “Inverse” (Hotkey is CTRL + SHIFT + i). Press CTRL + C to copy the selected area.
Go to “File” >> “New”. Say “OK” and press CTRL + V to paste our frame.
Go to “File” >> “Save as” (hotkey is CTRL + SHIFT + S). Name it “frame” Choose GIF as format and save it to the images folder. (The template you downloaded contained this folder)

THE FLASH HEADER, NOW IT’S GETTING FLASHY €“ PART 2

Now open Flash CS3 (or any previous version you might have).
Create a new document. (“File” >> “New”) Select ActionScript 3.0 or 2.0, it doesn’t really matter.
Press CTRL + J to open “Document Properties”. Dimensions should be 882px * 229px. Framerate 35 FPS. Press “OK”.
On the very left of the timeline double click “Layer 1″ and rename it to “pic1″. Create a new layer (see image) a double click it to rename it “pic2″. Create a third layer a rename it “pic3″. Create a fourth and last layer and rename it “frame”.
Download these three slightly modified royality free pictures from here. Put them in the images folder. Import them by clicking “File” >> “Import” >> “Import to library”. Select them all or import them one at a time. Also import our self-created frame namely “frame.gif”.
You screen should look something like this.
Select layer “frame”. Drag our “frame” image from Library to the scene. If not align-box is visible press CTRL + K. Press the icon below the text “To stage:” so that it’s active. Now select the image “frame” we just dragged to the stage and press “Align horizontal center” and “Align vertical center”. Now our “frame” is in place. Lock the layer by pressing the dot below the lock once. Also lock the layers “pic2″ and “pic3″.
Select the layer “pic1″ and drag it to the stage. Align it like we just did with our “frame” image. Because our frame image hasn’t got quite even sides you have to move the image to pixels to the left by pressing the left key twice.
Convert our “pic1″ to a movie-clip symbol by selecting it once and pressing F8. Name it mc_pic1
Insert new key frames (still on the “pic1″ layer) by clicking on the 15 frame (don’t confuse this frame with our image “frame”) and pressing F6. Click the 85 frame and press F6. Click the 100 frame and press F6.
While still on the 100th frame click the image once and properties select color >> tint >> 100%.
Right-click somewhere between the 85th and the 100th frame and select “Create Motion Tween”. Now go to the first frame and click the image once again. From properties select color >> color >> advanced >> settings >> Replace the first three “0″ values with “255″. Don’t increase the value next to Alpha. Press “ok”.
Right-click somewhere between the first and the 15th frame and select “Create Motion Tween”. Now lock this layer, hide it by clicking the dot below the eye and unlock layer “pic2″.
Select the unlocked layer “pic2″ and repeat step 8 to 13.
When you have repeated those steps lock the layer “pic2″ and hide it.
For the third image and the layer “pic3″ redo the steps. When you’re done lock layer “pic3″ and hide it.
Unlock layer “pic2″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 100 instead of frame 1.
Lock the layer “pic2″ and hide it.
Unlock layer “pic3″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 199 instead of frame 1.
Unlock our layer “frame” and go to the 283th frame and press F5 to insert frame.
Unlock and unhide all layers. We are done! Now press CTRL + SHIFT + ALT + S and navigate to our images folder we have been using so far. Name the file header and save it.
It’s nice to have the source file so also save that by pressing CTRL + SHIFT + S.

UPLOADING

1. What do we need to upload? Everything in the original template folder besides the old header imager, namely header.jpg. Be sure that it’s the edited index.html and style.css you are uploading.
Also be sure to upload our JavaScript namely swfobject.js.
Be sure to upload our header.swf, it should be in the images folder.
You don’t have to upload pic1.jpg, pic2.jpg, pic3.jpg or frame.gif. They are all contained in our .swf file.

You can download and review the final result here. I have included the images used as well as the .fla

I’ll create a Video tutorial of this later, so if your lost don’t worry too much. Until then feel free to mail me your questions here. I can’t guarantee a reply but I’ll try hard

Cleaning Up Your CSS

Sean — Sun, 27 Aug 2006 20:11:02 +0000

In a recent discussion over at OWD a new designer was wondering what they could do to clean up some of their style sheet and site code.

I offered a few suggestions on how to optimize the style sheet, which in the grand scheme of things can help increase load times for your site and make the style sheet easier to read.

One of the examples was to change color codes to be optimized. An example would be to change #000000 which is black to #000 which as you can see reduces the code size from 7 characters to 4 and if you do this through out your entire style sheet for the color black, it will reduce the overall file size of your style sheet. There are other colors you can do this with as well.

Another example would be #ffffff which is white. Change it to #fff and you just reduced your overall file size.

Changing color codes won’t make a huge change in load times but if you can shave a few KB of code here or there, over time it will help your site load times.

Something else to do is remove the tab spaces before your code. A lot of people like to have 5 spaces or a tab before each line of code. Having so much white space also increases file sizes.

A good tool I use to check and clean up my css on sites is a SourceForge.net project called CSSTidy.

What’s nice about this tool is the site also offers an online version if you don’t want to install it locally.

I hope this information was useful to you and if you have anything to add, be sure to comment or better yet, join www.attackr.com and submit some articles yourself. Between everyone who contributes to the site, we can help each other out become better designers and coders making the internet a better place for all to see.

Cheers,
-Sean

#1 CSS Online Handbook

fuBar — Tue, 08 Aug 2006 20:18:00 +0000

You are a curious and creative web designer and wanting to know more about CSS and its hefty tricks. But the information on one CSS website is not enough. You blindly search, visit, and bookmark any website that intrigues you. But by the end of the day, your bookmarks that you collected are all over the place. Not only that, but some of the links you bookmarked are irrelevant.

Well, it ain’t over.

Online handbooks are getting very popular these days for its quickness of linking relevant information provided on the website. And CSS is like no other. It’s constant, sleek, and attractive. More and more CSS techniques are published everyday. Don’t bookmark, just bookmark the handbook which is a bookmark itself. Confused? Don’t be.

I am talking about: http://www.alvit.de/handbook/

It’s an all in one CSS Handbook, check it out and you will thank me.

Tableless Web Designs: Why I Switched

Karen — Tue, 08 Aug 2006 03:11:19 +0000

Since I made the switch 6 months ago to a tableless design on my main site, I’ve noticed some interesting things:

1. My search engine rankings have dramatically improved
2. My bandwidth usage has dropped about 50-75%
3. I can now make changes to the look and feel of my site easily by just changing the one file, the stylesheet.

Let’s look at why my search engine rankings improved. Now that I have less un-indexable code on my pages, the search engines can now spider my site quicker. Less code, more content, therefore a better ranking. Makes sense, doesn’t it?

Bandwidth costs money, and unless you have a really good hosting plan with lots of bandwidth, then your larger files will take up more room on your server, and take a lot longer to load. Tableless designs use up considerably less bandwidth and are more accessible.

Every once in a while I may want to alter the look of my site. I like to change font colors, link colors, menu items, etc€¦Before I started using tableless designs, these changes took me hours to do. Now I just open up my stylesheet, make the changes I want, and in a few minutes I have my site updated with the new look and feel. It’s so easy!

For a client who wants to make their own changes, tableless designs could literally save them thousands on tech costs.

Most of my clients still want sites with tables. I now give them the choice of either style. After all, the customer needs to be happy, right?

Some people have the misconception that utilizing tableless designs means having a boring and less graphical site. Nothing could be further from the truth.

Take a look at one of my favorite websites: http://www.csszengarden.com/. At that site you can really appreciate what can be accomplished through css-based tableless designs. Beautiful!

Make the switch to a more profitable, usable, and accessible website!

CSS Editors & Design Tools

Sean — Thu, 03 Aug 2006 23:38:23 +0000

This list is neither comprehensive nor an endorsement, it is just intended to show the options. Below I’ve provided a few of the best known CSS tools that I know about.

Top Style by www.bradsoft.com

Stylemaster by www.westciv.com

Additional links to other useful tools can be found at:

Eric Meyer on CSS: Links to CSS Tools: www.ericmeyeroncss.com/links/tools.html

CSS Tools: www.soxiam.com/Notes/CSSTools

Layout Gala: http://blog.html.it/layoutgala

Eric Meyer on CSS: Links to CSS Resources: www.ericmeyeroncss.com/links/resources.html

List-O-Matic: http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/