Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Masina universala :)

God's Crooked Lines(2022)

Mai nou, și poliția loc...
 TAHITI ligue 1

Control polaritate motor dc 24v

Problema tensiune Generator Ford ...

Protejare sunca
 Cum se procedeaza daca jandarmii ...

Honor 70

Accident cu auto fara RCA (fara p...

Probleme arzator Ferroli SUN P7
 Recomandare telefon in jur de 150...

Întrebare despre banda de derulare

Atlantic Money

Ska-nk - Arata-i c-o iu…
 

Website responsive

- - - - -
  • Please log in to reply
9 replies to this topic

#1
1pane

1pane

    New Member

  • Grup: Candidate Members
  • Posts: 9
  • Înscris: 23.03.2020
Doar pt html si css aici. Cu ce sa incep prima data? Sa fac site ul pt telefon si sa il fac responsive pentru desktop/ tableta dupa? Sau sa il construiesc pt desktop si dupa sa il fac responsive pt.  tableta/ telefon si asa mai departE? Cu ce e bine sa incep mai intai?

#2
Flat

Flat

    Bugetar Esențial

  • Grup: Senior Members
  • Posts: 32,163
  • Înscris: 23.06.2006
chiar astazi am citit un articol pe tema asta:
https://dev.to/kevin...he-hard-way-kgb

#3
1pane

1pane

    New Member

  • Grup: Candidate Members
  • Posts: 9
  • Înscris: 23.03.2020

View PostFlat, on 06 aprilie 2020 - 12:18, said:

chiar astazi am citit un articol pe tema asta:
https://dev.to/kevin...he-hard-way-kgb
Mersi mult. Sunteti web developer?

#4
Flat

Flat

    Bugetar Esențial

  • Grup: Senior Members
  • Posts: 32,163
  • Înscris: 23.06.2006
am fost. nu mai sunt. doar consultanta si "plimbat hartii" cum zic unii  :)
cand faceam siteuri web nu era decat mobil wap cu ecran de 320x240.. nimeni nu se gandea la mobile

acum paradigma e inversa, statisticile arata ca majoritatea accesarilor unui site, orice site, cu putine exceptii, este de pe dispozitive mobile.
de aceea gandirea designului unui site in stil clasic (template pt ecran de pc) este depasita

simplitatea e mai buna decat supraincarcarea
uite cum arata republica.ro si cum arata hotnews

#5
Mizu

Mizu

    moroșan

  • Grup: Senior Members
  • Posts: 17,644
  • Înscris: 10.12.2006
Traficul de pe mobil l-a depasit pe cel de pe desktop.

Problema e ca nu stiu sa existe inca aplicatii care sa faca constructia unui website mobil la fel de usoara, dar e cum zice ala in articol in privinta dificultatii de a face aceasta trecere de la desktop, necesita si un efort mental.

Instaleaza Android Studio si construieste cu el. Eu lucrez in paralel, construiesc ceva pe desktop si apoi ma uit imediat si la mobil cum arata, daca trebuie sa adaug CSS sau nu, imi incap mai multe chestii pe ecranul de 27" 2560x1440.

Vreau sa imi mentin si traficul desktop, dar si viteza de incarcare pe mobil, e mai mult de lucru. Poti pune rapid o imagine care sa redimensioneze cand e accesata de pe mobil, dar problema e dimensiunea ei. Deci daca vrei performanta pe ambele accesari trebuie sa pui doua sau mai multe imagini, una pentru desktop si restul pentru ce dispozitive mobile vrei sa accesezi, din cauza asta eu nu ma stresez decat pe desktop si am in Android Studio diverse telefoane, dar testez in principal pe Google Pixel 3A la 1080x2220 440dpi Android 9.

Cu greu poti folosi si Developers Tools cu Android Studio, cu rezultate mediocre.

#6
Bogdan__26

Bogdan__26

    Junior Member

  • Grup: Junior Members
  • Posts: 39
  • Înscris: 26.01.2016
Îți sugerez să începi cu telefonul și să ajustezi codul pe măsură ce crești rezoluția. De ce spun asta, fiindcă o să scrii mai puțin cod spre deosebire de varianta desktop -> mobile unde trebuie să revi asupra design-ului și să îl modifici. Când ai multe funcționalități și proprietăți css pe care vrei să le modifici/ștergi, pe telefon poate să devină complicat așa că mai bine modifici funcționalitățile pe măsură ce avansezi.

