Architecture Overview

Simplicity always, always, always comes at the price of a deep understanding of the subject matter.

–Raul Sanchez

We have put a lot of efforts to make sure that you can build websites an apps in very simple way. We have done our best to make sure that removed the complexity associated with building websites and apps, to help you focus on content and creating value for your customers.

buider-architecture

 

There are, however, a couple of things that you should know about the builder that will help take advantage of the software.

 

Core

The builder application and any website or app that is build with the builder, it is built on top of what we call a “Core”. At the time of this writing, the most recent version of the Core is 0.2.0. The first component of the architecture that get initialized is the Core. Any website that you create will inherit this version of the Core. As we continue improving the Core framework, new versions will be released. Websites built in previous versions will not be updated automatically. This allows to continue improving the product and to protect websites that might still require legacy functionality to continue to run. Manual Core updates are available and it is our best interest to maintain backward compatibility up to 3 prior releases.

 

 Wordpress

Every website, including the Builder Application, has a WordPress CMS attached to it. This allows to manage content (text, images, etc.), manage users, and url routes. Every WordPress instance comes with a “appcropolis” theme that carries website specific code. In the case of the Builder Application, its theme extended the functionality to provide not only the specific UI, but the necessary functionality. Similarly, each website uses the appcropolis theme to initialize standard website functionality.

 

View Types

A view type is one of the Core concepts that allows us to link a view type to a WordPress page type. The Core will automatically determine the view type depending on which WordPress page is loaded when users visit the the website. For example, if a website visitor goes to the home page, the view type is “front-page”, for a blog post the view type is “single”, and for a category page the view type is “category”.

NOTE: To learn more about the WordPress page architecture, please check http://wphierarchy.com/.

 

Special Pages

In other to link the work that you do to the WordPress instance that is linked to your website project, inside the Builder Application, you must name your pages in a way that will match the view type that you want to target. The name of your pages are also equivalent to the traditional theme pages. Below you can see the supported view types and the corresponding WordPress theme files *.

  • 404 → 404.php
  • front-page → front-page.php
  • blog → blog.php
  • cart → **
  • checkout → **
  • search → search.php
  • single → single.php
  • single-[blog_post_slug] → **
  • category → category.php
  • category-[blog_category_slug] → category-some_category.php
  • tags → tags.php
  • single-product → **
  • page → page.php
  • product → **
  • [any-page-name] → **

 

NOTE:
* The appcropolis theme does not make use of any traditional theme pages.
** No matching page is standard WordPress theme.

What Are Binders

In the spirit of simplifying the way we build websites, we removed the need of using PHP code to access the WordPress database and other server side functionality. Instead, we implemented the concept of “binders”.

A binder is simply a token that allows binding data from the database in just a few lines of code.

{{$post.post_title}}

 

You can mix binders with your HTML code which gives you the ability to easily model the UI of your website, while accessing data from the server.

<section class="blog-post">
    <h1>{{$post.post_title}}</h1>
    <p>{{$post.post_content}}<p>
</section>

 

Binders also expose functionality that will normally require to use server side code, allowing us to expose data from a variable that can be access from the pages that you create inside the builder interface

 

{{twitter assign_to="tweets" screen_name="appcropolis" tweets_to_display="4"}}
 <ul>
 {{foreach $tweets.data as $tweet}}
 	<li>
 		<h2>{{$tweet.text}}</h2>	
 		<i>{{$tweet.created_at}}</i>
 		<p>{{$tweet.user.name}} @{{$tweet.user.screen_name}}</p>
 		<a href="{{$tweet.urls.expanded_url}}">
                    {{$tweet.urls.display_url}}
                </a>
 	</li>
 {{/foreach}}
</ul>

 

 

 

Raul Sanchez

About Raul Sanchez

“Necessity is the mother of invention.” I am a university-trained architect who in the year 2000 moved to New York and decided to build my own website to showcase my 3D rendering portfolio. Like many other young architects (those who design buildings), I was very skilled in the use of Autocad and 3D Studio Max. At the time, I had been working primarily on architecture visualization for over four years at my first startup ArquiMedia (Caracas, Venezuela — 1996-2000).

To compete in New York City, I figured that I must have a professional-looking website. Since I did not have much money, I decided to build the website by myself. I started writing some HTML code and was frustrated to see how inconsistently web browsers’ rendering-engines worked at the time. I needed a website that could reliably display my portfolio in any web browser. So, I decided to learn Flash Actionscript and create a fully animated website that would work not only online, but also offline. The code would be compiled as an application and distributed on a custom-labeled CD-ROM to potential employers — did I mention that I like to show off? Long story short, the first time that I interviewed for a 3D-guy position, I was referred to Mirek Nisenbaum (Studio Mobile, New York City — 2001-2005). Mirek was looking for a programmer to prototype some children’s games. As luck would have it, I had spent the six months prior to meeting Mirek teaching myself Flash Actionscript (by reading blogs and information that was available online) and became very proficient in writing dynamic, content-driven applications and other fun things.

Knowledge is like a snowball: Once it reaches a certain size, it is easy to keep it growing. That is what happened to me. By being exposed to challenging, interesting projects, I managed to transition to a new career as a technologist. The difference in my case is that as a classically trained architect (Universidad Central de Venezuela, Caracas, Venezuela — 1989-1995), I care about the aesthetic side of technology. Dealing with multiple layers of complexity that must coexist in harmony is what I have been trained to do.

 

Products and projects that I like to brag about

I think that there should be a different word to describe “work” when “work” is something that you really enjoy. I have been blessed with the opportunity to work on some of the coolest projects in the technology/entertainment industry. Along with many other smart people, I have been part of teams that truly brought value to the companies that I have worked for. Here are some (not all) of my favorite products and projects to which I have contributed:

 

