CSS Sprites Por el 24 de abril de 2009 en: Sin categoría Los CSS Sprites es una sencilla y efectiva técnica de CSS que nos permite ahorrar ancho de banda. Realmente los sprites son imágenes que contienen varias imágenes y se muestran gracias a diversas técnicas que nos permiten recortarlas. Inicialmente se utilizó en el desarrollo de videojuegos debido a su versatilidad a la hora de realizar animaciones, hoy también nos lo encontramos como una técnica CSS que nos permite ahorrarnos ancho de banda. Gracias a esta técnica podemos reducir considerablemente el peso de nuestra aplicación web y lo que es más importante el número de peticiones HTTP, estas dos ventajas nos permiten reducir el tiempo de carga de nuestra aplicación web y reducir la carga en el servidor. ¿Cómo aplicar esta técnica? Pequeño tutorial para comenzar a utilizar esta técnica. ¿Cuándo utilizar esta técnica? Ejemplos prácticos Estos dos ejemplos vienen muy bien detallados en WebSiteOptimization. Generar aumáticamente un CSS Sprite
Minimalistic Slideshow Gallery with jQuery In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will […] View demoDownload source In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. So, let’s start! The Markup The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs): The alt attribute of the thumbnails will contain the path the full view image. The CSS First, we will define the style for the main wrapper: By setting the loading GIF to be the background image we are performing a small trick: while we are waiting for the next picture to show, our wrapper will be empty and show the loader. The style for each icon:
scie.nti.st » Hosting Git repositories, The Easy (and Secure) Way Update (12-12-2010): For additional features not present in gitosis, check out gitolite. Update (08-10-2008): For topics not covered here, I encourage everyone to read the gitosis README, bundled with the distribution. There is also an example.conf configuration file that illustrates more features than I have covered here. I have been asked more and more these days, “How do I host a Git repository?” Usually it is assumed that some access control beyond simply read-only is involved (some users have commit rights). The rest of this article will be a tutorial showing you how to host and manage Git repositories with access control, easily and safely. Assumptions: I take my examples from a Ubuntu Linux server. Enough talk, let’s get down and dirty. Install gitosis gitosis is a tool for hosting git repositories (I’m repeating myself for those who skim :) The first thing to do is grab a copy of gitosis and install it on your server: Notice that gitosis is extremely light-weight. or (Yes, two times)
Tables 17.1 Introduction to tables This chapter defines the processing model for tables in CSS. Part of this processing model is the layout. For the layout, this chapter introduces two algorithms; the first, the fixed table layout algorithm, is well-defined, but the second, the automatic table layout algorithm, is not fully defined by this specification. For the automatic table layout algorithm, some widely deployed implementations have achieved relatively close interoperability. Table layout can be used to represent tabular relationships between data. In a visual medium, CSS tables can also be used to achieve specific layouts. Authors may specify the visual formatting of a table as a rectangular grid of cells. Example(s): Here is a simple three-row, three-column table described in HTML 4: <TABLE><CAPTION>This is a simple 3x3 table</CAPTION><TR id="row1"><TH>Header 1 <TD>Cell 1 <TD>Cell 2 <TR id="row2"><TH>Header 2 <TD>Cell 3 <TD>Cell 4 <TR id="row3"><TH>Header 3 <TD>Cell 5 <TD>Cell 6 </TABLE> top
[ws] Fast Rollovers Without Preload | Rychlé rollovery bez načít English-only | Jenom česky | Bilingual/Dvojjazyčně When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Let's have a simple example. Fig. 1: Three states together in one image Usually, in CSS rollovers, we use background images in this way: Když vytváříme dynamická obrázková tlačítka (rollovery), musí se obvykle do prohlížeče načíst dva, tři i více obrázků (pro základní stav, pro :hover, obrázek pro :active atd.). Vezměme si jednoduchý příklad. Obr. 1: Tři stavy současně v jednom obrázku V CSS rolloverech používáme obrázky na pozadí obvykle nějak takto: Using one common picture, we don't need to change the background image. Když ale použijeme jeden společný obrázek, měnit obrázek na pozadí nemusíme. That's all. A to je celé. Simple yet strong update comes from Marek Blaha (Czech author). Check the source code of the Example 2 to see the solution at work.
GraphicsMagick Image Processing System Configuring SSH (Secure Shell) on HostGator One of the great things about HostGator is that it offers SSH (Secure Shell) on its shared hosting plans. For most users, SSH may seem unnecessary, but having access to it is extremely useful. If you are concerned about security, for example, SSH can be used along with FTP to enable secure file transfers via SFTP (secure file transfer protocol) or SCP (secure copy protocol). It also prevents unauthorized access to your server and files because all login credentials are encrypted. (Logging in also requires a person to have a private key.) But probably the most common use for SSH is the command-line interface which enables you to easily connect to your server and send commands. Alright, so how do you set it up on HostGator? Setting up SSH on HostGator 1. In the past, HostGator required a copy of a valid photoID in order to enable SSH. use the handy SSH request formrequest it by emailing HostGator supportopen a HostGator live chat window and have an operator set it up 2. Wrong Port Number.
Step by step CSS float tutorial Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons". Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9.
Ultimate Web 2.0 Gradients - FREE Download Gradients are one of the most important aspects to be considered while designing a Web 2.0 Site. Even a simple button is of a gradient. So I decided to make some cool set of Gradients and put them together in an Adobe Photoshop Gradient file (.grd). These gradients are fully scalable, what i mean here is its not an image or so.. just create a shape and apply the gradient - As simple as that. You could create Logos, Backgrounds, Tabs, Buttons, Wallpapers, Toolbars and all sorts of stuff... UPDATE 03 May 2007 : v3 Release with around 130 Web 2.0 Gradients.UPDATE 16 Apr 2007 : v2 Release with some more gradients. Download ( Please don't directly link to the file... thank you ) Here is how you should be importing the .GRD file into Photoshop.
Website Performance | CSS Sprite Generator Mod_Rewrite Variables Cheatsheet We've figured out what mod_rewrite variables look like so we can create rewrite rules and condition patterns based on the actual value. This cheatsheet is where we'll lay them all out for quick reference. This cheatsheet changed my life. Here the focus is on identifying mod_rewrite variables and defining the limits of the module by checking the mod_rewrite source code. List of Mod_Rewrite Variables ^ HTTP Variables SSL Variables Variable Values and Examples ^ RewriteCond %{API_VERSION} ^(.*)$ RewriteRule .* AUTH_TYPE: Digest RewriteRule .* - [E=IN_AUTH_TYPE:%{AUTH_TYPE}] RequestHeader set AUTH_TYPE "%{IN_AUTH_TYPE}e" CACHE_CONTROL: max-age=0 CONNECTION: keep-alive CONTENT_LENGTH: (null) CONTENT_TYPE: (null) DOCUMENT_ROOT: /web/webroot/askapache.com RewriteCond %{DOCUMENT_ROOT}/cache%{REQUEST_URI}/index.html -f RewriteRule . HOST: www.askapache.com HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 RewriteCond %{HTTP_COOKIE} ^. IS_SUBREQ: false pattern