Startseite>CGI-Quellcode>Andere Kategorien
Herunterladen
front end

Es ist ein Repository für Webentwicklung

Vorbereitung : Für diese Inhalte muss der Student über einen Computer mit Internetzugang, einen Webbrowser mit HTML 5-Unterstützung (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera usw.) und einen Texteditor (VSCode usw.) verfügen. .) und eine Hosting-Plattform (kostenlos oder kostenpflichtig).

  • https://www.frontendmentor.io/
  • https://daily.dev/
  • https://getcssscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

Was ist eine Website?

Wenn wir über Website sprechen, können wir feststellen, dass dieser Begriff eine Kombination aus zwei englischen Wörtern ist: „web“, was Netzwerk bedeutet und sich auf das World Wide Web bezieht, und „site“, was Ort bedeutet. In diesem Sinne ist eine Website oder Site ein Ort, auf den im Internet über eine URL zugegriffen werden kann und der über eine Reihe von Seiten verfügt, die in einer bestimmten Sprache programmiert sind.

Um dieses Thema besser zu verstehen, schauen wir uns ein Beispiel an: Wenn Sie die Adresse blog.betrybe.com in Ihren Internetbrowser eingeben, um auf Trybes Blog zuzugreifen, sucht der Browser nach der Position dieser Website im Internet. Anschließend wird eine Anfrage an den Server gestellt.

Auf diesem Server werden alle Text-, Bild- und Stildateien gespeichert, aus denen die Webseite besteht. Anschließend sendet der Server diesen Dokumentensatz an den Browser zurück, damit dieser den Inhalt so anzeigen kann, wie Sie ihn auf Ihrem Bildschirm sehen.

Websites können unterschiedliche Formen und Inhalte darstellen. Zu den Optionen gehören: virtuelle Geschäfte wie Mercado Livre und Amazon, in denen Produkte gekauft und verkauft werden können; institutionelle Websites und Portfolios, die von Unternehmen und Personen genutzt werden, um sich zu präsentieren und von Kunden gefunden zu werden; und Blogs, wie der, den Sie gelesen haben.

Darüber hinaus können Websites auch als statisch oder dynamisch klassifiziert werden. Statische Websites werden im Allgemeinen mit HTML, CSS und JavaScript entwickelt. Der Inhalt ist einfacher und es gibt keine Interaktion mit einer Datenbank.

Dynamische Websites nutzen nicht nur HTML, CSS und JavaScript, sondern auch robustere Programmiersprachen wie PHP. Diese Websites verfügen über Funktionen, die mit einer Datenbank verbunden sind. Auf diese Weise kann jede aufgerufene Seite spezifische Daten enthalten.

Webdesign

Beim Webdesign müssen Sie die Bedeutung der Schnittstelle für die Website-Entwicklung, die Entwicklung der Technologien zur Erstellung umfangreicher Webseiten (Web 1.0, Web 2.0, Web 3.0 und Web 4.0) und die Entwicklung der Schnittstellen (ästhetisch, funktional und strukturell) beachten ).

Daher müssen Sie verstehen, wie wichtig es ist, umfangreiche Schnittstellen für die Erstellung einer Website zu erstellen, die beste Navigation und Benutzerfreundlichkeit für den Endbenutzer anzustreben und einige Technologien zu kennen, die in der Vergangenheit zum Erstellen von Online-Sites verwendet wurden. Beobachten Sie aus dieser Vision heraus alte Markttrends und erkennen Sie neue Trends in der Entwicklung von Schnittstellen.

Farbpalette:

  • https://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colourcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

Steigungen:

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

Webentwicklung

Im Grunde bedeutet Webentwicklung, Seiten für das Internet zu programmieren. Diese Aufgabe geht jedoch über die Verwendung von HTML und CSS hinaus, den grundlegenden Werkzeugen zum Erstellen einer statischen Seite – die Informationen präsentiert, die nur durch Bearbeiten des Quellcodes geändert werden können.

Umgekehrt können Seiten einer Website dynamisch sein. Dies bedeutet, dass der angezeigte Inhalt geändert werden kann, ohne in den Quellcode einzugreifen. Um dies zu ermöglichen, werden die dynamischen Teile der Website in einer Datenbank gespeichert, auf die bei Bedarf zugegriffen wird, um diese Inhalte abzurufen.

