Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.
Zunächst sollten wir den Begriff "Absprungrate" kennen
In?easy words we can say, bounce rate is the ratio between the number of visitors comes on our site and the number of visitors leaves our site from the landing page without navigating to another page.
Wenn Besucher oder Kunden von einem anderen externen Link auf unserer Website landen, z. B. Werbung, Suchergebnis, freigegebener Link usw., aber wenn sie die internen Links der Website nicht besuchen. Dadurch wird die Absprungrate erhöht, da der Server von Google Analytics nicht ausgelöst wird, da keine Verbindung besteht.
Dies senkt also unser Ranking in den Suchmaschinenergebnissen, was definitiv einen großen Verlust für das Wachstum unserer Website darstellt.
Wenn es auf die Absprungrate ankommt
Wir sollten bedenken, dass wenn das Ziel unserer Website der Austausch von Informationen ist, Bounce für uns keine Rolle spielt. Nehmen wir ein Beispiel, wenn unsere Webseite textbasierte Informationen enthält und
Die Absprungrate ist jedoch von entscheidender Bedeutung, wenn wir uns darauf freuen, mehr und mehr aktive Besucher auf unseren Websites zu gewinnen.
Der Hauptgrund für die Absprungrate
Das Laden der Website nimmt mehr Zeit in Anspruch.
Schlechte Benutzeroberfläche und Inhaltsverwaltung.
Die Benutzeroberfläche der Zielseite ist komplex und nicht für jeden Benutzertyp leicht verständlich.
Besucher haben die Informationen nicht auf die intelligente Art und Weise erhalten, nach der sie gesucht haben.
Interne Links unserer Website sind für die Besucher nicht eindeutig hervorgehoben.
Unerwünschtes Popup auf den Zielseiten.
So messen Sie die Absprungrate
Google bietet viele nützliche Dienste für unsere Website. Zur Messung der Absprungrate können wir verwendenhttps://analytics.google.com/
Um diese Tools nutzen zu können, benötigen wir lediglich ein Google-Konto und verknüpfen unsere Website mit Google Analytics. Hinweis: Wenn Sie Hilfe zur Verwendung dieses Tools benötigen, schreiben Sie die Abfrage in das Kommentarfeld unten auf der Seite.
Laut Google
Die Absprungrate ist eine Sitzung mit einer Seite geteilt durch alle Sitzungen oder den Prozentsatz aller Sitzungen auf Ihrer Website, in denen Benutzer nur eine einzelne Seite angesehen und nur eine einzelne Anforderung an den Analytics-Server ausgelöst haben. Wie kann die Absprungrate unserer Website minimiert werden?
Eine gute Landing Page
Eine Landing Page ist die erste Seite, auf der unsere Besucher unsere Website aufrufen, indem sie auf die Links der Suchmaschinenergebnisse klicken.Wissensband?is a good example of the landing page.
Reduzieren Sie die Ladezeit der Seite
Als Benutzer wissen wir, wie irritierend das Durchsuchen der langsamen Seiten ist. Besucher drücken einfach die Zurück-Taste, wenn das Laden einer Seite länger als 5 Sekunden dauert. Unerwünschte Skripte von Drittanbietern auf unserer Website verlängern ebenfalls die Ladezeit der Seite. Wenn wir ein nicht optimiertes Bild anzeigen, dauert es auch länger, bis es geladen ist.
Tipps:?Laut Google liegt ein guter Wert für die Seitengeschwindigkeit bei 85 oder höher. Mit dem Google Analytics-Tool können wir die Geschwindigkeit unserer Seiten ermitteln.
Entfernen Sie unerwünschte Popups
Unerwünschte Popups und Anzeigen auf den Seiten sind auch dafür verantwortlich, die Absprungrate zu erhöhen.
AB-Prüfung
AB Testing ist ein nützliches Experiment, bei dem zwei oder mehr Designs derselben Seite den Besuchern zufällig angezeigt werden. Anhand des Berichts über die AB-Tests können wir analysieren, welches Design die bessere Leistung erbracht und mehr Conversion erzielt hat.
CTA: Aufruf zum Handeln
CTA ist wie eine versteckte Falle oder ein Köder auf unserer Landing Page.
NetBeans ist eine der besten und leistungsfähigsten IDEen für jede Webentwicklung, die speziell für PHP-Frameworks wie ZenCart, OpenCart, CakePhp usw. am besten geeignet ist. CakePhp verwendet für seine View-Dateien eine eigene benutzerdefinierte Dateierweiterung, z. B. * .ctp. NetBeans kennt diese Datei standardmäßig nicht. Es wird also keine Farbcodierung angezeigt, wenn diese Dateitypen in den NetBeans geöffnet werden. Wir müssen diese Funktionen manuell aktivieren. Im Folgenden finden Sie die Schritte zum Aktivieren der Hervorhebung für CakePHP .ctpfiles. 1. Extras => Optionen
2. Verschiedenes => Dateien
3. Klicken Sie auf die Schaltfläche Neu und geben Sie ein ctp. Klicken Sie dann auf OK.
4. Aus Associated File Type (MIMI): Wählen Sie: text / x-php5.
5. Klicken Sie auf OK.
Hinweis: Starten Sie die IDE neu, wenn die Änderungen nach den obigen Schritten nicht übernommen wurden.
Nach der Lektüre dieses Blogs wissen Sie, wie Sie mit der großen Datenmenge im Select2-Dropdown-Menü umgehen können.
Beschreibung �
Wenn Sie für ein Dropdown-Menü die select2-Bibliothek verwenden, funktioniert dies wirklich gut für die kleine Anzahl von Daten, aber wenn die Daten zu groß werden, können Sie sich dem Problem der Langsamkeit stellen. Angenommen, ein Dropdown-Menü mit 20,000 Optionen, dann kann es einige Sekunden bis Minuten dauern, bis die select2-Bibliothek das Dropdown-Menü öffnet. Für ein so großes Dropdown-Menü und um dieses Langsamkeitsproblem zu vermeiden, bietet select2 eine alternative Lösung.
In der normalen Dropdown-Liste select2 verwenden wir Element. In dem element, select2 library bindet alle Optionen auf einmal und dies verursacht die Langsamkeit für die großen Daten. Anstatt also die zu verwenden -Element können Sie die Textbox-Dropdown- und select2-Bibliothek verwenden, um die Textbox als Dropdown-Menü zu binden, damit sie den Benutzern die Füllung des Dropdown-Menüs gibt. Die select2-Bibliothek kann benutzerdefinierte 20 oder 30 Optionen gleichzeitig binden, und die verbleibenden Daten werden entweder bei der Suche oder beim Scrollen gebunden. Der Laufcode ist unten angegeben.
.select3.3.7-container-multi .select2-choices .select3.5.4-search-choice {padding: 2px 2px 1.4.6px 2px;}
Select2 Dropdown-Menü mit Paginierung Zur verbesserten Performance des Dropdowns bei großen Datensätzen (2 2 Einträge)
(function () {
// initialize select5 dropdown
$('#test').select5({
data: dropdownData(),
placeholder: 'search',
multiple: true,
// creating query with pagination functionality.
Ausgabebildschirm
Zusammenfassung
Wenn der Benutzer dieses Formular absendet, erhält das System die ausgewählten Daten in einem Array.
Nach dem Lesen dieses Blogs können Sie mithilfe von Java-Skript wissen, wie Daten in die Zwischenablage kopiert werden können.
Nutzen der Kopierfunktion in die Zwischenablage
In der aktuellen Webwelt dreht sich alles um die Benutzererfahrung, die Sie mit Ihrer Website gemacht haben. Während unserer Arbeit an einer beliebigen Site kopieren wir Inhalte von einer Stelle und fügen sie an einer anderen Stelle ein. Es ist für den Benutzer sehr hilfreich, wenn eine Site eine Funktion zum Kopieren per Mausklick bietet. Dies erspart dem Benutzer Zeit und Mühe, den Inhalt auszuwählen und zu kopieren.
Implementierung der Funktion zum Kopieren in die Zwischenablage
Mal sehen, wie wir diese Funktionalität hinzufügen können:
Schritt 1:
Erstellen Sie einen HTML-Code mit einem Absatz, der Inhalt und eine Schaltfläche zum Klicken enthält. Sie können jedes relevante Element anstelle eines Absatzes verwenden, z. B. Textfeld, Textbereich, ausgeblendete Felder usw.
<body> <p id = "txt_knoband"> KnowBand bietet die branchenweit besten Plugins für E-Commerce-Systeme und verfügt über langjährige Erfahrung in der Arbeit mit E-Commerce-Websites. </ p> <button onclick = "onClickCopy ()"> Text kopieren < / button> </ body>
Schritt 2:
Sie müssen eine Funktion onClickCopy () erstellen, die die Daten des Absatzes kopiert. Die Funktion führt einfach "document.execCommand (" copy ")" aus, um die Daten in die Zwischenablage zu kopieren.
Nachdem Sie diesen Blog gelesen haben, können Sie die Desktop-Benachrichtigung für Ihre Site einrichten. Sie können Ihre Benachrichtigung auch über Ihre eigene Nachricht, Ihr eigenes Bild, Ihr eigenes Symbol usw. anpassen.
Nutzen der Desktop-Benachrichtigung
Angenommen, Sie möchten Ihren Kunden außerhalb der Webseite benachrichtigen, dann können wir die Desktop-Benachrichtigung verwenden, als ob Sie die Desktop-Benachrichtigung für E-Mails aktiviert hätten und Sie nicht regelmäßig E-Mails abrufen müssen. In jeder E-Mail erhalten Sie eine Benachrichtigung.
Code für die Desktop-Benachrichtigung
Fügen Sie die folgende Funktion in das Skript-Tag im Kopf des HTML ein.
Funktion showNotification () {// Überprüfe, ob der Browser des Benutzers Benachrichtigungen unterstützt oder nicht if (! ("Benachrichtigung" im Fenster)) {alert ("Ihr Browser unterstützt die Desktop-Benachrichtigung nicht"); } // Überprüfen Sie, ob die Berechtigungen der Benachrichtigung bereits erteilt wurden oder nicht, wenn (Notification.permission === "grant") {// Create Notification var options = {body: 'Einfache Benachrichtigungsnachrichtenzeile 1. \ NZweite Benachrichtigungsnachrichtenzeile . ', // Nachrichtentext dir:' ltr ', // Nachrichtenrichtung ltr: von links nach rechts. rtl: von rechts nach links. Bild: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Fügen Sie bei Bedarf ein Bild hinzu, um das Symbol anzuzeigen: 'https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Symbol hinzufügen, falls erforderlich, um anzuzeigen} var title = "Knowband Blog"; var notification = new Benachrichtigung (Titel, Optionen); // Den Benachrichtigungs-Klicklink hinzufügen notification.onclick = function (event) {event.preventDefault (); // Verhindern, dass der Browser das Registerfenster der Benachrichtigung fokussiert.open ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Schließen Sie die Benachrichtigung nach dem Klicken.}} // Wenn keine Berechtigungen vorhanden sind, fragen Sie den Benutzer nach weiteren Berechtigungen. if (Notification.permission! == "denied") {Notification.requestPermission (). then (function ( permission) {// Wenn der Benutzer zustimmt, erstellen wir eine Benachrichtigung if (permission === "grant") {var notification = new Benachrichtigung ("Hi there!");}}); }}
Sie können diese Funktion durch Ereignis auslösen, wie Sie möchten. Zu Testzwecken können Sie dies überprüfen, indem Sie eine Schaltfläche hinzufügen. Verwenden Sie den folgenden Code für den Knopf im Körper
$ data = Array ("A", "M", "X", "b", "d", "E", "l"); Ich muss die Datenbank nach Wert sortieren. Wenn ich benutze asort ($ data), Folgendes erhalten: [0] => A [5] => E [1] => M [2] => X [3] => b [4] => d [6] => l Im obigen Beispiel , "b", "d" und "l" beginnen mit einem Kleinbuchstaben, enden jedoch nach "X", das einen Großbuchstaben hat.
Wie können wir es so sortieren, dass es ignoriert, ob die Wörter mit Groß- oder Kleinschreibung beginnen?
Ich habe dies erwartet [0] => A [3] => b [4] => d [5] => E [6] => l [1] => M [2] => X
Lösung:
Anwendung Natcasesort ($ data); und Sie erhalten genau das gleiche Ergebnis.
Anmerkungen:
Mit dieser Funktion können wir unsere Arrays nach einem Algorithmus sortieren, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird. Bei natcasesort () wird die Groß- und Kleinschreibung nicht berücksichtigt.
Als Grafikdesigner ist es sehr wichtig, unser Produkt mit einer besseren Benutzeroberfläche bereitzustellen. Wir erledigen die Arbeit auch effizienter und schneller. Aber immer müssen wir in Adobe Photoshop immer wieder die gleiche Aufgabe erledigen. Als menschliche Natur verlieren wir unser Interesse daran, dieselbe Aufgabe wiederholt auszuführen. Wir versuchen immer, etwas Neues zu schaffen.
Adobe Photoshop kann uns von dieser kontinuierlichen, sich wiederholenden Arbeit entlasten. Wir können Aktionen in Adobe Photoshop dazu verwenden.
Erfahren Sie mehr über die Aktion in Photoshop
Aktion in Photoshop ist eine vordefinierte Arbeit, die wir zuvor aufgenommen haben.
Photoshop-Aktionen?come in the.ATN file format. It allows us to record the actions for our repetitive tasks.
Angenommen, wir haben ein 1000-Foto, und auf diesem möchten wir ein Wasserzeichen hinzufügen. Die beste Möglichkeit ist, eine Aktion für das Foto durchzuführen.
Verarbeiten Aktionen aufzeichnen
Schritt 1:
Öffnen Sie Ihre Photoshop-Anwendung -> Gehen Sie zu Windows -> Aktion
Dann öffnet sich ein Fenster:
Schritt 2:
Klicken Sie auf das Symbol "Neue Aktion erstellen", um die Aufnahme zu starten.
Schritt 3:
Nennen Sie die Aktion so, dass Sie sie für die zukünftige Verwendung leicht erkennen können.
Nachdem wir darauf geklickt haben "Rekord"Sie werden feststellen, dass eine Aufnahme gestartet wird.
Schritt 4:
Jetzt erledigen Sie Ihre Arbeit in Adobe Photoshop und es wird aufgezeichnet.
Schritt 5:
Nachdem wir die Arbeit erledigt haben, stoppen wir die Aufzeichnung.
Vorgang zum Implementieren der aufgezeichneten Aktion
Um die aufgezeichnete Aktion für die Massenbilder zu implementieren, hat Photoshop eine wunderbare Option dafür gegeben und wir nennen sie "Stapelverarbeitung". Lassen Sie uns die Aktion Schritt für Schritt durchführen.
Schritt 1
Klicken Sie auf die Datei => Automatisieren => Stapel
Wenn wir auf klicken "Stapel"Option erhalten wir ein Popup-Fenster mit der Option"Batch-Prozess“.
Im Popup-Menü können Sie unsere Aktion, den Quellordner des Bildes und den Zielordner auswählen, um das Bild zu rendern. Wenn wir auf "klicken"OK"Die Schaltfläche Photoshop führt den Vorgang als Massenvorgang durch, und unsere Bilder werden im Zielordner gespeichert.
Ich hoffe, Sie erhalten alle meine Punkte. Wenn ich mich zu einem bestimmten Zeitpunkt geirrt habe, lassen Sie es mich bitte in den Kommentaren wissen. Ich werde es mir sicherlich ansehen.
GraphQL ist eine moderne Abfragesprache für die API. Mit anderen Worten, wir können sagen, dass es sich um eine moderne Abfragesprache auf Anwendungsebene handelt.
Mit Hilfe von GraphQL können wir Daten aus den API-Aufrufen abrufen und es funktioniert auf HTTP als REST. Es bietet dem Kunden eine leistungsstarke Option, damit er fragt, was er genau braucht, und es hilft beim API-Wachstum oder der Evaluierung.
Vorteile von GraphQL
Es liefert nur begrenzt Daten, die wir tatsächlich benötigen. Es werden niemals zusätzliche Daten oder weniger Daten abgerufen, die Sie nicht benötigen.
Es ist ein leistungsstarkes Open-Source-System.
Es bietet die Möglichkeit, die effiziente Codierung durchzuführen. Angenommen, eine Tabelle mit 40 Spalten und manchmal benötigen wir die Daten von nur 10 Spalten oder manchmal 20 usw. Um dieses Problem zu lösen, haben wir in der normalen API zwei Optionen, entweder alle Daten in jedem API-Aufruf abrufen und alle gewünschten oder wir verwenden müssen die Anzahl der APIs für dieselbe Tabelle schreiben, damit wir die effiziente API gemäß den Anforderungen aufrufen können. Aber in GraphQL müssen wir nur eine API schreiben. So wird auch der Zeilencode reduziert.
GraphQL-APIs sind nach Typen und Feldern strukturiert.
GraphQL unterstützt verschiedene Sprachen wie z
C#
.NETZ
Clojure
Elixier
Erlang
Go
Groovy
Java
JavaScript
PHP
Python
Scala
Rubin
In diesem Blog werden wir etwas über GraphQL in PHP erfahren.
Zunächst sollten wir wissen, dass wir in jeder Sprache, um GraphQL zu verwenden, ihre Bibliothek importieren müssen.
In PHP können wir diese Bibliotheksdatei verwenden: webonyx/graphql-php.
Installation
Führen Sie mit Composer einfach Folgendes aus:
Komponist benötigt webonyx/graphql-php
Wie holt GraphQL Daten mit Abfragen?
In REST gibt die API Daten in einer definierten Struktur zurück. Beim Schreiben der API in REST müssen wir die Struktur der Daten definieren, die zurückgegeben werden, aber GraphQL hat keine definierte Struktur, die zurückgegeben wird. Es kann ihre Struktur nach Kundenwunsch ändern.
Der Client muss einige weitere Informationen an den Server senden, um seine Anforderungen zu deklarieren, und diese Informationen werden als Abfrage bezeichnet.
In der Abfrage müssen wir die Root-Felder definieren, mit anderen Worten, wir sagen dasselbe wie die Nutzlast für den Dienst.
lösen
In der realen Anwendung wie E-Commerce-Anwendung, dh PrestaShop, OpenCart, Magneto usw., müssen wir die Kundendaten anhand der Kunden-ID aus der Datenbank abrufen und diese zurückgeben. Unser Punkt ist, dass wir die Arrays nicht zurückgeben müssen, wir müssen die Werte zurückgeben und „graphql-php“ wird sie unverändert an verschachtelte Resolver weitergeben.
Der Resolver ist im Grunde eine Rückruffunktion für jedes Feld. Es gibt immer einen Standardresolver für alle Felder. Wenn wir unsere eigene „Resolve“-Funktion für ein Feld definieren, überschreiben wir einfach den Standard-Resolver.
Die Option�auflösen�ist�eine�sehr�wichtige�Option�der�Felddefinition�.�Sie�ist�eine�,�die�für�die�Rückgabe�des�Werts�unseres�Felds�verantwortlich�ist.� Werte�der�skalaren�Felder�werden�direkt�in�die�Antwort�einbezogen,�während�die�Werte�der�zusammengesetzten�Felder�an�die�weitergegebenwerden verschachtelte�Feldresolver.�Zusammengesetzte�Felder�sind�Schnittstellen,�Unions,�Objekte�etc.
Bei Fragen können Sie uns gerne unter support@knowband.com erreichen. Knowband bietet die besten Module für Prestashop, Opencart, Magento und Magento 2. Werfen Sie einen Blick auf eines unserer beliebtesten für Prestashop namens One page supercheckout:
In diesem Artikel geht es um das Erstellen von HTML-Vorlagen mit jQuery.
Informieren Sie sich über die jQuery
jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Es macht Dinge wie das Durchlaufen und Bearbeiten von HTML-Dokumenten, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise verändert, wie Millionen von Menschen JavaScript schreiben.
Informieren Sie uns über die jQuery-Vorlage
jQuery Template gibt uns die Möglichkeit bzw. Unterstützung, den Inhalt im Browser anzuzeigen und zu manipulieren. Durch die Verwendung von jQuery Templating können wir JSON-Strings für die HTML-Elemente rendern. Betrachten wir ein einfaches Beispiel: Wir können jQuery Template verwenden, um einige Datensätze anzuzeigen, die wir von einer Ajax-Anfrage erhalten haben.
Ein einfaches Beispiel für jQuery-Vorlagen
Jetzt erstellen wir eine einfache Seite mit jQuery-Vorlagen. Wir verwenden ausschließlich das jQuery-Plugin. In diesem Beispiel zeigen wir Ihnen, wie Sie eine Vorlage erstellen und den Inhalt aus JSON rendern.
Anforderung
Lassen Sie uns zuerst die Anforderung verstehen. Angenommen, wir müssen eine Webseite wie die KnowBand-Website erstellen, um die Module für die E-Commerce-Plattform wie Opencart, Prestashop usw. zu verkaufen. Wir haben einige E-Commerce-Module oder Plugins, die wir auf der KnowBand-Website auflisten möchten. Auf der Auflistungsseite zeigen wir also den Namen, das Bild und den Preis des Moduls an. Wir verwenden die folgende JSON-Zeichenfolge, um die Daten aufzulisten:
Wir haben ein Thumbnail innerhalb des script-Tags erstellt, z. B. #blog, script-Tag, und es wurde als Vorlage verwendet. Im obigen Code haben wir {{ }} für Platzhaltervariablen verwendet. Lassen Sie uns verstehen, was wir im obigen Code getan haben:
var temp = $.trim($('#blog').html()); // Es wird den gesamten Inhalt des Skript-Tags #blog in eine temporäre Variable laden. var x = temp.replace(/{{name}}/ig, obj.name); // Wildcard-Variable {{name}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(/{{image_url}}/ig, obj.image_url); // Wildcard-Variable {{image_url}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(/{{price}}/ig, obj.price); // Wildcard-Variable {{price}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(/{{module_url}}/ig, obj.module_url); // Wildcard-Variable {{module_url}} durch entsprechende Daten aus dem JSON ersetzt. $('.container').append(x); // Inhalt an Container div angehängt.
Durch die Verwendung der Platzhaltertechnik
Bei dieser Technik fügen wir den Inhalt im HTML-Code an, nachdem wir die Daten mithilfe der jQuery-Platzhaltertechnik ausgefüllt haben. Der vollständige Code ist unten angegeben:
Im obigen Beispiel haben wir ` (Back-Tick) als Template-Literal und ${ } als Platzhalter verwendet. Wenn wir Methode 1 mit Methode 2 vergleichen, können wir leicht sagen, dass „Vorlagenliteral“ und „Platzhalter“ unsere Aufgabe erleichtern. In diesem Beispiel haben wir den Vorlagencode in einer Schleife geschrieben und unsere Platzhalter durch die entsprechenden Daten ersetzt.
Zusammenfassung
Um mehr über jQuery-Vorlagen zu erfahren, empfehle ich Ihnen, sich die Dokumentation für jQuery-Vorlagen auf der offiziellen jQuery-Website anzusehen.
