Eina de descripció de conceptes

El SEO Search Engine Optimization: tècniques per millorar la visibilitat als cercadors. és clau per a qualsevol projecte web.

El SEO Search Engine Optimization: tècniques per millorar la visibilitat als cercadors. és essencial per millorar el posicionament web. El llenguatge HTML HyperText Markup Language: llenguatge base per estructurar pàgines web. s’utilitza juntament amb CSS Cascading Style Sheets: estilització visual d’una pàgina web. per definir l’aspecte. Amb JavaScript Llenguatge de programació que dona interactivitat a les pàgines web. pots fer que el contingut reaccioni a l’usuari. El disseny responsive Disseny que s’adapta a diferents mides de pantalla (mòbil, tauleta, ordinador). és clau per a una bona experiència. El back-end Part del web que no veu l’usuari: gestió de dades, servidors, etc. treballa conjuntament amb el front-end Part visual i interactiva del web que l’usuari veu i utilitza. . Un CMS Content Management System: sistema per gestionar contingut web (ex: WordPress). facilita la creació de webs sense programar. L’URL Uniform Resource Locator: l’adreça d’una pàgina web. identifica cada recurs a Internet. Una API Application Programming Interface: canal per connectar aplicacions entre si. permet que sistemes diferents treballin junts. El hosting Servei que allotja el teu web perquè sigui accessible a Internet. i el domini Nom únic que identifica el teu web (ex: www.elmeusite.cat). són imprescindibles per publicar-lo.

🧭 Què és un Tooltip i per què serveix

Un tooltip és un petit quadre de text que apareix quan l’usuari passa el cursor per sobre d’un element (com un botó, una icona o una paraula). Serveix per donar informació addicional sense saturar la pàgina, com ara:

• Definicions breus
• Explicacions de funcions
• Pistes o consells contextuals

És molt útil per millorar l’accessibilitat i l’experiència d’usuari, ja que permet mostrar contingut extra només quan cal. Això ajuda a mantenir la interfície neta i fàcil de navegar.

En resum, els tooltips són una manera senzilla i efectiva de proporcionar informació addicional sense sobrecarregar la pàgina.

🧾 Descripció del bloc style del Tooltip

Aquest codi CSS crea un tooltip personalitzat que apareix quan l’usuari passa el cursor sobre una paraula com “SEO”. El tooltip mostra informació addicional de manera discreta i visualment atractiva.

✨ Funcions principals del codi:

• Contenidor .tooltip: Defineix l’element que genera el tooltip. Està en línia amb el text, té un cursor d’ajuda (?) i un estil destacat.
• Quadre .tooltip-text: És el quadre que conté el text explicatiu. Està ocult per defecte (visibility: hidden, opacity: 0) i es mostra amb una transició suau quan l’usuari hi passa el cursor.
• Fletxa decorativa ::after: Afegeix una petita fletxa a la part inferior del quadre per indicar visualment que el text explicatiu està relacionat amb la paraula destacada.

🎨 Aspectes destacats del disseny:

La taula següent mostra les principals propietats CSS utilitzades per estilitzar un tooltip personalitzat. Cada fila explica la funció de cada propietat dins el context del disseny visual i el comportament del quadre informatiu.

🛠️ Com adaptar-lo

Pots modificar fàcilment:

• El text del tooltip (amb HTML, dins un class="tooltip-text">)
• Els colors i fonts per adaptar-los al teu estil
• La posició del quadre (canviant bottom, left, etc.)
• El comportament (afegint animacions, efectes, etc.)

Aquest codi és una base sòlida per crear tooltips personalitzats i millorar l’experiència d’usuari al teu lloc web.