Diese Funktion ermöglicht die Entwicklung komplexer Anwendungen, die Geschäftsregeln, APIs (Application Programming Interface) und vieles mehr verwenden. Daher gibt es eine Aufteilung in Aktivitäten, die sich auf Webentwicklung, clientseitige Codierung (Front-End) und serverseitige Codierung (Back-End) konzentrieren.

API-Beispiel mit der derzeit am häufigsten für Web- und Mobilanwendungen verwendeten Struktur, der REST-API, auch RESTful API genannt.

Webanwendungen sind die wachsende Zahl von Websites im Web; sie ahmen Desktop-Anwendungen nach und nicht die herkömmlichen Dokumente und statischen Links aus Text und Bildern, die den Großteil des Webs ausmachen. Wir verfügen beispielsweise über Online-Textverarbeitungsprogramme, Fotobearbeitungstools, Kartenwebsites usw. Sie stützten sich stark auf JavaScript und brachten HTML4 an den Rand seiner Leistungsfähigkeit. HTML5 spezifiziert neue APIs (Application Programming Interface) für DOM (Document Object Model), eine plattformübergreifende, sprachunabhängige Konvention zur Darstellung und Interaktion mit HTML-, XHTML- und XML-Objekten und -Dokumenten.

Mithilfe dieser neuen APIs können Sie vom Server gesendete Objekte wie Zeichnungen, Videos und Ähnliches per Drag-and-Drop verschieben.

Diese neuen Schnittstellen, die HTML-Seiten über Objekte im DOM für JavaScript verfügbar machen, erleichtern das Schreiben von Anwendungen mithilfe hoch spezifizierter Muster und nicht nur mit schlecht dokumentierten Spielereien.

Noch wichtiger ist der Bedarf an einem offenen Standard, der kostenlos genutzt und implementiert werden kann und mit proprietären Standards wie Adobe Flash oder Microsoft Silverlight konkurrieren kann. Unabhängig davon, was Sie von diesen Technologien oder Unternehmen halten, glauben wir, dass das Web eine wichtige Plattform für Gesellschaft, Handel und Kommunikation ist, die in den Händen eines Herstellers liegt.

Es gibt Millionen von Webseiten, die bereits verwendet werden, und es ist unbedingt erforderlich, dass sie weiterhin reproduziert werden. Daher ist HTML5 größtenteils ein Derivat von HTML4, das weiterhin definiert, wie Browser mit alten Markups wie ,

und anderen neuen umgehen sollen, da sie von Millionen von Webseiten verwendet werden.

Schnittstelle

Der Begriff Schnittstelle kann je nach Fachgebiet mehrere Bedeutungen haben. Im Bereich der Informationstechnologie bedeutet Schnittstelle die Möglichkeit der Kommunikation zwischen zwei Systemen, die ohne externe Hilfe nicht auf natürliche Weise kommunizieren könnten .

HCI ist die Untersuchung der Interaktion zwischen Menschen und Computern. Es handelt sich um ein interdisziplinäres Fach, das Informatik, Kunst, Design, Ergonomie, Psychologie, Soziologie, Semiotik, Linguistik und verwandte Bereiche miteinander verbindet. Die Interaktion zwischen Mensch und Maschine erfolgt über die Benutzeroberfläche, bestehend aus Software und Hardware.

Die Mensch-Computer-Interaktion ist eine Disziplin, die sich mit dem Entwurf, der Bewertung und der Implementierung interaktiver Computersysteme für den menschlichen Gebrauch und der Untersuchung der sie umgebenden Hauptphänomene befasst.

Beispiel 3: Nachricht an E-Mail senden

 E-Mail senden

[HTML5] Multimedia-TAGs

