– KiaraNews –

Setting Up A PXE Install Server On Ubuntu 9.10

This tutorial shows how to set up a PXE (short for preboot execution environment)
install server with Ubuntu 9.10 (Karmic Koala). A PXE install server
allows your client computers to boot and install a Linux distribution
over the network, without the need of burning Linux iso images onto a
CD/DVD, boot floppy images, etc. This is handy if your client computers
don’t have CD or floppy drives, or if you want to set up multiple
computers at the same time (e.g. in a large enterprise), or simply
because you want to save the money for the CDs/DVDs.

We’re used to thinking of Linux distributions being set in stone. They’re either KDE or Gnome, use a certain kernel and bundle certain applications. But this doesn’t have to be the case. If you find yourself making the same adjustments each time you install a new distribution, it’s worth creating your own customised version. Revisor is a tool that lets you do just this, and in this tutorial, we’ll show you how…

Update: And don’t feel left out if you’re a Windows user. Check out our tutorial about how to build your own Windows. And if you’re a die hard Linux fan, check out our guides to cluster computing in Linux and booting into Linux over a network, Finally, if you want an even flashier way to put together a distro, why not use SUSE’s tools and build it online?

1. Install Fedora

The Revisor tool has been a part of the Fedora distribution for the last few releases. This means you can use any of these versions to create your own Linux distribution, although we’d recommend using the latest – Fedora 10. Installation is very straightforward, and shouldn’t be a problem if you’ve installed any other version of Linux from the last two years.

After installing the operating system, the only other prerequisite is the Revisor application itself. This can be installed by clicking on the Administration menu, selecting ‘Add/Remove software’ and searching for a package called revisor. Click ‘Apply’ and accept the additional packages that need to be installed.

However, there is one step that is vital to success, and that’s updating Fedora to include the very latest patches. You can do this using the Update tool in the Administration menu. This is required because the version of Revisor that was bundled with Fedora 10 was broken, and this won’t create a workable Live CD. You need to either use an older version, or update your 10 installation to use the fixed version of Revisor.

2. Disable security

After installation, Revisor can be found in the Applications | System Tools menu. Click on the icon and enter your root password. If you see an SELinux error, you will need to change a security setting for your system. SELinux is an ultra-tight Linux security system that keeps a close eye on what certain application can and can’t do. Revisor falls out of its remit, so you need to change its level of protection to Permissive.

To do this, load the SELinux Management application from the System | Administration menu and change the Current Enforcing mode to Permissive. When you launch Revisor again, the error will have disappeared.

3. Getting started

From the Revisor main window, click ‘Get Started’. You now have to decide how your new distribution will be booted. You can choose between the standard installation and Live media. The first option is a good choice if you’re planning to install your own version of Fedora on many different machines, for example, in an office. The DVD or CD you create will let you install your own distribution, complete with your own set of applications, without any prompting. If you want to create your own distribution for personal use, then the chances are you’ll find the Live media types more useful.

This creates either a Live CD/DVD or a USB stick installation of your distribution, and you’ll be able to boot into your desktop from either of these installations by simply inserting the media into your PC. As with any Live media, you’ll be able to work on your desktop and use the applications you choose, but your distribution won’t touch the host machine’s hard drive. This is a great solution for Internet cafes or college PCs. We’ve opted for the Optical media type installation, as we find this is the most flexible.

4. Repository information

Click on the ‘Forward’ button to bring up the package repository configuration page. This lists the sources for the packages that are going to be installable for your distribution, as well as the packages for a specific hardware type. These are decided by the option to the right of Configuration Section to Use, and by default this is set to the most generic option – f10-i386. If you want to build your Linux distribution for a different platform, such as Intel 64-bit or PowerPC, then you will need to use a version of Fedora running on that hardware. You can’t build a distribution for an architecture different from the one which Revisor is running on.

Other than system architecture, another option you might want to change is the Destination Directory. This is where the final image for your distribution will be built. Beneath this option, you will see a list of the repositories that are going to be used for pulling the packages you want to include in your distribution. We disabled all but the simple Fedora repository.

5. Package management

Skip the page titled Load Kickstart Data. The step after this is the most important because it’s where you get to choose the packages that are going to be installed on your own distribution. Not only will this selection define what can and can’t be done with your distribution without any further modification, it will also define exactly how big your distribution is going to be. That’s important if you want to fit everything onto CD.

