CMS & E-Commerce | 0 articles | Tech News, Tutorials & Expert Insights

article-image-q-subscription-maintenance-ibm-infosphere

11 Nov 2010

12 min read

Q Subscription Maintenance in IBM Infosphere

11 Nov 2010

0
0
2174

article-image-joomla-15-installing-creating-and-managing-modules

Packt

10 Nov 2010

2 min read

Joomla! 1.5: Installing, Creating, and Managing Modules

Packt

10 Nov 2010

2 min read

Joomla! 1.5 Cookbook Over 60 quick and direct recipes to help you overcome common Joomla! queries. Find quick solutions to common Joomla! problems Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible Look at recipes that cover the portions of Joomla! 1.6 that are brand new Over 60 practical recipes covering a range of site management and core Joomla! activities In this recipe, we'll look at all aspects of a module. How to do it... Installing a Module Login to your Administrator Console. Click Extensions | Install/Uninstall. Once you are in here, you'll have a few options to choose from: There are three methods to install a module, in this section we'll focus on the first method. We'll examine the other two in a moment. Click Browse... and find the file. Click Upload File & Install.Once you successfully installed the module, Joomla! will indicate this with this message: How it works... Module installation is a very similar process to components. The Joomla! universal installer has made it very simple. The installer will write the appropriate settings to the database and will copy the files down to their respective locations. There's more... There comes a time when you no longer need a module. Or you may wish to disable it or even create a new one that didn't exist before. As modules are essentially very lightweight in nature, creating them and placing them is easy. The next few recipes cover these items. Deleting modules There are two methods to delete a module. METHOD 1: Click Extensions | Install/Uninstall. Click Modules. Check the module you wish to delete. Once you check the module(s) you wish to delete, click Uninstall in the upper right-hand side: Once you successfully uninstall the module, Joomla! will indicate this with this message: METHOD 2: Click Extensions | Module Manager. Check the module you wish to delete. Click Delete in the upper right-hand side, the key difference is the message:

0
0
1562

article-image-designing-site-layouts-inkscape

Packt

09 Nov 2010

11 min read

Designing Site Layouts in Inkscape

Packt

09 Nov 2010

11 min read

Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website The first book on the newly released Inkscape version 0.48, with an exclusive focus on web design Comprehensive coverage of all aspects of Inkscape required for web design Incorporate eye-catching designs, patterns, and other visual elements to spice up your web pages Learn how to create your own Inkscape templates in addition to using the built-in ones Written in a simple illustrative manner, which will appeal to web designers and experienced Inkscape users alike Architecting a web site Although as a web designer you will usually be regarded as the "look and feel" person for a web site, you are also a key partner in determining the site architecture. As you design, you often define how the site will be navigated. Is this web site one page or will an end-user "click around" the site to other areas or sub-pages and explore? Where will each page inter-link or link out to other websites? What is the main navigational element: a navigation bar? Where will it reside on all the pages? Is this site content or search driven? All these questions (and many more) require the entire team's involvement (and a client's opinion) to make the appropriate decisions. As the web designer, it is your job to work with all of these elements at a visual level—navigation bars, search fields, buttons, title bars, footers, and more—and fit them into the overall web site design. Web layout—principles and basics Designing for the web and for print are similar in that they have the same principles and goals for an end-viewer: appealing content that works together in the space. Although the principles are basic, they represent guidelines that improve any web page design. Here are the techniques: Proximity or grouping similar information together on a web page. You can get creative in how you group this information by using alignment, icons, and even just white space, but regardless, the technique and principles are the same. Information that belongs together should be together. Alignment is the simple idea of making sure all of the elements line up on the screen. If you have everything left aligned, keep it that way on the page. Use natural alignments within an entire web space when you use more than one graphical element such as photos, graphics, and/or text. Repetition can help unify a web page. Repeating elements such as buttons, shapes (graphical or just placement), or colors can really make an impact and keep the design simple and clean, thus, easier for a viewer to navigate. Contrast can have a huge and favorable impact in web design, as long as it is used effectively. Contrast is achieved with size, colors, direction, shapes, and fonts (mixing modern with old style). Even font weight can help create contrast. Just make sure that all of these elements still work well with the content on the web page itself—not for the sake of contrast. The basic design Before designing the layout in Inkscape, it can help to plan the placement of the main areas of a web page—in essence to help with the design's overall alignment of items and proximity of similar items. For our purposes, we'll create a simple main web page for a small business. This main page will have these areas: Header Footer Sidebar Content Navigation Each web page project is different and you may have to add more page elements to this list or delete some so that the final list of elements fits the needs of the overall design. For the purposes of getting agreement from a team working on this project, a good practice is to create a basic layout showing where each of the areas will be placed on the screen—and is often referred to as the web page wireframe. Typically, wireframes are completed before any graphics are created. The following screenshot illustrates a basic layout or wireframe: This high-level approach is a great start to actually building the page design. It gives us general placements of each area of the design and then we can set up grids and guidelines. Starting a new design project When you open Inkscape, it opens to a new document. However, we want to ensure that we have a page size that is the right size for our web page, so we create a new document based on predefined desktop sizes, which are common web page sizes, as follows: From the main menu select File and then New. A pop-up menu appears showing a number of default page sizes to choose from. Choose a template size based on the browser standards or specifications. Most of the templates in this menu are based on web designs. If you want to view the print media template sizes, go to the main menu and select File and Document Properties and view the Format section. We'll choose desktop_800x600. However, the dimensions should be specified by how your target viewer will view the site, whether it is via a computer, or via a mobile device. Also, sometimes your client or company will specify a specific size your web pages need to be. A new document opens in Inkscape and you are ready to begin. Let's set a few more preferences and then save the file with your project name before we start designing. Using grids and guidelines When designing any space on the web keep the page clean and—as stated in the design principles and techniques—aligned. So let's make the canvas grid viewable on the screen and set up some guidelines based on our wireframes. Viewing the grid With your new document still open on your computer, on the Inkscape main menu select View and then Grid. You'll see that a blue grid will appear across the entire canvas area. We'll use these grids to create basic areas of our layout and then create guides to begin creating our actual layout elements. Making guides Guides are lines on the screen that you will use for aligning i.e. guiding objects. These lines are only seen while you are working in Inkscape and we can set objects to "snap to" them when we are designing. Both of these simple tools (guides and the Snap to feature) will give you automatic alignment for the basic areas of your web page layout—which in turn will help your web page have the best design. To create a guide in any open document, make sure the Select tool is selected and drag from the left side or top of the screen towards your page as shown in the following screenshot. A red line represents the guide until you 'let go' of the guide and place it on the page. Then the line turns blue. You can move the guides after placing them on the page, by using the select tool and clicking and dragging the circle node on the guide. Now let's discuss how to use wireframes and create guides based on those web page layout elements. Creating a new layer When you create documents within Inskcape, you can have layers of objects. This gives great flexibility when creating web layouts. You can move groups of objects on a layer, separate objects by layer, and 'stack', re-ordered, or hide layers. Settings can be set by layer, so you can save drafts or different versions of mockups and keep all of this in one file. The layer you are currently using is called the drawing layer. It is selected in the Layer Dialog and is shown in a darker color. In your open document with viewable grids let's make the layers viewable and create a layer called Basic Layout. To make the Layers Dockable Dialog viewable, from the main menu select Layer and then Layers. On the right side of your screen the Layers Dialog is displayed. You can also press Shift + Ctrl + L on your keyboard to display the Layers Dialogue. In the Layers Dialog, press the + button to create a new layer. In the Layer Name field type the name: Basic Layout and click Add. You will notice the new layer is added above the existing one in the Layers Dialog. Creating basic design areas in Inkscape Here's where we begin to transfer our wireframes into Inkscape so we can start the design process. To start: Use the Rectangle Tool to draw rectangles for each of your layout areas in your basic design. For now, use different shades of gray for each area so you can easily distinguish between them at a glance. To change the fill color of a particular rectangle, left click the rectangle and choose a gray shade for the rectangle. Or drag the gray shade from the color palette onto the rectangle. Use sharp edged (not rounded) rectangles. If you need to change to sharp, click the Make Corners Sharp button in the Tool Controls Bar. Make sure your rectangle shapes do not have an outline or stroke. Use the Shift + Left click keypad shortcut to open the Stroke dialog and choose No Color (the icon with an X) to delete the stroke. Position the rectangles so there are no white spaces in between them. From the main menu choose Object and then Align and Distribute. In the Remove Overlaps section, click the icon. This makes sure that the bounding boxes around each object don't overlap each other and place the objects tangent to each other. Use the Tool Controls Bar W(width): number field to apply a setting of 800.0 px. The X:0.0 and Y:0.0 fields reference the bottom left corner of your page border. Here's roughly what your canvas should look like: Converting shapes to guides Once all of your areas are blocked out on the canvas, we'll need to convert the current rectangles into guides so we can use the guides when creating our web page layout graphics. We can easily keep the Basic Layout Export layer intact; we need to copy all of the rectangles in this layer. On the main menu, select Edit and then Select All (or use the keyboard shortcut keys Ctrl + A). Then select Edit and Duplicate (or use the keyboard shortcut Ctrl + D) to duplicate all of the elements in this layer. Now you are ready to convert these current shapes into guides. First, select all the rectangles in the top (duplicate) layout. Do this by clicking a rectangle and then hold the Shift key on your keypad. Then click/select the next rectangle. When you have all five rectangles selected, from the main menu select Object and then Object to Guide. Your duplicate rectangles will be removed from the canvas and replaced with blue guides. To better see the guides, turn off the grid (from the main menu choose View and Grid). You'll also notice your originally created basic layout areas defined on the screen. We'll use these shapes later on to help export our design into workable graphics for the HTML programmers. Now it is time to save this new document before you start the details of the design. From the main menu select File and then Save As. Choose an appropriate file name for your project and save it. Make sure you save this document in the native Inkscape format of SVG to retain its editable features and layers. Project file management To keep all files for this project in an easy-to-find location, it might make sense to create a project folder on your computer and save this design file within that folder. As you export designs for use within web pages and HTML, you will need a number of files. Using a directory or folder to house all project files makes them easier to find. Summary In this article we took a look at architecting a web site. We discussed design techniques that can make web pages move from good to great. In the next article, Creating a Layout Example in Inkscape, we will see an example to create a web page layout. Further resources on this subject: Creating a Layout Example in Inkscape [Article] Logos in Inkscape [Article] Web Design Principles in Inkscape [Article] Creating Web Templates in Inkscape [Article]

