▷¿Cómo crear aplicaciones nativas de C++ con interfaz de usuario HTML/CSS? ✔️ Foro Ayuda 【 2024 】

Te traemos la solución a este dilema, al menos eso pensamos. Si tienes preguntas puedes dejarlo en el apartado de preguntas, para nosotros será un placer responderte

Solución:

Sí, es posible. Lo que quieres es un marco web C++. Puede comenzar mirando CppCMS, un marco de desarrollo web gratuito de alto rendimiento (no un CMS) destinado al desarrollo rápido de aplicaciones web.

Editar: Después de aclarar la pregunta, creo que Awesomium sería una buena opción para sus necesidades.

Puede lograr la misma funcionalidad incorporando WebKit (o Gecko), pero que yo sepa, eso es exactamente lo que hace Awesomium detrás de escena.

Una alternativa es librocket, un paquete de middleware de interfaz C++ diseñado para aplicaciones de juegos. Como puede adivinar por la descripción, es una buena opción para juegos o aplicaciones en tiempo real.

Sciter es exactamente eso: motor HTML/CSS integrable con API C/C++. Compacto y multiplataforma.

Y revisa este artículo.

Sciter tiene el mismo conjunto de funciones que WPF, pero usa HTML/CSS en lugar de XAML y usa una API nativa.

Características listas para usar:

