Jenkins para Symfony2

Integración continua

La integración continua permite tareas como: automation, mantener una version estable de una applicación. Para los proyectos en Symfony2, Jenkins permite esta integración continua.

Más información aqui: http://blog.lazycloud.net/en/using-jenkins-for-a-symfony2-project/

 

 

 

 

 

Backbone javascript con underscore.js, json y jquery

En Be On Internet, Diseño Web Barcelona usamos backbonejs y os contamos porque.

Para las aplicaciones web con mucha programación en javascript es facil acabar con un caos of jQuery selectors y callbacks buscando una sincronisación entre el HTML UI, la programación javascript casera y la base de datos en el servidor.
En este caso, para estas aplicaciones con un desarrollo front muy potente, es necesario tener un estructura bien pensada.
Es exactamente el objetivo del backbonejs.

Con Backbone los datos son representados como Models, y puede ser creado, validado, destruido y guardado en el servidor.
Cada vez que una acción UI causa un cambio de un atributo de un model, el model crea un cambio en el evento y cambia todas las vistas del estado del model.
Con backbonejs no se necesita un codígo que busca en la DOM para encontrar un “id” en concreto y actualizar el HTML a mano. Cuando cambia el model, las vistas se actualizan por si.

Diseño Web Barcelona, BOI consulting: expertos en tecnología web la más avanzada y optimizada. Contactanos!

Sublime Text shortcuts

Los shortcuts de Sublime Text 2, el mejor editor de código:

Sublime Text 2 – Shortcuts (PC)

Aqui tienes los shortcuts más usados para Sublime Text. Si quieres el listado completo: http://www.sublimetext.com/docs/2/.

Editing

| *Ctrl+C* | copy current line (if no selection) |

| *Ctrl+X* | cut current line (if no selection) |

| *Ctrl+⇧+K*| delete line |

| *Ctrl+↩* | insert line after |

| *Ctrl+⇧+↩* | insert line before |

| *Ctrl+⇧+↑* | move line (or selection) up |

| *Ctrl+L* | select line (repeat to select next lines) |

| *Ctrl+D* | select word (repeat select others occurrences in context for multiple editing) |

| *Ctrl+M* | jump to closing bracket for current code, repeat to jump to opening bracket |

| *Ctrl+⇧+M* | select all contents of the current brackets (curly brackets, square brackets, parentheses) |

| *Ctrl+KK* | delete from cursor to end of line |

| *Ctrl+K+⌫* | delete from cursor to start of line |

| *Ctrl+]* | indent current line(s) |