0
0
6324

article-image-creating-layout-example-inkscape

Packt

09 Nov 2010

6 min read

Creating a Layout Example in Inkscape

Packt

09 Nov 2010

6 min read

Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website The first book on the newly released Inkscape version 0.48, with an exclusive focus on web design Comprehensive coverage of all aspects of Inkscape required for web design Incorporate eye-catching designs, patterns, and other visual elements to spice up your web pages Learn how to create your own Inkscape templates in addition to using the built-in ones Written in a simple illustrative manner, which will appeal to web designers and experienced Inkscape users alike Designing the background In Inkscape, since your canvas is white, it looks like your web page might have a white background. It does not, without creating a background image, currently it would be transparent or 0 percent opacity. So we need to start by determining which colors to use for the background. You can get really creative here, as you don't need to use just one color! Create a header background color, one for the main body, and then another for the footer area. Let's start by creating a simple background based on our Basic Layout layer. Making the header background To start, we're going to create a simple header background—a rectangle with a simple divider line and drop shadow. Here are the detailed steps to make this header background: With your new document open and the newly created guides viewable, first lock the Basic Layout layer (click the lock icon) and hide its elements (click the Eye icon). Now create a Background Layer. Draw a rectangle that fills the header and navigational areas. We're going to create only one background for both of these, as the navigation will be in the same color and area as the header. Choose a fill color and no stroke (border). If you decide you want to change either of the option, open the fill and stroke dialog box (from the main menu select File and then Fill and Stroke or the keypad shortcut Shift + Ctrl + F) and adjust colors accordingly. Want to add in a gradient? Click the Gradient icon, and adjust how you want your gradient to appear. By default the Inkscape gradient applies an alpha setting of 0 to the stop gradient, which will be fully transparent. This means, in the above settings, the right side of the gradient would be transparent. Click Edit to change this setting. From the Linear gradient field, choose the Add stop. Change the alpha opacity setting (A) to a solid color—either move the slider to the left side of the screen or change the value to 255. Next change the solid color value. In this example, we used white and changed the R, G, B values to achieve the results. For this example, the gradient goes from a bit darker green on the left to a lighter shade on the right side. Next, let's add a simple drop shadow. From the main menu select Filters, Shadows and Glows, and then Drop Shadow. For this example, the Blur Radius px 10, Opacity, 20% and a vertical offset px of 5 and click Apply. Close the drop shadow box and then save your file. Your header is complete! Now let's add to this to create the main content background. To change the gradient orientation, you can drag the outer two gradient stop nodes indicated by the square and circle handles on the object. You can also add more gradient stops and edit their transparency (A) values and colors to adjust to your liking. Building the main body background For the main part of the web page sample, we're using a white box as a background with a similar drop shadow. Here's how to add this to your Background layer: Draw a rectangle that fills the entire content, main content area. This includes the entire middle portion of your web page, and covers all the 'sections' between the header and the footer in the basic layout. The example above shows white as the fill color and no stroke (border). Let's also put a drop shadow on this box as well. From the main menu select Filters, Shadows and Glows, and then Drop Shadow. Adjust the settings to be the same as the previous drop shadow so they match (Blur Radius px 10, Opacity, 20% and a vertical offset px of 5) and click Apply. Close the drop shadow box and then save your file. The main content background is complete. Lastly, we need to create the footer background. Creating the footer background Creating a footer background is the last step to this process. Very much like the header, we'll follow these steps: Duplicate the header background. Select the header and from the main menu, choose Edit and then Duplicate. Drag the duplicate rectangle down to the footer area of the page and adjust the size so it fits within the footer defined area. Notice, since the object was duplicated all formatting—gradients and drop shadows—were maintained. Save your file. Now that your footer background is complete, so is the entire web page background. Let's move on to details. Designing the header Now that we have the entire background already created, it's time to add details to the header area like a logo and company name. Here are the steps to add in these basic details to our example design: Before any more work is done, it makes sense to 'lock' the background layer. We don't want any items shifting, or any elements being selected accidentally when we are working on other layers. To lock the background layer, click the lock icon in the Background layer dialog box. Create a new layer and name it Logo. To create a new layer, you can use the Shift+Ctrl+N keyboard shortcut. Within the Logo layer, create and/or import the logo and place it on the header background. If you are importing a graphic that has already been created, it's as simple as clicking File and selecting Import. Find the logo file and use the selection tool to place it correctly in the header area. Lock the logo layer, and then create a new layer and name it Title. Within this layer, use the Create and Edit Text tool and type in the business name and then place it on the header background. Save your file. Next up, is to create the Navigation tool bar.

0
0
5272

article-image-joomla-15-creating-menu-items-components

Packt

09 Nov 2010

2 min read

Joomla! 1.5: Creating Menu Items for Components

Packt

09 Nov 2010

2 min read

How to create a menu in Joomla! 1.5 Carrying on with our Agora example, let's create a menu for Agora so our WidgetWorld Users can post threads on the products. How to do it... Log in to your Administrator Console. Click Menus and choose the menu you wish - in this case, use Main Menu - thus Menus | Main Menu. Click New in the upper right-hand corner. The above screenshot is a snippet of the Select Menu Item Type - Yours will vary. In this example, we see several items - we want Agora Forum. Click Agora Forum. Scroll down and fill out the details as you see here (use your own details): This will give the forum menu on the home page a title called WidgetWorld FORUM. Click Save.Now when we visit this from the front of the site we see the completed WidgetWorld FORUM on our menu: How it works... The creation and location for the component is stored in the database. When the Joomla! template renders the page, it will include the component. Thus - when you create a menu item for the component you are giving the user the ability to 'use' the component. There's more... As you gain more experience with Joomla!, you'll want to work with the menu to give it a more custom feel. Let's look at changing the location of menus. Changing the location of the menu You likely noted that the forum in the last example was at the bottom of the Main Menu. Let's change the order. Click Menu | Main Menu - see the Order column. This is the order of display. Type 2 in the Order number box for the WidgetWorld FORUM. Click the Floppy disk <save> icon next to Order - the result should be as you see in the following screenshot: Here are the menus before and after side-by-side: Further resources on this subject: Joomla! 1.5: Installing, Creating, and Managing Modules Installation and Introduction of K2 Content Construction Kit Managing Articles Using the K2 Content Construction Kit Joomla! 1.5: Installing and Managing Components

0
0
954

