bottones-de-accion-rapida

Gmail quick action – botones de acción rápida de GMail

Google permite crear botones de acción rápida de Gmail.
Estos “call-to-action” aparecerán y se podrá hacer un clic directamente desde el inbox de Gmail.
Así ahorramos a los usuarios de abrir el email para poder confirmar un acción por ejemplo.
Muy práctico para facilitar el double opt-in por ejemplo: los emails de confirmación para darse de alta a una newsletter por ejemplo.
Pero hay muchas más aplicaciones, siempre que el email enviado tiene un propósito único:
– confirmar una acción via un clic
– confirmar una información que saldrá destacada

Más info: https://developers.google.com/gmail/markup/overview#highlights_in_inbox

Formulario de login “Good practice”

Las buenas practica para la creación de un login por Codinghorror

Puntos principales:

Implementación de login por tercero: Facebook, twitter ..etc

login-buena-practica

 

 

El ID del usuario debe ser su email.

Informa el usuario si su email esta registrado

Si olvida su login y contraseña, puede pedir que se reenvia la contraseña al email. A la hora de entrar su email, se debria informar al usuario si el email que ha ingresado esta o no en la base de datos.  Esto permite salvar tiempo al usuario si tiene varias cuentas emails y no sabe con que cuenta email se habia registrado.

login-info

 

 

 

 

 

 

 

Los formularios para darse de alta o para logearse deben ser separados pero accessible de uno al otro.  Una tabla con 2 pestañas por ejemplo. El la primera “Registrate” y en la segunda “Iniciar sesión”.

Comprueba que se puede rellenar los formularios con el teclado, saltando de un campo al otro con el tab.

 

 

 

antispamsincaptcha

HoneyPot Anti-spam sin captcha

Un buen truco para eliminar la mayoria de los spams sin tener que poner un CAPTCHA que resulta poco user friendly.

Consiste en crear un campo más en el formulario y esconderlo por css para que no aparesca en pantalla, pero si en el código HTML. Si es un robot que rellena los campos, y rellena el campo escondido, entonces se detecta que es un spam y el mensaje estara bloqueado.

El proyecto se conoce como HoneyPot Project.

Para wordpress, utilizando el formulario Contact form 7, hay un modulo que funciona muy bien de Dao by Design

Structured Markup para SEO

Google accepta rich snippets para personas, eventos, criticas, productos, recetas y navigación breakcrumb.

Para estos tipos se puede usar los markups de schema.org acceptados por los mayores buscadores como Google, Microsoft, Yandex and Yahoo!.

Los markups se pueden testear aquí: http://www.google.com/webmasters/tools/richsnippets

 

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 |

Tipografia web: @font-face o cufon?

Para usar en web una tipografia original, que no es de google font, usar @font-face o cufon?

Cufon

Cufon -> más crossbrowser pero tirando de javascript

@font-face

Font-face -> No tira de javascript pero no esta cubierto en todos los navegadores

Además no renderiza perfectamente y no de la misma manera en todos los navegadores.

@font-face {
font-family:"Caviar Dreams Bold";
src:url("CaviarDreams_Bold.eot?") format("eot"),
url("CaviarDreams_Bold.woff") format("woff"),
url("CaviarDreams_Bold.ttf") format("truetype"),
url("CaviarDreams_Bold.svg#CaviarDreams-Bold") format("svg");
font-weight:normal;
font-style:normal;}

h1 {
font-family: "Caviar Dreams Bold";
font-size: 3em;
font-style:normal;
font-weight:normal;
line-height:1.2em;
margin:0 0 1em;
}

Todos los caracteres Ascii extended especiales

Todos los caracteres Ascii extended especiales

