ساخت کارت ویزیت در اپلیکیشن
فهرست مطالب مقاله ساخت کارت ویزیت در اپلیکیشن
ساخت کارت ویزیت در اپلیکیشن
یکی از صفحات متداول اپلیکیشن‌ها صفحه “درباره ما” هست که معمولا در این صفحه اطلاعاتی از اعضای تیم قرار داده می شود. ما در این مقاله نحوه ساخت پروفایل کاربری به صورت کارت را به شما آموزش می دهیم. در ادامه قادر خواهید بود برای هر یک از اعضای تیم در صفحه “درباره ما” چیزی شبیه کارت ویزیت بسازید که شامل نام فرد، تصویر، سمت و اطلاعات تماس فرد می باشد.
مراحل ساخت کارت ویزیت در اپلیکیشن
وارد پنل ساخت اپلیکیشن با آدرس http://make.appsaz.ir شوید و در بخش امکانات ، امکان “سورس کد” را انتخاب نمایید.
در صفحه باز شده کد زیر را وارد کنید.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: orange;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">پروفایل کاربری</h2>
<div class="card">
<img src="https://appsaz.ir/wp-content/uploads/2017/02/d.png" alt="" style="width:100%">
<h1>امیر درجه</h1>
<p class="title">مدیر اپ ساز</p>
<div style="margin: 24px 0;">
<a href="https://www.linkedin.com/in/amir-darajeh-40969841/"><i class="fa fa-linkedin"></i></a>
</div>
<a href="mailto:info@appsaz.ir"><button>تماس</a></button></a>
</div>
</div>
</body>
</html>
خروجی نهایی در اپلیکیشن موبایل به صورت تصویر زیر می باشد.
در صورتی که کاربر بر روی آیکن لینکدین کلیک نماید به صفحه شخصی این فرد در لینکدین هدایت می شود. همچنین با کلیک بر روی دکمه تماس امکان ارسال ایمیل مستقیم به این فرد را پیدا می کند.
کد ارسال ایمیل در بالا به صورت زیر مشخص شده است که شما برای ساخت کارت ویزیت لازم است به جای متن قرمز رنگ آدرس ایمیل مورد نظر خود را قرار دهید.
<a href="mailto:info@appsaz.ir"><button>تماس</a></button></a>
همچنین برای تغییر آدرس لینکدین متن قرمز رنگ زیر را در کد تغییر دهید.
<a href="https://www.linkedin.com/in/amir-darajeh-40969841/"><i class="fa fa-linkedin"></i></a>
در این قسمت از کد نیز می توانید تصویر،نام و سمت فرد را تغییر دهید.
<img src="https://appsaz.ir/wp-content/uploads/2017/02/d.png" alt="" style="width:100%">
<h1>امیر درجه</h1>
<p class="title">مدیر اپ ساز</p>
در خط اول، آدرس قرمز رنگ در واقع آدرس تصویر آپلود شده کاربر می باشد. شما در این قسمت باید آدرس url تصویر موردنظر را جایگزین نمایید. همچنین در خط دوم و سوم به جای متن قرمز رنگ ، متن مورد نظر را وارد نمایید.
در صورت تمایل می توانید به جای یک کارت ویزیت چندین کارت ویزیت در صفحه درباره ما بسازید. برای این کار کافی است کد زیر را مجدد کپی نمایید و قبل از </body> پیست نمایید و این بار اطلاعات فرد جدیدی را وارد نمایید.
<div class="card">
<img src="#" alt="" style="width:100%">
<h1>نام فرد جدید</h1>
<p class="title">سمت</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<a href="#"><button>تماس</a></button></a>
</div>
با این کار شما می توانید یک صفحه “درباره ما” حرفه ای با استفاده از سیستم اَپ ساز و بدون هیچ دانش برنامه نویسی ، در کم ترین زمان ممکن بسازید.
مقالات مرتبط
آموزش کامل ساخت ربات تلگرام از صفر تا صد (۲۰۲۶)
صفر تا صد ساخت ربات تلگرام؛ از گرفتن توکن در BotFather تا کدنویسی با پایتون، اتصال به دیتابیس و خرید هاست مناسب. راهنمای عملی و قدمبهقدم.
راهنمای کامل ساخت اپلیکیشن مشابه اسنپ فود | مراحل، امکانات و هزینه
بررسی سیر تا پیاز ساخت اپلیکیشن سفارش آنلاین غذا؛ معرفی ۳ پنل اصلی (کاربر، رستوران، پیک)، فناوریهای مورد نیاز، تخمین هزینه و راهکارهای ورود به بازار.
تفاوت اپ استورهای داخلی و خارجی؛ بررسی امکانات، چالشها و زیرساختها
گوشیهای هوشمند بدون اپ استور، برنامه و بازی، عملاً بخش مهمی از کارایی خود را از دست میدهند. در این مقاله با اپ استورها بیشتر آشنا خواهیم شد
آموزش TestFlight | راهنمای گامبهگام تست اپ iOS (۲۰۲۶) | اپ ساز
با این آموزش TestFlight، نحوه تست اپلیکیشن iOS خود با TestFlight را قبل از انتشار در اپ استور بیاموزید. + نکات کلیدی برای توسعهدهندگان.
چرا استفاده از اپلیکیشنهای موبایل ضروریست؟
گوشی تلفن همراه، تقریبا یک دهه است که با تغییر ماهیتی جدی و آرام پا به زندگی ما گذاشته است. به گونهای پیش رفته که برای افراد تصور زندگی حتی
