Xavi Esteve » Computers

Compare files with Dreamweaver in Mac OSX – Step by step guide

Xavi — Tue, 27 Mar 2012 13:34:46 +0000

It is very helpful to be able to compare different code files to see their changes, specially when working in a team. Adobe Dreamweaver is my main choice when developing since I like the color highlighting theme, it has an FTP client included and a simple check-in/check-out functionality that doesn’t need to be set up like SVN and works in cheap shared hostings that don’t support any version control.

To compare files in Macintosh there are several applications and the best, lighter and faster to load is DiffMerge (works great in my old white Macbook), it is also free and open source so more than welcome. This is how you set it up in Dreamweaver so that you can compare files easily by right-clicking the file and selecting Compare with Remote Server:

Also when uploading a file Dreamweaver may warn you that the file in the server has been modified and you may overwrite someone else’s changes:

And also in the Synchronize files list:

It becomes really useful to see what has changed, once you click the Compare button this is how DiffMerge looks like:

Looks good, huh? Let’s get to work then!

Setting up DiffMerge with Dreamweaver

First thing to do is to download DiffMerge from the official site and install it, no need to open it.

Dreamweaver needs a shell command to open DiffMerge with both files. We will install a small script (10 lines of code) into the /usr/bin folder. To do this you first need to be able to view all hidden files:

defaults write com.apple.Finder AppleShowAllFiles YES
killall Finder

Open Finder, go to Utilities and open Terminal. Paste the code above. Finder will restart and all your Finder open windows will close. If the code above doesn’t work then change YES to TRUE and try again.

Now go to Macintosh HD or your main drive and go to usr/bin:

Download this file and rename it as diffmerge.sh

Move diffmerge.sh to the /usr/bin folder, you will probably need to enter your Administrator password since that is a system folder.

Now go to Dreamweaver, open Preferences and go to the File Compare section. In there, paste this text:

Macintosh HD:usr:bin:diffmerge.sh

Yes, it’s got : instead of / but it’s how it works.

Save the settings by clicking OK at the bottom.

You are done! Now you can compare files and see what has changed, great to keep track of your peer changes and even some changes you made months ago and can’t remember.

You can hide the hidden files again by going to Terminal and typing:

defaults write com.apple.Finder AppleShowAllFiles NO
killall Finder

Nice! You made it until the end of the post. Here’s an extra gift for you, a very useful tool to disable or customize the annoying startup sound in all Mac OSX, it is called Startup Sound and it installs in the System Preferences so it gets completely integrated with your system. It’s free too, download here.

Best Base64 online file encoder

Xavi — Tue, 28 Feb 2012 08:55:24 +0000

I’ve created a simple yet powerful free online tool to convert any image or file into a Base64 encoded string. The tool works by either providing a URL to a file or by uploading your file directly.

Why should you base64 encode?

Base64 encoding allows you to embed media into your HTML, CSS or JavaScript files which means you save one or more server requests. Keeping your website with as fewer requests as possible is one of the best ways of loading websites faster.

When not to base64 encode?

If your file is bigger than 20KB or appears in several pages of your site then it is best to load it as a separate file and let the user’s browser cache it.

Extra features

Apart from providing you the code to embed into your project, I’ve also made available copy-paste codes already with the base64 string in it so if you want to embed your code as a favicon, an image, JavaScript file, CSS sprite map or CSS image you are just a few keystrokes away:

Base64 encoder website

Ok, enough talking, here’s the link to the tool:

Online Base64 encoder

Awesome trick to remember thousands of different passwords

Xavi — Sat, 25 Feb 2012 18:10:27 +0000

Here’s a very cool technique to remember unique passwords for each website or service that you access while keeping them super secure. So no need to worry about either having to remember 10 different passwords or using the same password for all the online accounts you have.

The way it works is pretty straight forward, every time you refresh the page The Human Password Generator it generates a short list of steps you need to remember that will generate very secure passwords on every different website… sounds good? Check it yourself in one click:

The Human Password Generator

Click the Refresh button until you find nice looking passwords and print the page to keep it very safe. It is just a piece of paper so you can hide it very well nearly anywhere. I would also recommend to change all your passwords once every 6 months (imagine you kept your password combination in a book and one your day your sister accidentally sold it).

You can also just keep the URL that’s at the bottom of the website, it stores the exact combination that you have.

Kohana 3.2 Documentation all-in-one PDF, ePub and HTML formats

Xavi — Fri, 24 Feb 2012 12:14:54 +0000

