Web arayüzü geliştirme yardım(taktik ihtiyacı)

Gerçekci olalım atasözlerimiz var bu konuyla ilgili ama bu resim işin özeti

Untitled.jpeg


1. Projeyi gizledim. Burada ağustosda aynı muhabbeti çevirdik, kimse projeye yardım etme çabasında değil.

2. picproje - stm32dunio forumlarında paylaştım oralarda'da bir yardım gelmedi kimse çatallamadı.

3. Yaklaşık 1-1.5 hafta gece gündüz dengem şaşarak yazdığım kodları kimsenin çalmasını istemiyorum. Bitince insanlar kullansın ozamanda kimse aaa ne güzel süper demez yok burası böyle olsaymış der sorun değil :)

4. dün akşam 6 saatlik html videosu izledim ne gerekiyorsa yapıcam.

herkese teşekkürler katkılarınız için
 
<div> tag'ını kullanmayı öğrenmen gerek.
Ayrıca arayüzün, kullanıcının ekranına göre şekil alması için düzenleme yapman gerek. Ben de bir zamanlar baktım ki öğren öğren bitmiyor, bıraktım web ile uğraşmayı. :)
 
Ha bide <div> tagını öğrendikten sonra css ile bu "div" leri şekillendirmeyi öğrenmen gerek.

Konu öyle senin aklındaki gibi "al şu kodu kullan olur", yada elektronikten örnek verecek olursak "oraya 10k direnç tak" diyerek aşılamayacak kadar derin.
 
  • Beğen
Reactions: nt
nt dedi ki:
28439 eklentisine bak
bu küçüklütmüş hali arkaplan resmi header'da oysa ki arka planda olması gerekli

