Modulor

015. Adding hover/rollover capabilities to typeface.js

Gustavo — 2011-06-28 00:00:00 UTC

Typeface.js is a javascript that allows you to embed custom fonts in web pages. When using it you will identify some up / downsides compared to other libraries such as Cufon.

One of the upsides is that is allows you to do searches and select & copy rendered text.

On the other hand, it is not still prepared to handle rollovers/hovers in CSS.

Don't worry, there is a workaround to this. We found it on the forums of Typeface website (http://typeface.neocracy.org/forum/topic.html?id=152)

It involves generating a couple of spans that will be rendered with typeface and then using CSS we will be able to add hover capabilities to hide / show each of the spans, allowing us to "emulate" a hover / rollover.

h1 a .white { display: none; }
h1 a .blue{ display: block; }
h1 a:hover .white { display: block; }
h1 a:hover .blue{ display: none; }

<h1>< a href="#">
<span class="white">this is a link</span>
<span class="blue">this is a link</span>
</a></h1>

The post also mentions problems that might be encountered on IE which can be solved adding the following:

h1 a { height: 15px; cursor: pointer; }

It might not be very efficient, but accomplishes the objective while a solution is developed.

014. Unordered List / UL vs Div Menu

Gustavo — 2011-02-09 00:00:00 UTC

Many times, websites require the generation of menus that people can use to navigate around.

From an html coder point of view, menus can be built in many different ways. We have found out the two most common ways to build them are a) Using Unordered Lists (UL) and b) Using DIVs.

However, the most semantically correct approach is to use ULs. The main difference you'll find is that with ULs you can have easy to read code and your CSS definitions will be shorter and easier to build:

div.menu {} div.menu_item {} div.menu_item div.sub_item {}

vs

ul {}
li {}
ul ul li {}

013. Random element from a Ruby on Rails array.

Serguei — 2011-01-14 00:00:00 UTC

Just found this Ruby Quicktip for getting a random element from an array. There are two ways you can do this.

Given an array @array

@array = [1,2,3,4,5]

You can obtain a random element from the array with the 'choice' method:

@array.choice
=> 3

You can also do it with the 'sample' method

@array.sample
=> 2

With the 'sample' method you can specify the number of random elements you want:

@array.sample(2)

=> [4,1]

Happy coding.

012. Embed Twitter feed on your website.

Gustavo — 2011-01-13 00:00:00 UTC

This is a very short tutorial on how to embed Twitter through its old but still very useful and flexible script.

Twitter stopped promoting this script a while ago, but it still works. We liked it because it allows full CSS styling, opposed to the inflexible Twitter feed widget commonly available.

Here are the steps to set it up:

1. Add the following html to your view:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>

2. Insert the javascripts that will load the feed on the view:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=10"></script>

Remember to replace USERNAME.json with your Twitter Username adding the .json extension. You can also manipulate the amount of tweets you wish to retrieve modifying the variable "count=10."

3. CSS Style

Now you can modify customize the styles. Some of the elements you can customize include:

div.navtitle {
}

ul#twitter_update_list {
]

ul#twitter_update_list li {
}

ul#twitter_update_list li a {
}

Now you can have a Twitter feed that can be mixed in with your current design.

011. Create an RSS feed in Ruby on Rails.

Gustavo — 2011-01-12 00:00:00 UTC

Some sites with continuous feed of updates will require RSS feeds in order for them to become more accessible and allow for content to be easily redistributed.

We can create an RSS feed easily with Ruby on Rails. You just need to follow the next steps:

1. Create an action in your controller for the RSS feed.

def rss
@noticias = Noticia.find(:all)
render :layout => false
response.headers["Content-Type"] = "application/xml; charset=utf-8"
end

2. Create a view, in this case rss.rxhml that will show the feed contents. It should look something like this:

xml.instruct!

xml.rss "version" => "2.0", "xmlns:dc" => "http://purl.org/dc/elements/1.1/" do
xml.channel do

xml.title "Modulor News"
xml.link url_for :only_path => false, :controller => 'home'
xml.description "Modulor Daily News"

@noticias.each do |noticia|
xml.item do
xml.title noticia.titulo
xml.link url_for :only_path => false, :controller => 'home', :action => 'noticia', :id => noticia.permalink
xml.description noticia.descripcion
xml.guid url_for :only_path => false, :controller => 'home', :action => 'noticia', :id => noticia.permalink
end
end

end
end

3. If you want other websites of applications like Google Reader to auto-discover the feed, add the following html code to your views/layouts.

Just make sure your feed is valid and you're done.

010. Change selection color with CSS

Gustavo — 2011-01-11 00:00:00 UTC

For those designs that need to have an "edge" on the most minimal of details, we found this little piece of code that will help you style selected text on a webpage.

::-moz-selection {
background:#6374AB;
color:#fff;
}

::selection {
background:#6374AB;
color:#fff;
}

The only disadvantage is... we'll you know it... its not IE compatible :(

009. Internet Explorer Float & Margin Bugs

Gustavo — 2011-01-10 00:00:00 UTC