Der Begriff digitale Medien ist das Gegenteil von analogen Medien, die auf einer materiellen Basis konfiguriert wurden: Der Ton wurde in kleinen Rillen auf einer Vinyloberfläche aufgezeichnet und wenn eine Nadel durch diese Rillen fuhr, wurde der Ton reproduziert. In digitalen Medien verschwindet der physische Träger praktisch und die Daten werden in Zahlen- oder Ziffernfolgen umgewandelt – daher die Verwendung des Begriffs „digital“. Auf diese Weise sind Töne, Bilder und Texte tatsächlich Zahlenfolgen, die den Austausch, die Speicherung und die Konvertierung von Daten ermöglichen. Im weitesten Sinne können digitale Medien als eine Reihe von Kommunikationsmitteln und -geräten definiert werden, die auf digitaler Technologie basieren und die digitale Verbreitung oder Kommunikation schriftlicher, akustischer oder visueller geistiger Werke ermöglichen. Mittel elektronischen Ursprungs, die in den Kommunikationsstrategien von Marken mit ihren Verbrauchern eingesetzt werden und im Allgemeinen als digitale Medien bezeichnet werden.

Flash war schon immer die praktischste Alternative für diejenigen, die Videos und Musik zu Webseiten hinzufügen mussten. Es war und ist in fast allen Browsern vorhanden und wir hatten ein Format, das sich ohne größere Probleme nutzen ließ.

Fügen Sie einfach einen Aufruf zum Plugin hinzu und es funktioniert.

Aufgrund von Browser-Inkonsistenzen war es notwendig, sowohl das ; Was den Befehl ; angeht, sind es spezifische Befehle zur Verwendung des Plugins, die viele Attribute duplizieren. Ganz zu schweigen davon, dass Plugins wie Flash viele Instabilitäten verursachen und Fehler verursachen, die sogar zum Schließen des Browsers führen.

Aus diesem Grund verfügt HTML 5 über eine neue spracheigene Unterstützung, um die Verwendung unnötiger Plugins und Befehle zu vermeiden. Führen Sie derzeit einfach den einfachen Aufruf aus, als wäre es ein Bild, und die Datei wird ausgelöst.

Das Problem des neuen Befehls ist die Verwendung des src -Attributs, das in einigen Browsern nicht gut funktioniert. Und wenn wir möchten, dass jeder die Seite mit jedem Browser öffnen kann, ist es notwendig, einen anderen Attributtyp zu verwenden. Daher ist es üblich, das -Attribut im -Tag zu verwenden.

Das -Element kann mehrfach verwendet werden und ermöglicht es Ihnen, für jeden Browser ein Videoformat zu definieren und so eine größere Reichweite zu erzielen.

Video

">
 < video width =" 426 " height =" 240 " controls >
  < source src =" video.mp4 " type =" video/mp4 " >
  < source src =" video.webm " type =" video/webm " >
  < source src =" video.ogg " type =" video/ogg " >
 video >

Audio-

">
 < audio controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

Es gibt mehrere mögliche Codecs und Sie müssen mindestens zwei Versionen exportieren, um eine größere Reichweite zu erzielen.

Hinweis : Codecs sind Programme zum Kodieren und Dekodieren von Mediendateien. Sie komprimieren das Originalformat, was die Speicherung begünstigt, und dekomprimieren es bei der Wiedergabe, um es wieder in Bild oder Audio umzuwandeln.

Alle genannten Audio- und Videobeispiele werden per Dokument in das Verzeichnis importiert. Und die Frage ist: Wie importiere ich ein Video, das bereits auf einer Website wie YouTube oder Vimeo gehostet wird? Und welche der beiden Lösungen (per Dokument oder per Server) ist die vorteilhafteste?

Video importieren

Sehen wir uns Schritt für Schritt an, wie man Videos von YouTube und Vimeo importiert!

[HTML5] Tabellen-Tags

Bis zum Erscheinen von HTML5 wurden Tabellen als Ressource für die Gestaltung von Seitenlayouts verwendet. Designer nutzten Tabellen als Raster für die Anzeige von Bildern und Texten. Sie waren weit verbreitet und wurden zur vorherrschenden Form des Website-Designs, wodurch ein reichhaltiges Erscheinungsbild geschaffen wurde.

Heutzutage behindert die Verwendung von Tabellen jedoch tatsächlich die Erstellung besserer, zugänglicherer, flexiblerer und funktionalerer Websites, insbesondere für neue Medien wie Mobiltelefone, Tablets usw.

