multiples_h1

Podemos tener varios h1 en el html5

La respuesta es “si”.

En el cuerpo principal tendremos un unico h1.

Pero si tenemos otros bloques del tipo nav, aside, section entonces la numerotación empeza a h1.

Ejemplo de W3C:

Los 2 bloques de codigos son similares:

 

html con un solo h1<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
<body>



<h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h1>Diving in</h1>
 </section>
 <section>
  <h1>Simple shapes</h1>
 </section>
 <section>
  <h1>Canvas coordinates</h1>
  <section>
   <h1>Canvas coordinates diagram</h1>
  </section>
 </section>
 <section>
  <h1>Paths</h1>
 </section>
</body>
css3rem

CSS tamaño de texto con REM

CSS3 ha introducido una nueva medida de tamaño para los textos: REM.

Soluciona el problema que tiene usar las medidas em que son relativas al padre: cascading, y complica mantener un tamaño base en toda la web. En cambio REM (root em) se basa en el tamaño definido para el html.

Tiene suporte en todos los ultimos navegadores, menos Opera.

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!

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)

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 :
&#9733; Para un estrella llena de rating (★) and &#9734; 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.

El secreto de la harmonia de la maquetación

El canon de harmonia de pagina explicado por J. A. Van de Graaf Canon.

Según J. A. Van de Graaf Canon desde los primeros tiempos de la edición de libros, los libros sigen unos canones. Sin escales ni numeros, presenta un metodo utilizado, para encontrar la elegancia y la harmonia en una página.

 

 

 

El canon de Villard de Honnecourt

Es un canon desarrollado por el architecto frances del siglo 13 Villard de Honnecourt. Es magnifico

 

El Canon de Gutenberg de Raúl Rosarivo

Al igual que Van de Graaf, Raúl Rosario estudio los libros de Gutenberg para encontrar cual era el secreto de sus páginas.

 

El canon secreto de Tschichold

Tschichold, un diseñador grafico de talento del siglo 20, estudio la construcción de página de la epoca gothica. Se di cuenta que varios metodos llevaban al mismo resultado.

 

Los 4 canones son uno

 

Más explicaciones en la página de Retinart

Fuente: http://retinart.net/graphic-design/secret-law-of-page-harmony/