Kohana’s official documentation is pretty complete and useful as well as well written. I have been studying it for a few days but wanted to read the tutorials also whenever I had no Internet connectivity. Searching on the Internet for PDFs or ePubs on Kohana didn’t really show much so I developed a little tool that extracts the official documentation and outputs it in one single file so you can read the official Kohana guide anywhere anytime.

You can download the documentation both in ePub, PDF and HTML formats. The ePub format does not have the images in it (I used an online tool and it removed them, there aren’t a lot anyway) but works great in the iPad, Kindle and Android tablets.

Kohana 3.2 Documentation in PDF format (mirror) (3.3MB)

Kohana 3.2 Documentation in ePub format (mirror) (240KB)

Kohana 3.2 Documentation in HTML format (mirror) (310KB)

I have done my best with the crawling tool but it hasn’t been 100% tested so some sections may have been skipped, please let me know in the comments if that’s the case.

Thanks to all the contributors to the Kohana Documentation, as I am still learning Kohana accept this as my little contribution to the framework :)

iPad web based Code Editor (with extra symbols keyboard)

Xavi — Wed, 08 Feb 2012 16:11:39 +0000

I mostly use the iPad for reading email, news and blogs although I am still perplexed at how few apps there are for actually doing some work. Well, to be honest, there are many apps to do some work. But I believe in platform-agnostic web-apps or SAAS to be the future of our world and the amount, variety and features of current web apps for web development is still quite scarce.

One of the big gaps that I found was regarding code editors. The lack of fast symbol typing in the keyboard is very frustrating and slow (you need to use iOS’s default keyboard and type 3 keys just to get a “<” sign, plus another one to get back). This is why I came up with a proof of concept on additional keyboard rows with extra keys for touch screen devices and added all symbols frequently used for coding and programming so you don’t need to keep switching from one keyboard set to another. It has been optimised for the iPad in portrait mode although with some responsive CSS queries and device detection it can be adapted anywhere.

The code itself is basic HTML, CSS and a bit of JavaScript and jQuery. I’ve kept it simple to aid scalability and customisation. This is how it looks:

Demo and download

Click the following link to open the Code Editor. To test it properly you will need an iPad in portrait mode.

iPad web-based code editor with extra symbols keyboard

License

Public Domain, keeping the Internet open. You can use it commercially and distribute it as much as you want without being forced to credit the author.

Changelog

If you have developed it further send me an email and I will include it in the next release and you in the Credits.

8 February 2012 (v1.0)

First release

If you haven’t seen my iPad HTML/CSS template you must see it now.

Test de usabilidad web económico

Xavi — Sun, 05 Feb 2012 19:47:49 +0000

Si nos falta el tiempo y el dinero para poder ejecutar un estudio de usabilidad de nuestra página web siempre podemos recurrir a sistemas caseros que son rápidos y económicos.

Escoger la lista de perfiles

Muchos usuarios visitarán nuestra web en el futuro. Entre éstos tenemos que identificar los diferentes perfiles de usuario (llamados “personas” en inglés) y de estos perfiles escoger los dos o tres principales, si hay algo que está claro es que la página web nunca será del agrado de todos nuestros usuarios ya que es imposible que agrade a todo el mundo aunque sí que podemos adaptarla a la mayoría que nos interese. Un perfil de usuario sería algo así:

Persona de entre 25 y 35 años con poder adquisitivo medio-alto, educación universitaria, que vive en una ciudad, no tiene hijos, con conocimientos medios de informática, que navega entre 30 minutos y 2 horas al día por Internet vía un ordenador portátil o de escritorio. Realiza actividades de ocio entre 4 y 8 veces al mes.

Una vez tengamos los perfiles principales deberemos encontrar gente que se adapte a ellos. Si nuestro presupuesto es bajo podemos recurrir a favores de amigos, familiares y conocidos. Lo importante es que puedan estar presencialmente con nosotros.

Test de usabilidad

Una vez tengamos una lista de los diferentes perfiles de usuario, situaremos al primero delante del ordenador y dejaremos unos minutos para que el usuario se acomode y familiarice con él, encuentre el icono del navegador web y lo abra. Si puedes realizar el test desde el ordenador del usuario muchísimo mejor.

Misión

El siguiente paso es el más importante y es que sólo le encomendamos una misión no más larga que una oración y cuya tarea debe durar menos de 15-30 minutos (podemos encomendarle varias misiones, una a una, pero una sola a la vez). Por ejemplo:

Visita la página xaviesteve.com y compra el aparato de música de entre 100 y 200 euros que más te guste.