Diese Tabellen sind in HTML 5 immer noch als Ressource für die Anzeige tabellarischer Daten, also Informationen aus einer Datenbank, vorhanden. Mit der neuen HTML-Version können wir Websites erstellen, die komplett ohne Tabellen auskommen, und so dynamische Layouts erstellen, die auf großen Bildschirmen wie auf einem Computer erscheinen und sich gut an einen kleinen Smartphone-Bildschirm anpassen. Später erfahren Sie, wie Sie mit HTML5 und CSS3 responsive Layouts erstellen.

Der Tabellenbefehl wurde nicht aus der Sprache entfernt, seine Verwendung wurde jedoch eingeschränkt. Andererseits haben wir immer noch mehrere Websites, die diese Ressource nutzen. Daher ist es wichtig, dass wir verstehen, wie sie funktioniert, damit wir diese Art von Seite bei Bedarf pflegen können.

Der Befehl zum Einfügen einer Tabelle lautet

. Um eine Zeile zu beginnen, müssen wir das Tag und für eine Zelle
einführen, das die Tabellenzeile teilt. teilt die Tabellenzeile, indem der Inhalt fett dargestellt wird. Alle diese Befehle werden als
, bzw. beendet. 

 < table >
  < tr >
    < td >  td >
    < td >  td >
   tr >
 table >

Der Befehl

verfügt über eine Reihe von Attributen, die bei der Tabellenformatierung hilfreich sind. Die wichtigsten sind:

align="" Richtet die Tabelle in drei Positionen aus: center , left , right und justify
bgcolor="" bestimmt die Farbe der Tabelle
border="" Bestimmt die Größe des Rahmens. Wenn der Wert Null ist, wird der Rahmen nicht angezeigt
cellspacing="" bestimmt den Abstand zwischen den Zellen
colspan="" bestimmt die Gruppierung zwischen zwei oder mehreren Tabellenspalten (seitlich)
rowspan="" bestimmt die Gruppierung zwischen zwei oder mehr Zeilen in der Tabelle. (Abwärts- und Aufwärtsrichtung)
cellpadding="" Bestimmt den Abstand zwischen Text und Zellrand

zeigt Text zentriert in Bezug auf die Tabelle an, als wäre es eine Beschriftung.

Regelattribut

Um die internen Zeilen auszuwählen, die in der Tabelle angezeigt werden, verwenden wir das RULES -Attribut im Tag. Die Ergänzungen dieses Attributs sind:

und
none keine ganze Zeile.
all um alle Zeilen zwischen jeder Spalte und Zeile in der Tabelle anzuzeigen (Standard)
rows für die horizontalen Linien zwischen den einzelnen Zeilen in der Tabelle.
cols für die vertikalen Linien zwischen den einzelnen Tabellenspalten.
groups für Zeilen zwischen Spaltengruppen und horizontalen Abschnitten, definiert durch spezielle Tags wie