article-image-joomla-15-installing-and-managing-components

Packt

08 Nov 2010

3 min read

Joomla! 1.5: Installing and Managing Components

Packt

08 Nov 2010

3 min read

Joomla! 1.5 Cookbook Over 60 quick and direct recipes to help you overcome common Joomla! queries. Find quick solutions to common Joomla! problems Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible Look at recipes that cover the portions of Joomla! 1.6 that are brand new Over 60 practical recipes covering a range of site management and core Joomla! activities Read more about this book (For more resources on Joomla!, see here.) Introduction Joomla! is known as a 'framework' and it is extendable, or in other words, can be added to, with small programs known as 'extensions'. A specific class of those is known as modules and components. Modules are small applets. They present information on the site to the user. They can be used in a variety of positions and are typically very simple to use and configure. Components are full-fledged applications and are much more complex. They can only (usually) be displayed within the main area of the page. The typical component requires a menu item to link to it. Each adds to Joomla! some functionality or allows better interaction with users. In this article, we'll explore the installation and assignment of components. Installing and managing components Starting with Joomla! 1.5.0, the installer became "Universal" - or more easily said, you go to the same place to install your extensions, templates, plugins, and so forth. Each of the add-on programs are managed from different menus, but installed from the same place. There is, like most things in Joomla!, more than one way to do something. Installation is no different. Each 'extension' usually starts with a special prefix that helps you identify what it is. Here are two examples from some third-party developers. com_securelive.zip: Installs SECUREJOOMLA which is a third-party security component for Joomla! mod_corephp_weather: Installs the quick and elegant local weather information for your users with the 'corePHP' Weather Module. Getting ready As we're going to be going through a couple of examples, I have downloaded a couple of different programs. You'll need to have on hand a component to install. We'll be installing Agora Forum. You can download a copy of it at no charge from http://www.jvitals.com. How to do it... Installing a component. Login to your Administrator Console. Click Extensions | Install/Uninstall. Once you are in here you'll have a few options to choose from: There are three methods to install, in this section we'll focus on the first method. We'll examine the other two in a moment. Click Browse... and find the file. Typically, your browser will have a default location such as Download in the Documents directory. This will vary by operating system and browser. Click Upload File & Install. In this case, I have uploaded com_agora_3.0.13.zip, which contains the full Agora Forum. Upon a successful Upload File & Install you'll see this. This indicates it has been installed. But what about this?This indicates you have already installed the extension. You'll need to remove it or delete from the database. See Troubleshooting for more information. From here you can manage your component and interact with it. To do so, from the Administrator Console, click Components, and find the component in question.

0
0
1146

article-image-creating-web-templates-inkscape

Packt

04 Nov 2010

9 min read

How to create web templates in Inkscape

Packt

04 Nov 2010

9 min read

Blogs and storefronts have some different elements when designing, however, they also have "pages" within them that use standard items, those that repeat over time. Blogs have posts that all have (at least): headings/titles content in the body options to comment Storefronts have some of the following: lists of items to purchase prices descriptions ratings/comments checkouts or shopping baskets And since these items are common on a number of the website pages, it can use templates for the design. You can create a site based on a template. Here are two quick examples based on each type of site. Designing for blogs Some common parts of many blog site are: the blog header or banner, a sidebar with recent posts (or archives), about section, recent posts, blog roll and/or links section, a main content section that will contain all of the blog posts, then links to their relevant comments, and a footer of the site. Of course you can get as fancy as you would like here, or as simple, but let's design a site based on these simple sections. Here's how it's done: Open Inkscape, and create a new document. From the file menu, select File, New, and Desktop_800x600. When open, create a new layer (Shift + Ctrl + N) and call it Basic Layout. Use the Rectangle Tool to draw rectangles for each of your layout areas in your blog design. For now, use different shades of gray for each area so you can easily distinguish between them at a glance. To change the fill color of a particular rectangle, left click the rectangle and choose a gray shade for the rectangle. Or drag the gray shade from the color palette onto the rectangle. Use sharp edged (not rounded) rectangles. If you need to change to sharp, click the Make Corners Sharp button in the Tool Controls Bar. Make sure your rectangle shapes do not have an outline or stroke. Use the Shift + Left click keypad shortcut to open the Stroke dialog and choose No Color (the icon with an X) to delete the stroke. Position the rectangles so there are no white spaces in-between them. From the main menu choose Object and then Align and Distribute. In the Remove Overlapssection, click the icon. This makes sure that the bounding boxes around each object don't over lap each other and place the objects tangent to each other. Use the Tool Controls Bar W (width): number fi eld to apply a setting of 800.0 px so the Header fills the entire width of the web page. Continue using the steps described to add rectangles for all areas shown below in the rough layout of the blog page we'll be creating. Once all of your areas are blocked out on the canvas, we'll need to convert the current rectangles into guides so we can use the guides when creating our web page layout graphics. We can easily keep the Basic Layout Export layer intact; we need to copy all of the rectangles in this layer. On the main menu, select Edit and then Select All (or use the keyboard shortcut keys Ctrl + A). Then select Edit and Duplicate (or use the keyboard shortcut Ctrl + D) to duplicate all of the elements in this layer. Now you are ready to convert these current shapes into guides. First, select all the rectangles in the top (duplicate) layout. Do this by clicking a rectangle and then holding the Shift key on your keypad. Then click/select the next rectangle. When you have all rectangles selected, from the main menu select Object and then Object to Guide. Your duplicate rectangles will be removed from the canvas and replaced with blue guides. To better see the guides, turn off the grid (from the main menu choose View and Grid) and hide the basic layout layer (click the eye icon). Create a new layer (Shift + Ctrl + N) called Background. Use the rectangle tool to draw a background that fills the entire canvas. Use the control bar, to set the width to 800 and the height to 600. Use the Color Palette to choose a fi ll color of white. In the Status bar, right-click the Stroke setting and select Remove Stroke. Create a new layer (Shift + Ctrl + N) called Header. Click the Create and Edit tool and enter the header title as shown in the following screenshot. Remember to use the control bar to adjust the font type and size. Then, still using the Create and Edit tool, type the sub-title as shown below and, again use the control bar to adjust the font type and size. Create a new layer (Shift + Ctrl + N) called Navigation. Now we need to import the icons that we have created. From the main menu, select File and then Import. Select the SVG file for the icon and then place it on the canvas. Repeat this until you have all five icons on the canvas. Use the rectangle tool to draw the horizontal bars below the title and then below the navigation icons. Use the Color Palette to choose a fill color for the rectangles. For our example, we're using a turquoise color. Select both rectangles, and then in the Status bar, right-click the Stroke setting and select Remove Stroke. With the rectangles still selected open the Align and Distribute dialog (Shift + Ctrl + A) and click the Center on Vertical Axis button. Select all of the icons and then open the Align and Distribute dialog (Shift + Ctrl + A) and click the Distribute Centers Equidistantly Horizontally button. Next we will create the sidebar content. Most of this will be the links to help with navigating to previous posts or static content—content that doesn't change. Create a new layer (Shift + Ctrl + N) called Sidebar. Import a photograph (File and then Import). Place it on the upper left side of the page. Use your guides to place it appropriately on the page. Select the Create and Edit tool, and drag it across your canvas in the area you want to add a block of text to create a textbox. Then start typing placeholder text for an author bio. Use the control bar to adjust font styles and sizes. Again use the guides for left alignment placement. Continue to use the Create and Edit to create any Headings and other text content on the left sidebar. Note that Inkscape does not support bullets or numbers. So any "bullets" will need to be created manually with dashes (-) or importing graphics. Your blog web page should look similar to the following screenshot: Now it is time to create the look of the content portion of the site—where the blog posts will appear. Create a new layer (Shift + Ctrl + N) called Blog Post. Just like with the sidebar text, use the Create and Edit text tool to create text and use the control bar to adjust fonts and sizes. Start with a heading. Then with the Create and Edit text tool selected, drag it across the screen to create a textbox. Add in dummy text or write some placeholder blog post. Again, use the control bar to adjust font and size of the text. Select the heading and the blog post text and align it within your guides. Or use the Align and Distribute dialog (Shift + Ctrl + A) to align items on the page correctly. Now it is time to create the comment, permalink and share this link text. Create a new layer (Shift + Ctrl + N) called Blog Post Footer. Again select the Create and Edit text tool, and type: comment | 0 comments | permalink | share this post. Use the control bar to adjust font and size as needed. Then use the color palette to change the text to red. If desired, use the rectangle tool to draw the horizontal bars to show a break between blog posts. Use the color palette to choose a fill color for the rectangles. For our example, we're using turquoise color. You can save the file, or add additional post examples. Use Steps 37 – 44 to do a second blog post. Your page should now look something like the following example: There will likely also be a sub-page of this content that will show an individual blog post. We can design that page, based on how we want it to look here. Finally, for this page, let's add blog footer with some copyright information to see a completed blog design. Create a new layer (Shift + Ctrl + N) called Footer. Select the horizontal bar under the navigation icon. From the main menu select Edit and then Duplicate. Select the duplicate rectangle and use the guides to place it at the footer area of your web page. Select the Create and Edit text tool and type a copyright attribution statement. In the following example we entered: © 2010 Jane Somebody | All rights reserved. Select both the rectangle in the footer and the copyright text and open the Align and Distribute dialog (Shift + Ctrl + A). Click the Center on Vertical Axis button to center the footer content. As stated in Step 46, there will also likely be a "sub-page" used in a blog to show each individual post as it's unique web address (if you want to link to the one blog post instead of the dynamic stream posts). Here's what this page would look like: As you can see, it looks very much like the main blog page, just without any posts before it, or after it. And in this case, we display the comments on this post directly instead of just making it a link. To modify the existing web page file to match the previous image, you would: Open the existing file in Inkscape. From the main menu select File and then Save a Copy. Give this a new file name. Delete any sample blog posts below the first one. Use the Create and Edit text tool to create the comments, headings, and text. Re-align all text appropriately with guides and the Align and Distribute dialog (Shift + Ctrl + A). Save the file again to save your work.

