diff options
Diffstat (limited to 'files/es/desarrollo_web')
| -rw-r--r-- | files/es/desarrollo_web/index.html | 59 | ||||
| -rw-r--r-- | files/es/desarrollo_web/web_adaptable/index.html | 39 |
2 files changed, 98 insertions, 0 deletions
diff --git a/files/es/desarrollo_web/index.html b/files/es/desarrollo_web/index.html new file mode 100644 index 0000000000..c436a88778 --- /dev/null +++ b/files/es/desarrollo_web/index.html @@ -0,0 +1,59 @@ +--- +title: Desarrollo Web +slug: Desarrollo_Web +tags: + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/Guide +--- +<p> +</p> +<div class="callout-box"><b><a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/WebSemantica">Guía Breve de Web Semántica</a></b> <br> +Una magnífica introducción al tema.</div> <div> +<div> +<p>El <b>Desarrollo Web</b> abarca todos los aspectos necesarios para desarrollar un sitio o aplicación Web. Esto implica múltiples tecnologías, la mayoría cuentan con una sección específica en este wiki. En esta sección trataremos el tema desde una perspectiva más general. +</p> +</div> +<table class="topicpage-table"> +<tbody><tr><td> +<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4> +<dl><dt> <a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/IndependenciaDispositivo">Guía Breve de Independencia de Dispositivo</a> +</dt><dd> <small>"hacer la Web universal y accesible para cualquier persona, en cualquier sitio, en cualquier momento y usando cualquier dispositivo"</small> +</dd></dl> +<dl><dt> <a href="es/Selecci%c3%b3n_de_modo_en_Mozilla">Selección de modo en Mozilla</a> +</dt><dd> <small>Este documento describe cómo Mozilla utiliza la declaración de DOCTYPE para determinar el modo de renderizado más apropiado para visualizar una página web. </small> +</dd></dl> +<dl><dt> <a href="es/Modo_casi_est%c3%a1ndar_de_Gecko">El modo casi estándar de Gecko</a> +</dt><dd> <small>Además de los modos tradicionales, estándar y quirks, el motor gecko nos ofrece este modo intermedio. Puede que te interese.</small> +</dd></dl> +<dl><dt> <a class="external" href="http://www.mozilla.org/docs/web-developer/faq.html">Mozilla Web Author FAQ (en)</a> +</dt><dd> <small>This document answers questions that Web authors ask frequently specifically in connection with Mozilla and other Gecko-based browsers such as Firefox.</small> +</dd></dl> +<p><span class="alllinks"><a>Ver más...</a></span> +</p> +</td> <td> +<h4 id="Comunidad" name="Comunidad"> Comunidad </h4> +<ul><li> En MozillaES +<ul><li> <a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&Itemid=122&page=viewforum&f=13">Desarrollo web (HTML, CSS...)</a> </li></ul> +</li></ul> +<ul><li> En la comunidad Mozilla... en inglés +</li></ul> +<p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} +</p><p><span class="alllinks"><a href="es/Desarrollo_Web/Comunidad">Ver más...</a></span> +</p> +<h4 id="Herramientas" name="Herramientas"> Herramientas </h4> +<ul><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox">Web Developer extension</a> +</li><li> <a href="es/Venkman">Venkman</a>, the JavaScript debugger +</li><li> <a href="es/DOM_Inspector">DOM Inspector</a> +</li></ul> +<p><span class="alllinks"><a>Ver más...</a></span> +</p> +<h4 id="Temas_relacionados" name="Temas_relacionados"> Temas relacionados </h4> +<dl><dd><a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a>, <a href="es/XHTML">XHTML</a>, <a href="es/XML">XML</a>, <a href="es/AJAX">AJAX</a>, <a href="es/JavaScript">JavaScript</a>, <a href="es/Est%c3%a1ndares_Web">Estándares Web</a> +</dd></dl> +</td> </tr> </tbody></table> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">Interwiki Language Links</span> +</p> +</div> +{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/es/desarrollo_web/web_adaptable/index.html b/files/es/desarrollo_web/web_adaptable/index.html new file mode 100644 index 0000000000..b2efc70e34 --- /dev/null +++ b/files/es/desarrollo_web/web_adaptable/index.html @@ -0,0 +1,39 @@ +--- +title: Diseño web adaptable +slug: Desarrollo_Web/Web_adaptable +translation_of: Web/Progressive_web_apps +--- +<p>Con los usuarios de la web usando cada vez más dispositivos móviles para navegar sitios web y aplicaciones, los diseñadores y desarrolladores web necesitan asegurarse que sus creaciones se vean y funcionen bien tanto en dispositivos móviles como en equipos tradicionales de escritorio. El prominente diseñador Luke Wroblewski recomienda diseñar "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">primero para móviles</a>", en lugar de hacerlo como idea tardía al diseño para escritorio. Ya sea que el diseño para móviles sea el objetivo primario o un bonito extra, puede usar el poder de CSS para asegurarse que el mismo contenido puede accederse a través de todas las plataformas de hardware, desde teléfonos móviles a pantallas panorámicas de alta resolución.</p> +<p>Este enfoque es conocido como "diseño web adaptable". Algunas de sus estrategias incluyen:</p> +<ul> + <li><strong>Diseño líquido o fluido</strong>: Definir todos los anchos de los contenedores en términos de porcentajes de la vista del navegador, así pueden expandirse y contraerse cuando la ventana del navegador cambie de tamaño.</li> + <li><strong>Consultas de medios</strong>: Invocar hojas de estilo diferente basándose en las capacidades de la pantalla usada, como tamaño, resolución, relación de aspecto y profundidad de color.</li> + <li><strong>Imágenes fluidas</strong>: Hacer que las imágenes ocupen mayormente el máximo ancho de la pantalla.</li> +</ul> +<h2 id="Recursos">Recursos</h2> +<h3 id="Overviews">Overviews</h3> +<ul> + <li><a class="external" href="http://www.alistapart.com/articles/responsive-web-design/" title="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web design</a>, por Ethan Marcotte</li> + <li><a class="external" href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/" title="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">Beginner's guide to responsive Web design</a>, por Rick Petit</li> + <li><a class="external" href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" title="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">Responsive Web design: What it is and how to use it</a>, por Kayla Knight</li> + <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">Multi-device Web design: an evolution</a>, por Luke Wroblewski</li> +</ul> +<h3 id="Técnicas">Técnicas</h3> +<ul> + <li><a href="/en/CSS/Media_queries" title="CSS media queries">CSS media queries</a> reference page</li> + <li><a class="external" href="http://css-tricks.com/6731-css-media-queries/" title="http://css-tricks.com/6731-css-media-queries/">CSS media queries and using available space</a>, by Chris Coyier</li> + <li><a class="external" href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">Liquid layouts the easy way</a>, by Russ Weakley</li> + <li><a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid images</a>, by Ethan Marcotte</li> + <li><a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/" title="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for touch screen</a>, by Chris Kemm</li> + <li><a class="external" href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/" title="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">Responsive Web Design Techniques, Tools and Design Strategies</a>, by Smashing Editorial Team</li> +</ul> +<h3 id="Herramientas">Herramientas</h3> +<ul> + <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="/en-US/docs/Tools/Responsive_Design_View">Vista de diseño adaptable</a> en Firefox</li> +</ul> +<h3 id="Ejemplos">Ejemplos</h3> +<ul> + <li><a href="/en-US/demos/devderby/2011/october" title="https://developer.mozilla.org/en-US/demos/devderby/2011/october/">DevDerby demos of CSS media queries</a></li> + <li><a class="external" href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design" title="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20 Amazing examples of using media queries for responsive Web design</a>, por Joshua Johnson</li> + <li><a class="external" href="http://designmodo.com/responsive-design-examples/" title="http://designmodo.com/responsive-design-examples/">Responsive Web design: 50 examples and best practices</a></li> +</ul> |