forked from isobar-us/code-standards
/
es.html
1807 lines (1297 loc) · 121 KB
/
es.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<!--[if lt IE 7]> <html lang="es" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="es" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="es" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Estándares y Prácticas Recomendadas de Desarrollo Front-end | Isobar</title>
<meta name="description" content="Isobar's Coding Standards and Frontend development Best Practices">
<meta name="keywords" content="Isobar code standards, coding standards, frontend development, frontend best practices, html code standards, html5 code standards, css code standards, best code practices, development, frontend development">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="ios-icon.png"/>
<link rel="stylesheet" href="css/generated/style.css">
<!--
_^_
/ _)
.-^^^-/ / we like dinosaurs as much as you do.
__/ /
<__.|_|-|_|
-->
<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<a class="fork" href="https://github.com/isobar-idev/code-standards/" target="_blank"></a>
<div id="container">
<header role=banner>
<h1><a id="logo" href="http://www.isobar.com/us/home">Isobar</a></h1>
<ul id="social">
<li><a class="icon" href="http://www.shareaholic.com/api/share/?v=1&apitype=1&apikey=8943b7fd64cd8b1770ff5affa9a9437b&service=5&title=Isobar%20North%20America's%20Coding%20Standards%20and%20Frontend%20development%20Best%20Practices&link=http://na.isobar.com/standards/&source=Shareaholic" id="facebook"></a></li>
<li><a class="icon" href="http://www.shareaholic.com/api/share/?v=1&apitype=1&apikey=8943b7fd64cd8b1770ff5affa9a9437b&service=7&title=Isobar%20North%20America's%20Coding%20Standards%20and%20Frontend%20development%20Best%20Practices&link=http://na.isobar.com/standards/&source=Shareaholic" id="twitter"></a></li>
<li><a class="icon" href="http://www.shareaholic.com/api/share/?v=1&apitype=1&apikey=8943b7fd64cd8b1770ff5affa9a9437b&service=2&title=Isobar%20North%20America's%20Coding%20Standards%20and%20Frontend%20development%20Best%20Practices&link=http://na.isobar.com/standards/&source=Shareaholic" id="delicious"></a></li>
<li><a href="http://www.isobar.com/us/home" id="linkback">Vuelva a Isobar</a></li>
</ul>
</header>
<div id="main" role="document">
<!-- #### GENERAL SECTION #### -->
<h1>Estándares y Prácticas Recomendadas de Desarrollo Front-end</h1>
<h2>Información General</h2>
<p>Este documento contiene directrices para aplicaciones web creadas por el equipo de trabajo de Tecnología Creativa (Ingeniería de Front-end) de Isobar US. Se creó a fin de hacerse disponible para cualquier persona que desee revisar el progreso iterativo de nuestras prácticas recomendadas. Si tiene algo que opinar, por favor, deje un comentario en el <a href="http://na.isobar.com/2010/our-front-end-development-best-practices/#comments">artículo del blog donde lo anunciamos</a>.</p>
<p>La motivación principal de este documento tiene dos aristas: <tt>1)</tt> consistencia de código y <tt>2)</tt> prácticas recomendadas. Al mantener la consistencia en los estilos y convenciones del código, podemos aliviar la carga del mantenimiento del código legado (desactualizado) y mitigar los riesgos de daño en el futuro. Adhiriéndonos a prácticas recomendadas aseguramos unos tiempos de carga de página, rendimiento y código mantenible optimizados.</p>
<section id="general">
<div class="intro has-icon">
<img class="icon" src="img/icon-curly.png" alt="{}" />
<h1>Directrices Generales</h1>
</div>
<h2>Pilares del Desarrollo Front-end</h2>
<ol>
<li>Separación de presentación, contenido y comportamiento.</li>
<li><a href="http://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml">El etiquetado debe estar bien formado, ser semánticamente correcto</a> y <a href="#_appendix_a_validators">generalmente válido</a>.</li>
<li><a href="http://icant.co.uk/articles/pragmatic-progressive-enhancement/">Javascript debe mejorar progresivamente la experiencia</a>.</li>
</ol>
<h2>Prácticas Generales</h2>
<h3>Sangrado</h3>
<p>Para todos los lenguajes de código, exigimos que el sangrado se realice mediante tabulaciones suaves (usando el caracter de espacio). Pulsar <em>Tab</em> en su editor de texto debe ser equivalente a <b>cuatro espacios</b>.</p>
<h3>Legibilidad vs Compresión</h3>
<p>Preferimos la legibilidad a la reducción de tamaño de los archivos cuando se trata de mantener archivos existentes. Estimulamos el uso de mucho espacio en blanco junto con arte ASCII donde sea adecuado. No es necesario para ningún desarrollador comprimir intencionalmente el HTML ni las CSS, ni ofuscar (hacer ininteligible) el JavaScript.</p>
<p>Usaremos procesos del lado servidor o procesos de compilación para minimizar y comprimir en gzip automáticamente todos los archivos estáticos del lado cliente, como los archivos CSS y JavaScript.</p>
</section>
<!-- #### MARKUP SECTION #### -->
<section id="markup">
<div class="intro has-icon">
<img class="icon" src="img/icon-curly.png" alt="{}" />
<h1>Etiquetado</h1>
<p>El primer componente de cualquier página es el lenguaje de marcado basado en etiquetas <abbr title="HypterText Markup Language" lang="en">HTML</abbr>. El Lenguaje de Marcado de Hiper Texto (HTML) tiene una historia sórdida pero ha logrado cumplir su cometido en los últimos años. Después de una larga experimentación con la variante XHTML basada en XML, la industria ha aceptado que el HTML es el futuro de la web.</p>
<p>El etiquetado define la estructura y esquema de un documento y ofrece un contenido estructurado. El etiquetado no pretende definir la apariencia del contenido en la página más allá de rudimentarios conceptos tales como encabezados, párrafos y listas. Todos los atributos de presentación del HTML se han hecho obsoletos y los estilos deben colocarse en <a href="#css">hojas de estilo</a>.</p>
</div>
<h2 id="html5">HTML5</h2>
<p><a href="http://www.ibm.com/developerworks/library/wa-webstandards/index.html">HTML5</a> es una nueva versión de HTML y XHTML. El <a href="http://www.w3.org/TR/html5/">borrador de la especificación HTML5</a> define un único lenguaje que puede escribirse en HTML y XML. El mismo intenta resolver los problemas encontrados en iteraciones anteriores del HTML y atiende las necesidades de las <em>Aplicaciones Web</em>, un área previamente no cubierta adecuadamente por el HTML. (<a href="http://html5.org/">fuente</a>).</p>
<p>Utilizaremos el Doctype HTML5 y características de HTML5 cuando sea adecuado.</p>
<p>Probaremos nuestro etiquetado con el <a href="http://validator.w3.org/">validador del W3C</a> para garantizar que el etiquetado está bien formado. El código 100% válido no es una meta, pero la validación, sin duda, ayuda a crear sitios más fáciles de mantener así como a depurar el código. <b>Isobar no garantiza que el código es 100% válido, pero en cambio asegura que la experiencia a través de todos de navegadores es bastante consistente</b>.</p>
<h3 id="h5bp">Plantillas</h3>
<p>Para los documentos HTML5 usamos un fork de <a href="http://html5boilerplate.com/">H5BP</a> modificado según las necesidades de nuestros propios proyectos. <a href="https://github.com/isobar-idev/html5-boilerplate">Hazle fork al repositorio Github</a>.</p>
<h2>El Doctype</h2>
<p>Siempre debe utilizarse un Doctype correcto que active el modo de estándares en el navegador. El modo no estándar o "Quirks" siempre debe evitarse.</p>
<p>Un aspecto agradable del HTML5 es que optimiza la cantidad de código que se requiere. Los atributos sin sentido han sido eliminados y se ha simplificado considerablemente la declaración <code>DOCTYPE</code>. Además, no es necesario utilizar <code>CDATA</code> para escapar el código JavaScript incrustado, anteriormente un requisito para cumplir con el rigor del XML en el XHTML.</p>
<figure class="preCode">El Doctype HTML5</figure>
<textarea class="brush:html">
<!DOCTYPE html>
</textarea>
<h3>Codificación de Caracteres</h3>
<p>Todo el etiquetado debe ser servido como UTF-8, ya que es el más amigable para la internacionalización. Debería ser asignado tanto en el encabezado HTTP como en el encabezado del documento.</p>
<p>Establezca la codificación de caracteres usando etiquetas <meta>.</p>
<textarea class="brush:html">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</textarea>
<p>En HTML5, escriba solamente:</p>
<textarea class="brush:html">
<meta charset="utf-8">
</textarea>
<!--<h3>Uso de nuevos elementos semánticos</h3>
<p>Elementos tales como <code>header, footer, section, article</code> y otros, pueden utilizarse, incluso, varias veces en una página y más de una vez uno dentro de otro. En casos donde haya más de uno del mismo elemento usándose para la misma cosa, como al utilizar <code>article</code> para cada entrada de blog de una página y cada artículo que tenga un <code>header</code> y un <code>footer</code>, agregarle una clase puede ayudar a separarlos de otros lugares donde utilice estos elementos en la página. De este modo puede apuntar a los elementos más específicamente en las CSS. Sin embargo, esto no siempre es necesario, dependiendo de la estructura de la página y la manera de definir sus selectores.</p>
<textarea class="brush:html">
<header>
<h1>Nuestro Blog</h1>
</header>
<article>
<header>
<h1>Este el mejor título de blog</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<article>
<header>
<h1>Este el segundo mejor título de blog</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
</textarea>
<p>Estructurar las páginas limpiamente permite el uso de selectores simplificados que mantienen el nivel de especificidad bajo, haciendo más fácil el sobreponer selectores más adelante mientras la hoja de estilos crece.</p>
<textarea class="brush:css">
header h1 { color: red; }
article header h1 { color: blue; }
</textarea>-->
<h2>Directrices Generales de Etiquetado</h2>
<p>Las siguientes son directrices generales para estructurar el etiquetado HTML. Se le recuerda siempre a los autores usar etiquetado que represente la semántica del contenido en el documento que se está creando.</p>
<ul>
<li>Utilice elementos P reales como delimitadores de párrafo en lugar de múltiples etiquetas BR.</li>
<li>Haga uso de DL (listas de definición) y BLOCKQUOTE cuando sea adecuado.</li>
<li>Los elementos en forma de lista siempre deben ser incluidos en UL, OL o DL, nunca en un conjunto de etiquetas DIV o P.</li>
<li>Utilice campos <code>label</code> para etiquetar cada campo de formulario, el atributo <code>for</code> debe asociarse con el campo de entrada, de manera que los usuarios pueden hacer clic en las etiquetas.
Usar <code>cursor:pointer;</code> en el <code>label</code> también es sabio. <sup><a href="http://www.accessifyforum.com/viewtopic.php?t=1926#14178">nota 1</a>
<a href="http://www.accessifyforum.com/viewtopic.php?t=6738">nota 2</a></sup>
</li>
<li>No utilice el atributo size en los campos de entrada. El atributo size es relativo al tamaño de la fuente del texto dentro de la entrada. En su lugar utilice width en las css.</li>
<li>Coloque un comentario html en las etiquetas de cierre de algunos div para indicar qué elemento está cerrando. Ésto será de gran ayuda cuando haya muchos elementos anidados y sangrados.</li>
<li>Las tablas no deberían utilizarse para el diseño de la página.</li>
<li>Use <a href="http://en.wikipedia.org/wiki/Microformat">microformatos</a> y/o Microdata donde sea adecuado, específicamente hCard y adr.</li>
<li>Haga uso de las etiquetas THEAD, TBODY y TH (y del atributo Scope) cuando sea adecuado.
<figure class="preCode">Etiquetado de una tabla con la sintáxis adecuada (THEAD,TBODY,TH [scope])</figure>
<textarea class="brush:html">
<table summary="Este es un gráfico de los ingresos anuales para el año 2005.">
<thead>
<tr>
<th scope="col">Encabezado de tabla 1</th>
<th scope="col">Encabezado de tabla 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Datos de tabla 1</td>
<td>Datos de tabla 2</td>
</tr>
</tbody>
</table>
</textarea>
</li>
<li>Siempre utilice texto tipo título para los encabezados y títulos. No use títulos con texto todo en mayúsculas o todo en minúsculas en el etiquetado, aplique en su lugar, la propiedad CSS <code>text-transform:uppercase/lowercase</code>.</li>
</ul>
<h3>Comillas en los Atributos</h3>
<p>Aunque la especificación HTML5 define las comillas alrededor de los atributos como opcionales, para mayor coherencia con atributos que aceptan un espacio en blanco, todos los atributos deben estar entre comillas.</p>
<textarea class="brush:html">
<p class="line note" data-attribute="106">Este es mi párrafo de texto especial.</p>
</textarea>
</section>
<!-- #### CSS SECTION #### -->
<section id="css">
<div class="intro has-icon">
<img class="icon" src="img/icon-curly.png" alt="{}" />
<h1>CSS</h1>
<p>El segundo componente de una página web es la información de presentación contenida en las Hojas de Estilo en Cascada (<abbr title="Cascading Style Sheets" lang="en">CSS</abbr>). La exitosa implementación de las CSS por parte de los navegadores web le ha otorgado a toda una generación de creadores web un amplio control sobre la apariencia de sus sitios web.</p>
<p>Así como la información en una página web es semánticamente descrita en el <a href="#markup">etiquetado HTML</a>, las CSS describen todos los aspectos de presentación de la página a través de una descripción de sus propiedades visuales. El poder de las CSS radica en que estas propiedades pueden mezclarse y combinarse mediante identificadores para controlar el diseño y características visuales de la página a través de la superposición de las reglas de estilo (la "cascada").</p>
</div>
<h3>Principios Generales de Uso</h3>
<ul>
<li>Añada las CSS mediante archivos externos, minimizando el número de archivos, de ser posible. Deben estar siempre en el HEAD del documento.</li>
<li>Utilice la etiqueta LINK para incluirlas, <a href="http://blog.amodernfable.com/2008/01/21/thoughts-on-linking-to-stylesheets/">nunca use @import.</a>
<figure class="preCode">Incluir una hoja de estilos</figure>
<textarea class="brush:html">
<link rel="stylesheet" type="text/css" href="myStylesheet.css" />
</textarea>
<figure class="preCode">No utilice estilos en línea</figure>
<textarea class="brush:html">
<p style="font-size: 12px; color: #FFFFFF">Esta es una forma errónea, afirmo.</p>
</textarea>
</li>
<li>No incluya estilos en línea en el documento, ni mediante la etiqueta style ni directamente en los elementos. Es más difícil hacer seguimiento a estas reglas de estilo.</li>
<li>Utilice un archivo de reinicialización de CSS (como el presente en H5BP o el <a href="http://meyerweb.com/eric/tools/css/reset/">Reinicializador de Eric Meyer</a>) para neutralizar la extrañas diferencias entre los navegadores.</li>
<li>Use un archivo de normalización de fuentes como <a href="http://developer.yahoo.com/yui/fonts/">YUI fonts.css</a></li>
<li>Lo elementos que ocurren sólo una vez dentro de un documento deben utilizar ID, de lo contrario, utilice clases.</li>
<li>Comprenda <a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html">la cascada y la especificidad de selectores</a>, de manera que pueda escribir código muy conciso y eficaz.</li>
<li>Use selectores optimizados para la velocidad. Cuando sea posible, evite selectores CSS costosos. Por ejemplo, evite el selector comodín * y no califique selectores de ID (por ejemplo, <code>div#myid</code>) o selectores de clase (por ejemplo, <code>table.results</code>.) Esto es especialmente importante en aplicaciones web donde la velocidad es de suma importancia y puede haber miles o incluso decenas de miles de elementos del DOM. Más información sobre <a href="https://developer.mozilla.org/en/Writing_Efficient_CSS">cómo escribir CSS eficientes en el MDC</a>.</li>
</ul>
<h3>Modelo de Caja de las CSS</h3>
<p>Un profundo conocimiento y comprensión de las CSS y del modelo de caja basado en el navegador es necesario para conquistar los fundamentos de la maquetación con CSS.</p>
<figure class="extra">
<img src="img/box_model.png" alt="Modelo de Caja de las CSS" title="Modelo de Caja de las CSS" />
<figcaption>Esquema del <small>Modelo de caja de las CSS en 3D</small> por <a href="http://hicksdesign.co.uk/boxmodel/">Jon Hicks</a>.</small></figcaption>
</figure>
<h3>Validación de las CSS</h3>
<p>Normalmente, nosotros no usamos el <a href="http://jigsaw.w3.org/css-validator/">Validador del W3C</a>.</p>
<h3>Formateado de las CSS</h3>
<p>Como mínimo, coloque las CSS con selectores en una línea y cada propiedad en su propia línea. A las declaraciones se les aplica sangría.</p>
<p>Como una mejora a ese estilo, añada 2 o 4 espacios a los estilos secundarios o relacionados. Esto permite una exploración y organización jerárquica y hace una hoja de estilos más fácil de leer (para algunas personas).</p>
<textarea class="brush:css">
.post-list li a{
color:#A8A8A8;
}
.post-list li a:hover{
color:#000;
text-decoration:none;
}
.post-list li .author a, .post-list li .author a:hover{
color:#F30;
text-transform:uppercase;
}
</textarea>
<p>Para entornos de múltiples autores, deben evitarse las CSS de una sola línea, ya que pueden causar problemas con el control de versiones.</p>
<h4>Alfabetizado</h4>
<p>Si está obsesionado con el rendimiento, al <a href="http://www.barryvan.com.au/2009/08/css-minifier-and-alphabetiser/">alfabetizar las propiedades CSS aumenta las probabilidades de que grandes patrones repetibles se hagan presentes para ayudar en la compresión GZIP</a>.</p>
<h3>Classes vs. IDs</h3>
<p>Sólo debe asigar un atributo ID a los elementos si son únicos. Debe aplicarse a ese elemento única y exclusivamente. Las clases se pueden aplicar a varios elementos que comparten las mismas propiedades de estilo. Las cosas que deben verse y funcionan de la misma manera pueden tener el mismo nombre de clase.</p>
<textarea class="brush:html">
<ul id="categorias">
<li class="item">Categoría 1</li>
<li class="item">Categoría 2</li>
<li class="item">Categoría 3</li>
</ul>
</textarea>
<h3>Convenciones de Nombre para los Selectores</h3>
<p>Siempre es preferible asignar un nombre a algo, ya sea un ID o una clase, por la naturaleza de <strong>lo que es</strong> en lugar de <strong>como se ve</strong>. Por ejemplo, un nombre de clase de <code>textoGrandeAzul</code> para una nota especial en una página no tiene ningún sentido si se ha cambiado a un texto pequeño de color rojo. Utilizar una convención más inteligente como <code>textoNota</code> es mejor, porque cuando cambia el estilo visual ésta aún tiene sentido.</p>
<h3>Selectores</h3>
<p>La especificación <a href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215/">Selectores CSS Nivel 3</a> presenta un nuevo conjunto de <a href="http://www.w3.org/TR/css3-selectors/#selectors">Selectores CSS</a> que son sumamente útiles para la mejor selección de elementos.</p>
<h4>Pseudoclasses</h4>
<p>Las <a href="http://www.w3.org/TR/css3-selectors/#pseudo-classes">Pseudoclases</a> le permiten aplicar estilos dinámicamente al contenido. Algunas pseudoclases han existido desde las CSS1 (<code>:visited, :hover</code>, etc.) y las CSS2 (<code>:first-child, :lang</code>). Con las llegada de las CSS3, 16 nuevas pseudoclases se han agregado a la lista y son especialmente útiles para aplicar estilos a contenido dinámico. <a href="http://www.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/">Aprenda a utilizar pseudoclases en profundidad</a>.</p>
<h4>Combinadores y Selectores de Atributo</h4>
<p>Los <a href="http://www.w3.org/TR/css3-selectors/#combinators">Combinadores</a> proporcionan métodos abreviados para seleccionar elementos que son elementos descendientes, elementos secundarios o hermanos de un elemento.</p>
<p>Los <a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">Selectores de Atributo</a> son excelentes para encontrar elementos que tienen un atributo específico y/o un valor específico. Conocer acerca de expresiones regulares ayuda con los selectores de atributos.</p>
<h4>Especificidad</h4>
<p>Los navegadores <a href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215/">calculan la especificidad de un selector</a> para determinar qué regla debe aplicarse. Si dos selectores se aplican al mismo elemento, la que tiene <strong>mayor especificidad gana</strong>.</p>
<p>las IDs tienen mayor especificidad que los selectores de atributo, y los selectores de clase tienen una especificidad mayor que cualquier número de selectores de elemento. Intente siempre usar IDs para aumentar la especificidad. Hay veces cuando podemos intentar aplicar una regla CSS a un elemento y no funciona independientemente de lo que intentemos. Esto es probable debido a que la especificidad del selector utilizado es inferior a otro y las propiedades del mayor tienen precedencia sobre las que desea aplicar. Esto es más común cuando trabaja con hojas de estilos más grandes y complejas. Por lo general, no es un gran problema en proyectos más pequeños.</p>
<h5>Calculando la especificidad</h5>
<p>Cuando trabaja con una hoja de estilos grande y compleja ayuda saber cómo se calcula el valor de la especificidad del selector, para ahorrarle tiempo y hacer más eficientes sus selectores.</p>
<p>La especificidad se calcula contando los diversos componentes de sus estilos CSS y expresándolo en una forma (a, b, c, d).</p>
<ul>
<li>Elemento, Pseudoelemento: d = 1 – (0,0,0,1)</li>
<li>Clase, Pseudoclase, Atributo: c = 1 – (0,0,1,0)</li>
<li>Id: b = 1 – (0,1,0,0)</li>
<li>Estilo en línea: a = 1 – (1,0,0,0)</li>
</ul>
<p>Sin embargo, sería mejor utilizar una calculadora de especificidad.</p>
<ul>
<li><a href="">Calculadora de Especificidad</a></li>
<li><a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">Algunas cosas que debería saber sobre la especificidad</a></li>
<li><a href="http://www.brunildo.org/test/IEASpec.html#a">Errores de especificidad de IE</a></li>
</ul>
<p>Utilizar <code>!important</code> reemplaza toda especificidad sin importar cuán alta sea. Nos gusta evitar utilizarla por esta razón. La mayoría de las veces no es necesaria. Incluso si necesita reemplazar un selector en una hoja de estilos a la que no tiene acceso, normalmente hay formas de reemplazarlo sin usar !important. Evite utilizarla si es posible.</p>
<h3>Pixels vs. Ems</h3>
<p>Utilizamos la unidad de medida <code>px</code> para definir <code>font size</code>, ya que ofrece un control absoluto sobre el texto. Nos hemos dado cuenta de que utilizar la unidad <code>em</code> para el tamaño de fuente solía ser popular para adaptarse a que el Internet Explorer 6 no puede cambiar el tamaño de texto basado en píxeles. Sin embargo, todos los principales navegadores (incluyendo <abbr title="Internet Explorer 7">IE7</abbr> e <abbr title="Internet Explorer 8">IE8</abbr>) ahora soportan el cambio de tamaño del texto en unidades de píxeles y/o el zoom de página completa. Dado que <abbr title="Internet Explorer 6">IE6</abbr> en gran medida es considerado obsoleto, es preferible el tamaño en píxeles. Además, el <code>line-height</code> sin unidad establecida es preferible porque no hereda un valor de porcentaje de su elemento principal, sino que en cambio, se basa en un multiplicador del <code>font-size</code>.</p>
<figure class="preCode">Correcto</figure>
<textarea class="brush:css">
#selector {
font-size: 13px;
line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Se redondea a 20px. */
}
</textarea>
<figure class="preCode">Incorrecto</figure>
<textarea class="brush:css">
/* Equivalente a un font-size de 13px y 20px line-height, pero sólo si el tamaño de texto predeterminado del navegador es 16px. */
#selector {
font-size: 0.813em;
line-height: 1.25em;
}
</textarea>
<h3>Errores de Internet Explorer</h3>
<p>Inevitablemente, cuando todos los otros navegadores parecen funcionar correctamente, cualquiera/todas las versiones de Internet Explorer presentarán algunos errores absurdos, retrasando el tiempo de implementación. Aunque promovemos la solución de problemas y la construcción de código que funcione en todos los navegadores sin modificaciones especiales, a veces es necesario utilizar comentarios condicionales <code>if IE</code> para establecer ganchos CSS que podamos utilizar en nuestras hojas de estilos. <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">Más información en paulirish.com</a></p>
<figure class="preCode">Reparando IE</figure>
<textarea class="brush:html">
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
</textarea>
<textarea class="brush:css">
.caja { float: left; margin-left: 20px; }
.ie6 .caja { margin-left: 10px; }
</textarea>
<p>Si está utilizando HTML5 (y el <a href="#h5bp">HTML5 Boilerplate</a>) recomendamos el uso de la biblioteca de JavaScript <a href="http://www.modernizr.com/">Modernizr</a> y este patrón:</p>
<textarea class="brush:html">
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
</textarea>
<h3>Notación abreviada</h3>
<p>En general, se prefiere la notación abreviada de las CSS debido a su brevedad y la capacidad para luego volver atrás y agregar valores que ya están presentes, como es el caso de margin y padding. Los desarrolladores deben estar conscientes de las siglas <abbr title="Arriba, Derecha, Abajo, Izquierda">ADAI</abbr> (o <abbr title="Top, Right, Bottom, Left" lang="en">TRBL</abbr> por sus siglas en inglés), que indican el orden en el que se definen los lados de un elemento en el sentido de las agujas del reloj: Arriba, Derecha, Abajo, Izquierda. Si <em>bottom</em> no está definido, hereda su valor de <em>top</em>. Asimismo, si <em>left</em> no está definido, hereda su valor de <em>right</em>. Si sólo se define el valor <em>top</em>, todos los lados lo heredan de esa declaración.</p>
<p class="normalize">Para más información acerca de como reducir la redundancia de código en las hojas de estilos y usar la notación abreviada de las CSS en general:</p>
<ul>
<li><a href="http://qrayg.com/journal/news/css-background-shorthand">http://qrayg.com/journal/news/css-background-shorthand</a></li>
<li><a href="http://sonspring.com/journal/css-redundancy">http://sonspring.com/journal/css-redundancy</a></li>
<li><a href="http://dustindiaz.com/css-shorthand">http://dustindiaz.com/css-shorthand</a></li>
</ul>
<h3>Imágenes</h3>
<ul>
<li>Para imágenes que se repiten, use <a href="http://www.iandevlin.com/blog/2010/03/webdev/fading-issue-with-repeating-background-transparent-image-in-internet-explorer">algo más grande de 1 x 1 píxeles</a></li>
<li>Nunca debería utilizar imágenes espaciadoras.</li>
<li>Utilice <a href="#_leverage_css_sprites">sprites CSS generosamente</a>. Éstos hacen los estados hover más fáciles, mejoran el tiempo de carga de la página y reducen las emisiones de dióxido de carbono.</li>
<li>Normalmente, todas las imágenes deben ser seccionadas con un fondo transparente (PNG8). Todas deben ser recortadas justo en los límites de la imagen.
<ul>
<li>Sin embargo, el logotipo siempre debe tener un fondo mate y terner algo de relleno antes del corte. (de modo que otras personas puedan hacer hotlink al archivo)</li>
</ul>
</li>
</ul>
<hr />
<h3>Estilos Generales de Texto y Fuentes</h3>
<h4>Encabezados</h4>
<ul>
<li>Defina el estilo predeterminado para los encabezados <code>h1-h6</code> incluyendo los encabezados que son enlaces. Es útil declararlos en la parte superior del documento CSS y modificarlos cuando sea necesario para mayor coherencia a través del sitio.</li>
<li>Los encabezados deben mostrar una jerarquía que indica los diferentes niveles de importancia de arriba a abajo empezando por h1 con el mayor tamaño de fuente.</li>
<li>SEO: Para obtener una idea aproximada de cómo es organizada y leída la jerarquía de su página, utilice la barra de herramientas para desarrolladores a fin de deshabilitar los estilos CSS. Terminará con una vista basada en texto de todas las etiquetas <code>h1-h6</code>, <code>strong</code>, <code>em</code>, etc.</li>
</ul>
<h4>Enlaces</h4>
<ul>
<li>Los estilos predeterminados para los enlaces deben ser declarados y deben ser diferentes a los estilos del texto principal y con estilos diferentes para el estado hover.</li>
<li>Cuando aplique estilos a los enlaces con subrayado, utilice <code>border-bottom</code> y algo de padding con <code>text-decoration: none;</code>. Esto simplemente se ve mejor.</li>
</ul>
<!-- #### WEB TYPOGRAPHY SECTION #### -->
<!--========================*\
oh rly? ya rly!
\ ___, ___ / _,_ no rly?
{O,0} {-.-} {o,O} /
|)__) |)~(| (~~(|
-----"-"-----"-"-----"-"-----,_
=========================== -->
<h2>Tipografía Web</h2>
<p>El uso de fuentes y tipos de letra personalizados en la web ha ido creciendo en popularidad en los últimos años. Con un soporte nativo por parte de los navegadores en ascenso y varios servicios y APIs disponibles ahora, existe un impulso real en este espacio. Cada uno de estos enfoques tienen sus propias ventajas y desventajas. Antes de que un proyecto arranque es mejor realizar algo de investigación sobre las limitaciones tecnológicas y de licencias a fin de elegir el enfoque adecuado para el proyecto específico.</p>
<p>Todos estos enfoques tienen inconvenientes en cuanto a código adicional, tiempo de desarrollo y rendimiento (reloj y percibido). Familiarizarse con estos temas y comunicarlo a los demás miembros del equipo y al cliente ahorrará importantes problemas más adelante en el proyecto.</p>
<p>Aquí encuentra listados algunos métodos populares para incrustar fuentes personalizadas, organizados en orden de nuestra preferencia en su aplicación.</p>
<h3>@font-face</h3>
<p>La <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/#font-face-rule">regla @font-face</a> le permite definir fuentes personalizadas. Ésta fue definida inicialmente en la especificación CSS2, pero fue eliminada de la CSS2.1. Actualmente, es un proyecto de recomendación para CSS3.</p>
<p>Nuestra primera y preferida elección para personalizar las fuentes en la web es @font-face, simplemente porque es parte del proyecto de trabajo del Módulo de Fuentes de CSS, lo que significa que seguirá creciendo en popularidad a medida que crece el soporte de los navegadores y su facilidad de uso mejora conforme se vuelve más estable.</p>
<p>Por ahora, cuando utiliza <code>@font-face</code> es recomendado declarar el origen para cada formato de la fuente. Esto es importante si desea trabajar con el mayor número de navegadores, aunque no es un requisito para su uso.</p>
<p class="normalize">Los formatos de fuente incluidos en la especificación son:</p>
<ul>
<li><strong>woff</strong>: WOFF (Web Open Font Format)</li>
<li><strong>ttf</strong>: TrueType</li>
<li><strong>ttf</strong>, <strong>otf</strong>: OpenType</li>
<li><strong>eot</strong>: Embedded OpenType</li>
<li><strong>svg</strong>, <strong>svgz</strong>: SVG Font</li>
</ul>
<h4>@font-face a prueba de balas</h4>
<p>Para mayor compatibilidad con todos los navegadores use la nueva <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">sintaxis de @font-face a prueba de balas</a> de Fontspring (<em>última versión de 21/02/11</em>).</p>
<textarea class="brush:css">
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot'); /* Modos de compatibilidad con IE9 */
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('myfont-webfont.woff') format('woff'), /* Navegadores modernos */
url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont-webfont.svg#svgFontName') format('svg'); /* iOS más antiguo */
font-weight: <font-weight>;
font-style: <font-style>;
// etc.
}
</textarea>
<p>Aquí tiene una <a href="http://www.thecssninja.com/demo/css_fontface/">demostración funcional</a> que usa esta versión de implementación.</p>
<h4>Compatibilidad con los Navegadores</h4>
<p>Safari, <abbr title="Internet Explorer versiones 6-9">IE 6-9</abbr>, <abbr title="Modo de Compatibilidad de Internet Explorer">Modo de Compatibilidad de IE 9</abbr>, Firefox, Chrome, iOS, Android, Opera</p>
<h4>Prevenir el Modo de Compatibilidad</h4>
<p>A veces <abbr title="Internet Explorer" lang="en">IE</abbr> puede tener una mente propia y cambiará al modo de compatibilidad sin usted saberlo. Incluya lo siguiente en el <code><head></code> del sitio para impedir que su sitio sea mostrado usando el modo de compatibilidad:</p>
<textarea class="brush:html">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</textarea>
<hr />
<h4>Consejos para @font-face</h4>
<ul>
<li>IE 6-8 sólo aceptará una fuente TrueType empaquetada como un EOT.</li>
<li>font-weigh y font-style tienen diferentes significados dentro de <code>@font-face</code>. Las declaraciones donde se establece <code>font-weight:bold;</code> significa que ésta es la versión negritas de este tipo de letra, en lugar de aplicar negritas al texto</li>
<li><a href="http://paulirish.com/2010/font-face-gotchas/">errores de @font-face</a></li>
</ul>
<strong>Pros</strong>
<ul>
<li>Fácil de implementar</li>
<li>Gran variedad de APIs</li>
<li>Personalizable</li>
<li>Fácil de agregar a los elementos</li>
<li>No requiere nada además de las CSS</li>
<li>Actualmente es parte del proyecto de trabajo del Módulo de Fuentes CSS 3</li>
</ul>
<strong>Contras</strong>
<ul>
<li>Soporte de navegadores limitado si se utiliza incorrectamente</li>
<li>Algunas versiones antiguas de los navegadores modernos (Chrome, Opera) no siempre la procesan bien. El texto puede tener bordes dentados. <em>** Yo no he podido confirmar si esto sigue siendo un problema o no.</em></li>
</ul>
<hr />
<h3>Google WebFonts API y Font Loader</h3>
<p>Hay dos opciones disponibles con <a href="https://code.google.com/apis/webfonts/">Google Webfonts</a>. Ambas opciones tienen sus desventajas, por supuesto, pero usarlas puede ser tan bueno como <code>@font-face</code>, todo depende de las necesidades del proyecto.</p>
<h4>Webfonts API</h4>
<p><a href="https://code.google.com/apis/webfonts/docs/getting_started.html">La API de Google Webfonts</a> hace esencialmente la mismo que <code>@font-face</code>, sólo que hace todo el trabajo duro por usted y le proporciona mayor soporte de navegadores. La desventaja principal de este método es la muy pequeña biblioteca de fuentes que utiliza. Para que funcione todo lo que necesita hacer es incluir la hoja de estilos + el nombre de la fuente.</p>
<textarea class="brush:html">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
</textarea>
<p class="normalize">Luego, defina un estilo para el selector al que desea aplicar la fuente:</p>
<textarea class="brush:css">
CSS selector {
font-family: 'Font Name', serif;
}
</textarea>
<h3>Webfont Loader</h3>
<p>Otra opción que Google ofrece es el <a href="https://code.google.com/apis/webfonts/docs/webfont_loader.html">Webfont Loader</a> que es una biblioteca JavaScript que le permite un mayor control que la Webfonts API. También puede utilizar múltiples proveedores de fuentes web como TypeKit. Para usarlo incluya el script en su página:</p>
<textarea class="brush:javascript">
<script type="text/javascript">
WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ]} };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</textarea>
<p class="normalize">Incluir el archivo webfont.js de esta manera es más rápido si no está usando ya las API de Ajax. De lo contrario debe utilizar esto:</p>
<textarea class="brush:javascript">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("webfont", "1");
google.setOnLoadCallback(function() {
WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ]} });
});
</script>
</textarea>
<p>Al utilizar el Webfont Loader tiene más posibilidades de personalizar las cosas, incluyendo el uso de más fuentes, no sólo las de la biblioteca de Google Webfont que no es muy grande. Sin embargo, requiere cargar JavaScript, sacrificando una cosa por otra.</p>
<strong>Pros</strong>
<ul>
<li>Muy fácil de implementar</li>
<li>Amplio soporte de navegadores</li>
<li>Puede combinarse con Typekit</li>
<li>Personalizable al usar el cargador de fuentes</li>
<li>La API hace lo mismo que <code>@font-face</code></li>
</ul>
<strong>Contras</strong>
<ul>
<li>La biblioteca de fuentes es muy pequeña si utiliza la Webfont API</li>
<li>Usar el Webfont Loader requiere el uso de JavaScript para que funcione</li>
<li>La mayoría de los navegadores cargará el resto de la página primero, dejando un espacio en blanco donde debería estar el texto, o de lo contrario mostrará la opción de reserva si existe alguna, hasta que la página se cargue completamente.</li>
<li>Algunas fuentes de la biblioteca Webfont se muestran mal en Windows</li>
</ul>
<hr />
<h3>Cufon</h3>
<p>Si elige utilizar Cufon, se recomienda que utilizar la <a href="http://cufon.shoqolate.com/js/cufon-yui.js">versión comprimida de Cufon</a>. Necesitará convertir su fuente utilizando el <a href="http://cufon.shoqolate.com/generate/">generador</a>.</p>
<textarea class="brush:javascript">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="YourFont.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1'); // Works without a selector engine
Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7
</script>
</textarea>
<p>Se recomienda utilizar Cufon con moderación ya que puede causar mucha sobrecarga si se aplica a una gran cantidad de texto. Para más información visite el <a href="https://github.com/sorccu/cufon/wiki/">Wiki de Cufon</a>.</p>
<strong>Pros</strong>
<ul>
<li>Amplio soporte de navegadores</li>
<li>Se muestra bien en los navegadores soportados</li>
<li>Personalizable</li>
<li>Fácil de implementar</li>
</ul>
<strong>Contras</strong>
<ul>
<li>Requiere el uso de JS para funcionar</li>
<li>No puede seleccionarse el texto que lo utiliza</li>
<li>No pueden utilizarse todos los caracteres</li>
<li>La personalización puede ser dolorosa</li>
<li>No siempre es fácil aplicarlo a varios elementos, especialmente cuando se agregan efectos como hovers</li>
</ul>
<hr />
<h3>Typekit</h3>
<p>Utilizar <a href="https://typekit.com">Typekit</a> tiene sus ventajas y no debería ser ignorado por completo a la hora de elegir el método a utilizar para añadir fuentes personalizadas a un sitio web. Cuenta con una plataforma de integración fuerte y es un servicio escalable y popular. Se puede utilizar con Google WebFonts y se puede agregar fácilmente a WordPress, Posterous, Typepad, y otros sitios manejados por CMSes similares.</p>
<p>Sin embargo, la plena utilización de <a href="https://typekit.com/plans">TypeKit no viene sin un costo</a>. Si usted necesita usarlo en más de 2 sitios o en un sitio que recibe una gran cantidad de pageviews tendrá que pagar un costo anual de $49.99, y para los sitios con más de un millón de pageviews le cuesta el doble. No obstante, es probable que tenga el dinero para cubrir el costo si usted está recibiendo más de un millón de pageviews. Si no, entonces puede que usted deba reconsiderar su modelo de negocios.</p>
<strong>Pros</strong>
<ul>
<li>Gran biblioteca de fuentes, incluyendo fuentes de Adobe</li>
<li>Fácil implementación</li>
<li>Integración con la Webfont API de Google y con plataformas de blogs</li>
<li>El plan gratuito tiene límites, pero no caduca</li>
</ul>
<strong>Contras</strong>
<ul>
<li>Requiere Javascript para utilizarlo</li>
<li>Accesso a biblioteca de fuentes limitada sin pagar</li>
<li>Los planes libres y más baratos sólo permiten el uso en 1-2 sitios web y 2-5 fuentes por sitio</li>
<li>Tiene que pagar para usarlo en más de 1 sitio</li>
</ul>
<hr />
<h3>Scalable Inman Flash Replacement (sIFR)</h3>
<p>No le recomendamos que utilice este método, pero debido a que es ampliamente utilizado sentimos que era necesario incluirlo, por lo que puede tomar una decisión bien informada al elegir el método que debe usar con las fuentes web personalizadas.</p>
<p>A pesar de su gran popularidad entre los diseñadores web, así como su decente soporte en la mayoría de los navegadores, los inconvenientes en su uso superan a su conveniencia. La razón más grande y más obvia para no utilizar sIFR es el hecho de que utiliza Flash. Además, para que el flash funcione, se requiere JavaScript y las secuencias de comandos deben cargarse antes que el texto en el que lo use sea visible en la página. Sin mencionar que aumenta el tiempo de carga de la página y puede causar que un sitio lento se haga aún más lento.</p>
<p class="normalize">Hagamos los cálculos aqui.</p>
<strong>Pros</strong>
<ul>
<li>Se puede seleccionar el texto</li>
<li>Soporte en la mayoría de los navegadores</li>
<li>Se muestra bien en los navegadores soportados</li>
</ul>
<strong>Contras</strong>
<ul>
<li>Utiliza Flash</li>
<li>Requiere Javascript para el Flash funcione</li>
<li>¡Es Flash!</li>
<li>El texto no aparece hasta que el script no carga</li>
<li>... y es Flash...</li>
</ul>
<hr />
<h3>Licencias de Fuentes</h3>
<p>A pesar de que puede transformar cualquier fuente en un archivo de fuente web, todavía debe asegurarse de que es legalmente correcto para poder hacerlo. Muchos creadores de fuentes han actualizado sus condiciones para especificar cómo pueden utilizarse sus fuentes en la web. Vea <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=UNESCO_Font_Lic">Detalles de Protección y Licencias de Fuentes</a> para obtener más información.</p>
<hr />
<h3>Especificaciones y Formatos de Archivo de Fuente</h3>
<ul>
<li><a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">Fuentes CSS 2</a> – Mayo 1998 (Obsoleto)</li>
<li><a href="http://www.w3.org/TR/css3-fonts/">Fuentes CSS 3</a> – Borrador de Trabajo 2009 </li>
<li><a href="http://www.w3.org/TR/css3-fonts/">Módulo de Fuentes CSS</a> – Borrador de Trabajo del W3C para Marzo 2011</li>
<li><a href="http://www.w3.org/TR/WOFF/">Formato de Fuentes WOFF</a> – Borrador de Trabajo 2010</li>
<li><a href="http://www.w3.org/TR/SVG/fonts.html">Formato de Fuentes SVG</a></li>
<li><a href="http://www.w3.org/Submission/EOT/">Formato de Fuentes Embedded Open Type (EOT)</a></li>
<li><a href="http://www.microsoft.com/typography/otspec/">Especificación de Microsoft Open Type</a></li>
<li><a href="http://www.adobe.com/devnet/opentype/afdko/topic_feature_file_syntax.html#9.e">Especificación de Archivos de Característica OpenType</a> </li>
<li><a href="http://developer.apple.com/fonts/TTRefMan/">Referencia de True Type de Apple</a> </li>
</ul>
<!-- <h3>Use CSS3</h3>
<p>Puede hacer un montón de cosas nuevas con las funciones agregadas en la especificación de CSS3, muchas de las cuales no son todavía totalmente soportadas por todos los principales navegadores. Esto no significa que no puedan utilizarse hoy. Para las cosas que no son soportadas hay bibliotecas de reserva u otros 'polyfills' que puede utilizar para rellenar los agujeros donde los navegadores pueden carecer de algún tipo de soporte de una nueva característica.</p>
<p>También hay propiedades específicas de los navegadores o prefijos que se pueden utilizar para aplicar estilos a las cosas. Le recomendamos que utilice <a href="http://prefixr.com">Prefixr.com</a> para asegurarse de incluir todas las propiedades de navegador con prefijos por el bien del soporte multi-navegador.</p>
-->
</section>
<!-- #### JAVSCRIPT SECTION #### -->
<section id="js">
<div class="intro has-icon">
<img class="icon" src="img/icon-curly.png" alt="{}" />
<h1>JavaScript</h1>
<p>El código JavaScript, cuando se aplica correctamente a una página web, mejora la experiencia de usuario global y basada en navegador a través de la asociación a eventos y el control de la capa de comportamiento en general.</p>
<p>JavaScript ha visto una explosión en popularidad en los últimos años debido a las potentes nuevas implementaciones de los navegadores que han facultado finalmente la creación de aplicaciones totalmente basadas en el navegador web. Además, un uso cuidadoso de JavaScript permite la completa manipulación y control sobre los otros dos componentes de la creación de páginas web, <a href="#markup">el etiquetado HTML</a> y <a href="#css">las CSS</a>. Hoy en día la estructura de las páginas y los estilos visuales de las páginas pueden ser manipulados en tiempo real sin necesidad de actualizar la página web completa.</p>
</div>
<h2>Bibliotecas JavaScript</h2>
<p class="normalize">Principalmente desarrollamos nuevas aplicaciones en <a href="http://api.jquery.com/">jQuery</a>, aunque tenemos un gran dominio del JavaScript normal, así como de todas las bibliotecas modernas de javascript más importantes.</p>
<h2>Principios Generales de Creación de Código</h2>
<ul>
<li>99% del código debe estar alojado en archivos JavaScript externos. Deben ser incluidos al FINAL de la etiqueta BODY para obtener un rendimiento máximo de página.</li>
<li>No se base en la cadena de agente de usuario (user-agent). Haga una adecuada detección de características. (Más información en <a href="http://diveintohtml5.info/detect.html">Dive Into HTML5: Detection</a> y <a href="http://api.jquery.com/jQuery.support/">la documentación jQuery.support</a>)</li>
<li>No utilice document.write ().</li>
<li>Todas las variables booleanas deben comenzar con "is".
<figure class="preCode">Probando condiciones positivas</figure>
<textarea class="brush:js">
isValid = (test.value >= 4 && test.success);
</textarea>
</li>
<li>Nombre las variables y funciones lógicamente. Por ejemplo: <code>popUpWindowForAd</code> en lugar de <code>myWindow</code>.</li>
<li>No minimice manualmente. A excepción de la tradicional <code>i</code>, etc. para bucles <code>for</code>, las variables deben ser lo suficientemente largas para que tengan sentido.</li>
<li>La documentación debe seguir la estructura de <a href="http://www.naturaldocs.org/documenting.html">NaturalDocs</a>.</li>
<li>Las constantes o variables de configuración (como la duración de las animaciones, etc.) deben estar en la parte superior del archivo.</li>
<li>Esfuércese por crear funciones que puedan ser generalizadas, tomar parámetros y devolver valores. Esto permite la reutilización sustancial del código y cuando se combina con includes o scripts externos, puede reducir la sobrecarga cuando los scripts tienen que cambiar. Por ejemplo, en lugar de escribir directamente el código de una ventana emergente con el tamaño de la ventana, opciones y url, considere el crear una función que tome el tamaño, url y opciones como variables.
</li>
<li>¡Comente su código! Ayuda a reducir el tiempo dedicado a solucionar problemas de funciones de JavaScript.</li>
<li>No pierda su tiempo con comentarios <code><!-- --></code> en torno a su javascript incrustado, a menos que se preocupe por Netscape 4. :)</li>
<li>Organice su código como un <a href="http://kaijaeger.com/articles/the-singleton-design-pattern-in-javascript.html">Objeto Literal/Singleton</a>, en el <a href="http://www.yuiblog.com/blog/2007/06/12/module-pattern/">Patrón de Módulo</a>, o como un <a href="http://mckoss.com/jscript/object.htm">Objeto con constructores</a></a>.</li>
<li>Minimice las variables globales. Mientras menos globales cree, mejor. Generalmente una para el namespace de su aplicación, es un buen número.
<figure class="preCode">Cuando especifique cualquier variable global, identifíquela claramente</figure>
<textarea class="brush:js">
window.globalVar = { ... }
</textarea>
</li>
</ul>
<h3>Espacio en blanco</h3>
<p>En general, el uso de espacios en blanco debe seguir las convenciones de la lectura en inglés de larga data. Por lo que deberá haber un espacio después de cada coma y dos puntos (y el punto y coma en su caso), pero ningún espacio directamente al lado interior derecho e izquierdo de los paréntesis. En definitiva, abogamos por la legibilidad dentro de lo razonable. Además, las llaves siempre deben aparecer en la misma línea que su argumento precedente.</p>
<p>Considere los siguientes ejemplos de un bucle for de JavaScript...</p>
<figure class="preCode">Correcto</figure>
<textarea class="brush:js">
for (var i = 0, j = arr.length; i < j; i++) {
// Do something.
}
</textarea>
<figure class="preCode">Incorrecto</figure>
<textarea class="brush:js">
for ( var i = 0, j = arr.length; i < j; i++ )
{
// Do something.
}
</textarea>
<figure class="preCode">También incorrecto</figure>
<textarea class="brush:js">
for(var i=0,j=arr.length;i<j;i++){
// Do something.
}
</textarea>
<h3>plugins.js and script.js</h3>
<p>Empezando con la H5BP se nos presentan dos archivos, plugins.js y script.js. Esta sección describe el uso básico de estos dos archivos.</p>
<h4>plugins.js</h4>
<p>Plugins.js está destinado a contener todo el código de los plugins del sitio. En lugar de vincular a muchos archivos diferentes, se puede mejorar el rendimiento mediante la inclusión del código de los plugins directamente en este archivo. Pueden y deben haber excepciones a este uso. Un plugin muy grande utilizado en una página poco visitada, por ejemplo, podría ser mejor en una descarga por separado, al cual se accede solamente en la página específica. La mayor parte del tiempo, sin embargo, es seguro pegar las versiones minimizadas de todos sus plugins aquí para facilitar el acceso.</p>
<p>Aquí tiene un ejemplo de como se vería un archivo de ejemplo, incluyendo una pequeña tabla de contenido. Esto puede servir como una guía práctica sobre qué plugins se están usando, incluyendo URLs para documentación, justificación de uso y similares.</p>
<textarea class="brush:js">
/* PLUGIN DIRECTORY
What you can find in this file [listed in order they appear]
1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
2.) jQuery Easing Plugin - http://gsgd.co.uk/sandbox/jquery/easing/
3.) jQuery Ajax Form plugin - http://jquery.malsup.com/form/#download
4.) jQuery validation plugin (form validation) - http://docs.jquery.com/Plugins/Validation
-password strength
5.) Styled Selects (lightweight) - http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
*/
/**
* 1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
* @author Alexander Farkas
* v. 1.21
*/
(function($) {
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
//SNIPPED
};
})(jQuery);
/**
* 2.) jQuery Easing Plugin (we're not using jQuery UI as of yet) - http://gsgd.co.uk/sandbox/jquery/easing/
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
//SNIPPED
});
;(function($) {
$.fn.ajaxSubmit = function(options) {
//SNIPPED
}
})(jQuery);
/*
* jQuery Styled Select Boxes
* version: 1.1 (2009/03/24)
* @requires jQuery v1.2.6 or later
*
* Examples and documentation at: http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
*
* Copyright (c) 2008 Lasar Liepins, liepins.org, liepins@gmail.com
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
*/
jQuery.fn.styledSelect = function(settings) {
//SNIPPED
return this;
};
</textarea>
<h4>Script.js</h4>
<p>Script.js está pensado para contener el código de su sitio o aplicación. Nuevamente, esta no es siempre la mejor solución ya que equipos de trabajo más grandes y/o proyectos más ricos en características o más grandes pueden beneficiarse realmente de segmentar el código de la aplicación en módulos o archivos sobre características específicas. Para sitios más pequeños, aplicaciones más simples y prototipos iniciales, sin embargo, colocar su trabajo en scripts.js tiene sentido.</p>
<p>Un ejemplo simplificado, utilizando el patrón de <a href='http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/'>Ejecución imperceptible integral preparada-para-DOM basada-en-Etiquetado</a>, podría verse como algo parecido a lo siguiente:</p>
<textarea class="brush:js">
/* Name: Demo
Author: Demo King */
/*demo namespace*/
demo = {
common : {
init : function(){
//initialize
},
finalize : function(){
//finalize
},
config : {
prop : "my value",
constant : "42"
}
},
mapping : {
init : function(){
//create a map
},
geolocate : function(){
//geolocation is cool
},
geocode : function(){
//look up an address or landmark
},
drawPolylines : function(){
//draw some lines on a map
},
placeMarker : function(){
//place markers on the map
}
}
}
</textarea>
<h2>Variables, ID y Clases</h2>
<p>Todas las variables de JavaScript deberán escribirse o completamente con minúsculas o en estilo camelCase. La única excepción a esto son las funciones Constructor, que se colocan en mayúsculas por tradición. Todas las declaraciones de <code>id</code> y <code>class</code> en CSS deberán escribirse en minúsculas solamente. No deben usarse guiones ni subrayados.</p>
<h3>Delegación de Eventos</h3>
<p>Al asignar detectores de eventos (event listeners) imperceptibles, es generalmente aceptable asignar el detector de eventos directamente a los elementos que activarán alguna acción resultante. Sin embargo, en ocasiones puede haber varios elementos que coincidan con los criterios que está evaluando y adjuntar detectores de eventos a cada uno de ellos podría afectar negativamente el rendimiento. En tales casos debe utilizar la delegación de eventos en su lugar.</p>
<p><a href="http://api.jquery.com/delegate">delegate()</a> de jQuery es preferible a <a href="http://api.jquery.com/live">live()</a> por razones de rendimiento.</p>
<h3>Depuración</h3>
<p>Incluso con el mejor de los validadores, inevitablemente ciertas peculiaridades de navegador causarán problemas. Existen varias herramientas muy valiosas que le ayudarán a perfeccionar la integridad del código y la velocidad de carga. Es importante que tenga todas estas herramientas a su disposición, a pesar del navegador que utilice principalmente para el desarrollo. Se recomienda desarrollar para Firefox y Safari en primer lugar y luego para Google Chrome y Opera, con ajustes adicionales a través de los comentarios condicionales sólo para Internet Explorer. La siguiente es una lista de depuradores y analizadores de velocidad útiles...</p>
<ul>
<li><strong>Firefox</strong>: <a href="http://getfirebug.com/">Firebug</a>, <a href="http://code.google.com/speed/page-speed/">Page Speed</a>, <a href="http://developer.yahoo.com/yslow/">YSlow</a></li>
<li><strong>Safari</strong>: <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/UsingtheWebInspector/UsingtheWebInspector.html">Web Inspector</a></li>
<li><strong>Google Chrome</strong>: <a href="http://google.com/chrome/intl/en/webmasters-faq.html#tools">Developer Tools</a></li>
<li><strong>Opera</strong>: <a href="http://opera.com/dragonfly/">Dragonfly</a></li>
<li><strong>Internet Explorer 6-7</strong>: <a href="http://microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038">Developer Toolbar</a></li>
<li><strong>Internet Explorer 8-10</strong>: <a href="http://msdn.microsoft.com/en-us/library/dd565625(v=VS.85).aspx">Developer Tools</a></li>
</ul>
<h3>Patrones para mejor JavaScript</h3>
<ul>
<li>Escribir código fácil de mantener</li>
<li>Patrón Single var</li>
<li>Elevado (Hoisting): Un problema con vars dispersas</li>
<li>(No) Aumentar prototipos ya incorporados</li>
<li>Evitar el typecasting implícito</li>
<li>Evitar eval()</li>
<li>Numerar las conversiones con parseInt()</li>
<li>Ubicación de la llave de apertura</li>
<li>Nombrar los constructores con primera letra en mayúsculas</li>
<li>Escribir comentarios</li>
<li>Evitar void</li>
<li>Evitar la instrucción with </li>
<li>Evitar la instrucción continue</li>
<li>Evitar los operadores bit a bit si es posible</li>
</ul>
<p>Stoyan Stefanov cubre eso y más <a href="http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/">en detalle aqui</a>.</p>