Descargar Smart Web App Banner - Descargar el código fuente Smart Web App Banner

Smart Web App Banner

Datos del sitio web

Version 1.5

Descargar

Banner de aplicaciones web de jQuery Smart

URL oficial del proyecto: http://kurtzenisek.com/p/smart-web-banner/

¿Buscas el banner inteligente iOS 6 y 7+, pero te entristece solo admitiendo aplicaciones en la App Store y no aplicaciones web? Este pequeño script con jQuery está aquí para ayudar. ¡Agregue este pequeño script a su sitio e invite a sus visitantes a guardar su sitio en su pantalla de inicio junto con el resto de sus aplicaciones!

Vista previa rápida

Disponible en: http://kurtzenisek.com/p/smart-web-banner/

Características

El banner inteligente iOS 6 y 7+ se ve y se hizo para aplicaciones web!
Muestra inteligentemente el diseño de banner iOS 6/7+ dependiendo de lo que el visitante esté usando.
Deslice todo el sitio en lugar de obstruir la página de sus visitantes con una ventana emergente.
Agregue CSS y JavaScript, y llame al script ... eso es todo. Los gráficos utilizan CSS 3 y usan iconos integrados en la resolución Retina (que es perfecta para el safari móvil), por lo que no hay imágenes de las que se preocupa.
Solo se muestra cuando se usa Safari móvil, ya que ese es el único navegador con la integración de la pantalla de inicio.
Establezca cuánto tiempo pasará antes de que se muestre el banner nuevamente después de que se cierre y después de que el visitante presione "Guardar" (evita que los visitantes molestos).
Detección automática de iconos a través de la etiqueta (no se muestra si no está disponible, le permite sobrescribirlo fácilmente si lo desea, e incluso agrega brillo al icono si detecta que no está precompuesto [también se puede configurar a través de una opción]).
Puede agregar automáticamente <meta name="apple-mobile-web-app-capable" content="yes" /> Si ya no está presente (guarda el sitio como una aplicación web cuando se agrega a la pantalla de inicio y lo hace para que el banner no se muestre al volver a visitar el sitio).
Temas ligeros y oscuros para que se ajuste al diseño de su sitio (realmente me encantan los dos). Vista previa de los temas con los botones en http://kurtzenisek.com/p/smart-web-banner/
Mostrar/ocultar el banner a pedido usando <a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a> (se puede ver en http://kurtzenk.com/p/smart-web-banner/)
Disparadores de eventos para SWB: Mostrado, SWB: Cerrado, SWB: Instrucciones-Risas y SWB: Instrucciones: Cerrado en el elemento Banner para realizar acciones adicionales cuando el banner o las instrucciones se muestran o se cierran.
Agrega clases al elemento HTML de la página basado en el estado del banner para ajustar los aspectos del sitio a través de CSS basado en el estado del banner.
Se puede escalar/cambiar el tamaño de la vista móvil de su sitio cambiando el tamaño de fuente de #SmartWebbanner & #SWB-Instructions a través de CSS para tener las escalas de descanso con él (agregue .ipad al selector para tamaños específicos de iPad).
Instrucciones específicas del dispositivo ("Agregar a la pantalla de inicio" está en la parte superior de un iPad mientras está en la parte inferior de un iPhone). Incluso coincide con la apariencia de la ventana emergente nativa del dispositivo (sutil color y diferencia de tamaño).
Cambia la URL de la página con URL especificada (usando HTML5 Reemplazar), así que eso es a lo que el icono de la pantalla de inicio lleva al visitante después de guardarla en lugar de la página en la que estaban cuando fueron a agregarlo a su pantalla de inicio (que es el comportamiento predeterminado). Por ejemplo, hágalo para que el botón de pantalla de inicio sea siempre su página de inicio.
Interrumpe el título de la página con el título especificado, por lo que esa es la etiqueta predeterminada del icono al agregarla a la pantalla de inicio (que de otro modo usaría la meta etiqueta Apple-Mobile-Web-App-Title existente o el título de la página). Parece menor, pero esto puede ser impactante.
Opción de depuración útil (establece el banner que se mostrará en todos los navegadores y ignora las cookies ya cerradas/guardadas) hace que la vista previa/probada el banner sea muy fácil.
¡Increíblemente configurable a través de muchas opciones! *Vea el ejemplo a continuación para obtener una lista completa.

Hoja de ruta

Implemente el soporte y el estilo de Chrome para dispositivos Android.
Mejore la función AutoApp que agrega la metaetiqueta móvil-Web-app para que también evite que los enlaces normales (no AJAX) se abran en Safari (a menos que salga del dominio o vaya a un archivo de medios [debido a la falta de un botón de retroceso]). Cambie la configuración AutoApp predeterminada, ya que ahora es mucho más útil para sitios estándar.
Considere implementar el formulario de complemento de WordPress para aquellos que buscan esta funcionalidad sin la capacidad/tiempo para implementar el script en sí (haga que extraiga el nombre del blog para el título y la descripción del "autor"), y busque construir una página de configuración de complementos para las opciones del script. Además, el script debe actualizarse para acomodar automáticamente la barra de administración de WordPress.
Revisión del código/reescritura/limpieza.
Cree un sistema temático que permita que los archivos CSS se proporcionen individualmente para determinar el diseño (separado de los estilos principales). Esto es técnicamente posible, pero muchos de los estilos CSS existentes deben sobrescribirse para lograr un nuevo diseño.
¡Obtenga comentarios de la comunidad! (Envíeme un correo electrónico)

Colegio de cambios

Versión 1.5 - 11 de agosto de 2017

swb:shown , swb:closed , swb:instructions-shown y swb:instructions-closed al elemento $('#smartWebBanner') que se disparan cuando el banner se muestra y se cierra, respectivamente. Esto permite que ocurran acciones cuando el banner se muestra/oculta (ex. $('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');}); );
Hecho que el elemento HTML tenga .swb-shown y .swb-closed alternado dependiendo de si el banner se muestra o se cierra. Esto permite que cualquier parte del sitio se cambie en función de cuando el banner se muestre haciendo referencia a esas clases de CSS.
Script actualizado para seguir jshint.
Implementado SCSS para la hoja de estilo de trabajo.
Asegúrese de que el contenido/valor del meta etiqueta "Apple-Mobile-Web-App-Title" se use para la etiqueta/título de texto del icono de la hora de la hora de la <title> la hora de la hora de la hora de la hora de la hora de la hora de la hora de la hora.