0
0
4968

article-image-web-design-principles-inkscape

Packt

04 Nov 2010

8 min read

Web Design Principles in Inkscape

Packt

04 Nov 2010

8 min read

Blogs contain entries or posts that can be anything from commentary of life events, videos and pictures to anything else that can be 'posted' online. Blog posts are in reverse-chronological order and allow readers to provide comments and sometime ratings. Sometimes a blog is the entire website, or a blog can be a subset of the entire site. Another critical element of a blog is comments. Readers expect to be able to leave comments about the posts and sometimes rate the content. Thus, the posts themselves and the way they are displayed on a site are important, as it is the main content portion of the site. Clever designs allow for the common elements around the posts to stay the same and consistent, while allowing posts to be updated (and aggregated) frequently. Small business storefronts, or any site that sells a commodity, often has an area that allows you to search through its products and then purchase them through a "shopping cart". These storefronts then need a well designed area to be able to view products, get the specifications, and then add the products to a cart to checkout. It is a process that would be repeated often and used whenever a product is purchased. Web design principles for blogs and storefronts As with general web design there are some guidelines that can help you create effective, clean, and inspired blog and storefront designs. The web design basics should also be taken into account: proximity, alignment, repetition, and contrast—but also here are a few other pointers. Keeping it simple For blogs, there are more widgets and plugins you can add into your blog than you have space for—and more than is ever really needed. Be particular and choosy. Use only those that make sense for the type of reader you want to attract. Otherwise it becomes visual clutter. Choose sidebar features wisely and keep it to a bare minimum. Some basics are: a picture or more information about yourself, how to contact you (if you like), links to other similar blogs links to some of your past posts (favorites, archives, most mentioned), and links to any other websites you contribute to and/or own. When designing storefronts or any websites where your end goal is to have someone purchase an item—don't distract a user from their main goal of purchasing an item. If you add in sidebars with too much distraction, you'll lose the ever-dwindling window of opportunity for a purchase. Keep the important items front and center: a shopping cart, account information, check out. Identifiable You have about a five second window to attract and keep a reader on your website. So, use those seconds wisely and give your viewers everything they need to know about you and your blog or store within that first five seconds. How can you do this? Use your header wisely. A graphical title, tagline that is prominent and expressive can do it all, and quickly. This should be placed in the "header" location of your web design. When blogging this is critical, since most blogs are text-based, most viewers won't take the time to read but a few sentences unless you entice them to stay on your site and read along for a while. For any storefront, if you keep your company name, and a graphical representation of what they might find in your online store, then you too will encourage a casual browser to "click around" and see what else you have for them to browse. This also increases your chances at making a purchase. Making your site navigationally easy Everyone hates a website where they can't figure out "where to go next". So make your links and navigation very easy to find. Top or sidebar locations are the most obvious and natural locations for these, and probably the best locations for any of the key places you want any visitor to your site to see. You can also incorporate other forms of navigation like breadcrumb trails, tree menus, and submenus. Breadcrumbs are visual navigational elements. They show the "trail" of where you are in the site, and how you arrived at your current location. Most often breadcrumb trails are near the top of the web page. An example of breadcrumb trails is seen in the following screenshot from the online Inkscape Manual http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.php: An example of a tree menu is as follows: Tree menus are a bit more complicated. They show the main level web pages and then, when clicked, expand to show the next "tier" of pages. Each level can continue to expand if needed. As seen in the tree menu, main level pages can expand to submenus. This could also be done in a drop down in any horizontal-based navigation as well, like the example shown below: No matter what navigational elements used, the key is to keep them simple and identifiable throughout your web page design and obvious that a user can use these links to get where they need to be on your website. Feeds and social networking links More and more people today are taking advantage of RSS feeds. What are RSS feeds? RSS (Really Simple Syndication) feeds are a way to continually broadcast (or publish) your blog entries. These feeds are in a standardized XML format and pull the metadata tags you assigned when publishing your blog post and display them in "readers" for others to automatically receive. Feed readers allow subscribers (those who want to favor your site), to receive updates as soon as you post any new information, in this case, every time you would release a new blog post. When using an RSS reader, the user needs to enter you blog's feed URL to complete a subscription. Then, the RSS reader checks these subscribed feeds' URLs regularly for new updates and then alerts them when new podcasts are available. So, how do you create an RSS feed for your blog? For a website with hosting where you have your blog as part of an entire site, you can create RSS feeds by using a simple RSS feed provider, such as FeedBurner (www.feedburner.com). These services are free, and once you provide a link to your blog, they do the rest automatically for you. You'll have to set up an account, and then make a note of the blog RSS feed URL (it typically ends in XML). Then on your website, you can offer a link to subscribe to your blog feed. When using a blogging service, there are usually ways to automatically set up RSS feeds to your blog entries. In fact, most blog software has two types of RSS feeds links built in. These can be found in the <head> element of the HTML. There are also many orange 'RSS' buttons that can be easily set up and used within the design itself. Explore your blogging service provider site and set up to determine how best to set up RSS feeds. Either way you set up a feed, make sure you display the RSS feed link prominently. Put it in the sidebar, under each blog post, up near the titles. And give it a distinct link title like: Subscribe to my blog or RSS feed or something similar. RSS feeds are most commonly used for blogs, but as a storefront or online merchandiser, you might set up you own blog announcement area where you would want to announce new products or features of your online store. This would be an easy way for your shoppers to stay tuned to your latest offerings. An alternative to RSS feeds are Atom feeds. Atom stands for Atom Syndication Format which is an XML language used for web feeds. This differs from RSS feeds that focus on post updates; web feeds focus on allowing software programs to check for updates on an entire website. The site owner can use a content management system or other special software that publishes a feed of all the new content that then can be used by a feed reader, another program, or fed into other content management systems. Making checkout easy Design the checkout process of your online store to be as easy as entering brief information and clicking a few buttons. Ideally you need to have the shopping cart, checkout, continue shopping, and my account access available from any page within the site. Then, any potential purchase could also be made from any page on the site as well. Work with the programmers of the shopping cart to create the most effi cient checkout process possible. Give them design options that can allow for the fewest number of screens, but that captures the critical information from the purchaser. Summary In this article we learnt about designing for blogs and online merchant stores. We walked through simple designs for each, defining common elements for each website type and even some sub-level pages to help keep the designs consistent. In the next article, Creating Web templates in Inkscape, we will look at how to create templates so that you can create the design and each part of the web page faster. Further resources on this subject: Logos in Inkscape [Article] Creating Web templates in Inkscape [Article]

0
0
2756

Packt

03 Nov 2010

6 min read

Logos in Inkscape

Packt

03 Nov 2010