Eu am început cu desktop și mi-a luat ceva timp până să înțeleg că e mai benefic prima dată mobile.

Folosește chrome develope tools. Poți selecta telefonul dorit ca să vezi cum arată site-ul/aplicația pe rezoluția respectivă. Poți de asemenea să adaugi tu o rezoluție în funcție de ceea ce ai nevoie.

Așa cum s-a spus mai sus d.p.d.v statistic, accesarea site-urilor e mai mare pe dispozitive mobile spre deosebire de altele.

Găsești pe internet o mulțime de tutoriale gratuite despre responsivitate. La început e mai greu dar cu cât avansezi o să fie mai ușor.

Baftă!

#7
whiteboy

whiteboy

    Member

  • Grup: Members
  • Posts: 924
  • Înscris: 18.12.2007
Cred a trecut mai bine de un an jumate de cand am inceput sa merg pe mobile first.
La inceput a fost destul de ciudatel pentru ca toata viata am mers pe desktop first. Am simtit diferenta inca de la primul proiect, development-ul a fost mult mai rapid, iar rezultatele au fost peste masura.

Totusi am intampinat unele probleme "psihologice". Mi-a fost destul de greu sa fac design-ul mobile-first in XD/Figma, idee la care am renuntat intre timp. In prezent fac 3 design-uri pentru acelasi proiect in ordinea urmatoare: desktop, tableta, mobile (uneori chiar si xs-mobile). Asa am o viziune mai buna asupra a ce vreau sa fac.

Daca esti la inceput iti recomand sa inveti sa lucrezi cu SASS/SCSS cat mai repede si o conventie de numire a claselor (de exemplu BEM).
Ca sa iti usurezi munca si mai mult, poti folosi module de live compiling si live server in IDE-ul tau.

Eu folosesc VS Code cu extensiile Live Server si Live Sass Compiler. Practic imi creaza un mediu de lucru in 10 secunde.

#8
belemistul

belemistul

    Active Member

  • Grup: Members
  • Posts: 1,485
  • Înscris: 03.06.2020

View PostBogdan__26, on 06 aprilie 2020 - 18:23, said:

Îți sugerez să începi cu telefonul
poate si cu browserul pe laptop.
ii da posibililtatea sa-l conformeze in tot felul de moduri.

#9
p00pstar

p00pstar

    New Member

  • Grup: Members
  • Posts: 5
  • Înscris: 28.01.2006
Eu pentru design responsive in Visual Code folosesc Tailwind CSS. E un fel de bootstrap mai avansat si foarte usor de utilizat, dupa ce te familiarizezi cu el...

#10
Bogdan__26

Bogdan__26

    Junior Member

  • Grup: Junior Members
  • Posts: 39
  • Înscris: 26.01.2016
Uite de exemplu cum procedez eu.

- incep sa construiesc site-ul incepand cu rezolutie pentru telefon, de exemplu 320px si pe masura ce avansez la rezolutii mai mari ( de exemplu 480px, 768px, 992px, 1024px, 1200px, 1400px etc ) ajustez design-ul folosind media query. Acest procedeu se numeste " Mobile First", de asemenea poti proceda si invers folosind metoda "Desktop First", in functide de site-ul/aplicatia pe care o dezvolti.  - Iti sugerez prima data sa stii foarte bine css mai ales cum sa folosesti media query si lucrul cu procentele, flexbox, css grid etc si apoi sa folosesti un framework sau o librarie.
- daca vrei sa folosesti un framework ai de ales intre (Bootstrap, Bulma, Material Design), acestea sunt principalele si cele mai des folosite.
- daca vrei sa folosesti o librarie ( Tailwind )
- diferenta dintre librarie si framework este ca cel din urma are anumite clase si functionalitati predefinite spre deosebire de librarie. De exemplu la bootstrap ca sa creezi un card folosesti clasa .card sau pentru un button poti folosi .btn, .btn-primary, spre deosebire de librarie.
- intr-un final foloseste ce stii si ce crezi ca e mai bine pentru proiectul tau, aceste librarii si framework-uri sunt optionale pe care le folosesti pentru a-ti micsora timpul de lucru si de asemenea pentru o mai buna organizare a codului.

Spor la studiu!

Anunturi

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate