05Apr 2019 by Ruben Canton No Comments

Email templates

Software Development, Web design, Web standards
Creating email templates can be a tedious task, with so many rules between different email readers, most of CSS not really working and us devs now so used to SASS and LESS, just the idea that they still use tables terrifies me a bit. There's the possibility of buying a template, but in my experience that may not be the best approach; companies that sell templates as a business model tend to obfuscate as much as possible of their product, and being HTML+CSS this means they will run some algorithm on it creating weird stylesheet keys and stuff just to make your editing life a painful hell. So the alternative, apart from creating a very simple and plain email, is to go opensource. Yes. There are some opensource email templates…
Read More
13Jan 2016 by Ruben Canton No Comments

HTML5 caching: Cache API

Web standards
We can manage the browser's cache to save our website as an app in it. App cache file - To config the cache we use something similar to the robots: a txt file listing the urls to cache with some options. - The file must be served as "text/cache-manifest" mime type. To config it on the server use this extension: .appcache - We tell the browser where the file is at the <html> tag of our page using a new attribute: manifest="" <html manifest="myCache.appcache"> - You must include the manifest on each page you want to cache resources. - Without the cache manifest attribute the browser will use the default caching system. How the file is organized CACHE MANIFEST true/false This navigator property allows us to know if the browser…
Read More
14May 2015 by Ruben Canton No Comments

HTML Emails: GMail Andriod App

Web programming, Web standards
While it looks like most email readers are moving into accepting standards as much as possible GMail has a bit of a weak point when it comes to its Android App (not the website though). I got myself in trouble when trying to add a logotype image centered on the header and with a background color... Centering an element Looks like the CSS property "align:center;" won't make it when trying to align an image to the center of the table cell, instead, using the HTML property "align" on the table/cell does it: [sourcecode language="html" wraplines="false"] <tr> <!-- Logo --> <td align="center"> <a href="http://www.gaydar.net"><img alt="Gaydar" src=".../logo.png" border="0" /></a> </td> </tr> [/sourcecode] But you may not want to center everything inside that cell, you can create a row just for this logo…
Read More
18Mar 2015 by Ruben Canton No Comments

HTML Email tricks and howtos

Web programming, Web standards
Tips to write HTML Emails that I've found. Note this post can be bsolete as email readers are constantly changing and evolving. Background images It is just not possible to add an image as a background at the moment. While most readers will accept it Outlook Office seems to have issues and Hotmail/LiveMSN just doesn't support it. So unless you don't mind some of your users not getting the image at all this doesn't look like a good idea. As a tip: None of the big companies I checked use background images on their emails, this included Amazon, Google, Ebay, HSBC, Channel4, BBC, ... that should give you a hint. Solutions You can use plain colors on the background using a table's BGColor property and the CSS property. Instead of…
Read More
16Dec 2014 by Ruben Canton No Comments

The RESTful way

Software Architecture, Web standards
The idea of building your website services in a RESTful way consists on using the HTTP protocol to determine the Action you are going to perform instead than some Action name on the URL. This way, we can build APIs that are more standarized and easy to sue for everyone. But... what is REST? REST is an abbreviation for "Representational State Transfer" and, as its name points out, it's an "idea" (let's call it idea for now) to transfer the State of an object through a Network. But that idea is based on the HTTP protocol, in fact REST was born as a way of using HTTP properly, some type of "HTTP good practices", which we can call "an architectural style", or architectural pattern if you prefer. The point is...…
Read More
20Aug 2014 by Ruben Canton No Comments

Using Unicode characters to improve your website!