6 min read

Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website The first book on the newly released Inkscape version 0.48, with an exclusive focus on web design Comprehensive coverage of all aspects of Inkscape required for web design Incorporate eye-catching designs, patterns, and other visual elements to spice up your web pages Learn how to create your own Inkscape templates in addition to using the built-in ones Written in a simple illustrative manner, which will appeal to web designers and experienced Inkscape users alike Here's an example of a web page with a logo as a major design element: Logos as the cornerstone of the design Logos are the graphical representation or emblem for a company or organization—sometimes even individuals use them to promote instant recognition. They can be a graphic (a combination of symbols or icons), a combination of graphics and text, or graphical forms of text. Why are they important in web design? Since most companies want to be recognized by their logo alone—the logo is the critical piece of the design. It needs prominent placement to work flawlessly with the design. Best practices for creating logos There are a lot of guidelines and principles to the best logo designs. And they start with some simple ideas that have been reworked and discussed intensely since the start of the Internet. But it never hurts to review the best practices. You want your company logos to be: Simple: That's right, you want to keep them clean, simple, neat, and intensely easy to recreate. If you nail this attribute, the others listed below will be easy to achieve. Memorable: Think of all the great company logos. You remember them in your mind's eye very easily right? That's because they are unique and in essence simple. These two attributes together make some of the best company logos today. Timeless: These logos will last many years. This not only saves the company or individual money, but it also increases the memorability of the logo and brand of the company. Versatile: Any logo that can be used in print (color and black and white), digital media, television, any size, letterhead, billboards, and small iconic statements along the bottom of web pages or promotional materials—is a successful logo. You never know where a logo might be placed, especially on the web. You want something that can be used in a prominent location on the company web site itself, but also something that works in a small thumbnail space for social media or cell phone applications. Appropriate: We want the logo to be appropriate for the company it is representing. The right colors, images, and more will go along way in giving the company credibility immediately upon first glance by any consumer or potential client. It can also prove to be a great indication of the services one can expect from the company itself. Seems easy enough right? It is, after some practice and some processes are in place. It never hurts to have a loose process to work with clients to determine their needs and wants in a logo. Some may already have a logo and want to keep parts of the design and revamp others while other clients might be so new they haven't ever had a logo before. As a start, here's a brief process for working with clients and discussing logos. Information gathering There's no better place to start than to open the floor for discussion. Here's just the start of what you can ask or gather from your client in an initial information gathering meeting: Does the client already have a logo? If yes, do they intend to keep that logo to use in the web design? Again if yes, get the source files. Hopefully they are in vector graphic format so they are scalable and usable right away in the web design. Are they interested in a logo redesign? This can be beneficial if they are rebranding themselves as a business or having a 'grand re-opening' of some sort. It can breathe life into a stale business and sometimes garner some new interest. If yes, is it a complete (open to anything) redesign? Or are there certain elements that need to stay? Sometimes color is important, or a certain font or even a certain graphical element needs to stay within the logo. Listen and take notes; it is important to work with the client to try to fulfill their needs as much as possible. If the client is open to a complete redesign, brainstorm a bit with them about their needs and wants. Colors, fonts, graphical ideas. Don't be afraid to bring out some paper and pencils and start sketching some ideas. Sometimes it can be most productive to work through some rough ideas this way to get a feel for what the client likes most and not. Consider it a working session. Try to understand where the client wants to use this logo most prominently. Keeping that in mind you will design something that is versatile and could be used in most mediums; you still want to know where they plan to use it the most. That way, you can tailor the logo as much as possible for that space—especially if you can use more color. What are the primary goals of the company? What is their mission statement? Does the client already have brand guidelines to consider? Creating initial designs After the initial informational session it is your turn to start designing. Take the paper and pencil sketches (if you had any) from the initial meeting and expand on them. In fact, spend a bit more time with your team and flesh out a few more of those ideas in a true brainstorming session. It can be beneficial to start this way first before jumping on to the computer and getting caught in details like typeface and effects. Once you have some solid ideas, bring it over to the computer and start designing. Focus on only three of your best ideas. That way you bring only your best to the client to review and discuss. Much like with the web design process, the logo design process takes a very similar route. You bring design mock ups to your client to review, give feedback, redesign, and then you go back and design some more—all until you get approvals. And then you—being an Inkscape expert—can build and then export the logo in any number of vector formats for use in almost any medium.

0
0
2564

article-image-manually-translating-your-joomla-sites-content-your-desired-language

Packt

28 Oct 2010

5 min read

Manually Translating Your Joomla! Site's Content into Your Desired Language

Packt

28 Oct 2010

5 min read

Joomla! 1.5 Top Extensions Cookbook Over 80 great recipes for taking control of Joomla! Extensions Set up and use the best extensions available for Joomla! Covers extensions for just about every use of Joomla! Packed with recipes to help you get the most of the Joomla! extensions Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible The reader would benefit from the previous article on Joomla! 1.5 Top Extensions for Using Languages. Getting ready... Joom!Fish is the most popular extension for building multilingual Joomla! websites. Download the latest version of Joom!Fish from http://joomlacode.org/gf/download/frsrelease/11315/45280/JoomFish2.0.4.zip, and install it from the Extensions | Install/Uninstall screen. It installs one component, two modules, and several plugins. How to do it... After installation, carry out the following steps: From the Joomla! administration panel, click on Components | Joom!Fish | Control Panel. This shows the Joom!Fish :: The multilingual Content Manager for Joomla! screen. Click on Language Configuration. This shows the Joom!Fish Language Manager screen, and lists all the installed languages. In the Active column, enable the checkboxes to activate the required languages. If you don't see an image for a language, type the image's URL in the Image filename field. Then click the icon displayed in the Config column. This shows the Joom!Fish Language Manager - Translate Configuration screen. In this screen, you can translate some common phrases, for example Offline Message, Site Name, Global Site Meta Description, Global Site Meta Keywords, a help site URL, mail settings, and so on. Type in the translations and click on the Save button in the toolbar. Now click on Translation, select Bengali in the Languages drop-down list, and select Categories in the Content elements drop-down list. This shows the translatable categories. Click on a category name and you should see the Translate screen, with the original text and a textbox to insert your translation. Type your translation in the Translate fields, enable the Published checkbox and then click on the Save button in the toolbar. Follow the same process for translating other categories. When finished translating all categories, select Contents in the Content elements drop-down list on the Translate screen. This shows the list of available articles for translation. Click an article title to translate. This shows the Translate screen with the original text and textboxes for translation. Type the translations in the Translation fields, enable the Published checkbox, and click on the Save button in the toolbar. Similarly, change types in the Content elements drop-down box and translate other content including Modules, Menus, Contacts, Banners, and so on. When finished translating, click on Extensions | Module Manager. This shows the Module Manager screen, listing the installed modules. From the list, click on the Language Selection module. This shows the Module: [Edit] screen: Select Yes in the Published field and select a module position from the Position drop-down list. From the Module Parameters section, in the Appearance of language selector drop-down list select how you want to display the language selection box. You can choose from Drop down of names, Drop down of names with current language flag, ul-list of names, ul-list of names with flag, ul-list of images, and Raw display of images. Preview the site's frontend and you should see the site in the default language, with the language selection box at the specified position. From the language selection module, click another case, in my case Bangla, to show the site content in that language. Visitors to your site can now switch to any active language through this language selection module. Note that the URL of the site now appends language code, for example, http://www.yourjoomlasite.com/index.php?lang=bn, where bn stands for the Bangla language. There's more... Note that in Joom!Fish, you can translate almost anything—articles, modules, menus, sections, categories, and so on. These translations are done through content elements. You can see any component or module by clicking on Components | Joom!Fish | Content Elements. You can download content elements for new extensions from http://extensions.joomla.org/extensions/extension-specific/joomfish-extensions and http://joomlacode.org/gf/project/joomfish/frs/. After downloading content elements, click on the Install button on Content Elements screen. This shows the Joom!Fish::Content Element Installer screen. Click on the Browse button, select the content element file, and then click on the Upload File & Install button. This installs the content and you can translate the content for that particular component or module. Summary This article covered: Manually translating your site's content into your desired language Further resources on this subject: Adding an Event Calendar to your Joomla! Site using JEvents Showing your Google calendar on your Joomla! site using GCalendar Joomla! 1.5 Top Extensions: Adding a Booking System for Events Joomla! 1.5 Top Extensions for Using Languages

0
0
2356

article-image-joomla-15-top-extensions-using-languages

Packt

28 Oct 2010

5 min read

Joomla! 1.5 Top Extensions for Using Languages

Packt

28 Oct 2010

5 min read