After many months of inactivity, we have decided to update our project portfolio and bring to life this research blog. As mentioned on post one, we will try to keep it updated with things our development team finds that readers will be interested in.

Even though IE6 is being less used by people online, we still encounter companies which need their projects to be compatible with older versions of IE.

In this post we will discuss a common IE CSS problem called "float rendering."

IE6 has a bug that manifests while handling margins of floated elements which causes in-line elements adjacent to a floated div to appear to be indented from their expected location.

We will not try to reproduce the bug, for that you can browse over to http://www.positioniseverything.net/explorer/floatIndent.html and look at a very good example of when this happens.

To make things simple, the only thing you need to do in order to fix this bug is to add to your floated element's CSS code the following:

display: inline;

As "Big John" in the link shared above says: "The work around for this bug is preposterously simple, counter-intuitive and utterly in violation of the W3C recommendations..."

Sometimes you need to break the "rules"...

007. Welcome to our Research Blog. Please subscribe to follow us.

Modulor — 2009-11-11 00:00:00 UTC

Our website is up and running. We would like to welcome you to this blog which will be mainly dedicated to posting interesting things we find out while we work developing our projects and other things we find out from people working to make advances in web technologies and human interaction with web applications.

We will try to post frequently, you can also follow the links on the link bar at the bottom of the page to follow us on Twitter, Facebook, YouTube, or through your favorite RSS reader.

Oportico. B2B E-commerce procurement solution for Mexican companies.

Modulor. Custom Software Solutions. — 2009-11-11 07:00:58 UTC

Oportico is a B2B e-commerce portal developed by Modulor. Its main objective is to provide Mexican companies with an online channel through which they can publish their procurement opportunities. Other companies can search through available projects and can submit their proposals paying a percentage of the project's total budget.

Some of the technologies and services involved in this project include: Agile based development, E-commerce system integrating paypal and a credit based payment system, Content Management System for users and administrators, Search Engine Marketing, Subscription Based Newsletters, Ticket based HelpDesk, Email based connectivity message center, etc.

Face. Portfolio based corporate website for branding agency.

Modulor. Custom Software Solutions. — 2009-11-11 16:26:28 UTC

This is a portfolio website designed by and for Face, developed by Modulor. It was build around a custom made Content Management System that would allow the client to easily create, modify and update the wesite's contents.

The website was completely developed with Ruby on Rails using jQuery and Ajax for animations and other special features.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Search Engine Optimization, etc.

Deposit Control System. Debt collection management extranet.

Modulor. Custom Software Solutions. — 2009-11-11 17:26:52 UTC

Deposit Control System (DCS) is a web based application developed as an Extranet for a company in the United States. This custom software solution manages debt collection for different clients defined as income units.

Cash collectors have individual accounts that allow them to register deposits for different clients. Income units also have individual accounts that allow them to view deposit reports from their clients.

Every transaction is logged for the administrator to keep track of the users and activities in the system. Custom reports were created that allow the different users and administrator to view custom information on different time frames.

Some of the technologies and services involved in this project include: User Interfase Design, Agile based development, Content Management System for users and administrators, Email based connectivity message center, etc.

Mi Graduación Palacio. E-commerce extension portal for El Palacio de Hierro.

Modulor. Custom Software Solutions. — 2009-11-11 19:36:07 UTC

Mi Graduación Palacio was developed as an E-commerce solution extension for the El Palacio de Hierro department store website.

A content management system was developed that allowed the client to upload and categorize each of the dressess and accessories uploaded to the site. A customized search solution was added so that visitors could select parameters and could browse for specific elements.

Some of the technologies and services involved in this project include: Agile based development, E-commerce extension system, Content Management System for users and administrators, Search Engine Marketing and Optimization, Subscription Based Newsletters, Email based connectivity message center, etc.

La Leche. Corporate website for Mexican Restaurant in Puerto Vallarta.

Modulor. Custom Software Solutions. — 2009-11-11 20:01:20 UTC

This corporate webiste was developed taking into account the client's need to display images and text with animation and interaction from the user. jQuery and Ajax technology was used to give life to this portal. A content management system was developed that allows the client to update and modify all of the website's contents with a usability centered interfase.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Search Engine Marketing and Optimization, Subscription Based Newsletters, Email based connectivity message center, etc.

Anagrama. Portfolio based corporate website for branding agency.

Modulor. Custom Software Solutions. — 2009-11-11 21:40:29 UTC

This is a portfolio website developed by Modulor. It was build around a custom made Content Management System that would allow the client to easily create, modify and update the wesite's contents strategically planned so that the content could be easily shared throughout different social media websites through Social Media Marketing and Optimization.

The website was completely developed with Ruby on Rails using jQuery and Ajax for animations and other special features.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Search Engine Optimization, Social Media Optimization and Marketing, etc.

Control Interno. Open collaboration knowledge based portal.

Modulor. Custom Software Solutions. — 2009-11-11 22:28:56 UTC

Control Interno is an open collaboraion knowledge portal made possible by participation from professionals in companies, universities and the government. It allows people to share their knowledge and findings with the community.

