Lenguaje de programación utilizado para crear este sitio con pestañas

Danitaa · 27 Oct 2023

No se de diseño web y queria saber en que lenguaje esta hecho este sitio con esas "pestañas" por cada item. Busqué con algunas extensiones como whatruns pero no me dice nada. Es algun cms tal vez?

https://www.devicespecifications.com/es/model/ccb35a24

moiseseccam · 27 Oct 2023

Todas las vistas en el frontend son prácticamente HTML, Javascript y CSS.

La web que mencionas está hecha a medida, y al parecer usando Vanilla. ¿Qué es Vanilla? La esencia original de un software sin modificaciones

xplorando · 27 Oct 2023

Se puede hacer con Jquery. Encontrás bastantes ejemplos, plugins y variantes en la web.

Y Bootstrap ya lo trae implementado.

En ambos casos si lo quieres igualito solo te toca personalizarlo vía CSS. Hasta ahí... tabbed nav.

* Pero... al que pusiste de ejemplo en específico le veo detalles, por ejemplo... no creo que justifique que cada clic se convierta (te lleve) a una URL diferente. En términos de SEO y tu gusto personal puede que tenga sentido según tus fines, pero en términos de usabilidad... no, el usuario no se dará cuenta que cada clic cambia de URL, y la espera resulta "confusa", incómoda e innecesaria. Igual, en términos de usabilidad: algunos clics te cambian por completo el orden de los tabs, haciendo que si quieres dar clic en una opción que ya tenías vista... sorpresa, cambió de lugar.

JuanRJhony · 27 Oct 2023

El sitio que mencionas es personalizado en base a PHP montado con Apache HTTP Server, claramente utilizando CSS, HTML y Javascript.
En mi opinión tal y como te menciona @xplorando no me parece buena idea el que al dar clic en una pestaña del menú te lleve a una url diferente pudiéndolo hacer dinámicamente, sin embargo, depende mucho de tu necesidad o intención de realizarlo.

Puko · 27 Oct 2023

Danitaa dijo:
"pestañas" por cada item

son simples enlaces (html y css), como carga rapido hace parecer como si tuviera el efecto de cambiar el cuadro de las especificaciones en la misma pagina

<div class="tab-container"
<div style="top:0px;">
<a href=" "><span class="icon" style="background-image: url(https:// …/thickness.svg);"></span><span class="text">Grosor</span></a>
…
</div>
</div>
<div style="overflow: hidden; margin-top: 40px; position: relative;">
contenido de las especificaciones
</div>

Franco Gabriel · 27 Oct 2023

Danitaa dijo:
No se de diseño web y queria saber en que lenguaje esta hecho este sitio con esas "pestañas" por cada item. Busqué con algunas extensiones como whatruns pero no me dice nada. Es algun cms tal vez?

https://www.devicespecifications.com/es/model/ccb35a24

Es muy fácil de hacer utilizando el código <table> o separando los <a> mediante style="display:block;" y para que la misma foto aparezca siempre y no cambie cada vez que se presiona un <a> se utilizará algún otro código, o se puede recurrir al mismo host mediante otro <a> luego quedaría colocar algunos css y listo bro, si quieres te ayudo, pero ahorita estoy con poco tiempo, pero hacer una página igual utilizando los datos que yo te di, es súper sencillo, mira, yo tengo la mia, que hago algo similar, sin siquiera usar bootstrap http://www.forotexto.xyz/ (una vez te registras checas la sección de mensajeria o mensajes privados para ver que utilicé el mismo truco en mi foro)

Franco Gabriel · 27 Oct 2023

Puko dijo:
son simples enlaces (html y css), como carga rapido hace parecer como si tuviera el efecto de cambiar el cuadro de las especificaciones en la misma pagina

<div class="tab-container"
<div style="top:0px;">
<a href=" "><span class="icon" style="background-image: url(https:// …/thickness.svg);"></span><span class="text">Grosor</span></a>
…
</div>
</div>
<div style="overflow: hidden; margin-top: 40px; position: relative;">
contenido de las especificaciones
</div>

Yo creo que más bien:
<div class="CLASE">
<a style="display:block;" href="ENLACE-1">ITEM-1</a>
<a style="display:block;" href="ENLACE-2">ITEM-2</a>
<a style="display:block;" href="ENLACE-3">ITEM-3</a>
<a style="display:block;" href="ENLACE-4">ITEM-4</a>
</div>