Joomla! 1.5 Top Extensions Cookbook Over 80 great recipes for taking control of Joomla! Extensions Set up and use the best extensions available for Joomla! Covers extensions for just about every use of Joomla! Packed with recipes to help you get the most of the Joomla! extensions Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible Introduction One of the greatest features of Joomla! is that you can build a multilingual website. The Joomla! interface can be displayed in many languages. You can simply download the translation pack for the required language and install that to Joomla!. If you don't have a translation pack for your desired language, you can translate it by editing language files directly or by using the translation manager component. The translation manager component allows you to visually translate your site's interface into any language, right from the Joomla! administration area. After completing the translation, you can pack the translation and share it with others, so that they can install the translation in other Joomla! sites. Besides translating the Joomla! interface, you can translate a site's contents into your desired language. The GTranslate component allows you to translate your site's content into 55 languages using Google's translation service. Adding a language to your site Joomla! can build a multilingual site. A site interface can be in multiple languages, using different locales. In this recipe, you will learn how to add an additional language to a Joomla! site. Getting ready... Joomla! translations are available in major languages. First, decide which language you want to add to your site. For example, we want to add French to a Joomla! website. A French translation for Joomla! 1.5 is available to download at the Joomla! Extensions Directory, http://extensions.joomla.org/extensions/languages/translations-for-joomla. Download this extension from http://joomlacode.org/gf/project/french/frs/, and install it from the Extensions | Install/Uninstall screen. How to do it... After installation, follow the steps as shown: From the Joomla! administration panel, click on Extensions | Language Manager. This will show the Language Manager screen, listing the installed languages for the site: Note that the default language for the site is marked with a yellow star in the Default column. To make the newly-installed language, French (Fr), the default language for your site, select the language and click on the Default button in the toolbar. Preview the site's frontend and you will find the site's interface (not content) in French. For example, the Login Form module will look like the following screenshot: For changing the language of the administration panel, in the Language Manager screen click on Administrator, select a language from the list, and set that as the default language for the administrator backend. See also... Adding a translation will only show the Joomla! interfaces in that language. The content of the site is not translated or displayed in the selected language. Also note that we still don't have a mechanism to select our desired language. All of these things can be done using the Joom!Fish extension, which is discussed in the recipe Manually Translating Your Joomla! Site's Content into Your Desired Language. Translating language files for your site Joomla!'s translations are available in most major languages. However, you may like to change the translations and have your own translation in your desired language. In that case, Joomla! provides a mechanism to translate the Joomla! interface language. In this recipe, you will learn how to translate language files for your site from the administration backend. Getting ready... Translation Manager is a popular extension that can help you translate the site's language files right from the administration backend, without opening a text editor. Download this extension from http://joomlacode.org/gf/project/joomla_1_5_tr1/frs/ and install it from the Extensions | Install/Uninstall screen. How to do it... After installation, follow the steps as shown: From the Joomla! administration panel, click on Components | Translation Manager. This will show the Translation Manager screen, listing all of the installed languages for the site and the administration backend. < For changing any language translation, select that language, for example Site [en-GB] English(United Kingdom), and click on the View Files button. This will show the language files for that language. Now select a file, such as, com_banners, and click on the Edit button. This shows the string editing screen for the com_banners.ini file. Change the strings accordingly, and click on the Save button in the toolbar. For adding a new language, click on New in the Translation Manager screen. This will show the Create New Language screen: In the Language Details section, configure the following: Client: Select who will be the client for this translation—Administrator, Installation, or Site. If you want to translate for the administrator interface, select Administrator. We want to translate the site's frontend, therefore we select Site. Language ISO tag: Type the ISO tag for the language. For example, if we want to translate it into Bengali, type ISO code bn-BD. Name: Type language name, that is Bangla. Description: Type a short description for the translation. Legacy Name: Type the traditional name of the language, for example, bn for bn-BD. Language Locales: Type the locale code for the language. Windows Code page: Specify the code page for the language. The default is iso-8859-1. For the Bangla language it will be utf-8. PDF Font: Specify the font family to be used for displaying the PDF in that language. Right-to-Left: Specify Yes if the language is to be read from right to left (for example, Arabic). In the Author Details section, provide the translator's name (probably your name), e-mail address, website URL, version number for the translation, creation date, the copyright holder's name, and URL to the license document. When done, click on the Save button in the toolbar. This saves the language definition and you will see the language name on the Translation Manager screen:

0
0
2082

article-image-tips-and-tricks-joomla-multimedia

Packt

27 Oct 2010

7 min read

Tips and Tricks for Joomla! Multimedia

Packt

27 Oct 2010

7 min read

Joomla! 1.5 Multimedia Build media-rich Joomla! web sites by learning to embed and display Multimedia content Build a livelier Joomla! site by adding videos, audios, images and more to your web content Install, configure, and use popular Multimedia Extensions Make your web site collaborate with external resources such as Twitter, YouTube, Google, and Flickr with the help of Joomla! extensions Follow a step-by-step tutorial to create a feature-packed media-rich Joomla! site Read more about this book (For more resources on Joomla!, see here.) Using another folder name for images in Joomla! Tip: If you do decide to use another folder name for your media directory, it is important to leave the current /images directory on the server as this can often be used by other components. Organizing your content Tip: The organization of your website media content is of utmost importance. Just like with your Joomla! Articles, the correct structure of your files can save you time and frustration down the line when you want to easily find an image or media file. Creating a new directory using Joomla! Media Manager Tip: While creating a new directory using Joomla! Media Manager, a forward slash is already pre-populated, so you only need to enter the name of the directory and nothing else. Uploading and downloading files Tip: FTP programs offer you the most flexibility in managing your website files, but it is important to take care when using FTP programs. By connecting to your directory structure on the web server, you are navigating amongst core Joomla! files. You can download a file in a similar manner, or you might need to double-click on the file to start downloading it. Uploading a new file with Joomla! Media Manager Tip: To upload a new file, make sure you are residing in the correct remote directory for upload. Browse to a file on your computer and simply drag this file over into your web browser. Location of the Joomla! Template CSS files Tip: The Joomla! Template CSS file is usually located in the following directory /templates/yourtemplate/css/template.css. If you are using a pre-built Joomla! Template, you may see multiple CSS files inside the CSS directory. It is important to note that the names of these CSS files may differ between Joomla! Templates, but the template.css file is the standard naming convention for the main CSS file. Adding an image using the Joomla! Article Image button Tip: Images can be easily added to new and existing Joomla! Articles (and Modules) by using the Image button, which is an extended editor plugin that is configured to be turned on with new Joomla! installations. Adjusting your Joomla! template images Tip: The images for a Joomla! Template are generally located in the <Your Joomla Home Folder>/templates/<yourtemplate>/images directory. If you would like to adjust certain images in your template, the easiest way to do this is by viewing the template in your site browser and then making the necessary adjustments to the images. Audio in Joomla! Articles Tip: It is good practice to make a blank .html file and upload it to your new audio directory. This will help stop anyone from being able to directly view all of the files inside your new audio directory. If you cannot create a new .html file, copy an existing Joomla! .html file that resides in the images directory. Backup of site database Tip: Before installing any third-party code into your Joomla! website, make sure you take a backup of your site database and file set before installing extensions. Dealing with complex HTML code Tip: Make sure you don't have your WYSIWYG editor turned on in your Joomla! Articles when entering complex HTML code into your Joomla! Articles. Joomla! Plugin tags Tip: It is worth noting that Joomla! Plugin tags work with and without the WYSIWYG editor turned on. Video podcast for Joomla! Tip: Creating a video podcast for Joomla! will allow you to display and promote your site or products to many users. Due to the nature of a podcast, they do not even have to be on your website to view the video podcasts, if produced correctly. Multimedia enhancements with Shadowbox Tip: Shadowbox is a multi-use media plugin for your Joomla! website, so it may be all that you need for your multimedia requirements. The extension can be downloaded at http://extensions.joomla.org by searching for "Shadow". Inserting custom code into your Joomla! Articles Tip: When starting to insert custom code into your Joomla! Articles, it is important to turn off WYSIWYG editors for your user account. This is because these editors cannot always process the custom HTML code. If the code is not recognized by the editor when loading in the content, it will remove the code altogether. The editor settings can be adjusted in the Global Configuration, or on a user basis via the User Manager. Extension titles in Joomla! Extension Directory (JED) listings Tip: Due to lengthy URLs and the possibility that Joomla! Extension Directory (JED) listings could change at any time, search terms for the following extensions have been included, rather than direct links to the extensions. Performing a search on the JED for the related terms will help you find these extensions easily. The letters after the extension titles denote the following: M = Module C = Component P = Plugin L = Language T = Template Publishing your Twitter tweets in your Joomla! site Tip: The JTweet extension is a module that publishes your Twitter tweets in your Joomla! site. The jTweet module now requires the JB Library plugin in order to work. The JB Library plugin loads the jQuery library automatically into the head of your template. The jQuery library is required for the jTweet module. Mobilebot for Joomla 1.5 Tip: Mobilebot 1.0 for Joomla! 1.5.x can detect visitors using mobile devices and change the Joomla! Template automatically. If you install an extension and do not use it, then remove it. Tip: Besides keeping your Joomla! site organized and uncluttered, it is best to remove code/files/folders from your server that are not being used. Leaving older code lying around can create security vulnerabilities. Keep Joomla! up-to-date. Tip: Joomla! releases are made available for a reason and it is important to stay up-to-date with the software. With a well-structured design to the framework, there are now very few reasons to go near the core codework. Upgrading is usually an easy process, compared to some other web platforms. Remember to take a backup of your site files before performing any upgrade work, and to take regular backups whenever you can. Content parameters Tip: The Article Manager in Joomla! contains a "Global Parameter" setting that sets the default options for your Joomla! Articles. You can override these within each article, but it is good practice to set these globally first, so you don't have to go back and adjust them later on. HTTP status errors Tip: Joomla! uses the /templates/system/error.php file to handle several HTTP status errors, including "403 Forbidden", "404 Not Found", and "500 Internal Server" errors. Uninstalling Extensions for Joomla! 1.5 Tip: Extensions for Joomla! 1.5 can be uninstalled easily by clicking on the Manage menu item on the Extension Manager page. Summary In this article we highlighted some of the tips and tricks which can be of great use while working with Joomla! Multimedia. Further resources on this subject: Joomla! 1.5 Top Extensions Cookbook [Book] Joomla! Social Networking with JomSocial [Book] Joomla! 1.5 JavaScript jQuery [Book]