This web site format is made to be similar to a blog where people can search and browse documents and resources in different formats. Additionally, the portal has a advertisement system for companies to publish their ads getting personalized reports of ad impressions and clicks.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Search Engine Optimization, Social Media Optimization and Marketing, Email based communication, Collaboration tools, Intelligent Advertisement System, etc.

HardPop. Newsletter based corporate portal for night club.

Modulor. Custom Software Solutions. — 2009-11-11 23:28:41 UTC

This website was developed mainly as a communication channel for HarPop clients and fans. The website integration with social media makes it a great subscription based newsletter communication channel. People subscribe and receive all of the night club concert, presentation and promotion updates via email.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Search Engine Marketing and Optimization, Subscription Based Newsletters, Email based connectivity message center, etc.

IK | Iker Ortíz

Modulor. Custom Software Solutions. — 2011-01-07 00:05:04 UTC

Corporate website developed mainly as a communication channel for jewelry designer Iker Ortíz. The main website objective was to communicate to potential clients and distributors around the world.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Customized Javascript Navigation, Search Engine Marketing and Optimization, Email based connectivity message center, etc

Grupo Impulsa

Modulor. Custom Software Solutions. — 2011-01-07 01:16:09 UTC

Corporate website developed mainly as a communication channel for Grupo Impulsa. Our client was seeking a software development company that could "give life" to their internal design-team proposals.

Modulor was able to wok side by side with Grupo Impulsa's design team to end up with a fully functional corporate website with CMS capability.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Customized Javascript Navigation, Search Engine Marketing and Optimization, Email based connectivity message center, etc

Micheline

Modulor. Custom Software Solutions. — 2011-01-07 01:45:59 UTC

Corporate website developed mainly as a communication channel for Micheline's potential clients. This project was developed in collaboration with Anagrama.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Customized Ajax navigation, Search Engine Marketing and Optimization, Email based connectivity message center, etc

El Vivero

Modulor. Custom Software Solutions. — 2011-01-07 23:28:42 UTC

Corporate website developed for building developer Fraterna™ specifically for an apartment building in San Pedro Garza García, México. The main website objective was to communicate to potential clients and investors.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Customized Javascript Navigation, Search Engine Marketing and Optimization, Email based connectivity message center, etc

Emepe

Modulor. Custom Software Solutions. — 2011-01-08 00:19:00 UTC

This is a portfolio website built around a custom made Content Management System that allows the client to update their portfolio and service locations so that potential clients can be aware of opportunities.

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users and administrators, Search Engine Optimization, Font embedding, etc.

Caramela

Modulor. Custom Software Solutions. — 2011-01-08 01:12:22 UTC

This website was developed as an E-commerce solution for Caramela, a chocolate & toffee store. The client needed a way to easily connect their inventory with online potential clients that could pay through a secure gateway such as PayPal and the capacity to do follow-ups on buyers through the online store.

A content management system was developed that allowed the client to upload and categorize each of the products uploaded to the site as well as the capacity to modify product packaging & presentation for each of them.

Some of the technologies and services involved in this project include: Agile based development, E-commerce system through paypal gateway, Content Management System for administrators, Email based connectivity message center, etc.

Happy-Fi

Modulor. Custom Software Solutions. — 2011-01-10 22:12:02 UTC

Happy-Fi is a music collective heavily relying on social media updates to promote their musical projects. The client's creative background demanded a CMS that would allow them to modify not just content but also structure allowing them to introduce custom made navigation elements such as flash menus and headers. We worked with their design team to be able to deliver a consistent project.

The project integrates a blog including custom javascript based widgets that can be shared around the web for music and calendar updates (See Second Video).

It also includes an artist directory where you can find latest releases, videos, and publications, an online store allowing them to promote the artist's music and merchandise and a video vault for their series.

The website also allows them to collect information from clients and followers with customized questions they can easily create and deliver through the CMS.

All website updates are automatically delivered to different social networks such as Facebook, Twitter and Ping.fm

Some of the technologies and services involved in this project include: Agile based development, Content Management System for users/bloggers and administrators, Customized Ajax navigation, Search Engine Marketing and Optimization, Email based connectivity message center, social network connectivity, PayPal payments, etc

Fuerza Gráfica Extranet

Modulor. Custom Software Solutions. — 2011-01-10 22:23:20 UTC

Fuerza Gráfica is a printing company located in Monterrey, México. Their need was to centralize and standardize sales and operations processes. In the past all of their processes relied heavily on paper which resulted in errors and rework.

We decided to attack their problem through Agile Development methodologies. On phase I of the project we developed a custom solution aimed at sales representatives giving quotes to actual and potential clients. The quotes are immediately sent to the client which can approve or make changes to individual elements. The system signals each of the users so that they can be aware of the stages of each of the quotes created.

The process ends when the client authorizes and Fuerza Gráfica can print out a production order sheet so that machine operators and managers can know exactly what the client is expecting.

Every transaction is logged for the administrator to keep track of the users and activities in the system.

Some of the technologies and services involved in this project include: User Interfase Design, Agile based development, Content Management System for users and administrators, Email based connectivity message center, etc.