HTML, CSS, SVG, aPNG (PNG animados), sprites de imagen,
</code> – editor con resaltado de sintaxis,</li> <li><code><htmlarea></code> – Editor WYSIWYG HTML,</li> <li><code><frame type=pager></code> – vista previa de impresión e impresión HTML/CSS,</li> <li>animaciones,</li> <li>Cliente HTTP, cliente REST/JSON, WebSocket, DataSockets,</li> <li>etc</li> </ul> <p>La misma aplicación con Sciter UI ejecutándose en Windows, MacOS y Linux desde las mismas fuentes:</p> <p><img width="501" height="542" decoding="async" alt="ingrese la descripción de la imagen aquí" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20501%20542'%3E%3C/svg%3E" data-lazy-src="https://foroayuda2.foroayuda.es/wp-content/uploads/2023/03/10_0-ingrese-la-descripcion-de-la-imagen-aqui.png" /><noscript><img width="501" height="542" decoding="async" alt="ingrese la descripción de la imagen aquí" src="https://foroayuda2.foroayuda.es/wp-content/uploads/2023/03/10_0-ingrese-la-descripcion-de-la-imagen-aqui.png" /></noscript> <div class="1156288aeb31a138c38144f0e15ac7e5" data-index="1" style="float: none; margin:4px 0 4px 0; text-align:center;">  <center><ins class="adsbygoogle rectangle_h_ads" style="display:block" data-ad-client="ca-pub-9156923925267699" data-ad-slot="6796525136" data-ad-format="auto" data-full-width-responsive="true"></ins></center><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </p> <p>Descargo de responsabilidad: soy autor de Sciter Engine.</p> <p><strong>Actualización 2021:</strong> también puedes usar <strong>Sciter.JS</strong> esa es una versión de Sciter que utiliza el motor de secuencias de comandos JavaScript estándar (ES2020).</p> <p></p> <p>Creo que Electron sería una buena adición a las otras respuestas. </p> <p>Utiliza NodeJS para ejecutar una ventana de Webkit. Electron en sí es solo html/css/js, pero puede usar cualquier módulo de nodo dentro de su aplicación Electron, incluido el código C ++ compilado de forma nativa y personalizado. Un módulo posible para incrustar su código C++ sería node-gyp.</p> <p>Sin embargo, tenga en cuenta que este flujo de trabajo puede incluir un poco más de JS de lo que tendría con las otras respuestas.</p> <p>Mi editor de texto favorito, Atom, se hizo con Electron. </p> <h4>Reseñas y valoraciones del tutorial</h4> <p>Si te mola el asunto, tienes el poder dejar una crónica acerca de qué te ha impresionado de este ensayo.</p> <div class="1156288aeb31a138c38144f0e15ac7e5" data-index="4" style="float: none; margin:5px 0 5px 0; text-align:center;">  <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-9156923925267699" data-ad-slot="3776158861"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div style="font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;"></div><div style="text-align:center" class="yasr-auto-insert-visitor"><div id='yasr_visitor_votes_a4ff7547b1965' class='yasr-visitor-votes'><div class="yasr-custom-text-vv-before yasr-custom-text-vv-before-46406">¡Haz clic para puntuar esta entrada!</div><div id='yasr-vv-second-row-container-a4ff7547b1965' class='yasr-vv-second-row-container'><div id='yasr-visitor-votes-rater-a4ff7547b1965' class='yasr-rater-stars-vv' data-rater-postid='46406' data-rating='0' data-rater-starsize='32' data-rater-readonly='false' data-rater-nonce='4828632207' data-issingular='true' ></div><div class="yasr-vv-stats-text-container" id="yasr-vv-stats-text-container-a4ff7547b1965"><svg xmlns="https://www.w3.org/2000/svg" width="20" height="20" class="yasr-dashicons-visitor-stats" data-postid="46406" id="yasr-stats-dashicon-a4ff7547b1965"> <path d="M18 18v-16h-4v16h4zM12 18v-11h-4v11h4zM6 18v-8h-4v8h4z"></path> </svg><span id="yasr-vv-text-container-a4ff7547b1965" class="yasr-vv-text-container">(Votos: <span id="yasr-vv-votes-number-container-a4ff7547b1965">0</span> Promedio: <span id="yasr-vv-average-container-a4ff7547b1965">0</span>)</span></div><div id='yasr-vv-loader-a4ff7547b1965' class='yasr-vv-container-loader'></div></div><div id='yasr-vv-bottom-container-a4ff7547b1965' class='yasr-vv-bottom-container' style='display:none'></div></div></div></p><hr><div class="tags"><span><b>Tags :</b></span><a href="https://foroayuda.es/tag/c/" rel="tag"> C++ </a> / <a href="https://foroayuda.es/tag/css/" rel="tag"> Css </a> / <a href="https://foroayuda.es/tag/desktop-application/" rel="tag"> Desktop Application </a> / <a href="https://foroayuda.es/tag/html/" rel="tag"> Html </a> / <a href="https://foroayuda.es/tag/user-interface/" rel="tag"> User Interface </a> / </div><hr><h4 style="text-align: center !important;">Utiliza Nuestro Buscador</h4><script async src="https://cse.google.com/cse.js?cx=a429be4a2ea07f9cf"></script><div class="gcse-search"></div><div class="crp_related crp-text-only"><h3>Preguntas Relacionadas:</h3><ul><li><a href="https://foroayuda.es/que-caracteristicas-tienen-las-aplicaciones-web-progresivas-frente-a-las-aplicaciones-nativas-y-viceversa-en-android/" class="crp_link post-52358"><span class="crp_title">¿Qué características tienen las aplicaciones web progresivas…</span></a></li><li><a href="https://foroayuda.es/interfaz-de-usuario-de-spring-boot-swagger-proteger-el-acceso-a-la-interfaz-de-usuario/" class="crp_link post-25549"><span class="crp_title">Interfaz de usuario de Spring Boot Swagger: proteger el…</span></a></li><li><a href="https://foroayuda.es/interfaz-de-usuario-spring-boot-swagger-proteger-el-acceso-a-la-interfaz-de-usuario/" class="crp_link post-25552"><span class="crp_title">Interfaz de usuario Spring Boot Swagger: proteger el acceso…</span></a></li><li><a href="https://foroayuda.es/crear-interfaz-de-usuario-en-el-ejemplo-de-codigo-python/" class="crp_link post-40058"><span class="crp_title">crear interfaz de usuario en el ejemplo de código python</span></a></li><li><a href="https://foroayuda.es/por-que-razor-pages-es-el-enfoque-recomendado-para-crear-una-interfaz-de-usuario-web-en-asp-net-core/" class="crp_link post-50431"><span class="crp_title">¿Por qué Razor Pages es el enfoque recomendado para crear…</span></a></li><li><a href="https://foroayuda.es/como-crear-globos-de-dialogo-para-texto-en-flutter-interfaz-de-usuario-de-whatsapp/" class="crp_link post-46442"><span class="crp_title">¿Cómo crear globos de diálogo para texto en Flutter?…</span></a></li><li><a href="https://foroayuda.es/como-crear-un-temporizador-que-se-ejecute-en-segundo-plano-sin-bloquear-el-subproceso-de-la-interfaz-de-usuario-con-xamarin/" class="crp_link post-46866"><span class="crp_title">¿Cómo crear un temporizador que se ejecute en segundo plano…</span></a></li><li><a href="https://foroayuda.es/el-subproceso-de-llamada-debe-ser-sta-porque-muchos-componentes-de-la-interfaz-de-usuario-requieren-este-error-al-crear-una-ventana-emergente-de-wpf-en-el-subproceso/" class="crp_link post-10348"><span class="crp_title">"El subproceso de llamada debe ser STA, porque muchos…</span></a></li><li><a href="https://foroayuda.es/interfaz-de-usuario-de-spark-en-aws-emr/" class="crp_link post-25548"><span class="crp_title">Interfaz de usuario de Spark en AWS EMR</span></a></li><li><a href="https://foroayuda.es/interfaz-de-usuario-con-ejemplo-de-codigo-c/" class="crp_link post-25547"><span class="crp_title">interfaz de usuario con ejemplo de código c ++</span></a></li><li><a href="https://foroayuda.es/interfaz-de-usuario-web-de-apache-zookeeper/" class="crp_link post-25553"><span class="crp_title">Interfaz de usuario WEB de Apache ZooKeeper</span></a></li><li><a href="https://foroayuda.es/diseno-de-interfaz-grafica-de-usuario-c-net-3-5/" class="crp_link post-43943"><span class="crp_title">Diseño de interfaz gráfica de usuario C# .NET 3.5</span></a></li></ul><div class="crp_clear"></div></div> <div class="banner desktop"> <div class="center fluid"> </div> </div> <div class="banner mobile"> <div class="center fluid"> </div> </div> <footer class="entry-footer"> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3>Deja una respuesta <small><a rel="nofollow" id="cancel-comment-reply-link" href="/como-crear-aplicaciones-nativas-de-c-con-interfaz-de-usuario-html-css/#respond" style="display:none;">Cancelar la respuesta</a></small></h3><form action="https://foroayuda.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> <span class="required-field-message">Los campos obligatorios están marcados con <span class="required">*</span></span></p><textarea id="comment" name="comment" cols="45" rows="1" required></textarea><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Publicar el comentario" /> <input type='hidden' name='comment_post_ID' value='46406' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p>  <p class="antispam-group antispam-group-q" style="clear: both;"> <label>Current ye@r <span class="required">*</span></label> <input type="hidden" name="antspm-a" class="antispam-control antispam-control-a" value="2024" /> <input type="text" name="antspm-q" class="antispam-control antispam-control-q" value="1.0.4" autocomplete="off" /> </p> <p class="antispam-group antispam-group-e" style="display: none;"> <label>Leave this field empty</label> <input type="text" name="antspm-e-email-url-website" class="antispam-control antispam-control-e" value="" autocomplete="off" /> </p> </form> </div> </div> </footer> </div> <aside id="secondary" class="widget-area entry-aside"> <div class="widget-area-wrapper "> <section id="recent-posts-3" class="widget widget_recent_entries"> <h4 class="widget-title n-m-t">Entradas recientes</h4> <ul> <li> <a href="https://foroayuda.es/como-se-abren-archivos-mat-en-octave/">¿Cómo se abren archivos .mat en Octave?</a> </li> <li> <a href="https://foroayuda.es/como-sangrar-formatear-una-seleccion-de-codigo-en-visual-studio-code-con-ctrl-shift-f/">Cómo sangrar/formatear una selección de código en Visual Studio Code con Ctrl + Shift + F</a> </li> <li> <a href="https://foroayuda.es/como-sangrar-el-bloque-de-codigo-en-python-ide-spyder/">cómo sangrar el bloque de código en Python IDE: Spyder?</a> </li> </ul> </section><section id="custom_html-7" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"> <ins class="adsbygoogle aside_ads" style="display:block" data-ad-client="ca-pub-9156923925267699" data-ad-slot="5963338509" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section> </div> </aside> </div> </main> <footer class="site-footer"> <div class="container"> <div class="widget-area-footer"> <div class="widget-area"> <section id="nav_menu-3" class="widget widget_nav_menu"><h4 class="widget-title n-m-t">Aviso Legal y Contacto</h4><div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-59444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59444"><a href="https://foroayuda.es/aviso-legal/">Aviso Legal</a></li> <li id="menu-item-59442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59442"><a href="https://foroayuda.es/politica-de-cookies/">Política de Cookies</a></li> <li id="menu-item-59443" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59443"><a href="https://foroayuda.es/politica-de-privacidad/">Política de Privacidad</a></li> <li class="menu-item"> <script> function orbital_expand_navbar() { var element = document.getElementById("search-navbar"); if (element.classList.contains('expand-searchform')) { element.classList.remove("expand-searchform"); return; }else { element.classList.add("expand-searchform"); document.getElementById("search-input").focus(); } } </script> <a href="#" onclick="orbital_expand_navbar()" class="text-center"><i class="fa fa-search fa-sm"></i></a> </li></ul></div></section> </div> <div class="widget-area"> <section id="text-5" class="widget widget_text"><h4 class="widget-title n-m-t">Sitemap</h4> <div class="textwidget"><p><a href="https://foroayuda.es/sitemap_index.xml">Sitemap Principa</a>l</p> <p><strong><a href="/categorias-de-la-web/">Categorías de la Web</a></strong></p> </div> </section> </div> </div> <div class="credits row"> <p>Respuestas a preguntas comunes sobre programacion y tecnología</p> </div> </div> </footer>  <div class="site-overlay"></div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Foro Ayuda", "alternateName": "Respuestas a preguntas comunes sobre programacion y tecnología", "url": "https://foroayuda.es" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "Te traemos la solución a este dilema, al menos eso pensamos. Si Leer Más", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://foroayuda.es/como-crear-aplicaciones-nativas-de-c-con-interfaz-de-usuario-html-css/" }, "datePublished": "2023-03-07", "dateModified": "2023-03-07", "author": { "@type": "Person", "name": "Alina Gallardo" }, "publisher": { "@type": "Organization", "name": "Foro Ayuda" , "logo": { "@type": "ImageObject", "url": "https://foroayuda.es/wp-content/uploads/2023/03/cropped-logo-foro-ayuda.png" } } } </script> <style id='yasrcss-inline-css' type='text/css'> .yasr-star-rating { background-image: url('https://foroayuda.es/wp-content/plugins/yet-another-stars-rating/includes/img/star_2.svg'); } .yasr-star-rating .yasr-star-value { background: url('https://foroayuda.es/wp-content/plugins/yet-another-stars-rating/includes/img/star_3.svg') ; } .yasr-star-rating { background-image: url('https://foroayuda.es/wp-content/plugins/yet-another-stars-rating/includes/img/star_2.svg'); } .yasr-star-rating .yasr-star-value { background: url('https://foroayuda.es/wp-content/plugins/yet-another-stars-rating/includes/img/star_3.svg') ; } </style> <script type="text/javascript" id="code-prettify-js-before"> /* <![CDATA[ */ var codePrettifyLoaderBaseUrl = "https:\/\/foroayuda.es\/wp-content\/plugins\/code-prettify\/prettify"; /* ]]> */ </script> <script data-minify="1" type="text/javascript" src="https://foroayuda.es/wp-content/cache/min/1/wp-content/plugins/code-prettify/prettify/run_prettify.js?ver=1678572161" id="code-prettify-js" defer></script> <script data-minify="1" type="text/javascript" src="https://foroayuda.es/wp-content/cache/min/1/wp-content/plugins/honeypot-antispam/js/honeypot-antispam.js?ver=1678572161" id="honeypot-antispam-script-js" defer></script> <script type="text/javascript" src="https://foroayuda.es/wp-content/themes/orbital/assets/js/navigation.js" id="orbital-navigation-js" defer></script> <script type="text/javascript" src="https://foroayuda.es/wp-content/themes/orbital/assets/js/social.min.js" id="orbital-social-js" defer></script> <script data-minify="1" type="text/javascript" src="https://foroayuda.es/wp-content/cache/min/1/wp-content/themes/orbital/assets/js/main.js?ver=1678572162" id="orbital-main-js" defer></script> <script type="text/javascript" src="https://foroayuda.es/wp-content/plugins/machete/inc/social/js/share.min.js" id="machete_social-js" defer></script> <script type="text/javascript" id="q2w3_fixed_widget-js-extra"> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"posts","use_sticky_position":false,"margin_top":10,"margin_bottom":0,"stop_elements_selectors":"comments","screen_max_width":800,"screen_max_height":0,"widgets":["#custom_html-7"]}]; /* ]]> */ </script> <script type="text/javascript" src="https://foroayuda.es/wp-content/plugins/q2w3-fixed-widget/js/frontend.min.js" id="q2w3_fixed_widget-js" defer></script> <script type="text/javascript" id="yasr-window-var-js-extra"> /* <![CDATA[ */ var yasrWindowVar = {"siteUrl":"https:\/\/foroayuda.es","adminUrl":"https:\/\/foroayuda.es\/wp-admin\/","ajaxurl":"https:\/\/foroayuda.es\/wp-admin\/admin-ajax.php","visitorStatsEnabled":"yes","ajaxEnabled":"yes","loaderHtml":"<div id=\"yasr-loader\" style=\"display: inline-block\">\u00a0 <img src=\"https:\/\/foroayuda.es\/wp-content\/plugins\/yet-another-stars-rating\/includes\/img\/loader.gif\" \n title=\"yasr-loader\" alt=\"yasr-loader\" height=\"16\" width=\"16\"><\/div>","loaderUrl":"https:\/\/foroayuda.es\/wp-content\/plugins\/yet-another-stars-rating\/includes\/img\/loader.gif","isUserLoggedIn":"false","isRtl":"false","starSingleForm":"\"estrella\"","starsPluralForm":"\"estrellas\"","textAfterVr":"\"(Votos: %total_count% Promedio: %average%)\"","textRating":"\"Valoraci\\u00f3n\"","textLoadRanking":"\"Cargando por favor espere\"","textVvStats":"\"de 5 estrellas\"","textOrderBy":"\"Ordenar por\"","textMostRated":"\"Mayor puntuaci\\u00f3n\"","textHighestRated":"\"Mejor puntuaci\\u00f3n\"","textLeftColumnHeader":"\"Enrada\""}; /* ]]> */ </script> <script type="text/javascript" src="https://foroayuda.es/wp-content/plugins/wp-rocket/assets/js/heartbeat.js" id="heartbeat-js" defer></script> <script data-minify="1" type="text/javascript" src="https://foroayuda.es/wp-content/cache/min/1/wp-content/plugins/yet-another-stars-rating/includes/js/yasr-globals.js?ver=1678572162" id="yasr-global-functions-js" defer></script> <script type="text/javascript" src="https://foroayuda.es/wp-content/plugins/yet-another-stars-rating/includes/js/tippy.all.min.js" id="tippy-js" defer></script> <script data-minify="1" type="text/javascript" src="https://foroayuda.es/wp-content/cache/min/1/wp-content/plugins/yet-another-stars-rating/includes/js/shortcodes/visitorVotes.js?ver=1678572162" id="yasr-front-vv-js" defer></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://foroayuda.es/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script> </body> </html>