0
0
1442

article-image-managing-articles-using-k2-content-construction-kit

Packt

27 Oct 2010

8 min read

Managing Articles Using the K2 Content Construction Kit

Packt

27 Oct 2010

8 min read

Joomla! 1.5 Cookbook The reader would benefit from the previous article on Installation and Introduction of K2 Working with items AKA articles The power of K2 is in the idea of categorizing your data, thus making it easier to manage. This will be especially helpful as your site grows in content. Many sites are fully article-based and it is not uncommon to see a site with thousands of articles on it. In this section, we'll tackle some more category-specific recipes. You may have noticed by now that data does not show up as typical articles do in Joomla!. In other words, if you added an item, set it published and featured, it may not be displayed on your site because you have not set up a menu item to your K2 content. K2 will need to be added to your menu structure to display the items (articles) in K2. The first recipe will take into account a site that has been in operation for a while and has K2 added to it. Getting ready This section assumes you have installed K2 and have content on your site. How to do it... Make sure you have a full backup of the database and the files. Log in as the administrator. Open the K2 Dashboard. If you DID NOT import your content in, (see the first recipe), do so now. If you have ALREADY imported your content using the Import Joomla! Content button - DO NOT import again. You run the risk of duplicating all your content. Should this happen, you can go in and delete the duplicate items. This can be a time-consuming process. Open Article Manager | Content | Article Manager. Select all your articles from the Article Manager and unpublish. Open Menu Manager and find your Home menu.Now that we have unpublished content, we'll need to replace the traditional Joomla! content items with K2 content. Opening the Menu Manager and selecting the Home menu item will show this: As you can see under K2 there are several choices to display content on your site. I will choose Item | Item as my display mode. This will show my visitors content in article form. You can pick what works best for you. Now returning to the instructions: After choosing Menu Item Type - click Save. Open K2 Dashboard. Select Items.Here is a partial screenshot of the items in our sample site. As you can see, it now starts to take on a bit more traditional Joomla! look. I can choose featured articles, publish them, or note. Set the order they show up in, the category they belong to and more. When you import content, from Joomla!, the articles retain their identity from Section and Category configuration. For example, the Joomla! Community Portal listed in the preceding screenshot as belonging to the category Latest has a parent category of News. When you imported the content, sections became the new K2 top-level categories. All existing categories become subcategories of the new top level categories. As we added K2 to a working site with sections and category data already in place, I want to make sure they inherit from our master category. In our sample site, we see the following screen when we open the K2 categories from the K2 Dashboard: We instruct the new top-level categories to follow the master category as the model for the rest. The following instructions will show you how. Open K2 Dashboard. Click Categories. Open your imported top-level categories - for this site it's About Joomla! and News. Each of these has sub-categories. Click About Joomla! (or your equivalent). Change the Inherit parameter options from category to MASTER CATEGORY USE AS INHERIT ONLY. Make sure the Parent category stays set to –None--. Click Save.When done, it will look like this: Extra fields Did you notice the Associated "Extra Fields Group" is set to - None - ? You can change this parent category group to use an extra fields group and still keep the master category parameters. Each of the subcategories will inherit from the master category. By doing this, you can still control all the categories parameters simply by changing the master category. How it works... The category system as described here for K2 is a giant access-control system allowing you the flexibility to structure your site and data as you need. It also offers a means to control the 'look and feel' of the articles from a central place. When you import a Joomla! site into K2 you bring all the sections, content, articles, and other associated parts into it. Sections become new parent categories and the old categories become subcategories. This can be a bit confusing at first. One suggestion is to write out on paper what you want the site to look like, and then lay out your categories. You might find that the structure you had can be more user-friendly using K2 and you will want to change. This category system offers you nearly unlimited means to nest articles. In essence, a category can have unlimited categories under it. There is a limit to this in terms of management, but you get the idea. There's more... Using tags in K2 will give you the ability to improve your Search Engine Optimization or SEO on your site. Additionally, the use of tags will allow you to give your users the ability to follow the tags to other articles. In this section we'll review how to use Tags in K2. Tags are keywords or terms that are assigned to your content. This enables your visitors to quickly locate what they need by one word descriptions. Using Tags in K2 Tags can be created before an article is written or on the fly. I prefer on the fly as it will match the article. You can think of a tag almost as a dynamic index. Every time a tag is added to an article, it will show up in the K2 Tag Cloud module if you are using it. The more a single tag, such as Joomla!, is used in the content, the larger it appears in the K2 Cloud module. K2 Tag Clouds can benefit your search engine optimization and a navigational element. Here is an example of our K2 Tag Cloud: This is an image of our K2 Tag Cloud module. The more often a tag is added to an article, the larger it appears. Setting up your site for Tag Clouds K2 installs the K2 Tools module by default. The module has many functions, but for our purposes here, we'll use the Tag module. Log in to the Administrator Console of Joomla!. Click Extensions | Module Manager. Click New to create a new module. Find this for your new item: Once in there, give it a name and select its module location. On the right under Parameters, pull down the Select module functionality drop-down list as follows: Select Tag Cloud as shown in the preceding screenshot. Leave all the root categories set for none - this will enable K2 to pull in all the categories. Click Save. This particular module, has many functions and you can set up a new module to use any of the great tools built into it. Next you will want to add some tags to articles. As I said at the beginning of this article, you have two different ways to do this. You may add them to the article or you may add them to the Tag Manager. Let's quickly review the latter method. Open K2 Dashboard. Click Tags. You may see a list of tags there. If you wish to delete them, simply check the ones you want to remove and click Delete in the upper right-hand corner. Otherwise just leave them. Click New which will open the Details box. Fill in the tag; make sure it's published and click Save. This is an example of a filled out tag box (before save). Adding Tags on the fly This model allows you to tag the content as soon as you create it. If there are tags available, already such as those from the previous step, then you can add them. Open K2 Dashboard. Click Items. Select an item or click New to create an item. The field Tags will be blank, you can start to type in a field, such as K2 Content Creation Kit (as shown in the preceding screenshot). If it exists, then it will be available to be able to click and add. If there are no tags available, then simply type one in and click Return or add a comma. Here is an example item with tags. Here we have four tags, Security x, PHP x, Joomla x, K2 Content Creation Kit x. Any item (article) that has these tags will be easily found by both users and search bots. Let's see how our Tag Cloud looks now: You probably notice the changes, especially the addition of the new tag K2 Content Creation Kit. Clicking on that tag will yield two articles, and clicking on the Security tag yields three. Search engines can follow these links to better categorize your site. Users can get a sense of what is more important in terms of content from your site and it helps them navigate. Closing on this, I strongly suggest you spend time picking tags that are important on your site and is relevant to the purpose of it.

