desarrollo web eficiente

Desarrollo web eficiente…con CodeIgniter y HTML5

Por David Lima Cohen @limacohen

El problema• Programar != Estimar• Tareas repetitivas:

– Registrar dominio y configurar DNS– Crear servidor virtual (HTTP, DB, versionado, etc…)– Preparar entorno local– Implementar frameworks (PHP, HTML, CSS, JS)– Estructura común:

• Estilo, fuente y colores• Meta tags• Robots/Humans.txt• Sitemap• Favicon/Apple Touch icon

– Soporte cross-browser/os/device

Estimar bien.

• Medir el tiempo invertido:

Toggl: http://www.toggl.com/FogBugz: http://www.fogbugz.com/

Paymo: http://www.paymo.biz/FreshBooks: http://www.freshbooks.com/Tick: http://www.tickspot.com/

• Analizar nuestros tiempos (y su ROI)

• Entender nuestra capacidad de estimación

Resultado: un framework de trabajo

FogBugzCase Importer FogBugz Toggl

FogBugz Case Importer: http://bit.ly/FBCaseImporter

Implementación del framework

PHP:CodeIgniter

HTML5:Boilerplate

CSS: 960.gs

JS: jQuery

Undos infinitos: SVN

…o simplemente Dropboxhttp://www.dropbox.com/

http://subversion.tigris.org/

Agregando robots.txt y sitemap.xml

A modo referencial, dependiendo del sitio se pueden/deben actualizar manualmente o mediante una lógica particular.

Implementando CodeIgniter (1.7.3)

/public/system contiene los archivos normales de CodeIgniter mientras que la lógica de nuestra aplicación se encuentra en /app, fuera del /public

http://codeigniter.com/

Creamos un .htaccess

Encargado de variables del servidor, ocultar el index.php y redireccionar URLs.

Lo aburrido de CI…

Cambiar el dir. de aplicación, la URL base, generar una clave de encriptación, activar el filtro XSS, modificar el controlador predeterminado, etc…

Agregamos 960.gs

Adicionalmente unificamos los 3 archivos .css y usamos el YUI Compressor para packearlo

http://960.gs/

Agregamos jQuery (1.5.0)

Como soporte local, ya que por performance lo llamamos directo desde Google APIs

http://jquery.com/

Preparamos nuestro CSS

La cabeza de nuestra aplicación

http://html5boilerplate.com/

Nuestra plantilla en HTML5

http://html5boilerplate.com/

Implementando HTML5 Boilerplate

http://bit.ly/HTML5BPgh

http://initializr.com/

Módulos y Templates: re-usando la rueda

http://bit.ly/CIHMVC

http://bit.ly/CISTLib

CRUD: Generic Table-Editor

http://www.bird.li/TableEditor/

Admin backend: Rapyd framework

http://www.rapyd.com/

CMS: Fuel CMS

http://www.getfuelcms.com/

Integración rápida con Facebook, Twitter, etc.

http://www.haughin.com/code/

El resultado

Aplicaciones/sitios web desarrollados en forma eficiente, con las mejores prácticas, en HTML5 y con un sólido framework base en PHP.

¡Muchas gracias!

“Do or do not. There is no try.”

• limacohen.com• david@limacohen.com• @limacohen

¿Querés aplicar esto?

.com.ar