Author: Sunny Saurabh

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.

¿Cómo minimizar la tasa de rebote de nuestro sitio web?

¿Qué es la tasa de rebote?

Primero, debemos saber sobre el término "porcentaje de rebote"

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.

Cuando los visitantes o clientes llegan a nuestro sitio web desde cualquier otro enlace externo, por ejemplo, publicidad, resultado de búsqueda, enlace compartido, etc., pero si no visitan los enlaces internos del sitio. Esto aumentará la tasa de rebote ya que el servidor de Google Analytics no se activará debido a la falta de interacción.

Esto reducirá nuestra clasificación en los resultados de los motores de búsqueda, lo que definitivamente es una gran pérdida para el crecimiento de nuestro sitio web.

Cuando la tasa de rebote importa

Debemos tener en cuenta que si el objetivo de nuestro sitio web es compartir información, el rebote no nos importa. Tomemos un ejemplo si nuestra página web proporciona información basada en texto y

Pero la tasa de rebote realmente es importante si esperamos obtener más y más visitantes activos en nuestros sitios.

La razón principal de la tasa de rebote

  • El sitio web tarda más en cargarse.
  • Mala interfaz de usuario y gestión de contenido.
  • La interfaz de usuario de la página de destino es compleja, lo que no es fácilmente comprensible para cada tipo de usuario.
  • Los visitantes no obtuvieron la información de la manera inteligente que buscaban.
  • Los enlaces internos de nuestro sitio web no están claramente resaltados para los visitantes.
  • Ventana emergente no deseada en las páginas de destino.

Cómo medir la tasa de rebote

Google ofrece muchos servicios útiles para nuestro sitio web. Para medir la tasa de rebote podemos usarhttps://analytics.google.com/

Para usar estas herramientas solo necesitamos una cuenta de Google y vincular nuestro sitio web con Google Analytics. Nota: Si necesita ayuda para usar esta herramienta, escriba la consulta en el cuadro de comentarios que se encuentra en la parte inferior de la página.

Según Google

La tasa de rebote es una sesión de una sola página dividida por todas las sesiones o el porcentaje de todas las sesiones en su sitio en el que los usuarios vieron solo una página y activaron solo una solicitud al servidor de Analytics. ¿Cómo minimizar la tasa de rebote de nuestro sitio web?

Una buena página de destino

Una página de destino es la primera página donde nuestros visitantes ingresan a nuestro sitio web haciendo clic en los enlaces de los resultados del motor de búsqueda.Knowband?is a good example of the landing page.

Reduce el tiempo de carga de la página

Como usuario, podemos saber lo irritante que es navegar por las páginas lentas. Los visitantes simplemente presionan el botón de retroceso si una página tarda más de 5 segundos en cargarse. Los scripts de terceros no deseados en nuestro sitio web también aumentan el tiempo de carga de la página. Si mostramos una imagen no optimizada, también lleva más tiempo cargarla.

Consejos:?Según Google, una buena puntuación para la velocidad de la página es 85 o superior. Podemos conocer la velocidad de nuestras páginas con la herramienta Google Analytics.

Eliminar ventanas emergentes no deseadas

Las ventanas emergentes y los anuncios no deseados en las páginas también son responsables de aumentar la tasa de rebote.

Prueba AB

AB Testing es un experimento útil en el que dos o más diseños de la misma página se mostrarán al azar a los visitantes. Al ver el informe de las pruebas AB, podemos analizar qué diseño ha tenido un mejor rendimiento y ha dado más conversión.

CTA: Llamado a la acción

La CTA es como una trampa o cebos ocultos en nuestra página de destino.


Cómo ver el código de

NetBeans es uno de los mejores y potentes IDE para cualquier desarrollo web especialmente para marcos PHP como ZenCart, OpenCart, CakePhp, etc. CakePhp utiliza su propia extensión de archivo personalizada para sus archivos de visualización, es decir, * .ctp. NetBeans no conoce este archivo de manera predeterminada. Por lo tanto, no se mostrarán códigos de colores cuando se abran estos tipos de archivos en NetBeans. Tenemos que habilitar manualmente estas funciones. A continuación se detallan los pasos para habilitar el resaltado para los archivos .ctp de CakePHP. 1 Herramientas => Opciones