0
0
3069

article-image-installation-and-introduction-k2-content-construction-kit

Packt

27 Oct 2010

5 min read

Installation and Introduction of K2 Content Construction Kit

Packt

27 Oct 2010

5 min read

Joomla! 1.5 Cookbook Over 60 quick and direct recipes to help you overcome common Joomla! queries. Find quick solutions to common Joomla! problems Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible Look at recipes that cover the portions of Joomla! 1.6 that are brand new Over 60 practical recipes covering a range of site management and core Joomla! activities Generally speaking, a basic article is a simple matter to create and manage. When a site gets large with a lot of articles, it can be unwieldy. This need is filled by a Content Construction Kit or CCK. Several good CCK's exist in the Joomlasphere and each has its own unique means to accomplish the task of content management and creation. For our purposes we'll look at the CCK known as K2. K2 provides you an integrated solution that features rich content forms - extending the basic article. This is an article with additional fields that can contain the article images, videos, image galleries or even attachments. Add nested-level categories and tags to that, and you have a very powerful system. In this article we'll look at the installation and use of K2. Installation and introduction of K2 In this recipe you will go through the steps to install and configure K2 in your Joomla! site. Getting ready You will want to download K2 from the following URL: http://getk2.org Additionally, you may want to have a development site to install and learn this on rather than your production site. How to do it... Installation of K2 works like any other Joomla! extension. Be sure and backup your files and database before beginning - this way you can easily roll back should something go wrong. Download K2. Log in to your Joomla! site as the Super Administrator. Click Extensions | Install / Uninstall. Browse, locate, and upload the K2 package. Install.Installation of K2 should be complete. If you are not running the Joom!Fish language translation extension on your site, you will see an informational message stating that K2 did not install the content elements. Joom!Fish is used to translate your site into other languages. If you have no plans on using this, then ignore the message. Now when you go to Components, you'll see the K2 icon. Clicking it will show you this screen: The next step is to bring all of our current content (articles, media, and so on) into K2. While in the K2 Dashboard, look at the upper right-hand side for the Import Joomla! content button. You will see this message (or a similar one depending on your K2 version): Click Ok to start the process. Once complete, you'll see all your content now shows up in the K2 Items menu. Here are the sample Joomla! data items that have been imported. Keep in mind that all of your pre-existing Joomla! sections, categories, and articles are still in the core Joomla! areas. All these items are simply duplicated in K2 now. If you have existing content take a few minutes and go into the Article Manager of Joomla! and unpublish them. You may need to update menu links to your new K2 categories and articles as necessary. Additionally, you'll note that the main Joomla! administrator page has been updated to include the K2 dashboard. Further configuration of K2 K2 has a powerful, nested-category system. It offers you the ability to configure in detail, each category, allowing any category to inherit from another category's parameter settings. Let's use this feature of K2 to configure a master category that will allow other categories to inherit the settings. This means you can change one category and affect them all at the same time – which is quite time-saving. A word of caution, this could impact your search engine-friendly URLs depending on the extension you use to create them. Open the K2 Dashboard. Select Categories. Click New in the upper right-hand side. Fill in the following details: Title is the title of your category Title Alias is the internal reference Parent category should be left as –None-- - all other categories will inherit from this category Inherit parameter options from category should be left as –None-- Associated "Extra Fields" Group should be left as None. Published is Yes Access Level is Public I have filled mine out and the following screenshot is the completed Details section. For now, this is all you'll need to do. Later recipes will utilize this: This is my master category that all other categories will seek out their parameters from. The reason for this will be clear shortly. When you have finished, save the category. How it works... K2 is nearly a content management system, like Joomla!, in itself. It actually substitutes many of the native Joomla! functions like article management, section, and category as well as providing some access control functions. When using K2, you will no longer use many of the native Joomla! menus, but rather you will use the K2 version of the tools. If you install this component, it has the ability to pull in all the data (users, articles) into K2 through the import feature. There's more... In the previous recipe, we set up a master category; now we'll configure it here.

0
0
2563

article-image-joomla-15-top-extensions-adding-booking-system-events

Packt

25 Oct 2010

4 min read

Joomla! 1.5 Top Extensions: Adding a Booking System for Events

Packt

25 Oct 2010

4 min read

Joomla! 1.5 Top Extensions Cookbook Over 80 great recipes for taking control of Joomla! Extensions Set up and use the best extensions available for Joomla! Covers extensions for just about every use of Joomla! Packed with recipes to help you get the most of the Joomla! extensions Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible Getting ready... The Seminar for Joomla! component allows visitors to register for events. Download this component from http://seminar.vollmar.ws/downloads/com_Seminar_V1.3.0.zip, and install it from the Extensions | Install/Uninstall screen in the Joomla! administration panel. How to do it... Once installed, follow these steps to allow registration for events: From the Joomla! administration panel, select Components | Seminar. It shows the Events screen, listing the available events. To create event categories, click on Categories and then click on New. This shows you the Category: [New] screen. On the Category: [New] screen, type in the Title and Alias, and select Yes in the Published radio box. Then select the Access Level, Image, and Image Position. Enter a description for the category. Click on Save in the toolbar. Repeat this step to add as many categories as you need. Click on Events and then click on New. It will show you the New Event screen. Type the Title of the event. Then select Begin, End, Closing Date, and the time of the event. Select Yes in the Display field if you want to show this information. Type a brief description of the event, and the place of the event. Select an organizer from the Organiser drop-down list. Then type the maximum number of participants in the Max. Particip. field. Also, select what to do when the number of participants exceeds this number. When this is done, click on Additional Settings. This shows you the Additional Settings screen. In the Additional Settings section, you can add an additional description. In the Description box, add descriptions to particular groups of visitors. The syntax to add messages for different groups is shown above the text box. Select an image for the event overview. Then type the tutor's name, target group, and the fees per person. Then click on General Input Fields. This will show the following screen: In the General Input Fields section, you can include additional fields. To add additional fields, follow the syntax provided. When this is done, click on Files. This shows the following screen for file upload. Click on the Browse button and select the file to upload. Type a description of the file and select the group that can view it. When this is done, click on the Save button in the toolbar. Select Menus | Main Menu, and then click on New. This will show you the Menu Item: [New] wizard. In the Select Menu Item Type section, select Seminar and provide a title for the menu item on the next screen. Then save the menu item. Preview the site's frontend, as a user logged in to the frontend, and click on the menu item for the seminar. This will display the following screen showing your added event. The overview of the event shows the overview image, event title, category, reservation information, and an indicator for the booking status. Click on the event title, it will show you the event details, as shown in the following screenshot: Select the spaces to be booked. Then type your Name and Email address and click on the Book button. This books your space for the event. You can view your booking by clicking the My Bookings tab, as shown in the following screenshot. Note that your participation status is indicated through a color-coded indicator. There's more... Most of the features of Seminar for the Joomla! component can be configured from the Settings screen. For example, you can configure who can book events, what happens when booking exceeds the number of seats, who can rate the events from the frontend, which folder will store images of the events, the maximum file upload size, the file extensions allowed for uploads, and so on. Summary This article showed you how to allow visitors to register for an event. Further resources on this subject: Adding an Event Calendar to your Joomla! Site using JEvents Showing your Google calendar on your Joomla! site using GCalendar Joomla! 1.5 Top Extensions for Using Languages Manually Translating Your Joomla! Site's Content into Your Desired Language

0
0
1694

How-To Tutorials - CMS & E-Commerce

Q Subscription Maintenance in IBM Infosphere

Joomla! 1.5: Installing, Creating, and Managing Modules

Designing Site Layouts in Inkscape

Creating a Layout Example in Inkscape

Joomla! 1.5: Creating Menu Items for Components

Joomla! 1.5: Installing and Managing Components

How to create web templates in Inkscape

Web Design Principles in Inkscape

Logos in Inkscape

Manually Translating Your Joomla! Site's Content into Your Desired Language

Trending Topics

Joomla! 1.5 Top Extensions for Using Languages

Tips and Tricks for Joomla! Multimedia

Managing Articles Using the K2 Content Construction Kit

Installation and Introduction of K2 Content Construction Kit

Joomla! 1.5 Top Extensions: Adding a Booking System for Events