2007 – 2012

NBC UNIVERSAL, Senior Experience Architect

New York City, USA

Created the Olympics 2010-2012 Video Architecture
Along with a multidisciplinary team, I created an alternative content delivery architecture solution. The proposed architecture was adopted to build the production system. It reduced costs and mitigated integration risks.

Architect, the NBC News iCue Download Video Player
Identified solutions to create a new video download player that reused components of the Core NBC Universal Video System. Helped the vendor and the iCue team to upgrade their product to the latest technology and accomplished the building of an industry-leading product of its kind.

Identified alternative solutions for mobile development
Using open source web technology, prototyped a mobile version of a video player that proved that NBC Universal can do mobile development in-house to save development costs. The proposed solution helped increase brand visibility by reaching out across all industry-leading smartphones.

Re-architected the NBC Universal Social Networking Products Suite
Created a visual framework that allowed to break a monolithic system into functional components that could be sold separately. This allowed clients to choose and pay for those components which were really need. The result was a simplified and efficient user experience that leveraged the pre-existing NBC Universal Social Networking Platform.

Created a modular and extensible Programming Framework
The delivered product allowed building of video players and content management systems. It reduced the development time by encapsulating functionality into portable components that were reused across different projects and businesses inside NBC Universal. Other benefits included:

  • Easy to adopt and implement.
  • Maximized efficiency. Components only had to be written once.
  • Integrated several programming languages (C++, Java, JavaScript and ActionScript).
  • Made it easy to collaborate with vendors (Pando, Industry Next, Extend Media, Yume and Widevine).

Led a team of eight developers to build the NBC Universal Actionscript 3 Online Video Player
This themeable video player was built on top of the previously created framework, which was custom-branded and deployed on sites such as NBC.com, USA Networks, Syfy, Petside.com, Bravo, Access Hollywood and many others.

Managed the User Interface (UI) and Information Architecture (IA) design of the NBC Direct 2.0
NBC Direct , the NBC.com download video player, reduced the content delivery cost by 70-75 percent through usage of P2P technology. It created new monetization opportunities by playing ads while videos are watched offline.

Managed the UI and IA and prototyped the NBC Universal Media Publisher
Captured the complexity of NBCU video transcoding system (MICAH), video assets management and publishing system (VCMS), and NBC.com Video Tool and architected a simplified user interface. The solution combined all the systems in a single and modular console that users can customize, maximizing efficiency and productivity. The proposed solution achieved:

  • User-friendly interface
  • Reducing the number of steps to accomplish complex tasks
  • Customizable user interface based on people’s workflow
  • Modular and extensible front-end via XML configuration files

Architected and developed the Hulu Distribution Video Player
As part of the launch team of the $100 million joint venture between Fox (News Corp.) and NBC Universal (subsequently known as Hulu.com), architected and developed the distribution video player that was deployed in the websites of AOL, Comcast, MSN, MySpace and Yahoo. The main achievements of this unique product included:

  • Fully themeable to mimic the look and feel of the host site standard video player
  • Component-based architecture to meet the various business use cases
  • Centralizing video serving and analytic data collection

 

2006 – 2007

NBC UNIVERSAL, Experience Architect

New York City, USA

Architected a suite of applications to syndicate NBC Universal video content in distribution partners’ sites. Oversaw the concept, wireframes and interactive design of the company’s products. The core products included:

  • Skinable video player
  • Single-interface video browser and publisher (embed code generator)

AOL, FLASH ACTIONSCRIPT DEVELOPER New York, 2005 – 2006
Responsible for architecting and developing web applications such as video players, media browsers, content management systems, advertisement integration solutions, and other web experiences. Some of the projects developed for AOL were:

  • Live 8 Media Browse — an Emmy Award-winning project.
  • MediaBrowse — Video and editorial content browser used across multiple AOL channels.
  • In2TV Power Browser — Application that allows watching archived TV shows online.
  • Customizable Adobe Flash video widgets for the Top11 channel.

 

2001 – 2005

STUDIO MOBILE, Head Programmer

New York City, USA

Responsible for all Flash ActionScript production and the creation of online applications, children’s games, corporate websites, interactive CD-ROMs and carrying solutions from concept to execution. Projects included:

  • Visual Graphic System — Online product builder
  • Fred Marcus Photography — Dynamic front-end and admin tool
  • Interactive Classics — Children’s music games sold nationwide in the US and online, winning multiple international awards
    • Alice In Vivaldi’s Four Seasons — 2004 Japan Media Arts Festival award winner
    • Tchaikovsky’s Nutcracker Music Game (also translated into Croatian) — Parent’s Choice Best of 25 Years Award, Discovery Award of Excellence
    • Mozart’s Magic Flute Music Game — Parent’s Choice Gold Award
  • Foutris Game — Jury-recommended work at the Japan Media Arts Festival in 2005
  • UNPFA — Interactive CD-ROM for the United Nations Population Fund
  • South Jersey Port Corporation — Macromedia Site of the Day: 2/19/2003

 

1996 – 2000

ARQUIMEDIA GS CONSULTORES & ASOCIADOS C.A., Founder

Caracas, Venezuela

Trained architects and architecture students in the use of AutoCAD and 3D Studio. Completed numerous visualization projects for many architecture firms. Created renderings, animations and interactive presentations for various architecture and real estate companies in Venezuela, which include:

  • Metropolis Shopping Center — Shopping center for Valencia city — Tunel C.A.
  • Puerto De La Mar — Cruises and Ports of Call in Margarita Island – Urbana C.A.
  • PDV Gas Station — Standard design for the Gas Stations – Deltaven S.A.