Skip to content

Commit 7ffd78b

Browse files
SableRafSableRaf
committed
Added fancy pde:// install button
1 parent 14a8dff commit 7ffd78b

5 files changed

Lines changed: 448 additions & 236 deletions

File tree

‎css/install.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* Styling the install button for pde:// URI protocol */
2+
3+
.shield-button {
4+
display: flex;
5+
align-items: center;
6+
background-color: #ffffff;
7+
border: 2px solid #cccccc;
8+
border-radius: 50px;
9+
padding: 8px 20px 8px 15px; /* top right bottom left */
10+
cursor: pointer;
11+
transition: border-color 0.3s, background-color 0.3s;
12+
text-decoration: none;
13+
font-weight: bold;
14+
}
15+
16+
.shield-button:hover {
17+
border-color: #a9a9a9;
18+
background-color: #f2f2f2;
19+
}
20+
21+
.shield-button:active {
22+
border-color: #a9a9a9;
23+
background-color: #e0e0e0;
24+
}
25+
26+
.btn_logo-container {
27+
border-radius: 5px;
28+
padding: 5px;
29+
margin-right: 5px;
30+
}
31+
32+
.btn_logo {
33+
width: 30px;
34+
height: 30px;
35+
}
36+
37+
.btn_text-container {
38+
color: #333333;
39+
}
40+
41+
.btn_text {
42+
margin-top: 1rem;
43+
font-size: 1rem;
44+
color: #6f6f6f;
45+
}
46+
.btn_tooltip {
47+
position: relative;
48+
display: inline-block;
49+
cursor: pointer;
50+
}
51+
52+
.btn_tooltip .btn_tooltiptext {
53+
visibility: hidden;
54+
width: 250px;
55+
background-color: #555;
56+
color: #fff;
57+
text-align: left;
58+
border-radius: 6px;
59+
padding: 8px 10px 10px 25px; /* top right bottom left */
60+
position: absolute;
61+
z-index: 1;
62+
bottom: 125%; /* Position the tooltip above the button */
63+
left: 50%;
64+
margin-left: -125px; /* Center the tooltip */
65+
opacity: 0;
66+
transition: opacity 0.3s;
67+
}
68+
69+
.btn_tooltip .btn_tooltiptext::before {
70+
content: "";
71+
position: absolute;
72+
top: 100%;
73+
left: 50%;
74+
margin-left: -10px;
75+
border-width: 10px;
76+
border-style: solid;
77+
border-color: #555 transparent transparent transparent;
78+
}
79+
80+
/* link in tooltip: no underline, light blue, no clicked color */
81+
.btn_tooltip .btn_tooltiptext a {
82+
text-decoration: none;
83+
color: #8ec8f7;
84+
}
85+
86+
.btn_tooltip.show .btn_tooltiptext {
87+
visibility: visible;
88+
opacity: 1;
89+
}
90+
91+
@keyframes ellipsis {
92+
0% { content: " . "; }
93+
33% { content: " .. "; }
94+
66% { content: " ..."; }
95+
}
96+
97+
.ellipsis::after {
98+
content: "";
99+
display: inline-block;
100+
animation: ellipsis 1.2s infinite;
101+
}

‎es/install.html‎