| *Ctrl+[* | un-indent current line(s) |

| *Ctrl+⇧+D* | duplicate line(s) |

| *Ctrl+J* | join line below to the end of the current line |

| *Ctrl+ /* | comment/un-comment current line |

| *Ctrl+⇧+/* | block comment current selection |

| *Ctrl+Y* | redo, or repeat last keyboard shortcut command |

| *Ctrl+⇧+V* | paste and indent correctly |

| *Ctrl+Space* | select next auto-complete suggestion |

| *Ctrl+U* | soft undo (somehow undoes your movements; it jumps to your last change before undoing it when you repeat this command) |

Navigation/Goto Anywhere

| *Ctrl+P* | quick-open files by name in your project (doesn’t seem to need an actual project set up, it just searches in the directories around the currently-opened file |

| *Ctrl+R* | goto symbol (functions and classes) in the file. Same as *Ctrl+P*, then type *@*|

| *Ctrl+;* | goto word in current file. Same as *Ctrl+P*, then type *#*|

| *Ctrl+G* | goto line in current file. Same as *Ctrl+P*, then type *:*|

General

| *Ctrl+⇧+P* | command prompt |

| *Ctrl+KB* | toggle side bar |

Find/Replace

| *Ctrl+F* | find |

| *Ctrl+H* | replace |

| *Ctrl+⇧+F* | find in files |

Tabs

| *Ctrl+⇧+t* | open last closed tab (just like in your browser) |

| *Ctrl+PgDn*| cycle down through open tabs, cycle up with Ctrl+PgUp |

| *Ctrl+⇆* | cycle through last tabs (repeat to go back further in history) |

Split window

| *Alt+⇧+2* | split into two columns |

| *Alt+⇧+1* | revert to single column |

| *Alt+⇧+5* | grid (4 groups) |

| *Ctrl+[1,2,3,4]* | jump to “group” (pane) |

| *Ctrl+⇧+[1,2,3,4]* | move file to specified group |

Bookmarks

| *Ctrl+F2* | toggle bookmark |

| *F2* | next bookmark |

| *⇧+F2* | previous bookmark |

| *Ctrl+⇧+F2* | clear bookmarks |

Text manipulation

| *Ctrl+KU* | upper case |

| *Ctrl+KL* | lower case |

XML a PHP

Pasar XML a PHP

$xml = simplexml_load_string($data);
foreach ($xml->mensaje as $mensaje)
echo $mensaje->texto.' ';

 

function loadXML($data) {
$xml = @simplexml_load_string($data);
if (!is_object($xml))
throw new Exception('Error en la lectura del XML',1001);
return $xml;
}

Para ir directamente a un sub elemento:
foreach ($xml->xpath('//asunto') as $asunto)
echo $asunto."\n";

Para pasar de simleXML a XML :

echo $xml->asXML();

Con SimpleXML tener en cuenta:
Si hay un guion:
foreach ($xml->{'mensaje-personal'} as $mensaje)
echo $mensaje->texto.' ';

Hacer cast a string siempre que obtenemos datos de los objetos SimpleXML. Si en vez de devolver directamente el valor de un elemento devuelve otro objeto SimpleXML, se soluciona con:

$texto = (string) $data_o->mensaje[0]->texto;

Crear una web para movil

Crear una web para movíl

Discriminación CSS

@media screen and (max-width:320px) {
.sidebar { display: none }
}
@media screen and (min-width:1920px) {
body { font-size: 15px }
}

Evitar imagenes para reducir peticiones.

Ejemplo, usar codigo ASCII :
★ Para un estrella llena de rating (★) and ☆ para una estrella vacia (☆)

Crear un enlace hacia un numero de telefono

<a href=”tel:+18005550199″>1-800-555-0199</a>

Viewport Meta Tag

viewport meta tag para que el tamaño de la web se adapte al tamaño del dispositivo:
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

CSS especial para pantallazas grandes

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen, handheld” />
<link rel=”stylesheet” type=”text/css” href=”enhanced.css” media=”screen  and (min-width: 40.5em)” />
<!–[if (lt IE 9)&(!IEMobile)]>
<link rel=”stylesheet” type=”text/css” href=”enhanced.css” />
<![endif]–>

Algunos navigadores de moviles no suportan las media queries : Symbian browsers, Blackberry <OS 6.0, Netfront, WP7 pre-Mango, etc
La ausencia de suporte para @media query es una primera media query 🙂

Detectar y redirigir hacia usuario de mobiles

Con javascript


<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "YOUR-MOBILE-SITE.com";
}
//-->
</script>

Con user agent:

<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://YOUR-MOBILE-SITE.com");
}
-->
</script>

El nuevo metodo CSS @media


<link rel="stylesheet" href="screen.css" media="screen"/>

<link rel=”stylesheet” href=”handheld.css” media=”handheld”/>

Utilizando PHP

Pero aqui hay que actualizar una lista largissima de user-agents

<? if (
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>

Si utilizas WordPress, y no quieres crear un theme en Responsible Design, puedes usar un plugin.
Le más comun es: http://wordpress.org/extend/plugins/wordpress-mobile-pack/
Pero igualmente tienes que adpatar tu wordpress al plugin!

WURFL = Wireless Universal Resource FiLe

WURFL es una base de datos universal de la lista completa y actualizada de todos los dispositivos.
Es un formto XML.