diff options
Diffstat (limited to 'files/es/web/progressive_web_apps')
| -rw-r--r-- | files/es/web/progressive_web_apps/developer_guide/installing/index.html (renamed from files/es/web/progressive_web_apps/developer_guide/instalar/index.html) | 0 | ||||
| -rw-r--r-- | files/es/web/progressive_web_apps/responsive/media_types/index.html | 394 | ||||
| -rw-r--r-- | files/es/web/progressive_web_apps/ventajas/index.html | 63 |
3 files changed, 394 insertions, 63 deletions
diff --git a/files/es/web/progressive_web_apps/developer_guide/instalar/index.html b/files/es/web/progressive_web_apps/developer_guide/installing/index.html index ef54a3b24c..ef54a3b24c 100644 --- a/files/es/web/progressive_web_apps/developer_guide/instalar/index.html +++ b/files/es/web/progressive_web_apps/developer_guide/installing/index.html diff --git a/files/es/web/progressive_web_apps/responsive/media_types/index.html b/files/es/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..bb7bb0bd23 --- /dev/null +++ b/files/es/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,394 @@ +--- +title: Media +slug: Web/CSS/Introducción/Media +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}</p> + +<p>Esta es la ultima sección de la primera parte del tutorial de <a href="/es/docs/Web/CSS/Introducción" title="es/docs/Web/CSS/Introducción">Introducción a CSS</a>. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.</p> + +<h2 class="clearLeft" id="Información_Media">Información: Media</h2> + +<p>El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.</p> + +<p>Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.</p> + +<p>Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.</p> + +<p>En el lenguaje de marcado, el elemento padre de esta área tiene el <strong>id</strong> <code>nav-area</code>. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo <strong>id</strong>.)</p> + +<p>Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:</p> + +<pre class="brush:css">@media print { + #nav-area {display: none;} + } +</pre> +</div> + +<p>Algunos de los tipos de medios comunes son:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Pantalla de computadora</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Medio paginado</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Pantalla proyectada</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Todos (por defecto)</td> + </tr> + </tbody> +</table> + +<div class="tuto_details"> +<div class="tuto_type">Mas detalles</div> + +<p>Existen otras maneras de especificar un conjunto de reglas para los distintos medios.</p> + +<p>El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo <code>media</code> en la etiqueta LINK.</p> + +<p>En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.</p> + +<p>Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.</p> + +<p>Para más detalles de los tipos de medio, ve <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> en la especificación de CSS.</p> + +<p>Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a>.</p> +</div> + +<h3 id="Imprimir">Imprimir</h3> + +<p>CSS tiene algún soporte especifico para impresión y para medios páginados en general.</p> + +<p>Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para <code>@page:left</code> y <code>@page:right</code>.</p> + +<p>Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (<code>in</code>) y puntos (<code>pt</code> = 1/72 inch), o centimetros (<code>cm</code>) y milimetros (<code>mm</code>). Es igualmente apropiado usar ems (<code>em</code>) para conincidir el tamaño de la fuente, y porcentajes (<code>%</code>).</p> + +<p>Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Esta regla determina los márgenes a una pulgada en todos los lados:</p> + +<pre class="brush:css">@page {margin: 1in;} +</pre> + +<p>Esta regla asegura que cada elemento H1 empiece en una nueva página:</p> + +<pre class="brush:css">h1 {page-break-before: always;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Más detalles</div> + +<p>Para más detalles del soporte de CSS para medios paginados, ver <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> en la especificación de CSS.</p> + +<p>Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.</p> +</div> + +<h3 id="Interfaces_de_Usuario">Interfaces de Usuario</h3> + +<p>CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.</p> + +<p>No existe un tipo especial de medio para aparatos con interfaz de usuario.</p> + +<p>Si existen cinco selectores especiales:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>E{{cssxref(":hover")}}</code></td> + <td>Cualquier elemento E que tenga el puntero sobre él</td> + </tr> + <tr> + <td><code>E{{cssxref(":focus")}}</code></td> + <td>Cualquier elemento E que tenga el foco del teclado</td> + </tr> + <tr> + <td><code>E{{cssxref(":active")}}</code></td> + <td>Cualquier elemento E que este envuelto en la acción actual del usuario</td> + </tr> + <tr> + <td><code>E{{cssxref(":link")}}</code></td> + <td>Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario</td> + </tr> + <tr> + <td><code>E{{cssxref(":visited")}}</code></td> + <td>Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota: </strong>La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a> para más detalles.</p> +</div> + +<p>La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.</p> + +<p>Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indicating a link</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indicating that the program cannot accept input</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indicating that the program is working, but can still accept input</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td>The default (usually an arrow)</td> + </tr> + </tbody> +</table> + +<p>Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.</p> + +<p>Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo <strong>disabled</strong> o el atributo <strong>readonly</strong>. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:</p> + +<pre class="brush:css">.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre> + +<p>Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:</p> + +<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>disabled</td> + <td>normal</td> + <td>active</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p>Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Más detalles</div> + +<p>Para más información sobre interfaces de usuario en CSS, ver <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> en la especificación de CSS.</p> + +<p>Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.</p> +</div> + +<h2 id="Acción_Imprimir_un_documento">Acción: Imprimir un documento</h2> + +<ol> + <li>Abrir un nuevo documento HTML, <code>doc4.html</code>. Copiar y pegar el contenido de aqui: + + <pre class="brush:html"><!DOCTYPE html> +<html> + <head> + <title>Print sample</title> + <link rel="stylesheet" href="style4.css"> + </head> + <body> + <h1>Section A</h1> + <p>This is the first section...</p> + <h1>Section B</h1> + <p>This is the second section...</p> + <div id="print-head"> + Heading for paged media + </div> + <div id="print-foot"> + Page: + </div> +</body> +</html> +</pre> + </li> + <li>Abrir una nueva hoja de estilo, <code>style4.css</code>. Copiar y pegar el contenido de aqui: + <pre class="brush:css">/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre> + </li> + <li>Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.</li> + <li>Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. + <table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section A</div> + + <div style="font-size: 75%;">This is the first section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section B</div> + + <div style="font-size: 75%;">This is the second section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </li> +</ol> + +<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;"> + <caption>Retos</caption> + <tbody> + <tr> + <td>Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. + <p>Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.</p> + + <p>Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Ver soluciones a estos retos.</a></p> + +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> + +<p>Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussion</a>.</p> + +<p>Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p> diff --git a/files/es/web/progressive_web_apps/ventajas/index.html b/files/es/web/progressive_web_apps/ventajas/index.html deleted file mode 100644 index e1fa9fad1f..0000000000 --- a/files/es/web/progressive_web_apps/ventajas/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Ventajas de una aplicación web progresiva (AWP) -slug: Web/Progressive_web_apps/Ventajas -tags: - - AWP - - aplicaciones web progresivas - - conceptos - - ventajas -translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications -translation_of_original: Web/Progressive_web_apps/Advantages ---- -<p class="summary">Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.</p> - - - -<h2 id="Reconocible">Reconocible<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>El objetivo final es que las aplicaciones web deben tener una mejor representación en los motores de búsqueda, ser más fáciles de exponer, catalogar y clasificar, y tener metadatos que los navegadores puedan utilizar para darles capacidades especiales.</p> - -<p>Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en la web mediante tecnologías patentadas como <a href="http://ogp.me/">Open Graph</a>, que proporciona un formato para especificar metadatos similares en el <code><head></code> de HTML usando metaetiquetas.</p> - -<p>El estándar web relevante aquí es el <a href="/en-US/docs/Web/Manifest">Manifiesto de aplicación web</a>, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato JSON. Esto es para usar en contextos como listados de aplicaciones y pantallas de inicio de dispositivos.</p> - -<ul> -</ul> - -<h2 id="Instalable">Instalable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una parte central de la experiencia de aplicaciones es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio, y ser capaz de pulsar para abrir aplicaciones en su propio contenedor nativo que se siente bien integrado con la plataforma subyacente.</p> - -<p>Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de las propiedades establecidas dentro del manifiesto de la aplicación web, y a través de una función disponible en los navegadores de teléfonos inteligentes modernos llamada <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Añadir a la página de inicio</a>.</p> - -<h2 id="Enlazable">Enlazable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una de las características más potentes de la Web es ser capaz de enlazar a una aplicación en una URL específica. No necesita tienda de aplicaciones, ningún proceso de instalación complejo. Así es como siempre ha sido.</p> - -<h2 id="Independencia_de_la_red">Independencia de la red<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web modernas pueden funcionar cuando la red no es confiable, o incluso inexistente. Las ideas básicas detrás de la independencia de la red son:</p> - -<ul> - <li>Volver a visitar un sitio y obtener sus contenidos, incluso si no hay una conexión red disponible.</li> - <li>Explore cualquier tipo de contenido que el usuario haya visitado anteriormente al menos una vez, incluso en situaciones de poca conectividad.</li> - <li>Controlar lo que se muestra al usuario en situaciones en las que no hay conectividad.</li> -</ul> - -<p>Esto se logra mediante una combinación de tecnologías: <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la <a href="/en-US/docs/Web/API/Cache">Cache API</a> para almacenar respuestas a solicitudes de red fuera de línea (muy útil para almacenar recursos del sitio) y tecnologías de almacenamiento de datos del lado del cliente como <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> y <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> para almacenar datos de la aplicación sin conexión.</p> - -<h2 id="Progresiva">Progresiva<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia súper genial a los navegadores totalmente capaces, y una experiencia aceptable (aunque no tan brillante) para los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas como <a href="/en-US/docs/Glossary/Progressive_Enhancement">mejora progresiva</a>.</p> - -<h2 id="Reconectable">Reconectable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a participar mediante actualizaciones y contenido nuevo, incluso cuando no están mirando la aplicación o utilizando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> para controlar páginas, el <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker, y la <a href="/en-US/docs/Web/API/Notifications_API">API de notificaciones</a> para generar notificaciones del sistema para ayudar a atraer a los usuarios cuando no están en el navegador.</p> - -<h2 id="Adaptable">Adaptable<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web adaptables usan tecnologías como consultas de media y viewport para asegurarse de que sus interfaces se ajusten a cualquier factor de forma: escritorio, móvil, tableta o lo que sea que venga después.</p> - -<h2 id="Seguro">Seguro<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2> - -<p>La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y garantiza que el contenido no haya sido alterado, siempre que aproveche de HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad. Además, puede verificar la verdadera naturaleza de una AWP confirmando que está en la URL correcta, mientras que las aplicaciones en las tiendas de aplicaciones a menudo pueden parecer una cosa, pero ser otra (<a href="https://twitter.com/andreasbovens/status/926965095296651264">ejemplo</a>).</p> |