Reduce las peticiones, usa Caracteres Ascii cuando puedas. Siempre pesa menos que una imagen.

  • Smiley Blanco

  • ☻ Black negro

  • ♥ Corazón negro

  • ♦ Diamante

  • ♣ Clove (Clover/Puppyfeet)

  • ♠ Spade

  • • Punto negro

  • ◘ Cuadrado negro con punto blanco

  • ○ Circulo negro

  • ◙ Cuadrado negro con circulo blanco vacio

  • ♂ simbolo macho

  • ♀ simbolo hembra

  • ♪ Nota de musica

  • ♫ Nota de musica

  • ☼ Sol

  • ► Play (Adelante) o flecha derecha

  • ◄ Rewind (Atras) o flecha izquierda

  • ↕ Doble flecha arriba abajo

  • ‼ Doble punto de exclamación

  • ¶ Pilcrow (paragrafo)

  • § Sección

  • ▬ Menos

  • ↨ Doble flecha arriba abajo

  • ↑ Flecha arriba

  • ↓ Flecha abajo

  • → Flecha derecha

  • ← Flecha izquierda

  • ∟ 90º angulo

  • ↔ Doble flecha derecha izquierda

  • ▲ Flecha arriba

  • ▼ Flecha abajo

  •  espacio

  • ! Exclamación

  • # hash

  • $ Dollar

  • % Percentaje

  • & ampersand

  • Apostrofe

  • ( Paréntesis

  • ) Paréntesis

  • * Asterisk/estrella

  • + Más

  • , Comma

  • Menos

  • . Punto

  • / slash

  • 0 0

  • 1 1

  • 2 2

  • 3 3

  • 4 4

  • 5 5

  • 6 6

  • 7 7

  • 8 8

  • 9 9

  • : Colon (colons)

  • ; Semicolon

  • < Left arrow (Big fish) Less than

  • = Equals sign Equals sign

  • > Right arrows (Small fish) Greater than

  • ? Question mark

  • @ At symbol

  • A

  • B

  • C

  • D

  • E

  • F

  • G

  • H

  • I

  • J

  • K

  • L

  • M

  • N

  • O

  • P

  • Q

  • R

  • S

  • T

  • U

  • V

  • W

  • X

  • Y

  • Z

  • [

  • \

  • ]

  • ^

  • _

  • ` A grave accent

  • a

  • b

  • c

  • d

  • e

  • f

  • g

  • h

  • i

  • j

  • k

  • l

  • m

  • n

  • o

  • p

  • q

  • r

  • s

  • t

  • u

  • v

  • w

  • x

  • y

  • z

  • {

  • |

  • }

  • ~

  • A house shaped pentagon

  • Ç A “C” with a cedilla

  • ü A u with a umlaut (or diaeresis) over it

  • é Acute accent over e

  • â “a” with a circumflex over it

  • ä An “a” with a umlaut (or diaeresis) over it

  • à An “a” with a grave accent over it

  • å An a with a circle or dot over it

  • ç A “c” with a circumflex

  • ê “e” with a circumflex on it

  • ë An “e” with a umlaut (or diaeresis) over it

  • è An “e” with a grave accent over it

  • ï An “i” with a umlaut (or diaeresis) over it

  • î An i with a circumflex over it

  • ì An “i” with a grave accent

  • Ä An “A” with a umlaut (or diaeresis) over it

  • Å A capitol “A” with a circle or dot over it

    (Angstrom)

  • É A capitol “E” with an acute accent over it

  • æ The lower case vowel (grapheme) of the a and

    e squished together

  • Æ Capitol AE combined into one letter

  • ô A “o” with a circumflex over it

  • ö An “o” with a umlaut (or diaeresis) over it

  • ò An “o” with a mark over it called a grave

    mark

  • û A u with a circumflex over it

  • ù A u with a grave accent over it

  • ÿ A “y” with a umlaut (or diaeresis) over it

  • Ö A “O” with a umlaut (or diaeresis) over it

  • Ü A “U” with a umlaut (or diaeresis) over it

  • ¢ The “cents” or “cent” sign for currency

  • £ The “pound sign” for currency

  • ¥ The “Yen” sign for currency

    (Japanese/Chinese) Written in Japanese as円

  • Pts Points of Pints sign

  • ƒ Forte: A curvy or italic F (italicized)

  • á An a with a acute accent

  • í An i with a acute accent

  • ó An o with a acute accent

  • ú A u with an acute accent over it

  • ñ A n with a tilde ~ over it to make the

    Spanish enye

  • Ñ A capital n with a tilde ~ over it to make

    the Spanish enye

  • ª The feminine superscript A

  • º The degrees or degree symbol

  • ¿ Upside down question mark used in Spanish

  • Negation / Logical Complement / Looks like start “quote” in Japanese / Chinese

  • ¬ Negation / Logical Complement / Looks like end “quote” in Japanese / Chinese

  • ½ One half symbol

  • ¼ One quarter symbol O

  • ¡ An upside down exclamation mark (looks like

    an “i” that sits lower than usual)

  • « Double arrow pointing left

  • » Double arrow pointing right

  • ░ Light shaded block

  • ▒ Medium shaded block

  • ▓ Dark shaded block

  • │ Line

  • ┤Shape

  • ╡Special Line

  • ╢ You can make words with these

  • ╖ Or shapes

  • ╕ Or Mazes!

  • ╣ANSI border characters

  • (Could also be Pi, see 227)

  • ANSI art pseudographics

  • ANSI blocks / box drawing characters

  • α The Greek letter “Alpha”

  • ß A German letter, Eszett, scharfes S, sharp S

  • Γ Greek uppercase “Gamma.” Also, Greek number 3.

  • π The symbol for the mathematical Pi in ascii

  • Σ Greek mathematical symbol for sum

  • σ Symbol for sum Symbol for sum

  • µ Mu

  • τ  Tau

  • Φ Phi a variation of Phi

  • Θ Theta, the 8th letter of Greek alphabet

  • Ω Omega (24th letter of Greek alphabet)

  • δ The symbol for delta

  • ∞ The symbol or character for infinity

    (Infiniti)

  • φ Phi (21st letter of Greek alphabet)

  • ε Epsilon (5th letter of Greek Alphabet) / backwards 3 or curved E

  • ∩ Intersection / Upside down U

  • ≡ Equivalent symbol / Equal sign with 3 lines

  • ± Plus and minus (Plus or minus) sign,

    Plus-minus Symbol

  • ≥ Greater than or equal to symbol

  • ≤ Less than or equal to sign

  • ⌠ Ceil (mathematical symbol)

  • ⌡ Floor (mathematical symbol)

  • ÷ Divide or Division Symbol

  • ≈ Symbol for approximate / Curvy or wavy equal sign =

  • ° Degree or degrees code

  • ∙ Medium height period Medium height period

  • · Dot higher than usual

  • √ Square Root Symbol (A check mark)

  • ⁿ Superscript N

  • ² Squared symbol, superscript 2 via ascii

  • ■ Black box or square

  •    (Yup, just a space via ascii)

Publicidades en web movil: las trampas

Un estudio de Trademob demonstra que hasta 40% de los Pay-per-clicks en movils se pierden entre fraude y clics erroneos.

  • 8% de Fraude Simple, server-side
  • 10% de Botnets y sofisticado server-side fraud
  • 22% Clicks por error del uso del movil

Este estudio realizado por Trademob GmbH ha analizado 6 milliones de clics en publicidades por web movil, en 10 redes de publicidades en movil, en Junio 2012

La solución para no perder este 40% de inversión en publicidad es de tracear correctamente de donde vienen los clicks.

Fuente PDF

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;