If you do need to keep package size to a minimum, then we’d recommend opting for the XFCE desktop environment, rather than the fatter Gnome or KDE options. These are ideal choices if you want a more powerful environment, but you’ll need a DVD’s worth of capacity to make the distribution useful. You should also install everything listed in the base category, as these packages are needed to create a functional environment. By default, the Package Selection screen only displays groups of packages, rather than individual selections. If you want to install GIMP, for example, you need to switch to the Search view and type ‘gimp’ into the find field. You can then select the package from the results list. You should consider installing a web browser (Firefox), a word processor (OpenOffice.org), a music player (Amarok or Rhythmbox) and a video player (totem).

6. Distro configuration

You now have the opportunity to fine-tune your distribution to your liking. The first page is the most important, as this lets you define your language and keyboard layout, as well as the root password for your Live system. You can ignore the kernel parameters and the authentication page, although you should also add a single default network device on the following page and leave the firewall enabled for safety. You may also want to create a default user account.

When you’re happy with your customisations, click on the ‘Forward’ button. Revisor will calculate dependencies (those packages that are required to make your selection work), and tell you how much space your distribution is going to use. If this is too much for your install medium, you will need to click ‘Back’ and remove some of the packages you’ve selected.

7. Composition

A basic installation of XFCE and GIMP took up around 700MB in our example. Clicking ‘Forward’ one more time will start the compilation process. This consists of 11 separate steps.

 

1. Packages are downloaded
2. The file system is created
3. Packages are installed
4. The system is configured
5. Networking is configured
6. The RAM file system is created
7. The system is relabelled
8. The bootloader menu is installed
9. File systems are unmounted
10. The kernel image is compressed
11. The ISO image is created

 

The speed with which all of this is accomplished is obviously dependent on the number of packages you’ve chosen, the speed of your Internet connection and the capabilities of your machine. But to give you a ballpark figure, our Intel Core 2 Duo 6400@2.13GHz machine took around 90 minutes to build a 700MB-sized distribution.

8. Burn the disc

After the generation of the file has completed, you will find the final ISO located in a ‘/srv/revisor’ subdirectory (as long as you didn’t change that earlier). Our file was hidden in the Live folder, and called Fedora-10-Live-i386.iso. You need to burn this file to a blank CD, and you can do this from within Fedora by right-clicking on the ISO file and selecting ‘Write to disc’. You have to be careful with ISO images, as you don’t want to mistakenly write them as a single file to a new disc. You need to make sure they’re used as an image to copy the contents from the ISO file onto the disc.

9. Give it a spin

When the burning process has finished, you’re ready to launch your freshly squeezed Linux distribution. Insert the disc into the optical drive of your machine and reboot. You will also need to make sure that your system is configured to boot from the optical drive, either through your system BIOS or by a boot-time device selection menu.

This article originally appeared in Issue 279 of PC Plus.

CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.

In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please notice that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as they use jQuery or other JavaScript-library.