<style> .CLASE {
width: auto;
height: 100%;
overflow: auto;
}
</style>

Puko · 27 Oct 2023

Franco Gabriel dijo:
Yo creo que más bien:
<div class="CLASE">
<a style="display:block;" href="ENLACE-1">ITEM-1</a>
<a style="display:block;" href="ENLACE-2">ITEM-2</a>
<a style="display:block;" href="ENLACE-3">ITEM-3</a>
<a style="display:block;" href="ENLACE-4">ITEM-4</a>
</div>

<style> .CLASE {
width: auto;
height: 100%;
}
</style>

solo puse un simple ejemplo del codigo que tiene la pagina pero reducido

Franco Gabriel · 27 Oct 2023

Puko dijo:
solo puse un simple ejemplo del codigo que tiene la pagina pero reducido

Sí, también se puede aplicar <table> para darle un lugar específico a cada enlace y hacerlo "mas cuadrado" a la página, incluso sería "mas responsive" si se lo aplica bién, sin necesidad de usar overflow, pero tardaría más en cargar la página, sobre todo si son muchos <a>

EasyProjects · 27 Oct 2023

Creo que las pestañas no tienen ninguna librería es javascript puro y duro xd

Danitaa · 28 Oct 2023

wow la velocidad y calidad de respuestas con código y todo. Mucho mas que lo esperado.

Pregunta: Si yo quisiera hacer algo parecido con algun cms cual podria servirme para la "estructura macro"?. No tengo problema de tocar un poco de codigo como el que me faciltaron aqui, pero me siento mas "segura" si la estructura general me la facilita un cms, aunque quizas sea menos eficiente pero es el costo que pago.

Mi necesidad central en este sitio es como nombraron: el SEO.

Gracias a todos !

EasyProjects · 28 Oct 2023

Danitaa dijo:
wow la velocidad y calidad de respuestas con código y todo. Mucho mas que lo esperado.

Pregunta: Si yo quisiera hacer algo parecido con algun cms cual podria servirme para la "estructura macro"?. No tengo problema de tocar un poco de codigo como el que me faciltaron aqui, pero me siento mas "segura" si la estructura general me la facilita un cms, aunque quizas sea menos eficiente pero es el costo que pago.

Mi necesidad central en este sitio es como nombraron: el SEO.

Gracias a todos !

Si no me equivoco puedes usar Snippets y Wordpress es la mejor opcion sin duda.

samuelsuteras · 28 Oct 2023

Danitaa dijo:
wow la velocidad y calidad de respuestas con código y todo. Mucho mas que lo esperado.

Pregunta: Si yo quisiera hacer algo parecido con algun cms cual podria servirme para la "estructura macro"?. No tengo problema de tocar un poco de codigo como el que me faciltaron aqui, pero me siento mas "segura" si la estructura general me la facilita un cms, aunque quizas sea menos eficiente pero es el costo que pago.

Mi necesidad central en este sitio es como nombraron: el SEO.

Gracias a todos !

Con wordpress, php y javascript se puede hacer rapido y facil

Puko · 28 Oct 2023

Danitaa dijo:
codigo como el que me faciltaron aqui

¿algo asi?
lo hice que fuera todo en la misma pagina
carga el contenido en cada div

Danitaa · 29 Oct 2023

EasyProjects dijo:
Si no me equivoco puedes usar Snippets y Wordpress es la mejor opcion sin duda.

samuelsuteras dijo:
Con wordpress, php y javascript se puede hacer rapido y facil

Perfecto, si con wp sería ideal porque me resulta muy amigable

Puko dijo:
¿algo asi?
lo hice que fuera todo en la misma pagina
carga el contenido en cada div

Eso!. Y este código puedo agregarlo en dentro del php del wordpress ?

Puko · 29 Oct 2023

Danitaa dijo:
Eso!. Y este código puedo agregarlo en dentro del php del wordpress ?

sii!

Lenguaje de programación utilizado para crear este sitio con pestañas

Danitaa

moiseseccam

xplorando

JuanRJhony

Puko

Franco Gabriel

Franco Gabriel

Puko

Franco Gabriel

EasyProjects

Danitaa

EasyProjects

samuelsuteras

Puko

Danitaa

Puko

Temas similares

Privacidad y transparencia

Privacidad y transparencia