Publicación PHP - Javascript - Html - Css 16/05/2022

Aplicación web PHP



Crea una fantástica aplicación web php desde cero con unos simples pasos, comprobarás lo sencillo que es desarrollar tu propia aplicación web con php y empezar a mostrar tus contenidos visualmente como las aplicaciones web.
descarga todo el contenido y desarrolla tu propia aplicación web con php.
======================================== 😎 Suscríbete al canal https://www.youtube.com/c/CURSOSDEPROGRAMACIÓN =========================================
Para crear tu propia aplicación web con php lo primero que tienes que hacer es insertar los estilos correspondientes para que tu web se comporte como una aplicación móvil y para ellos tendréis que insertar las siguiente lianas.

 

<script src="js/ajax/jquery.min.js"></script>

<link href="js/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">

 



Una vez insertadas seguidamente empezaremos con el código y para ello tendréis que tener claro el funcionamiento de vuestra aplicación web.
Lo primero saber que toda la aplicación se desarrollara dentro del infex.php, esto que quiere decir? pues sencillo, lo que quiere decir es que cuando entren en vuestra aplicación web php esta se cargara completamente desde el inicio, por eso no es recomendable que desarrolléis una aplicación web muy pesada.
Primero:

 

<a href="#seccion_a_1" data-icon="arrow-r" data-iconpos="left" data-transition="slideup" style="text-decoration: none;">

        <div data-role="header"  style="margin-top: 0px; width: auto; height: 137px;  margin-bottom: 20px; background-image: url(“img/a01.jpg"); background-repeat: no-repeat; margin-left: 20px; margin-right: 20px; border-radius: 10px; " data-theme="b">

                <h1 style="font-size: 40px; margin-top: 15px ; white-space:normal; margin-right: 5px; margin-left: 5px; text-decoration: none; text-shadow: 0.1em 0.1em 0.2em black ">Viajes</h1>

        </div>

</a>

 


Como veis en nuestro botón estoy dirigiendo el enlace por "href" a el apartado "#seccion_a_1" entonces al presionar lo que hará nuestra página será llevarnos a ese apartado sin salir del index.php el cual tendremos desarrollado en nuestro código en la parte inferior.
Segundo:


Como veis este <div> tiene como ID "seccion_a_1" y esto quiere decir que cuando presionamos nuestro enlace nos llevara a este apartado sin recarga nuestro index y ejecutando una transición que emula a la perfección las de las aplicaciones web

 

<!-- seccion_a_1 -->

<div data-role="page" id="seccion_a_1">

        <div id="centrar">

                <div class="ui-grid-a">

                        <div data-role="header" data-theme="b" style="height:50px;">

                                <h1>info </h1>

                                <a href="#inicio" data-icon="back" data-rel="back" data-transition="slide" data-direction="reverse">Atras</a>

                                <a href="#inicio" data-icon="home" data-transition="slide" data-direction="reverse">Inicio</a>

                        </div>

                        <div role="main" class="ui-content">

                                <ul data-role="listview">

                                        <li>

                                                <a href="#seccion_b" data-transition="slide">

                                                        <div style="  overflow:hidden; float:left; width:90px; margin-right:15px; ">

                                                                <img style="overflow:hidden; height:90px; vertical-align:middle; height:80px; width: 80px; border-radius: 50% 50% 50% 50%; border:#000000 4px solid;  " src="img/button002.jpg">

                                                        </div>

                                                        <div style="float: left; width: 190px; ">

                                                                <h2 style="margin-top:0px; color:#039; white-space:normal;  color:#000; text-shadow: none; " >titulo</h2>

                                                                <p>detalle</p>

                                                                <div style=" float:left; background-color:#F00; padding:5px;">

                                                                        <p style="margin:0px; padding:0px; color:#FFF; font-weight:bold; text-shadow:0 0px 0 #000;">5000€</p>

                                                                </div>

                                                        </div>

                                                </a>

                                        </li>

                                </ul>

                        </div>

                </div>

        </div>

</div>

<!-- end seccion_a_1 -->

 

 

data-transition="slideup"

 


Estas transiciones podrás elegirlas a tu gusto 

 

fade - Default. Fades to the next page

flip - Flips to the next page from back to front

flow - Throws the current page away and comes in with the next page

pop - Goes to the next page like a popup window

slide - Slides to the next page from right to left

slidefade - Slides from right to left and fades in the next page

slideup - Slides to the next page from bottom to top

slidedown - Slides to the next page from top to bottom

turn - Turns to the next page

none - No transition effect

 


Si quieres conocer más sobre estas transiciones puedes entrar a:
quanzhanketang.com
Si no te ha quedado claro como desarrollar tu aplicación web, ve el video donde te explico paso a paso como desarrolla tu aplicación web y aplicación móvil con php.
Ver video con explicación

✅APOYA EL CANAL Y HAZ TU DONATIVO Con tu ayuda seguiremos metiendo grandes contenidos gratuitos
https://www.paypal.com/donate/?hosted_button_id=THNVXGYTKHJ4G
💾 Descarga los archivos del tutorial: Descargar

test