[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

Visual Effects and Layout Techniques With CSS3

CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

dynamic PNG shadow position & opacity
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.

Drop-In Modals with CSS3
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.

Newspaper Layouts with Columns and Image Masks
The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

Navigation Menus With CSS 3

Sweet AJAX Tabs With jQuery 1.4 & CSS3
This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4.

Sweet tabbed navigation bar using CSS3
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Building Coverflow With CSS Transforms
I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

CSS3 Hover Tabs without JavaScript
With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.

CSS 3 Transitions and Animations

Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Sliding Vinyl with CSS3
We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

Fun with CSS3 and Mootols
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Star Wars HTML and CSS: A NEW HOPE
There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for tomorrows browsers: the Star Wars Episode IV opening crawl in HTML and CSS.

Fun with 3D CSS and video
Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

CSS3 animations and their jQuery equivalents
This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.

CSS Animations
No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes.

Snowy CSS3 Animation
It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.

What You Need To Know About Behavioral CSS
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

3D Cube using new CSS transformations
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

Playing around with WebKit Animations
I’ve been playing around doing a KeyNote like animation done with CSS and some JS to hook up the necessary events. The animation is kind of like a deck of cards. When you go to the next one the current one zooms in and fades out, symbolizing getting closer to the viewer. The next card then zooms and fades in from the back and to give a fancy effect-

More on 3D CSS Transforms
Various 3D CSS Transforms in an overview.

Gradients, RGBA and HSL with CSS 3

Working With RGBA Colour
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

CSS3 Gradients: No Image Aqua Button
I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images! Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

CSS3 HSL & HSLA
A tutorial on using the HSL & HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.

Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

Using the Shadow-Property in CSS3

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Shadows and CSS3
I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.

Learning New CSS3 Selectors

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.

A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Cleaner Code with CSS3 Selectors
In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code.

The CSS3 :target Pseudo-class And CSS Animations
It’s no secret that I’m always looking for an easy way out using CSS instead of trying to replicate things with convoluted code — there are so many underused techniques that we could be applying to our designs as an enhancement layer! In this experience, I take a brief look into the :target pseudo-class and a very simple CSS animation.

The CSS3 :not() selector
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

IE CSS3 pseudo selectors
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE… Honest…!

CSS3 Galleries

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

An Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?

Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Replacing CSS Hacks with CSS 3

Rounded corner HTML elements using CSS3 in all browsers
This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css.

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

Better Image Preloading with CSS3
Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images.

Saying Goodbye to the overflow: hidden Clearing Hack
I’m now saying goodbye to overflow: hidden and the deciding factor for me is CSS3. Specifically box-shadow. At least in the sense that box-shadow was the first property I noticed being negatively impacted by the use of overflow: hidden. Like the positioned child elements mentioned above, box-shadow can get clipped when the parent (or other ancestor) element has overflow applied. And there are several other things to consider as we move forward using more CSS3. Text-shadow and transform can also potentially be clipped by overflow: hidden.

General articles about CSS 3

How to bring CSS3 features into your design
Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.

Practical Uses of CSS3
In this article I’ll show you some practical uses for CSS3.

11 Classic CSS Techniques Made Simple with CSS3
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Mobile optimised websites using CSS3 Media Queries
A while ago I wrote about using CSS3 Media Queries on my website redesign to provide mobile visitors with an optimised view designed for smaller screens. I thought it might be useful if I went into a bit more detail on how I’m doing this.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

Get the best out of CSS3
Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

Practical Uses of CSS3
“One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.”

A Crash-Course in Advanced CSS3 Effects
This video tutorial reviews a bunch of different neat effects that can be used in Safari 4, Chrome, and for all iPhone development.

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
An extensive overview of CSS3-techniques, tools, articles and resources.

---

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 42 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3

ColorBox is a jQuery Lightbox plugin which is lightweight (9kb) & supports photos, photo groups, slideshow, ajax, inline, and iframed content.

The lightbox has a very nicely designed interface which can be improved or customized with CSS.

ColorBox is unobtrusive, every option is mentioned in the JS & requires no changes to the existing HTML.

For faster displays & slideshows, it preloads background images and, optionally, can preload upcoming images in a photo group.

The plugin comes with a bunch of settings, including transition types-speeds & opacity, for maximum customization.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript

Related posts

• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Wrap Content Around Images: jQSlickWrap
• What You See Is What You Ajax: WaveMaker
• wForms: Easy JavaScript Form Controls

Firefox is now available for  Maemo OS users and owners of the Nokia N900. Mozilla has finally ( yea, long time)  introduced the first official  version of  their Firefox browser for Mobile.

This mobile version includes many of its desktop version browser features like tabbed browsing, Awesome bar, Weave syncing etc.They have also included the most interesting feature the “Addons” which is a reason for the  world domination of its desktop version  over years. There are around 4o addons as of now , but the number is increasing rapidly.You can get them at  Firefox mobile add-on website .

Key features of Firefox Mobile are :

• Awesome Bar
• Weave Sync
• Add-ons
• Location-Aware Browsing
• Tabbed browsing
• Safe Browsing

Download Firefox mobile   by visiting Firefox.com/mobile from your mobile.

Similar Posts:

• Mozilla FirefoxS Automatically Downloads & Installs Latest Version of Firefox
• Download Fennec for Windows Mobile and HTC Touch Pro
• Open Firefox Window Inside Firefox Tab
• Download Portable Mozilla Firefox 3.0.7
• Download Firefox 3.5 Final (Shiretoko)