T-shirt vector templateJune, 2009
24
Jun 09
Ultima versión de Camino 1.6.8
 |
Camino
Diseñado exclusivamente para Mac OSX, camino construido sobre Mozilla rendering engine se convierte en unos de los exploradores más rápidos disponibles. |
Blogged with the Flock Browser
23
Jun 09
3d graffiti ‘Complex’
I was inspired by twisted metal and spilled fuel on the road – the force behind the crash was the type of energy that I always want to inject into my 3d graff work.
23
Jun 09
Shit We’re Diggin’: Rosemarie Fiore’s Firework Drawings
Rosemarie Fiore’s firework drawings are created by containing and controlling firework explosions. She explains:
“I bomb blank sheets of paper with different fireworks including color smoke bombs, jumping jacks, monster balls, fountains, magic whips, spinning carnations, ground blooms, rings of fire, and lasers. As I work, I create imagery by controlling the chaotic nature of the explosions in upside-down containers. When the paper becomes saturated in color, dark and burned, I take it back to my studio and collage blank paper circles onto the image to establish new planes and open up the composition. I then continue to bomb the pieces. These actions are repeated a number of times. The final works contain many layers of collaged explosions and are thick and heavy.”
We love ‘em. You can see more photos and work here.
23
Jun 09
Exporta datos de Google Analytics a Excel fácilmente, BaluArt.net
Google Analytics ofrece varias maneras de ver los datos y hacer comparaciones, lo cual es excelente. Pero, si uno desea una vista única completa o quiere hacer comparaciones con otros datos fuente, estamos algo limitados.
Excellent Analytics es un plug-in de Excel que nos permite importar los datos de estadísticas web de Google analitycs dentro de una hoja de cálculo de Excel.
Así podremos realizar consultas fácilmente con todas las dimensiones y métricas disponibles o aplicar filtros para crear consultas avanzadas.
El plugin es open source y el código fuente podemos descargarlo desde aquí.
Enlace | Excellent Analytics
Vía | webresourcesdepot
23
Jun 09
El slider de Eric Johansson, portfolio personal del artista
Genial el diseño de este site, la navegación novedosa mezclando ilustración en 2d con efectos de javascript
http://www.ericj.se/
Blogged with the Flock Browser
22
Jun 09
Color Sheme Designer
http://colorschemedesigner.com/
Un esquema de colores para diseñadores
22
Jun 09
Si la crisis fuera oro, tu serias mi tesoro
Crisis económica de 2008-2009
Muchos autores consideran que no se trata de una verdadera crisis, sino que más bien es una oportunidad de crecer y tener nuevas ideas dado que el término crisis carece de definición técnica precisa pero está vinculado a una profunda recesión; ésta, a su vez, se define como dos trimestres consecutivos de decrecimiento económico
22
Jun 09
10 Reasons Why You Should Be Using Firebug
Firebug is one of the most popular tools used by web developers. In this article, we’ll take a closer look at ten of its most attractive features.
1. Console
The first thing you’re going to notice when opening Firebug (either from the
status bar or using the ctrl+F12 key combination) will be the Console panel. After a quick look, one might think that it is an alternate version of the Error Console
(Ctrl+Shift+J). Common features between the two are:
- logging of errors, warnings and notices
- ability to run Javascript code
But Firebug extends the Firefox functionality, so it can do
much more, such as:
- logging errors for Javascript, CSS, XML, XMLHttpRequest (AJAX) and
Chrome (Firefox internals)
- run Javascript code upon the current webpage
- additional Javascript object is put at disposal (console)
Let’s look over some examples built upon the console object. Imagine running the
following HTML file.
<html>
<head>
<script type="text/javascript">
console.time(1);
console.log('the script section has started executing');
console.warn('warning message');
console.error('error message');
console.info('info message');
console.log(
'finishing script execution\n',
'execution took:'
);
console.timeEnd(1);
</script>
</head>
</html>
This will generate the following result.
2. HTML
The second panel, and the one in which I’m sure you’re going to spend a lot
of time, is split among several sections which we will review below.
- This button is equivalent to the “Inspect Element” in a webpage
context menu. Apart from being helpful with quickly picking elements in page,
it also outlines the currently selected element.
- In this section, we have the hierarchy of the currently
selected element and the ability to perform a series of actions (on every
individual component of the hierarchy), like:
- copying inner HTML
- creating XPath expressions
- attaching event observer (and logging in the Console panel)
- deleting element
- editing element and child nodes
- moving the element in the DOM tab for inspection
- The main window of the panel; useful for traversing through the
HTML document, quick modification of code and spotting broken code (like
closing a div too early). The contextual menu offers the same set of functionality
like section nr. 2
- In this section the computed style of the current page or element are
displayed. The ability to actively modify styles and inspect CSS
inheritance are its most valuable features.
- Through this section one can easily examine the box model of
an element: content size, padding, offsets, margins and borders.
- The DOM section upon access generates a list with all, of the currently
selected elements, methods and properties.
3. CSS
The main difference between this panel and the Style section under HTML is
that here you can work on uncomputed styles. I’ll outline and number the sections
(and features this time).
- If the page on which we are working contains multiple stylesheets, then we will be able to select the desired stylesheet.
- The main region where the CSS code is displayed.
- Easily modify CSS properties.
- Easily dissable CSS rules.
4. Script
Sometimes, when writing Javascript code, you have to get your hands
dirty. Most of the time, you’ll find yourself working with the
Console panel; only in extreme conditions will that make you jump to the Script
panel. Given those extreme conditions (which are bound to happen), let’s review this panel, and start familiarizing ourselves with it.
- Dropdown button from which we can select the desired script file.
- Debugging functions: continue, step in, step over
and step out. They only kick in when code execution reaches a
breakpoint.
- Main window. Here we set (and remove) breakpoints, as well as inspect
Javascript code.
- Similar to the DOM panel, the Watch section prints out object methods
and parameters for currently debugging code.
- Shows the stackment of functions in real time.
- List of currently active breakpoints. Only breakpoint removal can be done
from here.
5. DOM
The same as HTML->DOM. Given the fact that nothing differs from what was mentioned before, we’ll skip to the next section.
6. Net
Curious how long your page took to load? Or do you
want to know which request takes the most time to complete? Thankfully, this, too, can be accomplished via the Net panel.
- Requests can be filtered according to their type.
- Every request is shown in this section. At the end of the requests list
we see a summary of them: number of requests, size, how much was cached
already and total time they took to complete.
- More details can be revealed, as: HTTP headers, response and cache (same
as response)
Performance Testing
Need to test the performance of a specific function or loop? Use the Firebug’s “timer” feature.
function TimeTracker(){
console.time("MyTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");
}
Three step. We begin by calling “console.time” and pass in a unique key. Next, we insert our code. Finally, we call console.timeEnd, and once again, pass in our unique key.
7. Reference
This is an additional panel provided by CodeBurner, a Firebug
add-on. As its name states, through this panel you’ll have quick access to your HTML
and CSS code. Even if the panel is self-explanatory, we will still look over
it.
- The searching and filtering section.
- Here the results stack up, in our case there is only one result.
- Compatibility panel for the latest major browser versions. Yes, Chrome is
not in this list, but Chrome uses the same engine as Safari, namely Webkit, so if
it’s Safari compatible it will work in Chrome as well.
- And if the information displayed in this panel isn’t enough, you can find more info by accessing this link, like: examples, compatibility in more browser
versions, description, etc.
8. PixelPerfect
If you’ve ever done PSD slicing, you know how time consuming the measurement
of spacing in between composition elements can be. That’s where PixelPerfect proves it’s
power. Having this add-on in your toolbox will help you perform the perfect slice.
- With this button we can add multiple overlay images for the current page.
- Overlays list, from here we apply or delete the overlay.
- Overlay settings section.
9. YSlow
Another Firebug add-on developed by Yahoo!, which can suggest speed improvements
based on a series of tests performed.
Through YSlow, we can grade our website’s overall performance. We can easily
spot issues which can be improved, and a series of recommendations are available
as well.
Apart from the pie charted statistics, we also have JSLint and Smush.it at our disposal.
10. FirePHP
Our last, but not least, important Firebug component is FirePHP. With this
add-on, we can transparently send information (warnings, errors, logging, info)
to the Console panel from our PHP code. Example usage from FirePHP’s website:
<?php
FB::log('Log message');
FB::info('Info message');
FB::warn('Warn message');
FB::error('Error message');
?>
Closing
I hope this small list of Firebug panels/add-on will make your life as a
web person easier — as it did to me. In the end, we all know that
bugs are bound to happen, so there’s no excuse for not being prepared.
Follow these links to download the add-ons:
Blogged with the Flock Browser