Lines changed: 164 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,170 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Merriweather:300">
6-
<link rel="icon" type="image/png" href="https://android.processing.org/favicon.png">
7-
<link rel="stylesheet" href="../css/main.css">
8-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9-
<title>Processing para Android</title>
10-
</head>
11-
12-
<body>
13-
14-
<nav class="topnav">
15-
<ul class="left">
16-
<li><a href="https://processing.org/">Processing</a></li>
17-
<li><a href="https://p5js.org/">p5.js</a></li>
18-
<li><a href="https://py.processing.org/">Processing.py</a></li>
19-
<li><a href="https://pi.processing.org/">Processing for Pi</a></li>
20-
</ul>
21-
<ul class="foundation">
22-
<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Merriweather:300">
7+
<link rel="icon" type="image/png" href="https://android.processing.org/favicon.png">
8+
<link rel="stylesheet" href="../css/main.css">
9+
<link rel="stylesheet" href="../css/install.css">
10+
<script src="../js/install.js"></script>
11+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12+
<title>Processing para Android</title>
13+
</head>
14+
15+
<body>
16+
17+
<nav class="topnav">
18+
<ul class="left">
19+
<li><a href="https://processing.org/">Processing</a></li>
20+
<li><a href="https://p5js.org/">p5.js</a></li>
21+
<li><a href="https://py.processing.org/">Processing.py</a></li>
22+
<li><a href="https://pi.processing.org/">Processing for Pi</a></li>
23+
</ul>
24+
<ul class="foundation">
25+
<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
26+
</ul>
27+
</nav>
28+
29+
<header>
30+
<h1 class="title">Processing para Android</h1>
31+
</header>
32+
33+
<div class="group">
34+
35+
<nav class="site">
36+
<img class="logo" src="../imgs/logo.png" alt="Logo de Processing para Android">
37+
<ul class="leftnav">
38+
<li><a href="index.html">Principal</a></li>
39+
<li><a id="selected" href="install.html">Instalar</a></li>
40+
<li><a href="reference/index.html">Referencia</a></li>
41+
<li><a href="tutorials/index.html">Tutoriales</a></li>
42+
<li><a href="books/index.html">Libros</a></li>
43+
<li><a href="gallery/index.html">Galería</a></li>
44+
<li><a href="https://discourse.processing.org/c/processing-android" target="_black">Foro</a></li>
45+
<li><a href="https://github.com/processing/processing-android" target="_black">GitHub</a></li>
2346
</ul>
2447
</nav>
2548

