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
|
---
title: Tutoriales
slug: Web/Tutorials
tags:
- Articulo Web
- Código
- Diseño Web
- Guía
- Principiante
- Programa Web
- Tutoriales
translation_of: Web/Tutorials
original_slug: Web/Tutoriales
---
<p>Los enlaces de esta página llevan a una gran variedad de tutoriales y material de formación. Tanto si estás en tus comienzos, aprendiendo lo básico, como si eres un veterano en desarrollo web, aquí puedes encontrar recursos que te ayuden a lograr mejores prácticas.</p>
<p>Estos recursos son creados por empresas innovadoras y desarrolladores web que han adoptado los estándares abiertos y las mejores prácticas para el desarrollo web proporcionando o permitiendo traducciones mediante licencias de contenido abierto como Creative Commons.</p>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation">Para principiantes completos de la web</h2>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Comenzando con la web</a></dt>
<dd><em>Comenzando con la web</em> es una serie introductoria que te presenta los aspectos prácticos del desarrollo web. Podrás configurar las herramientas que necesites para construir una página web sencilla y publicar tu propio código.</dd>
</dl>
<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales de HTML</h2>
<h3 id="Nivel_introductorio">Nivel introductorio</h3>
<dl>
<dt><a href="http://docs.webplatform.org/wiki/guides/the_basics_of_html" rel="external">Introducción a HTML</a> (WebPlatform.org)</dt>
<dd>Este módulo establece el escenario, haciendo que te sea común el uso de conceptos importantes y sintaxis, buscando cómo aplicar el HTML al texto, cómo crear hiperenlaces y cómo utilizar el HTML para estructurar una página web.</dd>
<dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Estructura básica de una página web</a> (SitePoint)</dt>
<dd>Aprende cómo los elementos HTML encajan juntos con un enfoque más amplio.</dd>
<dt><a href="http://reference.sitepoint.com/html/elements" rel="external">Elementos fundamentales de HTML según MDN</a> (SitePoint)</dt>
<dd>Es una referencia exhaustiva de los elementos HTML y cómo son soportados por los distintos navegadores.</dd>
<dt><a href="http://htmldog.com/guides/htmlbeginner/" rel="external">Tutorial de HTML para principiantes</a> (HTML Dog)</dt>
<dd>Tutorial y ejercicios sobre los fundamentos.</dd>
<dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Retos HTML</a> (Wikiversity)</dt>
<dd>Acepta los retos para mejorar tus conocimientos sobre HTML (por ejemplo, "¿Debería usar un elemento <h2> o un elemento <strong>?") y marca las respuestas correctas. </dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">Manual de referencia MDN de elementos HTML</a></dt>
<dd>Una amplia referencia de elementos HTML, así como la forma en que Firefox y otros navegadores los soportan.</dd>
</dl>
<h3 id="Nivel_intermedio">Nivel intermedio</h3>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Incrustamiento y multimedia</a></dt>
<dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluyendo las diferentes formas en las que pueden incluirse imágenes, y cómo incrustar video, audio o incluso otras páginas web completas.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Tables">Tablas HTML </a></dt>
<dd>Representar datos tabulares en una forma comprensible puede ser un desafío, {{glossary("Accessibility", "accessible")}}. Este módulo cubre el marcado de una tabla básica, junto con características más complejas, como la implementación de epígrafes y resúmenes.</dd>
</dl>
<h3 id="Nivel_avanzado">Nivel avanzado</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Consejos para crear páginas HTML que carguen rápidamente</a></dt>
<dd>Optimiza las páginas web para que sean adaptables a los visitantes, reduciendo la carga de tu servidor web y de tu conexión a Internet.</dd>
<dt><a href="http://diveintohtml5.info/" rel="external">Sumérgete en HTML5</a> (Mark Pilgrim)</dt>
<dd>Aprende de una selección de características de HTML5, la versión más reciente de las especificaciones HTML.</dd>
<dt><a href="http://www.html5rocks.com/tutorials/" rel="external">Tutoriales de HTML5</a> (HTML5 Rocks)</dt>
<dd>Haz una visita guiada por código que usa las características de HTML5.</dd>
<dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semántica en HTML5</a> (alistapart.com)</dt>
<dd>Aprende marcas con significado, extensibles y compatibles con versiones tanto anteriores como posteriores.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial" style="font-weight: bold;">Tutorial sobre Canvas</a></dt>
<dd>Aprende cómo dibujar gráficos usando líneas de script y el elemento c<em>anvas</em>.</dd>
<dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
<dd>Artículos sobre cómo usar HTML5 ahora mismo.</dd>
<dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">La alegría del audio en HTML5</a> (Elated)</dt>
<dd>Aprende a utilizar el elemento audio en HTML para incluir sonidos en tus páginas web de forma sencilla. Hay montones de códigos de ejemplos incluidos en este tutorial.</dd>
</dl>
</td>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales CSS</h2>
<dl>
</dl>
</td>
</tr>
<tr>
<td>
<h3 id="Nivel_introductorio_2">Nivel introductorio</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">Lo básico en CSS</a></dt>
<dd>Este tutorial te introduce en las hojas de estilo (<em>Cascading Style Sheets</em> o <em>CSS</em>). Además, te guiará a través de las características básicas de CCS con ejemplos prácticos que podrás probar por ti mismo en tu propio computador.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a></dt>
<dd>Este módulo profundiza en el funcionamiento de CSS, incluidos selectores y propiedades, redacción de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS; cascada y herencia; conceptos básicos de caja y depuración de CSS.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes">Estilizando cajas</a></dt>
<dd>A continuación analizamos las cajas de diseño, uno de los pasos fundamentales para diseñar una página web. En este módulo recapitulamos el modelo de caja y luego observamos los diseños de caja de control estableciendo relleno, bordes y márgenes, estableciendo colores de fondo personalizados, imágenes y otras características, y características extravagantes como sombras y filtros en cajas.</dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS">Hojas externas de CSS</a> (Wikiversity)</dt>
<dd>Aquí aprenderás cómo usar CSS en el HTML desde una hoja de estilo externa (en inglés).</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Texto con estilo</a></dt>
<dd>En esta sección repasaremos los fundamentos del estilo de texto, que incluyen la configuración de fuente, negrita e itálicas, el espaciado de líneas y letras, sombras paralelas y otras características de texto. Completaremos el módulo observando la aplicación de fuentes personalizadas en tú página y el diseño de listas y enlaces.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/CSS_FAQ">Preguntas frecuentes sobre CSS</a></dt>
<dd>Preguntas y respuestas frecuentes para principiantes.</dd>
</dl>
<h3 id="Nivel_Intermedio">Nivel Intermedio</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Referencia CSS </a></dt>
<dd>Referencia completa para CCS con ayuda detallada por Firefox y otros navegadores.</dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Desafíos CSS </a> (Wikiversity)</dt>
<dd>Reta tus habilidades en CCS, con lo que podrás descubrir aquello que necesita mejorar.</dd>
<dt><a href="http://www.html.net/tutorials/css/" rel="external">Conceptos intermedios CSS</a> (HTML.net)</dt>
<dd>Agrupación, pseudo-clases y mucho más.</dd>
<dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">Posicionamiento 101 CSS </a> (alistapart.com)</dt>
<dd>Usando posicionamiento con estándares complacientes y tablas de libre disposición.</dd>
<dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Mejora progresivamente con CSS</a> (alistapart.com)</dt>
<dd>Intégrate mejorando progresivamente tus páginas web con CCS.</dd>
<dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Cuadrícula fluida</a> (alistapart.com)</dt>
<dd>Diseño layouts que redimensiona fluidamente con la ventana del navegador, mientras sigue utilizando una cuadrícula tipográfica. </dd>
</dl>
</td>
<td>
<h3 id="Nivel_avanzado_2">Nivel avanzado</h3>
<dl>
<dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external">CSS3 en menos de 5 minutos</a> (Addy Osmani)</dt>
<dd>Una rápida introducción a algunas de las características fundamentales introducidas en CSS3.</dd>
<dt><a href="https://developer.mozilla.org/es/docs/CSS/Using_CSS_transforms">Usando las Transformaciones CSS</a></dt>
<dd>Aplica rotación, inclinando escalando y traduce usando CCS.</dd>
<dt><a href="/es/docs/CSS/Transiciones_de_CSS">Transiciones CSS</a></dt>
<dd>CSS transiciones, parte del proyecto de la especificación CSS3, proporciona un modo para animar los cambios en las propiedades CSS, en lugar de que los cambios surtan efecto al instante.</dd>
<dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external">Entendiendo las Transiciones CSS3</a> (alistapart.com)</dt>
<dd>Comienza usando CSS3 por transiciones eligiendo cuidadosamente las situaciones para utilizarlos.</dd>
<dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guia rápida para implementar Web Fonts con @font-face</a> (HTML5 Rocks)</dt>
<dd>La función @font-face de CSS3 te permite utilizar tipografías personalizadas en la web de una forma accesible, manipulable y adaptable.</dd>
<dt><a href="/es/docs/CSS/Media_queries">Usando Media Queries</a></dt>
<dd>Como realizar páginas web multiscreen con el uso de CSS y su propiedad @media.</dd>
<dt><a href="/es/docs/Web/Guide/CSS/Cajas_flexibles">Modelo de cajas con Flexbox</a></dt>
<dd>Permite distribuir el contenido de la web de forma sencilla y adaptable.</dd>
</dl>
</td>
</tr>
<tr>
<td></td>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales de JavaScript</h2>
<h3 id="Nivel_introductorio_3">Nivel introductorio</h3>
<dl>
<dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
<dd>Codecademy es la forma más fácil de aprender a programar en JavaScript. Es interactivo, divertido y puedes compartir o hacer código con tus amigos.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Comenzar con JavaScript</a></dt>
<dd>¿Qué es JavaScript y cómo puede ayudarte en el desarrollo web?</dd>
<dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external">Programar – Los fundamentos</a> (WebPlatform.org)</dt>
<dd>Fundamentos de programación. Los artículos te indican lo que puedes hacer con JavaScript, las mejores prácticas para utilizarlo y mucho más.</dd>
<dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external">Las mejores prácticas en JavaScript</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
<dd>Aprende algunas de las más evidentes (y no tan evidentes) mejores prácticas cuando escribes en JavaScript.</dd>
</dl>
<h3 id="Nivel_intermedio_2">Nivel intermedio</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Una reintroducción a JavaScript</a></dt>
<dd>Resumen del lenguaje de programación JavaScript enfocado a desarrolladores de nivel intermedio.</dd>
<dt><a href="http://eloquentjavascript.net/contents.html" rel="external">JavaScript fluído</a></dt>
<dd>Una guía completa para metodologías JavaScript intermedias y avanzadas.</dd>
<dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Fundamentos de patrones de diseño en JavaScript</a> (Addy Osmani)</dt>
<dd>Una introducción a las bases del diseño de patrones en JavaScript.</dd>
<dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">El lenguaje de programación JavaScript</a> (YUI Blog)</dt>
<dd>Douglas Crockford explora el lenguaje tal y como es hoy en día y cómo llegó a ser así.</dd>
<dt><a href="https://developer.mozilla.org/es/docs/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos?redirectlocale=en-US&redirectslug=JavaScript%2FIntroduction_to_Object-Oriented_JavaScript">Introducción a JavaScript Orientado a Objetos</a></dt>
<dd>Aprende sobre el modelo de objetos en JavaScript.</dd>
</dl>
<h3 id="Nivel_avanzado_3">Nivel avanzado</h3>
<dl>
<dt><a href="http://ejohn.org/apps/learn/" rel="external">Aprender JavaScript avanzado</a> (John Resig)</dt>
<dd>La guía de John Resig para JavaScript avanzado.</dd>
<dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducción a DOM en JavaScript</a> (Elated)</dt>
<dd>¿Qué es el Modelo de Objeto de Documento (<em>Document Object Model</em>) y para qué es útil? Este artículo te dará una buena introducción a esta característica de JavaScript.</dd>
<dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">Una API inconveniente: la teoría de DOM</a> (YUI Blog)</dt>
<dd>Douglas Crockford explica el Modelo de Objeto de Documento (<em>Document Object Model</em>).</dd>
<dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">JavaScript avanzado</a> (YUI Blog)</dt>
<dd>Douglas Crockford estudia con detenimiento los patrones de código con los que los programadores de JavaScript pueden elegir al escribir sus aplicaciones.</dd>
<dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
<dd>Documentación sobre las partes más extravagantes de JavaScript.</dd>
<dt><a href="http://www.maestrosdelweb.com/editorial/comparacion-frameworks-javascript/" rel="external">¿Qué framework de JavaScript?</a> (Maestrosdelweb)</dt>
<dd>Consejos para escoger un framework de JavaScript.</dd>
<dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/">Carga de JavaScript sin bloqueos</a> (YUI Blog)</dt>
<dd>Consejos para mejorar el rendimiento de bajada de páginas que contienen JavaScript.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">Guía de JavaScript</a></dt>
<dd>Una guía de JavaScript completa y actualizada frecuentemente para todos los niveles de aprendizaje, desde principiante hasta avanzado.</dd>
</dl>
</td>
</tr>
<tr>
<td>
<h3 id="Desarrollo_de_extensiones">Desarrollo de extensiones</h3>
</td>
<td>
<p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">Extensiones web</a></strong><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></p>
<p>Extensiones Web es un sistema de navegación cruzada para desarrollar complementos del buscador. El sistema es en gran medida compatible con la <a href="https://developer.chrome.com/extensions">API (Interfaz de Programación de Aplicaciones) </a>respaldada por Google Chrome y Opera. En la mayoría de los casos, las extensiones escritas para estos buscadores pueden funcionar en Firefox o Microsoft Edge con <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">solo algunos cambios</a>. La API es compatible también con el <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocesador de Firefox</a>.</p>
</td>
</tr>
</tbody>
</table>
|
