Calculatoare încorporate: Ipoteze, validare și exemple
Construiește un calculator încorporat cu intrări validate, ipoteze vizibile, rezultate explicabile și soluții de accesibilitate de încredere pentru cititori și mașini.
Un calculator încorporat este un element de conținut interactiv care acceptă un set limitat de intrări de la cititor, aplică o formulă sau un model declarat și returnează o estimare pe care cititorul o poate interpreta. Câștigă încredere arătând modul în care a fost produs rezultatul — nu făcând aritmetica să pară misterioasă.
Estimare cost lunar al forței de muncă
Sarcini pe lună: 240
Minute per sarcină: 12
Cost orar încărcat: 36 $
Cost lunar estimat al forței de muncă: 1.728 $
Calcul: 240 × 12 ÷ 60 × 36 $. Această estimare exclude software, instruire, reluări și variații sezoniere de volum.
Această redare compactă demonstrează contractul minim: intrări denumite cu unități, un rezultat estimat clar etichetat, formula în limbaj simplu și excluderi care mențin numărul în domeniul său de aplicare. O versiune de producție permite cititorului să editeze cele trei valori, validează fiecare câmp și actualizează rezultatul fără a ascunde metoda.
De ce contează acest element
Un calculator înlocuiește un sfat abstract cu o consecință legată de situația cititorului. „Procesarea manuală este costisitoare” îi cere cititorului să creadă o afirmație generală. „La 240 de sarcini pe lună, 12 minute fiecare și 36 $ per oră încărcată, costul modelat al forței de muncă este de 1.728 $ pe lună” îi permite să inspecteze premisele și să decidă dacă rezultatul seamănă cu operațiunea sa. Interacțiunea încurajează, de asemenea, gândirea deliberată: introducerea unui număr de sarcini și a unui tarif orar face ca factorii de cost să devină concreți.
Același avantaj psihologic se poate inversa instantaneu. Un rezultat de „Ați putea economisi 48.311 $” fără o formulă vizibilă pare conceput pentru a produce o cifră de vânzări. Precizia excesivă amplifică problema deoarece interfața sugerează cunoștințe pe care nu le posedă. Încrederea depinde de trasabilitate: un cititor trebuie să poată identifica fiecare intrare, unitatea sa, intervalul permis, orice valoare furnizată de editor și modul în care aceste valori devin rezultatul final.
Extractibilitatea automată este capacitatea unui crawler, a unui sistem de răspuns AI, a unui instrument de accesibilitate sau a unui pipeline de publicare de a păstra acele relații fără a ghici din poziția vizuală. Rezultatul live al unui calculator este specific utilizatorului și adesea generat în browser, deci nu este un fapt stabil pe care o mașină să-l citeze. HTML-ul din jur trebuie, prin urmare, să expună scopul calculatorului, etichetele intrărilor, unitățile, valorile implicite, formula, ipotezele, eticheta rezultatului și un exemplu practic. Înregistrările structurate ale surselor ar trebui să păstreze aceleași câmpuri chiar dacă un motor de randare trece de la glisiere la câmpuri numerice.
Aplică regulile de redactare a elementelor înainte de a alege această componentă. Scopul are prioritate față de aspect: folosește un calculator numai atunci când valorile furnizate de cititor modifică semnificativ un răspuns calculat. Câteva statistici statice stilizate ca niște carduri cu câmpuri de intrare rămân un bloc de statistici, iar o serie de întrebări ramificate rămâne un arbore decizional.
Când să îl folosești
Folosește un calculator atunci când sunt îndeplinite trei condiții. În primul rând, cititorul poate furniza sau estima în mod rezonabil intrările necesare. În al doilea rând, există o formulă documentată sau un model delimitat care conectează acele intrări la un rezultat util. În al treilea rând, rezultatul schimbă o decizie: buget, capacitate, cantitate, punct de echilibru, perioadă de rambursare, necesar de timp potențial sau un alt pas măsurabil următor.
Utilizări solide includ estimări de cost total, capacitate de personal, cantități de materiale, comparații de abonamente, calcule de echilibru, estimări de livrare și modele de scenarii. Un calculator este deosebit de util atunci când textul simplu ar necesita ca cititorii să repete aritmetica pentru mai multe cazuri posibile.
Cazurile apropiate ar trebui să utilizeze un alt element:
- Un răspuns fix: publică numărul și sursa sa. O singură valoare imuabilă nu necesită interacțiune.
- O recomandare bazată pe categorii: folosește un arbore decizional atunci când răspunsurile se îndreaptă către opțiuni, în loc să se combine matematic.
- Un sondaj sau un scor alcătuit din opinii: folosește un test sau o evaluare. A numi un scor arbitrar „calcul” îi conferă o autoritate nemeritată.
- O prognoză nelimitată: folosește text de scenarii sau un grafic atunci când modelul depinde de un comportament necunoscut al pieței care nu poate fi exprimat onest ca intrări.
- Un formular de captare cu un total decorativ: un rezultat care apare doar după furnizarea datelor de contact este o poartă de conversie, nu un calculator încorporat.
- O determinare reglementată: nu prezenta eligibilitatea legală, diagnosticul, acoperirea de asigurare, obligația fiscală sau adecvarea investițiilor ca rezultat definitiv al unui calculator, cu excepția cazului în care modelul, revizuirea, jurisdicția și clauzele de declinare necesare susțin această utilizare.
Unde să îl plasezi
Plasează calculatorul după ce cititorul înțelege ce se estimează și înainte ca articolul să interpreteze scenarii sau să solicite o acțiune comercială. Introdu-l cu un paragraf scurt care menționează decizia, unitatea de ieșire și domeniul de aplicare al modelului. Dacă termeni necunoscuți sau valori implicite bazate pe surse afectează rezultatul, definește-i imediat înaintea câmpurilor.
Pe o pagină dedicată de instrument, calculatorul poate urma după hero și o afirmație de scop de o singură propoziție. Într-un ghid de costuri, plasează-l după ce intervalele de preț de bază și factorii de cost au fost explicate. Pe o pagină de produs sau serviciu, pune-l după ce capacitățile și constrângerile au stabilit potrivirea; altfel, interfața poate genera o rentabilitate convingătoare înainte ca cititorul să știe dacă oferta se aplică.
Păstrează zona de intrare, mesajele de validare, rezultatul, explicația calculului, ipotezele și controlul de resetare într-o singură regiune etichetată. Plasează metodologia extinsă și sursele imediat după aceasta. Elementul nu poate sta direct lângă un alt calculator, un formular concurent de captare, un cronometru cu numărătoare inversă sau un card promoțional cu rezultate. Nu trebuie să întrerupă un avertisment, să separe o intrare de unitatea sa sau să plaseze principalul îndemn la acțiune între rezultat și ipotezele sale. Afișează rezultatul înainte de orice acțiune opțională de tip „trimite această estimare pe e-mail”.
Anatomie
Captura adnotată trebuie să identifice aceste părți:
- Titlu și scop: denumește ce se estimează și condițiile pe care le acoperă modelul.
- Grup de intrare: oferă fiecărei valori editabile o etichetă persistentă, unitate, control adecvat și text de ajutor concis.
- Constrângere: indică un minim și un maxim realiste înainte de trimitere acolo unde limitele nu sunt evidente.
- Mesaj de validare: identifică câmpul, problema și cum să o corectezi fără a șterge alte intrări valide.
- Acțiunea de calcul: oferă o acțiune explicită atunci când actualizările automate ar fi deranjante sau costisitoare.
- Rezultat: etichetează rezultatul ca estimat, arată unitatea și precizia rezonabilă și anunță actualizările către tehnologia de asistare.
- Metodă: expune formula sau o succesiune de operații în limbaj simplu.
- Ipoteze și excluderi: distinge premisele furnizate de editor de intrările cititorului și menționează ce omite modelul.
- Proveniență: arată sursa și data verificării pentru valori implicite, rate și praguri volatile.
- Comenzi și pas următor: oferă Resetare sau Reîncepe, urmat de o acțiune opțională adecvată rezultatului.
Exemple de design
Fiecare variantă folosește același contract semantic. Schimbarea comenzilor sau a aspectului nu trebuie să modifice formula în mod silențios.
Estimare rapidă în linie
Folosește două până la patru câmpuri și un rezultat principal în cadrul unui articol explicativ. Ar trebui să se încadreze în coloana de conținut și să nu necesite un cont.
Intrare și rezultat afișate simultan
Folosește pe ecrane mai largi atunci când cititorii au nevoie ca rezultatul să rămână vizibil în timp ce ajustează patru până la opt intrări. Pe ecrane înguste, plasează intrările înaintea rezultatelor în ordinea DOM și vizuală.
Comparație de scenarii
Folosește atunci când cititorii beneficiază de compararea cazurilor curent, conservator și optimist. Păstrează aceeași formulă și aceleași unități în toate coloanele și menționează exact care intrări diferă. Nu eticheta cazul preferat al editorului drept „realist” fără dovezi.
Calculator în mai mulți pași
Folosește doar atunci când intrările formează în mod natural etape, cum ar fi utilizare, cost, apoi finanțare. Arată progresul, păstrează răspunsurile anterioare, permite revenirea fără pierdere de date și oferă o revizuire completă înainte de calcul.
Calculator terț încorporat
Folosește atunci când un specialist extern deține un model pe care site-ul nu îl poate reproduce în mod responsabil. Arată furnizorul, notificarea de partajare a datelor, starea de încărcare, linkul fix de rezervă și un rezumat text al domeniului de aplicare în afara cadrului. Un iframe singur nu este suficient ca conținut.
Parametri
„Sursă” mai jos înseamnă de unde obține motorul de randare parametrul. Nu înlocuiește sursa de cercetare pentru o rată sau o ipoteză.
| Nume | Tip | Obligatoriu | Min/max | Implicit | Sursă | |
|---|---|---|---|---|---|---|
title | Șir simplu | Da | 3–12 cuvinte; 100 caractere | Primul titlu din corp | Primul titlu | |
id | Identificator litere mici | Da după publicare | 2–8 cuvinte cu cratimă; unic pe pagină | Generat din titlu, apoi fixat | Atribut | |
variant | Enum | Nu | inline, split, scenario, multi-step, third-party | inline | Atribut | |
currency | Cod ISO 4217 | Condiționat | Un cod de trei litere | Niciunul | Atribut | |
precision | Întreg | Nu | 0–4 zecimale | 0 pentru valută; 2 în rest | Atribut | |
input | Înregistrare repetată | Da, cu excepția terților | 1–8; 12 pentru multi-pas | Niciunul | Corp | |
input.id | Identificator litere mici | Da | 1–5 cuvinte cu cratimă; unic | Niciunul | Atribut element | |
input.label | Șir simplu | Da | 2–10 cuvinte; 80 caractere | Primul titlu din corpul elementului | Primul titlu | |
input.type | Enum | Da | number, range, select sau radio | number | Atribut element | |
input.unit | Șir simplu sau cod unitate | Da pentru cantități | 1–12 caractere | Niciunul | Atribut element | |
input.min / input.max | Număr | Da pentru intrări numerice | Limite valide ale domeniului; min mai mic decât max | Niciunul | Atribute element | |
input.step | Număr pozitiv | Nu | Trebuie să se încadreze în domeniu și precizie | 1 | Atribut element | |
input.default | Număr sau ID opțiune | Nu | Trebuie să treacă aceeași validare ca datele utilizatorului | Gol | Atribut element | |
input.help | Text simplu | Nu | 5–25 cuvinte | Niciunul | Corp element | |
formula | Expresie versionată sau ID model | Da | O definiție testată | Niciunul | Corp | |
result.label | Șir simplu | Da | 2–10 cuvinte; trebuie să menționeze „estimat” acolo unde se aplică | Rezultat estimat | Corp | |
assumptions | Listă ordonată | Da | 1–8 elemente | Niciunul | Corp | |
verified | Dată ISO 8601 | Condiționat | O dată pentru date volatile ale editorului | Niciunul | Atribut | |
provider / src | Șir simplu și URL HTTPS | Doar pentru terți | Un furnizor și un URL aprobate | Niciunul | Atribute |
Tratează formula ca logică de producție versionată, nu ca text copiat într-un șablon. Explicația poate fi prietenoasă cu cititorul, dar trebuie să corespundă implementării testate. Valorile implicite trebuie să fie neutre, bazate pe surse sau etichetate explicit ca exemple; nu le alege niciodată doar pentru a maximiza beneficiul afișat.
Sintaxă și exemple de cod
Toate implementările de mai jos descriu aceleași trei intrări, constrângeri, formulă, etichetă de rezultat și ipoteze. Directiva portabilă este reprezentarea canonică autorată.
Directivă portabilă Markdown
:::calculator-embed{id=monthly-labor-cost currency=USD precision=0 variant=inline verified=2026-08-27}
## Estimează costul lunar al forței de muncă
::input{id=tasks label="Tasks per month" type=number unit=tasks min=1 max=100000 step=1}
Introdu sarcinile finalizate și încercate care consumă timpul personalului.
::
::input{id=minutes label="Minutes per task" type=number unit=minutes min=0.1 max=480 step=0.1}
Folosește o medie observată acolo unde este disponibilă.
::
::input{id=hourly-cost label="Loaded hourly cost" type=number unit=USD min=1 max=1000 step=0.01}
Include salariile și costurile cu forța de muncă plătite de angajator.
::
Formula: tasks * minutes / 60 * hourly-cost
Etichetă rezultat: Cost lunar estimat al forței de muncă
Ipoteze: volumul este lunar; timpul mediu de gestionare este stabil.
Exclude: software, instruire, reluări și modificări sezoniere.
:::
Shortcode Hugo
Adaptorul Hugo ar trebui să utilizeze parametri parentali denumiți și înregistrări de corp tipizate. Această notație definește maparea intenționată; nu susține că un shortcode local există deja.
{{< calculator-embed id="monthly-labor-cost" currency="USD" precision="0" variant="inline" verified="2026-08-27" >}}
## Estimează costul lunar al forței de muncă
{{< calculator-input id="tasks" label="Tasks per month" type="number" unit="tasks" min="1" max="100000" step="1" >}}
Introdu sarcinile finalizate și încercate care consumă timpul personalului.
{{< /calculator-input >}}
{{< calculator-input id="minutes" label="Minutes per task" type="number" unit="minutes" min="0.1" max="480" step="0.1" >}}
Folosește o medie observată acolo unde este disponibilă.
{{< /calculator-input >}}
{{< calculator-input id="hourly-cost" label="Loaded hourly cost" type="number" unit="USD" min="1" max="1000" step="0.01" >}}
Include salariile și costurile cu forța de muncă plătite de angajator.
{{< /calculator-input >}}
Formula: `tasks * minutes / 60 * hourly-cost`
Ipoteze: volumul este lunar; timpul mediu de gestionare este stabil.
{{< /calculator-embed >}}
Motorul de randare trebuie să valideze valorile înainte de calcul și din nou oriunde sunt procesate datele trimise. Trebuie să redea elemente <label> persistente, descrieri ale intrărilor, erori la nivel de câmp, un <output> pentru rezultat, ipoteze și un exemplu practic fără script sau randat pe server.
Bloc WordPress
<!-- wp:amicited/calculator-embed {"id":"monthly-labor-cost","currency":"USD","precision":0,"variant":"inline","verified":"2026-08-27","formula":"labor-cost-v1"} -->
<h2>Estimează costul lunar al forței de muncă</h2>
<!-- wp:amicited/calculator-input {"id":"tasks","label":"Tasks per month","type":"number","unit":"tasks","min":1,"max":100000,"step":1} /-->
<!-- wp:amicited/calculator-input {"id":"minutes","label":"Minutes per task","type":"number","unit":"minutes","min":0.1,"max":480,"step":0.1} /-->
<!-- wp:amicited/calculator-input {"id":"hourly-cost","label":"Loaded hourly cost","type":"number","unit":"USD","min":1,"max":1000,"step":0.01} /-->
<p data-result-label>Cost lunar estimat al forței de muncă</p>
<p data-assumptions>Volumul este lunar; timpul mediu de gestionare este stabil.</p>
<!-- /wp:amicited/calculator-embed -->
WordPress poate oferi comenzi vizuale în editor, dar atributele salvate și ieșirea randată pe server trebuie să păstreze contractul. Formula ar trebui să facă referire la un ID de model revizuit, nu să execute cod arbitrar introdus de autor.
Exemple
Corect: un rezultat pe care cititorul îl poate reproduce
Cost lunar estimat al forței de muncă: 1.728 $
- Sarcini pe lună: 240
- Minute medii per sarcină: 12
- Cost orar încărcat: 36 $
- Formula: 240 × 12 ÷ 60 × 36 $
- Ipoteze: volumul lunar al sarcinilor și timpul mediu de gestionare rămân stabile.
- Exclude: abonamente software, instruire, reluări și creșteri de cerere.
- Interpretare: testează un caz cu volum scăzut și unul cu volum ridicat înainte de a utiliza estimarea într-un buget.
Acest exemplu este corect deoarece intrările au unități, aritmetica reproduce rezultatul, iar excluderile împiedică numărul să pretindă că este costul total de operare. Rezultatul utilizează precizie în dolari întregi, adecvată intrărilor estimate.
Greșit: un număr persuasiv fără model
Introdu angajați: 8
Veți economisi 52.843,17 $ în fiecare an.
Programați o demonstrație pentru a vedea cum.
Acest exemplu este greșit deoarece o singură intrare nu poate stabili economiile de forță de muncă, domeniul de implementare, costul orar, adoptarea sau cheltuielile operaționale. Centimele exacte neexplicate creează o precizie falsă, niciun interval nu spune cititorului cum schimbă incertitudinea răspunsul, iar acțiunea de vânzare imediată blochează analiza. Este o afirmație de marketing deghizată în comenzi de calculator.
Marcarea schemei și accesibilitatea
Nu există un tip Schema.org general pentru un calculator încorporat. Marchează pagina înconjurătoare conform scopului său real, cum ar fi WebPage, Article, Product sau SoftwareApplication atunci când este eligibil. Nu eticheta calculatorul ca HowTo decât dacă pagina oferă cu adevărat o sarcină pas cu pas și nu codifica o estimare specifică unui vizitator ca Offer, price, recenzie sau rezultat măsurat. Un exemplu practic poate rămâne HTML vizibil; ipotezele și dovezile aparțin unui bloc surse
atunci când se bazează pe fapte externe sau volatile.
Accesibilitatea începe cu controale native și relații explicite. Asociază fiecare intrare cu un <label>, conectează textul de ajutor și cel de eroare cu aria-describedby, folosește inputmode="decimal" acolo unde este cazul și nu te baza niciodată pe textul de plasament ca etichetă. Menționează unitățile lângă câmp și în numele său accesibil atunci când rămâne ambiguitate. Nu face din glisiere singura metodă de intrare; oferă un câmp numeric sau o alternativă operabilă prin tastatură.
Validează la pierderea focalizării sau la trimitere fără a șterge valorile valide. Mută focalizarea către un sumar de erori doar după trimitere, apoi leagă fiecare element al sumarului de câmpul său. Anunță un rezultat schimbat printr-o regiune live politicoasă sau <output aria-live="polite"> fără a anunța fiecare tastare. Păstrează focalizarea atunci când rezultatul se actualizează. Culoarea poate consolida stările valide și invalide, dar nu poate fi singurul semnal.
Calculatorul trebuie să rămână ușor de înțeles atunci când JavaScript, un iframe sau un furnizor terț eșuează. Rezervă înălțimea cadrului pentru a preveni deplasările de layout, folosește un title descriptiv pe iframe-uri, dezvăluie datele trimise unui alt furnizor înainte de interacțiune și oferă un link normal sau un exemplu practic ca soluție de rezervă. Testarea cu tastatura, zoom, cititor de ecran, mișcare redusă, recuperare după erori și viewport îngust sunt cerințe de lansare.
Reguli de redactare
Scrie pentru inspecție, nu pentru persuasiune. Un cititor ar trebui să poată contesta o ipoteză fără a face inginerie inversă a interfeței.
- Păstrează titlul între 3–12 cuvinte și menționează cantitatea estimată.
- Folosește 1–8 intrări într-o singură vizualizare; grupează modelele mai mari în cel mult patru pași semnificativi.
- Păstrează etichetele intrărilor la 2–10 cuvinte și textul de ajutor la 5–25 cuvinte.
- Plasează unitatea în fiecare etichetă cantitativă sau simbolul de unitate adiacent; nu face cititorii să deducă niciodată dacă
12înseamnă dolari, luni, persoane sau procente. - Menționează toate ipotezele furnizate de editor într-o listă vizibilă de 1–8 elemente și identifică sursele sau deținătorii acestora.
- Afișează o formulă atunci când aritmetica obișnuită explică modelul. Pentru un model complex, explică succesiunea, ponderile importante și condițiile fără a expune cod sensibil.
- Rotunjește la precizia suportată de intrări. Orele întregi estimate și ratele aproximative nu justifică centimele.
- Preferă un interval de rezultate atunci când ipotezele incerte pot modifica semnificativ răspunsul. Denumește valorile utilizate pentru fiecare limită.
- Folosește verbe neutre precum „estimează”, „compară” și „modelează”. Evită „garantează”, „demonstrează”, „vei economisi”, „te califici” cu excepția cazului în care afirmația este susținută în mod real.
- Nu plasa niciodată comisioane ascunse, consimțământ de marketing preselectat, urmărire nedeclarată, valori implicite fabricate, testimoniale, numărătoare inversă sau o poartă de e-mail în interiorul calculatorului.
- Nu permite niciodată HTML brut, scripturi, cod la distanță sau o expresie executabilă introdusă de autor într-un câmp de formulă.
Tipuri de postări care îl folosesc
Acest tabel reflectă lista postTypes înregistrată în frontmatter.
| Tip postare | Rolul calculatorului încorporat | Plasare tipică |
|---|---|---|
| pagină calculator | Instrument principal care rezolvă o decizie măsurabilă | Imediat după domeniul de aplicare și definițiile necesare |
| ghid de costuri | Aplică rate documentate și factori de cost la scenariul cititorului | După intervale, includeri și excluderi |
| ghid de cumpărare | Modelează capacitatea, costul de deținere sau cantitatea după explicarea criteriilor | După criteriile de decizie, înainte de recomandări |
| pagină cu instrument gratuit | Oferă un rezultat util fără restricții și susține o acțiune ulterioară relevantă | Aproape de început, după o explicație concisă |
| pagină produs | Estimează cantitatea, potrivirea, utilizarea sau costul de operare pentru un produs verificat | După specificații și constrângeri |
| pagină serviciu | Produce un buget estimativ sau o estimare a capacității fără a prezenta o ofertă obligatorie | După domeniul de aplicare și logica de preț |
Lista de verificare QA
- Calculatorul rezolvă o decizie numerică reală; nu este un formular deghizat, un test sau o afirmație statică.
- Fiecare intrare are o etichetă persistentă, unitate, text de ajutor acolo unde este necesar și minim, maxim și pas realiste.
- Valorile goale, nenumerice, negative, în afara intervalului, cu zecimale localizate și extrem de mari sunt gestionate în siguranță.
- Valorile implicite sunt neutre și fie bazate pe surse, fie etichetate ca exemple.
- Formula implementată corespunde explicației vizibile și are teste unitare versionate, teste de limită și exemple practice reprezentative.
- Rezultatele menționează că sunt estimări, folosesc o precizie justificabilă și arată un interval atunci când incertitudinea o impune.
- Ipotezele, excluderile, deținătorul sursei și data verificării sunt vizibile lângă sau imediat după rezultat.
- Modificarea unei intrări produce schimbarea direcțională așteptată, iar Resetarea restaurează starea inițială documentată.
- Rezultatul promis apare înainte de orice solicitare de e-mail, cont, demonstrație sau achiziție.
- Etichetele, erorile, actualizările rezultatelor, comenzile și ordinea focalizării funcționează cu navigarea prin tastatură și cititor de ecran.
- Elementul rămâne ușor de înțeles fără JavaScript și oferă o soluție de rezervă atunci când o încorporare terță eșuează.
- Aspectul mobil păstrează etichetele lângă câmpuri, arată intrările înaintea rezultatelor și nu cauzează derulare orizontală la nivel de pagină.
- Niciun rezultat specific vizitatorului nu este emis ca o afirmație de schemă stabilă, testimonial sau rezultat garantat.
- Analizele înregistrează evenimente agregate de interacțiune fără a captura valori sensibile ale câmpurilor, cu excepția cazului în care consimțământul explicit și un scop valid susțin colectarea.
FAQ
Întrebările de mai jos acoperă precizia, indexarea, captarea lead-urilor, întreținerea și îmbunătățirea progresivă. Răspunsurile lor sunt, de asemenea, înregistrate în frontmatter, astfel încât pagina să le poată reda în mod consecvent prin intermediul șablonului Academy.
Mai multe tutoriale în această secțiune
Gata să pui în practică?
Verificare gratuită · Perioadă de încercare de 7 zile · fără card de credit