Sehen Sie sich einige Beispiele an:

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
 Bilden Sie TAGs
 Der HTML-Formularteil ist sehr wichtig für das Ausfüllen von Daten, die Benutzer in die HTML-Seite eingeben. Die Erfassung dieser Daten erfolgt durch das Backend mit einer Backend-Programmiersprache (PHP, JavaScript, Python, Java usw.), die diese Daten in einer Datenbank (MySQL, PostgreSQL, MongoDB, OracleDB usw.) speichert und abfragt . ). Schauen wir uns Formular-Tags an:
 Anmeldeformular (Musterbeispiel) : 


	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form >
	Login: < br >
	< input type =" email " name =" email " > < br >
	Senha: < br >
	< input type =" password " name =" senha " > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 Über das Attribut type können wir den Typ unserer verwendeten input definieren, über das Attribut name='' können wir die über eine Programmiersprache gesendeten Daten verarbeiten.
 Anmeldeformular (Boilerplate) – Mit PHP : 

	Login:

	

	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form action =" processa.php " >
	Login: < br >
	< input type =" email " name =" email " required > < br >
	Senha: < br >
	< input type =" password " name =" senha " required > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 Anmeldeformular (Muster) : 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < html >
  < head >
    < title > Cadastro  title >
   head >
  < body >
     < h2 > Cadastre-se  h2 >
       < form action =" processa.php " >
	  Nome Completo: < br >
	  < input type =" text " name =" nome " required > < br >
	  
      Email: < br >
	  < input type =" email " name =" email " required > < br >
	  Senha: < br >
	  < input type =" password " name =" password " required > < br >
	  Repita a senha: < br >
	  < input type =" password " name =" password " required > < br >
	  	
	  Sexo: < br >
	  < input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
	  < input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
	  
	  Interesses: < br >
	  < input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
	  < input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
	  < input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
	  
	  Estado < br >
	  < select name =" estado " >
	    < option value =" RJ " > RJ  option >
	    < option value =" SP " > SP  option >
	    < option value =" MG " > MG  option >
	    < option value =" ES " > ES  option >
	   select > < br >
	
	  Comente! < br >
	  < textarea name =" comentario " >  textarea > < br >

	  < input type =" submit " value =" Cadastrar " >
        form >
    body >
 html >
 Wir können zwischen den Radios nur dann input , wenn der name gleich ist. Auf diese Weise können wir diese Informationen gruppieren und nur eines davon wird markiert.
 Mit checkbox können wir mehr als eine Option auswählen.
 Mit
 Wir können die  -Typen und ihre Attribute definieren:
  •  button
  •  password
  •  text
 Die Elemente  ,  und ">
 < button type =" button " > Clique Aqui  button >
 Kurz gesagt: Wenn Sie eine Schaltfläche für die Navigation erstellen, verwenden Sie  . Wenn Sie eine Schaltfläche zum Senden von Daten aus einem Formular erstellen, verwenden Sie  oder 
 Pseudoklasse Definition
 :hover Es ändert das Element, indem es mit der Maus darüber fährt.
 :active Ändern Sie das Element, indem Sie darauf klicken.
 :link Ändert alle nicht besuchten Links.
 :visited Ändert alle besuchten Links.
 :focus Ändert das  -Element, das den Fokus hat.
 :checked Ändert alle markierten  -Elemente.
 :disable Ändert alle deaktivierten  -Elemente.
 :enabled Ändert alle aktivierten  -Elemente.
 :empty Ändert alle 
 -Elemente, die keine untergeordneten Elemente haben.
 :first-child Ändert jedes aktivierte  -Element.
 :enabled Ändert jedes aktivierte  -Element.
 :first-child Ändert jedes 
 -Element, das das erste untergeordnete Element des übergeordneten Elements ist.
 :first-of-type Es ändert jedes 
 -Element, das das erste 
 -Element seines übergeordneten Elements ist.
 :in-range Ändert  -Elemente mit einem Wert innerhalb eines angegebenen Bereichs.
 :invalid Ändert alle  -Elemente in einen ungültigen Wert.
 :lang(language) Ändert jedes 
 -Element mit einem lang-Attributwert, der mit „ it „ beginnt.
 :last-child Es ändert alle 
 -Elemente, die die letzten untergeordneten Elemente ihres übergeordneten Elements sind.
 :last-of-type Ändert jedes 
 -Element, das das letzte 
 -Element seines übergeordneten Elements ist.
 :link Ändert alle nicht besuchten Links.
 :not(selector) Ändert jedes Element, das nicht das 
 -Element ist.
 :nth-child(n) Ändert jedes 
-Element, das von seinem übergeordneten Element aus geordnet ist.
 :nth-last-child(n) Ändert jedes 
-Element, das ausgehend von seinem übergeordneten Element geordnet ist, beginnend mit dem letzten untergeordneten Element.
 :nth-last-of-type(n) Ändert jedes 
-Element, das das zweite 
-Element seines übergeordneten Elements ist, gezählt vom letzten untergeordneten Element.
 :nth-of-type(n) Es ändert jedes 
-Element, das das zweite 
-Element seines übergeordneten Elements ist.
 :only-of-type Ändert das 
-Element, das das einzige 
-Element seines übergeordneten Elements ist.
 :only-child Es ändert jedes 
-Element, das das einzige untergeordnete Element seines übergeordneten Elements ist.
 :optional Ändert -Elemente ohne „required“-Attribut.
 :out-of-range Ändert -Elemente mit einem atr        
        
Expandieren

    



    

        

            Zusätzliche Informationen
        

        
    





    

        

            Ähnliche Anwendungen
        

        
    





    

        

            Empfohlen für Sie
        

        
    






    

        

            Ähnliche Nachrichten
            Alle