40 Arresting Adobe Fireworks Tutorials Adobe Fireworks is a bitmap and vector graphics editor, aimed at web designers with features such as slices, ability to add hotspots etc, useful for creating and optimizing web graphics and create web pages with good finish. If you are interested to learn, here we bring you 40 best tutorials on Adobe Fireworks for any level, whether you beginner or advanced this list would be handy for you to learn something new here… How to convert your image to line art with Fireworks In this tutorial you are going to learn how to apply find edges effect to an image using Fireworks. Game Center Layout Style in Fireworks This tutorial was inspired on the new Apple Game Center design. Designing An Effective Gaming Clan Logo in Adobe Fireworks In this Adobe Fireworks tutorial , you will learn how to create your own gaming logo for your website using Adobe Fireworks. Text Glow effect A small tutorial to create a simple text-glow effect.. Fireworks effect to write text along a path 3d Text Fireworks Tutorial
Using the memcached telnet interface This is a short summary of everything important that helps to inspect a running memcached instance. You need to know that memcached requires you to connect to it via telnet. The following post describes the usage of this interface. How To Connect Use "ps -ef" to find out which IP and port was passed when memcached was started and use the same with telnet to connect to memcache. telnet 10.0.0.2 11211 Supported Commands The supported commands (the official ones and some unofficial) are documented in the doc/protocol.txt document. Sadly the syntax description isn't really clear and a simple help command listing the existing commands would be much better. Traffic Statistics You can query the current traffic statistics using the command stats You will get a listing which serves the number of connections, bytes in/out and much more. Example Output: Memory Statistics You can query the current memory statistics using stats slabs Which Keys Are Used? stats items command to determine how many keys do exist.
CSS Menus - Vertical CSS Menu with Popout and Dropdown Menus This semantically correct Vertical CSS Popout Menu has been finalized as of 2005-02-28. See links below for supporting files. View source to see the HTML/XHTML and CSS that controls this vertical popout menu. Note from Claire at Tanfa: This CSS vertical popout menu uses the "whatever:hover" behavior file. It is available for download from the "whatever:hover page on Perterned's site. It simply needs uploading to your website (I put it in the same directory as my CSS file /css/csshover.htc) and off you go. There is a newer version of this file (V1.30.050121 - released 2005-01-21), since these menus were first written, which means you no longer have to use the specific selector workaround for them to work in IE5.x (see CSS comments). The hover targeting CSS itself has to be very specific for IE to understand it properly, again this is because we can't use child selectors. Vertical CSS Menu Horizontal CSS Menu
A Beginner’s Guide to Web Development The web development field offers a variety of languages from front-end development, like HTML, CSS and Javascript, to back-end programming, like PHP, ASP and Ruby on Rails. So how do you start learning how to code? In this post, I want to offer a variety of great tips on beginning your journey to learning web code. At the end of the post, I want to share a simple site structure with you to get started in HTML and CSS. I’ll focus on HTML and CSS in this article. Learning Code from Web Development Books I don’t advise trying to learn coding from web development books. These neither help you memorize proper code, nor do they help you critically think out your first site on your own. That being said, books are still a great way to get the very basics down and provide a great point of reference throughout your learning process. presents a basic history of the web and how websites are made and interact.focuses more on web theory and less on shuffling you from exercise to exercise. Mix It Up
Get To Know Linux: The /etc/init.d Directory If you use Linux you most likely have heard of the init.d directory. But what exactly does this directory do? It ultimately does one thing but it does that one thing for your entire system, so init.d is very important. If you look at the /etc directory you will find directories that are in the form rc#.d (Where # is a number reflects a specific initialization level - from 0 to 6). Now if you are using a distribution like Fedora you might find this directory in /etc/rc.d/init.d. In order to control any of the scripts in init.d manually you have to have root (or sudo) access. /etc/init.d/command OPTION Where command is the actual command to run and OPTION can be one of the following: startstopreloadrestartforce-reload Most often you will use either start, stop, or restart. /etc/init.d/networking stop Or if you make a change to your network and need to restart it, you could do so with the following command: /etc/init.d/networking restart networkingsambaapache2ftpdsshddovecotmysql Final Thoughts
Drop-Down Menus, Horizontal Style: A List Apart Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.) Here’s a sneak preview of the menu in action. Creating the menu#section1 The first and most important part of creating our menu is the menu structure itself. That’s it: some simple HTML that is both accessible and easy to edit. Visually appealing? If you have previewed the menu above, you’ll see a pretty boring list of items. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. Next, we need to position our list items. Next step is the sub-menus. Now the fun bit.
How To Code A Simple Website From Scratch Part 1: Preparing the Design I thought it would be helpful to some of our beginning XHTML/CSS coders (and some seasoned ones who need to brush up) to show how I code a website from beginning to end. We’ll do this in a 3 part series; Part 1: Preparing the Design, Part 2: The HTML and Part 3: The CSS. I’ll show you a quick way to code every one of your websites, including validation and slicing of the design itself. Start With The Design We’ll use a simple, basic web layout for our coding purposes: As you can see (you can click it to enlarge to full size) this is a typical 2 column web layout with a basic header, logo, navigation and footer. Figure Out Your Containers Before we can start slicing, we need to figure out the containers (and sizes) for the website. HeaderNavigationLeft ColumnRight ColumnFooter The main divisions of the site will typically look like: Time for Slicing & Sizing First you need to find out the entire container size of our design. All “How To Code A Simple Website From Scratch” steps:
Logo design tutorial When a company starts, the image is often one of the things that can impulse the acknowledgment of the business existence around their area of influence. A company’s image primary consists of the logo, the stationery, presentation cards, mail templates and even digital signatures. Once the company starts to gain reconnaissance, other elements are developed, such as the website, social networks and others. On this tutorial we will be focusing our attention on one of the main elements of any company’s image, the logo. Using Adobe Photoshop we are going to show you how to design a logo that works both in communication and aesthetic levels. 1. It’s not the same to plan a logo idea for a fast food company than a heavy machinery factory, you need to determine your company’s identity in order to create an image that plays along with the whole idea of your business. 2. 3. See that the layer is locked. And now it’s not locked. Now we have a subtle background that looks better than the default. 4.
How To Nail A Sexy Layout // Archives // Addicted To New Part One, Skeletize, Visualize, and Nakedize This is the first article of a series on “How To Nail A Sexy Layout”. The sexy layout I have chosen for this series is HumanRadiator.com , the web home of the “blisteringly driven, torridly imaginitive, and feverishly creative” Jim Gosz. For those who don’t know, I am a developer and Jim is a designer for the University of Notre Dame’s Webgroup . Skeletize The first step in my development process is always creating the skeleton. <title>Generic Title</title> My intent for this series is not to spark a debate on whether or not my naming conventions are the best or I use too many divs, etc, etc. Onward! Visualize The goal of standards based development is to separate structure and presentation. Because all presentational graphics are rendered through background images, visualization is indespensible. The important thing to remember is that we have already created our skeleton and we do not want to modify this unless deemed absolutely necessary.
Step-By-Step: Turning A Design Responsive in WordPress, Part 1 I’ve been dying to try out a real responsive design for awhile now on my site, but didn’t feel like recoding the whole thing. Thankfully, I was able to beg bribe get the fantastic Paul Maloney to redesign my site for me, which gives me the perfect excuse to try out all the new bells and whistles. And what better way to learn than to write about it as I go along? This is going to mostly likely be a long series, much longer than my How To Build a WordPress CMS Theme series, so please bear with me. I’m also contemplating packaging this current theme up to sell licenses for a few dollars. This series also assumes you already have a good working knowledge of WordPress, CSS, HTML and basic PHP. Let’s move on. Other Posts In This Series Goals For This New Design The Mockups Here’s what we’ll be coding: Getting Ready Because I’ve already got this current site up and none of the content will be changing, I’m not going to start from a fresh install of WordPress. Let’s Code The Header Let’s add the logo.
Learning Javascript with Object Graphs HEADS UP! This article was written for an older version of node. More up-to-date information may be available elsewhere. One of the secrets to being a super effective JavaScript developer is to truly understand the semantics of the language. References Everywhere A variable in JavaScript is simply a label that references a value in memory somewhere. Local Variables In the following example, we will create four local variables in the top-level scope and point them to some primitive values: variables.js // Let's create some local variables in the top scopevar name = "Tim Caswell";var age = 28;var isProgrammer = true;var likesJavaScript = true;// Test to see if the two variables reference the same valueisProgrammer === likesJavaScript; Notice that the two boolean variables point to the same value in memory. In the code snippet we checked to see if the two references pointed to the same value using === and the result was true. The outer box represents the outermost closure scope. objects.js