jueves, 6 de octubre de 2011

Crear una pagina para tu móvil parte 1

para crear una pagina móvil hay que tener un editor html y por supuesto un servidor en donde alojar nuestra pagina web para empezar hay que abrir un documento en html

para empezar hay que crear la base de la pagina y hay que poner el siguiente código



<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head> 

<body> 
Tu contenido va aquí</body>
</html>


si estas usando dreamweaver puedes oprimir f12 o vista previa para ver como queda


Como puedes observar solo es texto imágenes o lo que hayas puesto no tiene un header o un footer para poner un header y demás secciones teneos que hacer lo siguiente






para crear una pagina generalmente se usa la opción 




<div data-role="page">




y las demás opciones de 






<div data-role="header">...</div>


<div data-role="content">...</div> 


<div data-role="footer">...</div> 
 en donde están los puntos... pon lo que quieras que diga tu header, tu contenido y tu footer


Para ponerlo de la forma correcta se necesita hacer esto


<div data-role="page"> 
	<div data-role="header">...</div> 
	<div data-role="content">...</div> 
	<div data-role="footer">...</div> 
</div> 


una vez completada esta acción lo tenemos que juntar a nuestro documento anterior y quedara de esta forma 






<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>





te quedara así muestra




Aqui termina la parte 1 siguenos para que te enteres de nuestras próximas actualizaciones 


























Publicado por
Luis Enrique Cadena


en
17:38
























No hay comentarios:















Publicar un comentario


















        

      










Suscribirse a:
Enviar comentarios (Atom)













 








;