Vaya a Herramientas => Opciones

2 Varios => Archivos

3 Haga clic en el botón Nuevo y escriba ctp. Luego haga clic en Ok.

4 Del tipo de archivo asociado (MIMI): elija: text / x-php5.

5 Haga clic en OK

Nota: Reinicie el IDE si los cambios no se reflejan después de realizar los pasos anteriores.


Handle Large Data in Select2 Dropdown

Objetivos del blog

Después de leer este blog, podrá saber cómo puede manejar el gran conjunto de datos en el menú desplegable Select2.

Descripción �

Para un menú desplegable, si usa la biblioteca select2, funciona muy bien para la pequeña cantidad de datos, pero cuando los datos se vuelven demasiado grandes, puede enfrentar el problema de la lentitud. Por ejemplo, supongamos un menú desplegable de 20,000 2 opciones, luego la biblioteca select2 puede tardar entre unos segundos y minutos en abrir el menú desplegable. Para un menú desplegable tan grande y para evitar este problema de lentitud, selectXNUMX proporciona una solución alternativa.

En el menú desplegable select2 normal, usamos elemento. En el elemento, la biblioteca select2 une todas las opciones de una sola vez y esto está causando la lentitud de los datos de gran tamaño. Entonces, en lugar de usar el elemento, puede usar el menú desplegable del cuadro de texto y la biblioteca select2 ayuda a vincular el cuadro de texto como el menú desplegable para que llene el menú desplegable a los usuarios. La biblioteca select2 puede vincular de forma inteligente 20 o 30 opciones definidas por el usuario a la vez y los datos restantes se vincularán en la búsqueda o en el desplazamiento. El código de ejecución se proporciona a continuación.

            .select3.3.7-container-multi .select2-choices .select3.5.4-search-choice {padding: 2px 2px 1.4.6px 2px;}
        Menú desplegable Select2 con paginación Para mejorar el rendimiento del menú desplegable con grandes conjuntos de datos (2 2 elementos) 
            (function () {
                // initialize select5 dropdown
                $('#test').select5({
                    data: dropdownData(),
                    placeholder: 'search',
                    multiple: true,
                    // creating query with pagination functionality.

 

Pantalla de salida


Resumen

Cuando el usuario envíe este formulario, el sistema obtendrá los datos seleccionados en una matriz.

Copy to clipboard in JavaScript

Objetivos del blog.

Después de leer este blog, podrá saber cómo se pueden copiar los datos al portapapeles con la ayuda del script java.

Beneficio de la funcionalidad de copiar al portapapeles.

En el mundo web actual, se trata del usuario experimentado de su sitio. Durante nuestro trabajo en cualquier sitio, copiamos el contenido de un lugar y lo pegamos en otro. Será realmente útil para el usuario si un sitio ofrece una funcionalidad de clic para copiar. Se ahorra tiempo y esfuerzo del usuario para seleccionar y copiar el contenido.

Implementación de la funcionalidad de copiar al portapapeles.

Veamos cómo podemos agregar esta funcionalidad:

Paso 1:

Cree un HTML con un párrafo que tenga contenido y haga clic en el botón. Puede usar cualquier elemento relevante en lugar de un párrafo, por ejemplo, cuadro de texto, área de texto, campos ocultos, etc.

<body> <p id = "txt_knoband"> KnowBand cuenta con los mejores complementos de la industria para sistemas de comercio electrónico y tiene años de experiencia trabajando con sitios web de comercio electrónico. </p> <button onclick = "onClickCopy ()"> Copiar texto < / botón> </body>

Paso 2:

Deberá crear una función enClickCopy () que copiará los datos del párrafo. La función simplemente ejecutará "document.execCommand (" copy ")" para copiar los datos en el portapapeles.

function copyOnClick () {var tempInput = document.createElement ("input"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); document.execCommand ("copia"); document.body.removeChild (tempInput); alerta ("valor copiado"); }

In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.

So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.

Related Article: Cómo configurar una cookie usando JavaScript


JavaScript Desktop Notification

Objetivos del blog.

Después de leer este blog, podrá configurar la notificación de escritorio para su sitio. También podrá personalizar su notificación por su propio mensaje, imagen, icono, etc.

Beneficio de la notificación de escritorio

Supongamos que desea notificar a su cliente fuera de la página web, entonces podemos usar la notificación de escritorio como si hubiera habilitado la notificación de escritorio para correo electrónico, no necesita revisar los correos electrónicos con regularidad. En cada correo electrónico, tienes una notificación.

Código para la notificación de escritorio

Agregue la siguiente función en la etiqueta de script en la cabecera del HTML.

función showNotification () {// Verifique si el navegador del usuario admite notificaciones o no si (! ("Notificación" en la ventana)) {alerta ("Su navegador no admite la notificación de escritorio"); } // Verifique si los permisos de la notificación ya se han otorgado o no si (Notification.permission === "concedido") {// Crear notificación var options = {body: 'Línea de mensaje de notificación simple 1. \ NSegunda línea de mensaje de notificación . ', // cuerpo de la notificación dir:' ltr ', // dirección del mensaje ltr: de izquierda a derecha. rtl: de derecha a izquierda. imagen: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Agregar imagen si es necesario para mostrar el icono: 'https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Agregar el icono si es necesario para mostrar} var title = "Knowband Blog"; var notification = nueva notificación (título, opciones); // Agregar la notificación haga clic en el enlace notification.onclick = function (event) {event.preventDefault (); // evita que el navegador enfoque la ventana de la pestaña de Notificación. se abre ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Cerrar la notificación después de hacer clic}} // Si no hay permisos, solicite al usuario otro permiso si (Notification.permission! == "denegado") {Notification.requestPermission (). Luego (función ( permiso) {// Si el usuario acepta, vamos a crear una notificación si (permiso === "concedido") {var notification = nueva Notificación ("Hola!");}}); }}

Puede activar esta función a través del evento como desee. Para propósitos de prueba, puede verificar esto agregando un botón. Usa el siguiente código para el botón en el cuerpo

<button onclick = "showNotification ()"> Show Notification! </button>

Nota: Si está ejecutando este código en el sistema local, use el servidor local, es decir, localhost.

Pantalla de salida


Matriz insensible a mayúsculas y minúsculas en el php

Problema:

$ data = array ("A", "M", "X", "b", "d", "E", "l"); Necesito ordenar la base de datos en valor. Cuando yo uso Asort ($ datos), obtuve lo siguiente: [0] => A [5] => E [1] => M [2] => X [3] => b [4] => d [6] => l En el ejemplo anterior , "b", "d" y "l" comienza con una minúscula, pero termina después de "X", que tiene una mayúscula.

¿Cómo podemos clasificarlo donde se ignora si las palabras comienzan con mayúsculas o minúsculas?

Esperaba esto [0] => A [3] => b [4] => d [5] => E [6] => l [1] => M [2] => X

Solución:

Utilice natcasesort ($ datos); y obtendrá el mismo resultado exacto.

Notas:

Podemos usar esta función para ordenar nuestros arreglos usando un algoritmo de "arreglo natural" que no distingue entre mayúsculas y minúsculas. natcasesort () es una versión que no distingue entre mayúsculas y minúsculas de natsort ().

Sintaxis:

bool natcasesort matriz & $ array);

Devoluciones

Devuelve verdadero en caso de éxito y falso para el fracaso. Para saber más sobre el algoritmo de matriz natural o natcasesort (): https://www.w3schools.com/php/func_array_natcasesort.asp


How to Use Actions in Adobe Photoshop?

Como diseñador gráfico, es muy importante entregar nuestro producto con una mejor interfaz de usuario. También hacemos el trabajo con más eficiencia y con más velocidad. Pero en cualquier momento tenemos que hacer la misma tarea repetidamente en Adobe Photoshop. Como naturaleza humana, perdemos nuestro interés de hacer la misma tarea repetidamente. Siempre intentamos crear algo nuevo cada vez.

Adobe Photoshop puede darnos alivio a ese trabajo continuo y repetitivo. Podemos usar Acciones en Adobe Photoshop para hacerlo.

Aprendamos sobre la acción en Photoshop.

La acción en Photoshop es un trabajo predefinido que hemos grabado anteriormente.

Acciones de Photoshop?come in the.ATN file format. It allows us to record the actions for our repetitive tasks.

Supongamos que tenemos una foto 1000 y en esas, queremos agregar una marca de agua, entonces la mejor manera de hacerlo es hacer una acción para ella.

Metodología para registrar acciones

Paso 1:

Abra su aplicación Photoshop -> Vaya a Windows -> Acción

Entonces se abrirá una ventana:

Paso 2:

Haga clic en el icono "Crear nueva acción" para iniciar la grabación.

Paso 3:

Nombra la acción así, puedes reconocerla fácilmente para uso futuro.

Después de hacer clic en eso "Grabar"se notará que se inicia una grabación.

Paso 4:

Ahora haz tu trabajo en Adobe Photoshop y se grabará.

Paso 5:

Ahora, después de terminar el trabajo, dejamos de grabar la acción.

Proceso para implementar la acción registrada.

Para implementar la acción grabada para las imágenes a granel, Photoshop ha dado una opción maravillosa para eso y llamamos "proceso por lotes". Vayamos paso a paso para implementar la acción.

Paso 1

Haga clic en el Archivo => Automatizar => Lote

Cuando hacemos clic en "Lote"opción obtendremos una ventana emergente con la opción de"Proceso por lotes“.

Desde el Pop Up podemos seleccionar nuestra acción, carpeta de origen de la imagen y carpeta de destino para renderizar la imagen. Cuando hacemos clic en "OK"botón Photoshop realizará la operación en masa y nuestras imágenes se guardarán en la carpeta de destino.

Espero que obtenga todos mis puntos, si me equivoco en algún momento, hágamelo saber en la sección de comentarios, seguramente lo echaré un vistazo.

How to use GraphQL in PHP?

¿Has oído hablar de GraphQL?

GraphQL es un lenguaje de consulta moderno para la API. En otras palabras, podemos decir que es un lenguaje de consulta de capa de aplicación moderno.

Con la ayuda de GraphQL, podemos obtener datos de las llamadas API y funciona en HTTP como REST. Brinda la opción poderosa al cliente para que pregunte qué necesita exactamente y ayuda en el crecimiento o evaluación de la API.

Beneficios de GraphQL

  • Proporciona solo datos limitados que realmente necesitamos. Nunca obtendrá datos adicionales o menos datos que no necesita.
  • Es un potente sistema de código abierto.
  • Da una opción para hacer la codificación eficiente. Por ejemplo, supongamos que una tabla tiene 40 columnas y, a veces, necesitamos los datos de solo 10 columnas o, a veces, de 20, etc. Para resolver este problema, tenemos dos opciones en la API normal, recuperar todos los datos en cada llamada API y usar cualquiera tiene que escribir la cantidad de API para la misma tabla para que podamos llamar a la API eficiente según el requisito. Pero en GraphQL, tenemos que escribir solo una API. Entonces, el código de línea también se reduce.
  • Las API de GraphQL están estructuradas en términos de tipos y campos.

GraphQL tiene soporte para varios idiomas como

  • C#
  • .NET
  • Clojure
  • Elixir
  • Erlang
  • Go
  • Maravilloso
  • Java
  • JavaScript
  • PHP
  • Python
  • Scala
  • Rubí

En este blog, aprenderemos sobre GraphQL en PHP.

En primer lugar, debemos saber que en cualquier idioma para usar GraphQL tenemos que importar su biblioteca.

En PHP, podemos usar este archivo de biblioteca: webonyx/graphql-php.

INSTALACIÓN

Usando el compositor, simplemente ejecute:

el compositor requiere webonyx/graphql-php

¿Cómo GraphQL obtiene datos con consultas?

En REST, la API devuelve datos en una estructura definida. Mientras escribimos la API en REST, tenemos que definir la estructura de los datos que devolverá, pero GraphQL no tiene una estructura definida que devolverá. Puede cambiar su estructura según la necesidad del cliente.

El cliente tiene que enviar más información al servidor para declarar sus requisitos y esta información se llama Consulta.

En la consulta, tenemos que definir los campos raíz, es decir, decimos lo mismo que la carga útil del servicio.

Resolver

En la aplicación del mundo real, como la aplicación de comercio electrónico, es decir, PrestaShop, OpenCart, Magneto, etc., necesitamos obtener los datos del cliente de la base de datos por ID de cliente y devolverlos. Nuestro punto es que no tenemos que devolver las matrices, tenemos que devolver los valores y Graphql-php lo pasará intacto a los resolutores anidados.

El resolver es básicamente una función de devolución de llamada para cada campo. Siempre hay un solucionador predeterminado para todos los campos. Cuando definimos nuestra propia función de resolución para un campo, simplemente anulamos la resolución predeterminada.

¿Cómo definir el esquema para la consulta?

$schema_obj = new Schema { "query" => $queryType, "mutation" => $mutationType, "subscription" => $subscriptionType }

Ejemplo

Como este es un blog para principiantes o más nuevos, hagamos un ejemplo simple.

Vamos a crear un sistema de tipos que se procesará siguiendo una consulta simple:

consulta { echo(mensaje: "Hola Knowband, este es mi primer programa GraphQL") }

Nota: Necesitamos un tipo de objeto con eco de campo para hacerlo.

'Consulta', 'campos' => [ 'eco' => [ 'tipo' => Tipo::cadena(), 'argumentos' => [ 'mensaje' => Tipo::nonNull(Tipo::cadena() ), ], 'resolve' => function ($raíz, $argumentos) { return $raíz['prefijo'] . $argumentos['mensaje']; } ], ], ]);

La opción de resolución es una opción muy importante de definición de campo. Es una opción que es responsable de devolver el valor de nuestro campo. Los valores de los campos escalares se incluirán directamente en la respuesta, mientras que los valores de los campos compuestos se transmitirán a los resolutores de campos anidados. Los campos compuestos son interfaces, uniones, objetos, etc.

Ahora, después de que nuestro tipo esté listo, escribamos el archivo de puntos finales de GraphQL para el programa graphql_1.php.

$tipo de consulta]); $Entrada = file_get_contents('php://entrada'); $input_data = json_decode($Entrada, verdadero); $datos_consulta = $datos_entrada['consulta']; $valores_variables = isset($input_data['variables']) ? $input_data['variables'] : nulo; $valor = ['prefijo' => 'Salida: ']; $resultante = GraphQL::executeQuery($schema_obj, $query_data, $value, null, $variable_values); $valor_salida = $resultante->toArray(); } catch (\Exception $e) { $output_value = [ 'errores' => [ [ 'mensaje' => $e->getMessage() ] ] ]; } header('Tipo de contenido: aplicación/json'); echo json_encode($valor_salida); ?>

¿Cómo podemos ejecutar el código?

Podemos ejecutar el código por:

php -S localhost:8080 graphql_program_1.php curl https://localhost:8080 -d '{"consulta": "consulta { echo(mensaje: \" Hola Knowband, este es mi primer programa GraphQL \") }" }'

Para cualquier consulta, no dude en comunicarse con nosotros en support@knowband.com. Knowband proporciona los mejores módulos de su clase para Prestashop, Opencart, Magento y Magento 2. Eche un vistazo a uno de nuestros más populares para Prestashop llamado One page supercheckout:

 

¿Cómo crear tu propia plantilla HTML usando jQuery?