En esa frase queda implícito que el usuario deberá: buscar el producto, registrarse para poder comprar, confirmar un enlace de activación de la cuenta en su correo, hacer click en Comprar, introducir sus datos de la tarjeta de crédito (una vez saque su tarjeta de crédito le proporcionaremos una nuestra de prueba) y finalmente confirmar. Otro ejemplo sería:

Mañana quieres ir a cenar a un restaurante japonés, haz una reserva para 2 en la web helloplan.com y encuentra donde está ubicado.

Nuestro papel

Lo importante es que el usuario lo deduzca todo por él mismo sin que tengamos que explicarle nada. Si nos hace preguntas le diremos que no se preocupe, que intente descubrirlo él mismo. Si vemos que duda demasiado o empieza a frustrarse le ayudaremos.

Pensando en voz alta

Al usuario le pediremos que piense en voz alta durante el proceso, es decir, que vaya contando todo lo que piensa, hace y por qué, por ejemplo:

Espero a que la página se cargue, a ver… ¡Ahá! Aquí pone Electrónica, los aparatos de música estarán dentro, ah no, hay otro que se llama Música, debe ser este mejor, hago clic… Ok este es, bien, a ver, aquí centrado hay las mejore ofertas… aquí a la izquierda me sale una lista con subcategorías… voy a clicar aquí…

Analizar con detalle

Si disponemos de una cámara de vídeo o programa de screencasts, nos ayudará muchísimo para poder analizar mas tarde cualquier duda que el usuario haya podido tener y descurir las dudas y micro-gestos que ha tenido y que ocurren en milisegundos (estas son las que cuestan más de detectar y las que tenemos que solucionar) o aquellas donde el usuario duda de entre varias opciones.

Objetivo del test

Nuestro objetivo final del test de usabilidad es detectar qué podemos cambiar o mejorar para que nuestros usuarios reales tengan que pensar o dudar lo mínimo. Cuanto menos hagamos pensar a nuestro usuario menor será su nivel de frustración y mayor el de autorealización. Una web usable es aquella donde el usuario cumple su objetivo por intuición sin tener que pensar demasiado. Para acabar, una cita de uno de los genios en usabilidad web, os recomiendo su libro.

Una web poco usable no es aquella web que no se usará pero sí aquella que se usará menos.
–Steve Krug en ‘Don’t make me Think’

iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)

Xavi — Fri, 27 Jan 2012 17:03:16 +0000

iPad/iPhone template made in pure HTML and CSS (no JavaScript needed) that works perfectly on any modern browser (iPad (including iPad 3), iPhone, tablets, mobiles, laptops, etc.). The template uses responsive queries to hide the sidebar in iPad portrait mode and in the iPhone and smaller screens (you can disable that easily if you want to).

Here’s how it looks in the iPhone (click image to view full size):

This template is the perfect start for any front-end or back-end developer to build complex web apps without spending time on developing the main structure. Or even to create a mobile version of your current site.

The code has been developed so that there is no “divitis”, completely optimized, semantically correct and minimal HTML code. There are no images or animations at all, everything has been coded using some of the latest CSS3 available features and tested it in most modern browsers. Ready for you to download and start developing. These are some of the template’s features:

Features

App-ready

You can install this template as a normal App Store app, removing the Safari top navigation bar and enjoying the full screen.

Responsive Web Design

Hides the sidebar in iPhone, mobiles and iPad portrait mode. Adapts nicely to the full screen.

No images

The whole template has been built without requiring any images which means less server queries and increased bandwidth savings.

Heading styles

Two different heading styles: the main black one and the smaller blueish.

Anchor texts (links)

The whole clickable area is active so that even fat fingers can click comfortably.

Scrollable

Both the sidebar and the main content can be scrolled separately in the iPad and other touch screen tablets.

Tables

Fully flexible and liquid tables that allow you to include more information while keeping the same look and feel as in any Apple app.

Forms

Fillable textboxes, password fields, select dropdowns and buttons.

Fully tested in several devices

Works great in: iPhone 4, iPhone 3GS, iPad 2, Samsung Galaxy Tab (GT-P7510), Safari 5, Chrome 16 and Firefox 9.

Graceful degradation: IE9 (no rounded corners), IE8.

Not working: (none tested yet).

License

The best of it, I am releasing it under a Public Domain license. This means it is free to use as many times as you want (even for commercial projects) and you do not need to give me credits if you don’t want to. I would appreciate if you do so or if you send me a link to your creation, it will motivate me to develop it further and make me happy.

Download the template

To download the most recent version of the Xavi iPad template click the link below:

Xavi iPad template

And then go to File > Save as… The CSS has been coded in a