Versión 1.4 - 24 de mayo de 2014

Actualizado para usar el diseño de iOS 7 en iPhones y iPads con iOS 7 (nuevos iconos, ubicaciones, ventanas emergentes y diseño general).
Ahora se selecciona automáticamente el estilo iOS 6/7 cuando sea apropiado. IMPORTANTE: Los nombres de los temas han cambiado ya que ahora hay "Auto" (predeterminado), "iOS 6", "iOS 7" y "oscuro". Auto usará iOS 6 y 7 dependiendo de lo que esté ejecutando el dispositivo.

20 de mayo de 2014

¡JQuery Smart Web App Banner ahora está disponible en cdnjs.com como una opción CDN alojada!

Versión 1.3 - 22 de marzo de 2013

Se agregó una función que cambia la URL de la página con la URL que se especifica a través de las opciones del script. Esto significa que puede configurarlo en la página de inicio de su sitio para que el uso de la función Agregar a la pantalla de inicio guarde la página de inicio en lugar de la página en la que se encuentra el visitante (el comportamiento predeterminado).
¿Todavía atascado en jQuery anterior a la versión 1.7? Esta función de intercambio de URL también se ha agregado a esa versión y está disponible aquí (de otra manera se recomienda ejecutar la última versión que se encuentra a continuación).

Versión 1.2 - 20 de marzo de 2013

Cambio de cómo se estructura el CSS para usar solo tres valores PX y usar EM para el resto. Esto permite cambiar la escala del banner mientras evita que los tamaños de fuente externos lo afecten involuntariamente.

Versión 1.1.2 - 20 de marzo de 2013

Intercambiado .live () para .on () para la compatibilidad jQuery 1.9+.
Ahora requiere jQuery 1.7+, pero la versión anterior se puede descargar aquí (usar el último CSS funcionará).

Versión 1.1.1 - 3 de octubre de 2012

Opción agregada para habilitar la adición automática de la metaetiqueta móvil-APP (deshabilitada de forma predeterminada).

Versión 1.1 - 27 de septiembre de 2012

Se agregó la función que cambia el atributo <title> de la página con el título especificado a través de las opciones del script.
Opción agregada para deshabilitar la nueva función de intercambio de título.

Versión 1.0 - 19 de septiembre de 2012

Lanzamiento inicial (el mismo día que iOS 6).

Guía de inicio para principiantes

Guía abierta para comenzar

Ejemplo (usando la configuración predeterminada)

Ejemplos/Basic.js

Ejemplo (con opciones completas)

ejemplos/full-options.js

Ejemplo de realización de acciones cuando se muestra y/o oculta el banner

https://github.com/kzeni/smart-web-app-banner/blob/master/examples/perform-actions-on-toggle.js

Descargar ahora

Descargar
Usar cdnjs

Es de código abierto: ¡puede verlo en GitHub y descargar desde allí también!

Requiere: jQuery v1.7 o más tarde todavía usando jQuery 1.3.2 - 1.8.x? Use el archivo jQuery.smartwebbanner.pre-1.7.min.js.

Apoyo

Enviarme un correo electrónico

Preguntas frecuentes

¿Necesita que guarde la página de inicio de su sitio en lugar de la página en la que está el visitante? Guardar una página en la pantalla de inicio guarda la página actual de forma predeterminada, pero puede establecer la opción URL para que sea la URL que desee para guardar y el complemento se encarga del resto.

Consejo: Establezca URL en '/' para que siempre sea la página de inicio de su sitio mientras es independiente del dominio mismo. Además, no puede ser un dominio diferente por razones de seguridad.

¿Necesita ajustar el tamaño del banner para que se ajuste a la escala de su sitio? El CSS de este complemento fue construido para referirse a dos elementos (con una variante) que luego determina el tamaño de todo lo demás. Simplemente cambie el tamaño de fuente para #SmartWebbanner & #SWB-Instructions (Agregar .ipad para tamaños específicos de iPad) en su propio CSS (o edite el complemento directamente) para que se ajuste a sus necesidades.

¿Buscas usar esto para promocionar aplicaciones de Android no basadas en la web y/o aplicaciones de iOS en versiones y/o navegadores diferentes de iOS? Echa un vistazo a las aplicaciones de Jasny's Fork for Android y las aplicaciones de iOS más antiguas que iOS 6. También mira la horquilla de Ijason dirigida exclusivamente a ponerlo a disposición de las aplicaciones iOS en otros navegadores de iOS (Google Chrome) y versiones de iOS más antiguas. Nota: Ambos son para aplicaciones no WEB. Este es el único complemento dirigido a aplicaciones web (que yo sepa).