Web programming, Web standards
Using HTML unicode characters can help you reducing the amount of images on your site, just using the right HTML code and you can get this: ✔ or this ★ Doing that is as simple as adding its unicode code like this: [sourcecode language="html" wraplines="false"] tick: <span style="color:green">✔</span> star: <span style="color:red">★</span> [/sourcecode] To get an idea of which unicode characters you can use just check this W3C list. Though probably what you really want is to have a look at the symbols, the geometric shapes, the arrows or the dingbats. Unicode format Have always in mind that there are more unicode character sets than the standard (UTF-8), like UTF-16. You can make use of other standards by setting it on a meta or on your XHTML declaration tag: [sourcecode language="csharp"…
Read More
21Mar 2014 by Ruben Canton No Comments

JavaScript: Primitive and Reference values

Web standards
The primitive values are those which value is stored directly on the variable, which are undefined, null, boolean, number and string. Reference values are those stored in memory and accessed through a pointer, javascript doesn't allow us to access memory directly but its pointers work the same way as in C. A reference value will be an object and the variable will store the address of memory where that value is stored instead than the value itself. [sourcecode language="js" wraplines="false"] var a = "StringValue" // variable storing a primitive value var car = new Object(); car.Color = "blue"; //this string value is instead being stored in an object, variable "car" is not a value type but a reference variable pointing a place in memory. [/sourcecode] Dynamic Properties In javascript, you…
Read More
21Dec 2011 by Ruben Canton No Comments

Mailto: and its parameters

Web standards
Mailto is a link "address" we can set to an anchor tag to let the user send an email to someone with just a click. Something like this: [sourcecode language="html" wraplines="false"] <a href="mailto:[email protected]">Send email</a> [/sourcecode] That would show something like this: Send email If you click on there, and you have configured in your PC a default email software to handle it, Outlook or the software you are using will open with a blank email with just an address at the "To" field, the one written in the link. You can also configure your browser to open your Gmail/hotmail/whatever account when doing this. Now, what if you wanted to send that email with a default subject, cc, bcc or including body? Well you can, just adding parameters as if it…
Read More
08Dec 2011 by Ruben Canton No Comments

How can I force a page jump in HTML printing?

Web programming, Web standards
If you would like to decide when the page will break and the next one will be started when your web page is printed you can use three CSS2.0 styles to set this "jump". page-break-before: Sets the element page break behavoir before the element starts. page-break-inside: Lets you set that the page break behavior has to be avoided inside this element. page-break-after: Sets the element page break behavoir after the element ends. So, you can for example add this style to a table and the table will start in a new page when the page is printed: [sourcecode language="css" wraplines="false"] table.details {page-break-before: always;} [/sourcecode] Or you can have an style like this and use it as a page-breaker. [sourcecode language="css" wraplines="false"] .page-break {page-break-before: always;} [/sourcecode] [sourcecode language="html" wraplines="false"] <div class="page-break"></div>…
Read More
23Aug 2011 by Ruben Canton No Comments

HTTP Server Status

Web standards
When a server answers a client request it gives an status code in the answer header that informs you if everything has gone ok or there has been any issue. Those statuses are divided in 5 groups: 1xx: Informational. 2xx: Success. 3xx: Redirect commands. Very important in SEO. 4xx: Client error. 5xx: Server error. Between them, the most common and the ones you may find while developing websites are these: 100: Continue. The first part of the request is accepted and you should continue sending the rest if there was anything else to send. You may find it if working with AJAX or webservices. 200: OK. The request has been answered without any problem. 201: Created. When a new resource has succesfully been created due to the request. 301: Moved…
Read More
15Jan 2011 by Ruben Canton No Comments

Making your web semantic

Web standards
One of the most important issues that HTML5 brings to us is the possibility of placing semantic content in our code, this means that we can say robots or crawlers what is about the content inside some tag. For example, the tags <sidebar>, <header>, <footer> or <nav> will act as a div that also is explaining which type of content you are going to find inside them. That's semantic. But you do not need to use those new tags in HTML5 for having a semantic page, HTML4 and XHTML are also semantic, though not that much, if you use standards correctly. How to use standards correctly to have a semantic web? Well, we only need to use the tags we normally use for what they were thought. This means, if…
Read More
07Dec 2010 by Ruben Canton No Comments

Accesing a page element using JavaScript

Web standards
Lately I feel like making a master about selectors but I promise this is only a coincidence. When working with javascript we need to select the element we want to use and we have many ways to do so, I was wondering which one is the better to use so I wondered and found an answer to this issue. Let's see the alternatives: [sourcecode language="js" wraplines="false"] alert(document.forms[0].elements[0].value); alert(document.forms["myForm"].elements["myInputText"].value); alert(document.myForm.myInputText.value); alert(document.getElementById('myInputText').value); [/sourcecode] The first option just moves across the document objects and knowing the position let us get the object we want with its value or other properties. This option is really risky since in case you change something in the page and add more forms or elements before the one selected it will not be at the same position anymore…
Read More
01Dec 2010 by Ruben Canton 1 Comment

CSS Selectors to have in mind

Web design, Web standards
Here there are a few CSS selectors to have in mind when styling as some of them can save you a lot of time. Have in mind that some of them do not have full compatibility with every existing browser though. X > Y [sourcecode language="css" wraplines="false"] div#container > ul { border: 1px solid black; } [/sourcecode] This type of selector may be really useful. It lets you establish the style of direct children of an element. Look at this code: [sourcecode language="html" wraplines="false"] <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> [/sourcecode] With the X > Y you can say you want an special style for lists in #container but not…
Read More