Almeida-Caria.com is our first fully dynamic, javascript-only, ajax driven website. It uses a grid layout, dynamically created using the site’s own structure.

It was crucial avoiding the typical single page loading from the server, therefore all of the site’s content is accessible at once on the landing page.
We developed a loading procedure that fetches all of the content sequentially, parse it accordingly to its nature, while rendering each content holder ‘module’ and positioning it in the ‘grid’. A red bar below the main menu indicates the loading status.

Home Page

The layout will immediately reflect any added or removed section by the site’s administrative system. This will also occur on section sub-menus like the Portfolio and Services modules.

We wanted to prevent the usage of the browser’s horizontal/vertical scrollbars, requiring us to create alternative methods of navigation:

Logo Hidden Navigation

1. The main menu, located on the top bar is the site’s “standard navigation”. When a menu’s item is clicked, the layout grid will slide vertically and horizontally and center the targeted content module on the screen. “Inactive” modules have half of the opacity than the current section.
2. We created a keyboard navigation using cursor keys [← ↑ → ↓]. It allows the user to “maneuver” the layout in any direction, as long as it has any content module to “land on”.
3. Selection can also be done by clicking any visible “inactive” module.
4. Finally, a “secret” navigation was added to each module: clicking in each of the rectangles [representing each one of the site's sections] will activate the module represented in that location.

keyboard navigation screenshot - navigating the 'grid'

The portfolio modules use our recently developed pSlideShow javascript class, connected to the site’s database, to refresh all the images.

Portfolio>Events (pSlideShow example)

Each module grid-like logo is also created on-the-fly from the site’s tree structure. And like the layout, it will mimic the site’s tree structure.

Almeida-Caria.com is complemented with a social network presence in Facebook and Twitter.

Our aim was to use specific elements of the Henrique de Carvalho exploration itself as the main material of the site’s structure.

It can be reached at http://socgeografialisboa.pt/projectos/2010/henrique-carvalho.

An early teaser [last image] show the main layout framed using ornaments from that specific timeframe. This version was later substituted for the present one, a more visually ‘subdued’ layout.

early teaser

Home Page: includes 2 clickable promotionals spots from partners/sponsors

The site for Argonarms [http://argonarms.com], the brand created by Bruno Baleiras, a young portuguese artist, was recently updated by Plura.

Bruno’s brand of work is mainly focused in customized redesign of various electric appliances. The idea was “born of a personal necessity to oppose the monochromatic dullness of this type of objects of daily use” where urban art like graffiti plays a major part in the overall aesthetics of the final works.

Later and as complement, it became necessary to engage in other interior design interventions, like furniture, wall, etc. as a mean to create fully customized and decorative environments for each client.

About Me Section

The site’s structure was completely rebuild from scratch, using the latest Actionscript 3.0 based framework from Plura, pLib. Its ‘bandwidth footprint’ was reduced to almost half given the modular structure on which it now operates.

Customized Appliances Gallery

The site’s content is fed via pAdmin, Plura’s administrative system, allowing, among may other things, an easier and faster updating of all the media displayed.

Customized Appliances Gallery

The site also showcases his recent launch of a small clothing collection where parts and accessories are executed manually and as a limited edition.

Street Wear Gallery

A contact form, connected to the client’s mailing list application.

Contact Form

Additionally, and in order to complement Argonarms web presence, 3 social networks channels were created, namely Youtube [http://youtube.com/argonarms], Twitter [http://twitter.com/argonarms] and Facebook [http://facebook.com/argonarms].

Youtube, Facebook & Twitter channels

Respecting the newly created identity by their in-house designer Katja Schalk, we integrated many new functionalities and a more intuitive navigation and sitemap.

It uses PWP, a module specifically created for the new Content Management System [CMS] and its comprised of a jQuery javascript framework and our own jQuery plugin, p. Also includes an extensive collection of API handling methods.

We consolidated the entire company’s media in one section, Company News, organized by category [ie. Press, News]. All the video is now handled by the newly created Youtube channel at http://youtube.com/visionboxtv.

An always present ajax mailing list submission form easily allows the user email and name to be collected for Vision-Box’s newsletter

Updating banners was made easy for the administrators, by simply uploading the correct image and adding the desired title. The latter can also be changed just by adding specific parameters to its height, and x/y position within the banner.

Home Page

The Careers section has a fully built-in AJAX form with a multiple-file upload option.

Careers page and Submission Form with AJAX file uploader

Youtube channel

Temos o prazer de anunciar que toda a nossa bibilioteca de código em actionscript foi actualizada com sucesso para a mais nova versão, Actionscript 3.0.
O desenvolvimento de aplicações em Flex e AIR seguir-se-á igualmente.