javascript - attribute - tags html5

Sitio web de HTML estático-Bootstrap-Compatibilidad con múltiples idiomas

Question

Para empezar quiero decir que soy un novato en Desarrollo Web.

Me pidieron que construyera un sitio web estático (para un hotel de tamaño pequeño), y compré this plantilla html5 - CSS3. Se compone de HTML puro - css3, y algunos JavaScript para presentaciones de diapositivas, etc. y utiliza el marco de arranque.

Ya he creado el sitio web, y ahora se me pidió que agregara soporte multilenguaje. ¿Puedo lograr esto a través de bootstrap? ¿Se puede hacer incluso con CSS?

De lo contrario, ¿debería tener una copia de todos mis archivos .html en una subcarpeta (por ejemplo, "sitio web" / en / "contenido") y redirigir al usuario a través de un enlace en la parte superior de la página, o debo usar JavaScript para decidir? ¿el idioma?

En resumen, me gustaría que un usuario que visita mi sitio web de otro país obtenga la versión en inglés del sitio, mientras que todos los demás obtienen el idioma predeterminado. Quiero un desarrollo lo más rápido posible (es por eso que compré una plantilla) para ponerme en marcha lo antes posible (la temporada de verano ya ha comenzado). Tengo una experiencia razonable en programación, pero soy totalmente nuevo en Desarrollo Web.

Answer 1

Bootstrap no tiene nada que ver con eso. No, no puedes traducir un sitio usando CSS puro. Tendrás que cambiar la fuente HTML para que contenga texto diferente. Sí, puede hacerlo haciendo una copia de todos sus archivos HTML y cambiando el texto en ellos. Normalmente, tendrá un lenguaje del lado del servidor con plantillas HTML que le permitirá intercambiar las traducciones por texto de forma dinámica sin tener que tener una copia completa de su código. Sin embargo, no suena como si fuera algo que podría poner en funcionamiento lo suficientemente rápido.

La detección del idioma del cliente y el servicio de una versión adecuada del sitio también es algo que requerirá cierta cantidad de programación del lado del servidor. Nuevamente, no suena como algo en lo que podrías entrar lo suficientemente rápido.

Answer 2

Puede hacer esto dentro de un solo archivo sin usar ningún lenguaje de programación del lado del servidor. Debería revisar i18siguiente para obtener una solución javascript adecuada.

También puedes usar CSS puro para traducir una página de inicio. Intenta algo como

.en, .de, .it { display:none; } /* hide all elements with a language class */
.en:lang(en), .de:lang(de), .it:lang(it) { display:block; } /* show those elements that match their language class */

Cuando establece un atributo lang adecuado en su etiqueta html (por ejemplo, mediante javascript) puede traducir su página muy fácilmente:

<div class="en">Good morning</div>
<div class="de">Guten Morgen</div>
<div class="it">Ciao</div>

Answer 3

Puede usar los botones múltiples para los botones múltiples como dos botones para dos idiomas y vincularlos entre sí. por ejemplo:

english languages link here

index.html

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DESIGN</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="services.html">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="logo.html">logo design</a></li>
<li><a href="banner.html">Banner Design</a></li>
<li><a href="psd.html">Psd Desgin</a></li>
</ul>
</li>
<li><a href="contact.html">contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span><img src="img/fr.png" height="20px" width="20px"></span>English</a></li>
<li><a href="fr_index.html"><span><img src="img/eng.png" height="20px" width="20px"></span> French</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Hello Listen Dear !!!!</h1>
<p>Why i listen you?</p>
</div>
french language page
link here
fr_index
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CONCEPTION</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="fr_index.html">Accueil</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="fr_services.html">Prestations de service<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="fr_logo.html">création de logo</a></li>
<li><a href="fr_banner.html">Conception de bannière</a></li>
<li><a href="fr_psd.html">Psd Design</a></li>
</ul>
</li>
<li><a href="fr_contact.html">Contactez nous</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span><img src="img/fr.png" height="20px" width="20px"></span>English</a></li>
<li><a href="fr_index.html"><span><img src="img/eng.png" height="20px" width="20px"></span> French</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Bonjour Cher Ecoute !!!!</h1>
<p>Pourquoi je t''écoute?</p>
</div>

es un trabajo definitivamente gracias

Answer 4

Si su sitio web se supone que es estático y usa la misma solución que la página de arranque, que funciona con Jekyll, puede usar las páginas de Jekyll y github para marcar en los archivos de texto de la plantilla y hacer una referencia externa en un archivo Yaml que contiene las cadenas. cada idioma (como en.yml y br.yml).

Entonces, cuando jekyll construye la página estática, generará los archivos, directorios y referencias adecuados para navegar por la página en diferentes idiomas. Esto no debe hacerse con Javascript, la página en cada idioma debe ser generada.

Hice esto con un sitio web: https://github.com/worknenjoy/airspace-jekyll que genera la página https://worknenjoy.github.io/airspace-jekyll/

El selector de idioma redirige a una dirección pt a una página de portugués brasileño y la página predeterminada es el inglés. El código es de código abierto y está ahí.

Puedes ver en Gemfile que la gema usada es el plugin jekyll-multiple-languages ​​( https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin )

es responsable de crear todo lo que necesita para que esta traducción sea más fácil.