kodum burada bir göz atarmısın usta
HTML: 
{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <title>Kayıt Sayfası</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }
        body {
        background: url('/home/n/Desktop/1.jpg') no-repeat center center fixed;
        background-size: cover;
    }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f2f2f2;
        }
       
        .form {
            background-color: #fff;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            width: 400px;
        }
       
        .form-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
       
        .form-group {
            margin-bottom: 20px;
        }
       
        .form-group label {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
       
        .form-group input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
       
        .form-group input[type="submit"] {
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
       
        .form-group input[type="submit"]:hover {
            background-color: #555;
        }
       
        .form-group .form-text {
            font-size: 14px;
            color: #888;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form class="form" action="{% url 'register' %}" method="POST">
            {% csrf_token %}
            <h2 class="form-title">Kullanıcı Kaydı</h2>
            <div class="form-group">
                <label for="username">Kullanıcı Adı:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="first_name">Adınız:</label>
                <input type="text" id="first_name" name="first_name" required>
            </div>
            <div class="form-group">
                <label for="city">Şehir:</label>
                <input type="text" id="city" name="city" required>
            </div>
            <div class="form-group">
                <label for="age">Yaşınız:</label>
                <input type="text" id="age" name="age" required>
            </div>
            <div class="form-group">
                <label for="email">E-posta Adresi:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password1">Şifre:</label>
                <input type="password" id="password1" name="password1" required>
                <p class="password-policy">8 karakter uzunluğunda, bir büyük harf, bir küçük harf, ve bir sayı içermelidir.</p>
            </div>
            <div class="form-group">
                <label for="password2">Şifre Tekrar:</label>
                <input type="password" id="password2" name="password2" required>
            </div>
            <div class="form-group">
                <input type="submit" value="Kayıt Ol">
                <p class="form-text">Zaten bir hesabınız var mı? <a href="{% url 'login' %}">Giriş yapın</a></p>
            </div>
        </form>
    </div>
</body>
</html>
Genişletmek için tıklayın...
Resim için style > body altındaki backgrund size 'ı değiştirmeyi dene.
Bende kodu inceleyip şurayı değiştir diyecek kadar tecrübeli değilim. O resmi düzeltmek için kodu alıp üzerinde çalışmam lazım ki şuan iş yerimdeyim. Pek mümkün değil.
 
  • Beğen
Reactions: nt
nt dedi ki:
şimdi html ile bilgili arkadaşa sorum; bu formu sayfaya nasıl yayarım, ikiye bölerim ya da bilmiyorum bilen söylesin lütfen.
Genişletmek için tıklayın...
Style altındaki form un width değerini büyüt. 600 yap, 800 yap. Sonrada ona göre altındaki elemanların width değerini değişmen gerekebilir.
 
O değilse form-group label altındaki margin bottom u değiştir.
 
Ben niye bıraktım sanıyorsun?
Html, css, php, database, java script, ajax bilmem ne... Birde bunlar kollara ayrılıyor. Bootstrap, laravel vs. O kadar çok ki kaybolursun içinde :D
 
Gokrtl dedi ki:
Ben niye bıraktım sanıyorsun?
Html, css, php, database, java script, ajax bilmem ne... Birde bunlar kollara ayrılıyor. Bootstrap, laravel vs. O kadar çok ki kaybolursun içinde :D
Genişletmek için tıklayın...

Her sıkıntıda kütüphane bakmamak lazım. Sadece html ve css kullanarak yerleşimleri kontrol etmek mümkün.
 
  • Beğen
Reactions: nt
css ile display: block display: inline display: inline-block stillerine bak. Ama işin daha doğrusu, oturup "html, css, javascript" üçgenini öğrenmen lazım. Bu işin en temeli. Önemli olan bu üçlüyü %100 bilmen değil. Ben de o kadar bilmiyorum. Ama genel mantığını anlarsan bilmediğini araştırıp bulabiliyorsun.
 
  • Beğen
Reactions: nt
taydin dedi ki:
Her sıkıntıda kütüphane bakmamak lazım. Sadece html ve css kullanarak yerleşimleri kontrol etmek mümkün.
Genişletmek için tıklayın...
İşte, keşke yerleşimle kalsa sorun. Html css bir yere kadar abi. Sonra benim açımdan php giriyor devreye. Saf php de kalmak en güzeli ve verimlisi ama piyasada laravel tarzı öyle modüller dönüyor ki bir şey ararken sürekli onlar ile yapılmış çözümler çıkıyor karşına. Bazı yerlerde php yetmiyor mecbur java scripte bulaşmak zorunda kalıyorsun filan.

Yine kendi açımdan baktığımda bazen php kütüphanelerini çözemiyorum. Adam anlatmış ama benim kafaya girmiyor yapı bir türlü. Çok sıkışınca da bıkkınlık veriyor bırakıyorum. Tıpkı bir zamanlar uğraştığım multimetre karşılaştırma web sitesi gibi :D
 
Yerleşim konusunda şöyle birşey yapabilirsin:

İki tane div oluştur ve bunları "display: inline-block" şeklinde yan yana yerleştir. Sol div de ad, soyad vs alan inputlar olsun, sağ divde de email adres ve şifreleri alan inputlar olsun. inputları "display: block" yaparsın, böylece alt alta yerleşirler.
 
  • Beğen
Reactions: nt
nt dedi ki:
bugünük son sorumu soruyorum günlük limiti aşmıyalım :D

şifre yazıyoruz ama görünmüyor yani ****** olarak görüyorum

bunun için emoji ekledim fakat göremiyorum hem normal karakter hemde ***** olarak görmek için

bir yerde hatam var :(

28461 eklentisine bak

28460 eklentisine bak
Genişletmek için tıklayın...
O öyle olmaz ya.
Orada da javascript devreye girer. Nasıl yapılır bilmiyorum ama input tipini password tanımlayınca yıldız yazıyor ya, belki orayı değişken olarak tanımlayarak çözülebilir. Yani bir tıklarsın input tipi text olur, bir daha tıklarsın input tipi password olur. JS de on klik olaylarına bir bak.
 
  • Beğen
Reactions: nt
nt dedi ki:
yazdım abi js acayip benziyor pythona hazır buluyorum zaten insanlardan :D crtl+c / crtl+v

JavaScript: 
 function togglePasswordVisibility(inputId) {
            var passwordInput = document.getElementById(inputId);

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
            } else {
                passwordInput.type = "password";
            }
        }
Genişletmek için tıklayın...
O değilde hakkaten input tipi değiştirilerek yapılıyormuş. Demek ki yapışmış yakamıza. Ne kadar bıraksak ta çözüm bulma mantığımız körelmemiş. :katil2:
 
nt dedi ki:
emoji göstermiyordur dedim sadece bir harf denedim oda yok ortada

acaba css ayarlarında bir hata yaptımda sağ sola mı gitti:dusun1:
Genişletmek için tıklayın...
İmput tagının kullandığı elemanlara baksana bi. Sanki oradan ayarlanıyordu.
 
İnput tagında onu düzenleyen bir komut var. Her zamanki gibi adını hatırlamıyorum. Onu kaldır.
 
  • Haha
Reactions: nt
Cevaplamak için giriş yap veya kayıt ol.

Çevrimiçi personel

Çevrimiçi üyeler

Toplam: 67 (üye: 20, misafir: 47)
Robotlar: 327

Forum istatistikleri

Konular
5,926
Mesajlar
101,237
Üyeler
2,504
Son üye
yaxe22

Bu sayfayı paylaş

Son kaynaklar

Son profil mesajları

L
Lyewor_ wrote on taydin's profile.
Merhabalar. Elektrik laboratuvarınız varsa bunun hakkında bir konunuz var mı acaba? Sizin laboratuvarınızı merak ettim de :)
•••
L
Lyewor_ wrote on taydin's profile.
Merhabalar forumda yeniyim! Bir sorum olacaktı lcr meterler hakkında. Hem bobini ölçen hemde bobin direnci ölçen bir lcr meter var mı acaba?
•••
S
stratus
gruptaki arkadaşlara selamlar. sıteyi bu gün fark ettim. Asansör için 2x7 segment LCD gösterge üretmek istiyorum. acaba bu sayfadaki arkadaşlardan destek alabilirmiyim. LCD nin mantık açılımı ektedir.
•••
D
deneyci wrote on TA3UIS's profile.
Selam.
Amatör telsiz lisansı nasıl alınıyor?
Lisansı olmayanı forumlarına almıyorlar. :)
Bilgi alamıyoruz.
•••
M
m.white wrote on Altair's profile.
İyi akşamlar.Arabanız ne marka ve sorunu nedir.Ben araba tamircisi değilim ama tamirden anlarım.
•••
Back
Top