desarrollo web eficiente

25

Click here to load reader

Upload: david-lima-cohen

Post on 16-Apr-2017

2.835 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Desarrollo web eficiente

Desarrollo web eficiente…con CodeIgniter y HTML5

Por David Lima Cohen @limacohen

Page 2: Desarrollo web eficiente

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

Page 3: Desarrollo web eficiente

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/

Page 4: Desarrollo web eficiente

• Analizar nuestros tiempos (y su ROI)

• Entender nuestra capacidad de estimación

Page 5: Desarrollo web eficiente

Resultado: un framework de trabajo

FogBugzCase Importer FogBugz Toggl

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

Page 6: Desarrollo web eficiente

Implementación del framework

PHP:CodeIgniter

HTML5:Boilerplate

CSS: 960.gs

JS: jQuery

Page 7: Desarrollo web eficiente

Undos infinitos: SVN

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

http://subversion.tigris.org/

Page 8: Desarrollo web eficiente

Agregando robots.txt y sitemap.xml

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

Page 9: Desarrollo web eficiente

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/

Page 10: Desarrollo web eficiente

Creamos un .htaccess

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

Page 11: Desarrollo web eficiente

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…

Page 12: Desarrollo web eficiente

Agregamos 960.gs

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

http://960.gs/

Page 13: Desarrollo web eficiente

Agregamos jQuery (1.5.0)

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

http://jquery.com/

Page 14: Desarrollo web eficiente

Preparamos nuestro CSS

Page 15: Desarrollo web eficiente

La cabeza de nuestra aplicación

http://html5boilerplate.com/

Page 16: Desarrollo web eficiente

Nuestra plantilla en HTML5

http://html5boilerplate.com/

Page 17: Desarrollo web eficiente

Implementando HTML5 Boilerplate

http://bit.ly/HTML5BPgh

Page 18: Desarrollo web eficiente

http://initializr.com/

Page 19: Desarrollo web eficiente

Módulos y Templates: re-usando la rueda

http://bit.ly/CIHMVC

http://bit.ly/CISTLib

Page 20: Desarrollo web eficiente

CRUD: Generic Table-Editor

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

Page 21: Desarrollo web eficiente

Admin backend: Rapyd framework

http://www.rapyd.com/

Page 22: Desarrollo web eficiente

CMS: Fuel CMS

http://www.getfuelcms.com/

Page 23: Desarrollo web eficiente

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

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

Page 24: Desarrollo web eficiente

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.

Page 25: Desarrollo web eficiente

¡Muchas gracias!

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

• limacohen.com• [email protected]• @limacohen

¿Querés aplicar esto?

.com.ar