initial commit

2 files changed, 330 insertions, 0 deletions

diff --git a/files/es/server-sent_events/index.html b/files/es/server-sent_events/index.html
new file mode 100644
index 0000000000..9b22801732
--- /dev/null
+++ b/files/es/server-sent_events/index.html
@@ -0,0 +1,99 @@
+---
+title: Server-sent events
+slug: Server-sent_events
+tags:
+  - NeedsTranslation
+  - Server-sent events
+  - TopicStub
+translation_of: Web/API/Server-sent_events
+---
+<p>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/DOM/event" title="DOM/Event">Events</a> + data</em> inside the web page.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">Using server-sent events</a></dt>
+          <dd>
+            A tutorial guide to writing both server and client side part of a server-sent events app.</dd>
+          <dt>
+            <a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource reference</a></dt>
+          <dd>
+            A reference to the client-side EventSource API.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Server-sent_events" title="tag/Server-sent events">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+        <ul>
+          <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+          <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+          <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+        </ul>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li>
+  <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
+  <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
+</ul>
+<h2 id="Specification">Specification</h2>
+<ul>
+  <li><a href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Server-sent events</a></li>
+</ul>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<div>
+  {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>EventSource support</td>
+        <td>9</td>
+        <td>{{CompatGeckoDesktop("6.0")}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>11</td>
+        <td>5</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>EventSource support</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html b/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html
new file mode 100644
index 0000000000..81a2f5dacc
--- /dev/null
+++ b/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html
@@ -0,0 +1,231 @@
+---
+title: Utilizando eventos enviados por el servidor (server-sent event)
+slug: Server-sent_events/utilizando_server_sent_events_sse
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>Desarrollar una aplicación web que utilice server-sent events es muy fácil. Solo necesitas un pequeño código del lado del servidor para transmitir los eventos a la aplicación web, pero del lado de la aplicacion web se trabaja prácticamente igual que con cualquier otro tipo de eventos.</p>
+
+<p>Puedes ver un ejemplo <a href="https://developer.mozilla.org/samples/sse/">aqui</a> (actualmente no funciona).</p>
+
+<p><a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse">ejemplo2</a></p>
+
+<h2 id="Recibiendo_eventos_desde_el_servidor">Recibiendo eventos desde el servidor</h2>
+
+<p>El server-sent event API está contenido en la interfaz <a href="https://developer.mozilla.org/en/Server-sent_events/EventSource"><code>EventSource</code></a>; para abrir una conexión al servidor para recibir eventos de él. Se crea un nuevo objeto new <a href="https://developer.mozilla.org/en/Server-sent_events/EventSource">EventSource</a>, especificando el URI de un script que genera los eventos, Por ejemplo:</p>
+
+<pre class="brush: js">var evtSource = new EventSource("ssedemo.php");
+</pre>
+
+<div class="note"><strong>Nota</strong>: Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.</div>
+
+<p>Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:</p>
+
+<pre class="brush: js">evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>Este codigo escucha todos los mensajes entrantes (Es decir, todos los avisos del servidor, que no tienen un campo de eventos en ellos) y anexa texto del mensaje a la lista en el documento HTML.</p>
+
+<p>También puedes escuchar eventos, usando <code>addEventListener()</code>:</p>
+
+<pre class="brush: js">evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+</pre>
+
+<p>Este código es similar,  excepto que este se activa cada vez que el servidor envia un mensaje con el campo de evento "ping"; entonces se analiza el JSON en el campo de datos y retorna esa informacion.</p>
+
+<h2 id="Enviando_eventos_desde_el_servidor">Enviando eventos desde el servidor</h2>
+
+<p>El script del servidor que envia los datos tiene que responder con el tipo MIME text/event-stream. Cada notificación se envia con un bloque de texto terminado en un par de saltos de línea, para mas detalles sobre el formato sobre la secuencia de evetos, ver {{ anch("Event stream format") }},</p>
+
+<p>El codigo PHP para este ejemplo que estamos utilizando:</p>
+
+<pre class="brush: php">date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, sent a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_flush();
+  flush();
+  sleep(1);
+}
+</pre>
+
+<p>Se genera un evento cada segundo, con el evento "ping". Los datos de cada evento es un objeto JSON que contiene, en este caso, solo la fecha en formato ISO 8601 correspondiente a la hora en que se generó el evento. A intervalos aleatorios, se envia un mensaje simple (sin ningún tipo de evento)</p>
+
+<h2 id="Gestion_de_errores">Gestion de errores</h2>
+
+<p>Cuando se producen problemas (como un tiempo de espera o problemas relacionados con el control de acceso), se genera un evento de error. Puedes tomar acción sobre esto al implementar una devolución de llamada al objeto EventSource:</p>
+
+<pre class="brush: js">evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+</pre>
+
+<p>En Firefox 22, no parece que haya manera de distinguir entre los diferentes de eventos de error.</p>
+
+<h2 id="Cerrando_flujo_de_eventos" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">Cerrando flujo de eventos</h2>
+
+<p>Por defecto, si la conexión entre el cliente y el servidor se cierra, la conexión es reiniciada. Podemos terminar la conexión con el método <code>.close()</code></p>
+
+<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">evtSource.close();</code></pre>
+
+<div> </div>
+
+<h2 id="Formato_de_flujo_de_eventos_(formato_stream)">Formato de flujo de eventos (formato stream)</h2>
+
+<p>El flujo de eventos es una corriente sencilla de datos de texto, que deben ser codificados usando UTF-8. Los mensajes en el flujo de eventos están separados por un par de caracteres de salto de línea. Si hay un símbolo de dos puntos como primer caracter de una línea, se entiende que es un comentario y es ignorado. </p>
+
+<div class="note"><strong>Nota:</strong> La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.</div>
+
+<p>Cada mensaje consiste en una o más líneas de texto que enumeran los campos para ese mensaje. Cada campo está representado por el nombre del campo, seguido por los datos de texto para el valor de ese campo.</p>
+
+<h3 id="Campos">Campos</h3>
+
+<p>Los siguientes nombres de campo son definidos por la especificación:</p>
+
+<h4 id="event">event</h4>
+
+<p style="margin-left: 40px;">El tipo de evento. Si se especifica, un evento se enviará al navegador a la escucha para el nombre del evento especificado, el sitio web usaria <code>addEventLister()</code> para escuchar eventos nombrados. El controlador <code>onmessage</code> se llama si no se especifica el nombre del evento para un mensaje.</p>
+
+<h4 id="data">data</h4>
+
+<p style="margin-left: 40px;">El campo de datos  para el mensaje. Cuando el EventSource recibe múltiples lineas con "<code>data:</code>", se concatenara, insertando un caracter de nueva de linea entre cada uno. Se eliminan los saltos de línea al final <strong>[VERIFICAR].</strong></p>
+
+<h4 id="id"><strong>id</strong></h4>
+
+<p style="margin-left: 40px;">  El ID del evento que establecerá el último ID del objeto EventSource.</p>
+
+<h4 id="Retry"><strong>Retry</strong></h4>
+
+<p style="margin-left: 40px;">El tiempo de reconexión para usar al intentar enviar el evento. [Qué código maneja esto?] Este debe ser un número entero, que especifica el tiempo de reconexion en milisegundos. Si se especifica un valor no entero, el campo se ignora.  </p>
+
+<p>Se omiten todos los demas nombres de campo.</p>
+
+<div class="note"><strong>Nota:</strong> Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Mensajes_con_datos_únicamente">Mensajes con datos únicamente</h4>
+
+<p>En el siguiente ejemplo, hay tres mensajes enviados. El primero es solo un comentario, debido a que empieza con dos puntos. Como se mencionó anteriormente, esto puede ser útil para mantener la conexión viva si los mensajes no son enviados regularmente.</p>
+
+<p>The second message contains a data field with the value "some text". The third message contains a data field with the value "another message\nwith two lines". Note the newline in the value.</p>
+
+<p>El segundo mensaje contiene un campo de datos con el valor "some text". El tercer mensaje contiene un campo de datos con el valor "another message\nwith two lines". Nota la nueva línea en el valor.</p>
+
+<pre>: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+</pre>
+
+<h4 id="Eventos_nombrados">Eventos nombrados</h4>
+
+<p>Este ejemplo envia algunos eventos nombrados. Cada uno tiene un nombre de evento especificado por el campo <code>event</code>, y un campo <code>data</code> cuyo valor es una cadena JSON apropiada con los datos necesarios para que el cliente actue sobre el evento. El campo <code>data</code>, podria, por supuesto, tener cualquier cadena; no tiene que ser un JSON.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="Mezclando_y_emparejando">Mezclando y emparejando</h4>
+
+<p>No tienes que usar solamente mensajes sin nombrar o eventos tipados; puedes mezclarlo juntos en un solo flujo de evento.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+</pre>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>9</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android-and-Meego</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>6 a 24 b</td>
+   <td>1.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>11.1</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>