26-
<header>
27-
<h1 class="title">Processing para Android</h1>
28-
</header>
29-
30-
<div class="group">
31-
32-
<nav class="site">
33-
<img class="logo" src="../imgs/logo.png" alt="Logo de Processing para Android">
34-
<ul class="leftnav">
35-
<li><a href="index.html">Principal</a></li>
36-
<li><a id="selected" href="install.html">Instalar</a></li>
37-
<li><a href="reference/index.html">Referencia</a></li>
38-
<li><a href="tutorials/index.html">Tutoriales</a></li>
39-
<li><a href="books/index.html">Libros</a></li>
40-
<li><a href="gallery/index.html">Galería</a></li>
41-
<li><a href="https://discourse.processing.org/c/processing-android" target="_black">Foro</a></li>
42-
<li><a href="https://github.com/processing/processing-android" target="_black">GitHub</a></li>
43-
</ul>
44-
</nav>
45-
46-
<section class="container main-text">
47-
48-
<div class="lang">
49-
<a href="../install.html">EN</a>
50-
<a id="selected" href="install.html">ES</a>
51-
</div>
52-
<hr style="clear:both;">
53-
54-
<h2>El modo Android</h2>
55-
<p> El componente principal de Processing para Android es el modo Android, un <a href="https://processing.org/reference/environment/#Programming_modes" target="_black"> modo de programación </a> para el Entorno de Desarrollo de Processing (o PDE por sus siglas en inglés), que incorpora todas las funciones necesarias para ejecutar los bosquejos de Processing en dispositivos Android y también en el emulador.</p>
56-
57-
<div class = "butterbar">
58-
Antes que nada, necesitas instalar Processing para poder usar el modo Android. Una vez que hayas <a href="https://www.processing.org/download/" target="_black"> descargado </a> el paquete de Processing correspondiente a tu Sistema Operativo, sigue las siguientes instrucciones para instalar el modo Android.
49+
<section class="container main-text">
50+
51+
<div class="lang">
52+
<a href="../install.html">EN</a>
53+
<a id="selected" href="install.html">ES</a>
54+
</div>
55+
<hr style="clear:both;">
56+
57+
<h2>El modo Android</h2>
58+
<p> El componente principal de Processing para Android es el modo Android, un <a
59+
href="https://processing.org/reference/environment/#Programming_modes" target="_black"> modo de
60+
programación </a> para el Entorno de Desarrollo de Processing (o PDE por sus siglas en inglés), que
61+
incorpora todas las funciones necesarias para ejecutar los bosquejos de Processing en dispositivos
62+
Android y también en el emulador.</p>
63+
64+
<div class="butterbar">
65+
Antes que nada, necesitas instalar Processing para poder usar el modo Android. Una vez que hayas <a
66+
href="https://www.processing.org/download/" target="_black"> descargado </a> el paquete de
67+
Processing correspondiente a tu Sistema Operativo, sigue las siguientes instrucciones para instalar el
68+
modo Android.
69+
</div>
70+
71+
<p>
72+
Para instalar la última versión del modo Android en Processing, primero asegúrate de que una ventana del PDE esté abierta, luego haz clic en "Instalar modo Android" abajo.
73+
</p>
74+
75+
<p>
76+
<div class="btn_tooltip" id="btn_tooltip">
77+
<a href="#" class="shield-button" id="openInProcessing">
78+
<div class="btn_logo-container">
79+
<img src="../imgs/logo.png" alt="Logotipo de Processing" class="btn_logo">
80+
</div>
81+
<div class="btn_text-container">
82+
Instalar Modo Android
83+
</div>
84+
</a>
85+
<div class="btn_tooltiptext">
86+
<p><span class="ellipsis">Abriendo en Processing</span></p>
87+
<p>Si no ocurre nada, <a href="https://processing.org/download/" target="_blank">descarga Processing</a> e intenta nuevamente.</p>
88+
<p>O <a href="https://github.com/processing/processing-android/releases/download/latest/AndroidMode.pdex"
89+
target="_blank">descarga el archivo</a> directamente.</p>
90+
</div>
5991
</div>
60-
61-
<p>También puedes usar solamente la biblioteca principal de Android para desarrollar aplicaciones de Android con el IDE de su elección, lee <a href="tutorials/android_studio/index.html" target="_black"> este tutorial </a> para más detalles.</p>
62-
63-
<h2>Instalación rápida</h2>
64-
65-
<p>
66-
Abre una ventana del editor de Processing y haz clic en el siguiente enlace:
67-
</p>
68-
69-
<p>
70-
<strong><a href="pde://github.com/processing/processing-android/releases/download/latest/AndroidMode.pdex" target="_black">Instalar Modo Android</a></strong>
71-
</p>
72-
73-
<p>
74-
Esto instalará la versión más reciente del modo Android.
75-
</p>
76-
77-
<h2>Administrador de Contribuciones</h2>
78-
<p>
79-
La última versión estable del modo Android se puede instalar a través del Administrador de Contribuciones (CM por sus siglas en inglés) en el PDE. Para abrir el CM, haga clic en la flecha en el selector de modos en la barra de menú y elije "Agregar modo...":
80-
</p>
81-
82-
<p> <img class = "body-image" src = "../imgs/install/mode_selector.png" alt = "Selector de modo en Processing"> </p>
83-
84-
<p>
85-
Una vez que aparezca la ventana del CM, selecciona el Modo Android en la lista y luego haz clic en el botón de instalación en la parte inferior de la ventana:
86-
</p>
87-
88-
<p> <img class = "body-image" src = "../imgs/install/cm.png" alt = "Administrador de contribuciones"> </p>
89-
90-
<p>
91-
Una vez que el modo Android esté instalado, podrás cambiarte al mismo usando el selector de modos en la barra de menú. Sigue el <a href="tutorials/getting_started/index.html" target="_black">tutorial de introducción</a> para dar tus primeros pasos con el modo Android.
92-
</p>
93-
94-
<h3 id="4.6-releases">La versión 4.6: mejoras en la estructura del proyecto y SDK</h3>
95-
<p>
96-
La versión 4.6 introduce <a href="whatsnew.html" target="_black">actualizaciones clave</a> en el modo Android, incluyendo una reorganización de la estructura del proyecto para <a href="https://github.com/processing/processing-android/wiki/Building-Processing-for-Android#developingdebuggingtesting-the-core-and-vr-libraries-with-android-studio">facilitar la depuración y el desarrollo</a>.</p>
97-
98-
<h3 id="4.5-releases">La versión 4.5: ¡Processing 4.0!</h3>
99-
<p>
100-
La versión 4.5 trae <a href="whatsnew.html" target="_black">varias mejoras</a> al modo Android, con un enfoque en la compatibilidad con Processing 4.0.</p>
101-
102-
<h3 id = "4.1-releases">Versión 4.1: depurador integrado y Realidad Aumentada</h3>
103-
<p>
104-
La versión 4.1 introduce <a href="whatsnew.html" target="_black">dos características notables</a> en Processing para Android: un depurador integrado, idéntico al que se encuentra disponible en el <a href="https://vimeo.com/140134398" target="_black">modo Java</a>, y una nueva biblioteca de realidad aumentada basada en <a href="https://developers.google.com/ar" target="_black">ARCore</a>.</p>
105-
106-
<h3 id = "4.0-releases">Versión 4.0: fondos de pantalla animados, caras de relojes y Realidad Virtual</h3>
107-
<p>
108-
La versión 4.0 incorpora <a href="whatsnew.html" target="_black"> varias mejoras </a> al modo Android, incluyendo nueva funcionalidad para crear <a href = "https://android-developers.blogspot.com /2010/02/live-wallpapers.html "target =" _ black "> fondos de pantalla animados </a>, <a href =" https://developer.android.com/training/wearables/watch-faces/index.html "target =" _ black "> cara de relojes</a> y <a href="https://vr.google.com" target="_black">RV</a>. Puedes encontrar más información sobre cómo utilizar esta funcionalidad en los tutoriales y las páginas de referencia de este sitio.</p>
109-
110-
<h2>Prelanzamientos</h2>
111-
<p>
112-
Las versiones preliminares, así como las versiones estables más antiguas, no están disponibles en el CM y deben instalarse manualmente. Para hacer esto, primero descargua el archivo AndroidMode-xyz.zip correspondiente a la versión antigua or preliminar deseada de la <a href = "https://github.com/processing/processing-android/releases" target = "_ black "> sección de versiones</a> en el repositorio de GitHub del modo Android. Descomprime el archivo zip y luego mueve la carpeta AndroidMode a la carpeta de modos dentro de la carpeta de bosquejos de Processing.
113-
</p>
114-
</section>
115-
116-
</div>
117-
118-
<footer class="footinfo">
119-
<small>&copy; The Processing Foundation. Processing para Android es un <a href="team.html">proyecto colaborativo</a>.</small>
120-
</footer>
121-
</body>
122-
</html>
92+
</p>
93+
94+
<p>También puedes usar solamente la biblioteca principal de Android para desarrollar aplicaciones de Android
95+
con el IDE de su elección, lee <a href="tutorials/android_studio/index.html" target="_black"> este
96+
tutorial </a> para más detalles.</p>
97+
98+
<h2>Administrador de Contribuciones</h2>
99+
<p>
100+
La última versión estable del modo Android también se puede instalar a través del Administrador de
101+
Contribuciones (CM por sus siglas en inglés) en el PDE. Para abrir el CM, haga clic en la flecha en el
102+
selector de modos en la barra de menú y elije "Agregar modo...":
103+
</p>
104+
105+
<p> <img class="body-image" src="../imgs/install/mode_selector.png" alt="Selector de modo en Processing">
106+
</p>
107+
108+
<p>
109+
Una vez que aparezca la ventana del CM, selecciona el Modo Android en la lista y luego haz clic en el
110+
botón de instalación en la parte inferior de la ventana:
111+
</p>
112+
113+
<p> <img class="body-image" src="../imgs/install/cm.png" alt="Administrador de contribuciones"> </p>
114+
115+
<p>
116+
Una vez que el modo Android esté instalado, podrás cambiarte al mismo usando el selector de modos en la
117+
barra de menú. Sigue el <a href="tutorials/getting_started/index.html" target="_black">tutorial de
118+
introducción</a> para dar tus primeros pasos con el modo Android.
119+
</p>
120+
121+
<h3 id="4.6-releases">La versión 4.6: mejoras en la estructura del proyecto y SDK</h3>
122+
<p>
123+
La versión 4.6 introduce <a href="whatsnew.html" target="_black">actualizaciones clave</a> en el modo
124+
Android, incluyendo una reorganización de la estructura del proyecto para <a
125+
href="https://github.com/processing/processing-android/wiki/Building-Processing-for-Android#developingdebuggingtesting-the-core-and-vr-libraries-with-android-studio">facilitar
126+
la depuración y el desarrollo</a>.</p>
127+
128+
<h3 id="4.5-releases">La versión 4.5: ¡Processing 4.0!</h3>
129+
<p>
130+
La versión 4.5 trae <a href="whatsnew.html" target="_black">varias mejoras</a> al modo Android, con un
131+
enfoque en la compatibilidad con Processing 4.0.</p>
132+
133+
<h3 id="4.1-releases">Versión 4.1: depurador integrado y Realidad Aumentada</h3>
134+
<p>
135+
La versión 4.1 introduce <a href="whatsnew.html" target="_black">dos características notables</a> en
136+
Processing para Android: un depurador integrado, idéntico al que se encuentra disponible en el <a
137+
href="https://vimeo.com/140134398" target="_black">modo Java</a>, y una nueva biblioteca de realidad
138+
aumentada basada en <a href="https://developers.google.com/ar" target="_black">ARCore</a>.</p>
139+
140+
<h3 id="4.0-releases">Versión 4.0: fondos de pantalla animados, caras de relojes y Realidad Virtual</h3>
141+
<p>
142+
La versión 4.0 incorpora <a href="whatsnew.html" target="_black"> varias mejoras </a> al modo Android,
143+
incluyendo nueva funcionalidad para crear <a
144+
href="https://android-developers.blogspot.com /2010/02/live-wallpapers.html " target=" _ black ">
145+
fondos de pantalla animados </a>, <a
146+
href=" https://developer.android.com/training/wearables/watch-faces/index.html " target=" _ black ">
147+
cara de relojes</a> y <a href="https://vr.google.com" target="_black">RV</a>. Puedes encontrar más
148+
información sobre cómo utilizar esta funcionalidad en los tutoriales y las páginas de referencia de este
149+
sitio.</p>
150+
151+
<h2>Prelanzamientos</h2>
152+
<p>
153+
Las versiones preliminares, así como las versiones estables más antiguas, no están disponibles en el CM
154+
y deben instalarse manualmente. Para hacer esto, primero descargua el archivo AndroidMode-xyz.zip
155+
correspondiente a la versión antigua or preliminar deseada de la <a
156+
href="https://github.com/processing/processing-android/releases" target="_ black "> sección de
157+
versiones</a> en el repositorio de GitHub del modo Android. Descomprime el archivo zip y luego mueve
158+
la carpeta AndroidMode a la carpeta de modos dentro de la carpeta de bosquejos de Processing.
159+
</p>
160+
</section>
161+
162+
</div>
163+
164+
<footer class="footinfo">
165+
<small>&copy; The Processing Foundation. Processing para Android es un <a href="team.html">proyecto
166+
colaborativo</a>.</small>
167+
</footer>
168+
</body>
169+
170+
</html>

‎imgs/logo_processing.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)