Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: bgnumis en 9 Octubre 2016, 18:07 pm


Título: Ayuda para retomar programación
Publicado por: bgnumis en 9 Octubre 2016, 18:07 pm

Hola a todos,

Hace un tiempo empecé a programar y tuve un accidente y he estado sin tocar nada de programar bastante tiempo, tanto que no me acuerdo de casi nada

La cuestión que en lo que tenía programado, tenía el siguiente index.php

Sé que está fatal, la cuestión es que he intentado tocar el css asociado y lo he destrozado.

Os lo adjunto debajo. ¿Como podría simplificar el index y que la parte de registro de usuario me quedara minimamente user friendly? He tocado el css y lo he dejado peor, voy a empezar de cero pero por si alguien en un vistazo es capaz de darme algunos consejos y pautas.

Muchas Gracias.
 
Código
  1.  
  2. <!DOCTYPE html>
  3. <html lang="es">
  4.  
  5.  <br> 
  6.  
  7.  
  8.  
  9.  
  10. <TABLE WIDTH="100%" HEIGHT="100%">
  11.  
  12.  
  13. <TR>
  14.  
  15.  
  16. <TD VALIGN="MIDDLE" ALIGN="CENTER">
  17.  
  18.  
  19.  
  20.  
  21.  
  22. <FONT SIZE=6>  Research <FONT>
  23. <br>
  24.  
  25. <FONT SIZE=2> Quantitative Solutions <FONT>
  26.  
  27.  
  28.  
  29. </TD>
  30.  
  31.  
  32. </TR>
  33.  
  34.  </TABLE>
  35.  
  36. <head>
  37.  
  38.  
  39. <title> Company
  40. </title>
  41.  
  42. <meta charset="utf-8"/>
  43. <meta name="description" content="Análisis  "/>
  44. <meta name="viewport" content="width=devide-width,initial-scale=1"/>
  45. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
  46. <link rel="stylesheet"  href="css/estilos.css" />
  47.  
  48.  
  49. <!--[if lt IE 9]>
  50. 	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  51. <![endif]>-->
  52.  
  53. <link rel="stylesheet" href="flexslider.css"  media="screen" />
  54. 	<script src="jquery.min.js"></script>
  55. 	<script src="jquery.flexslider-min.js"></script>
  56. 	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  57.  
  58. 	<!-- Includes for this demo -->
  59. 	<link rel="stylesheet" href="css/flexslider.css" media="screen" />
  60.  
  61. 	<!-- Hook up the FlexSlider -->
  62. 	<script>
  63. 		$(window).load(function() {
  64. 			$('.flexslider').flexslider();
  65. 		});
  66. 	</script>
  67.  
  68.  
  69.  
  70.     <script type="text/javascript">
  71.     <!--
  72.         $().ready(function() {
  73.             $("#frmlogin").validate();
  74.             $("#usuario").focus();
  75.         });
  76.     // -->
  77.     </script>
  78. </head>	
  79.  
  80. <body>
  81.  
  82.  
  83. <header>
  84.  
  85.  
  86.  
  87.  
  88. 	<h1>
  89.  
  90. 		<a href="index.php" > 
  91. 		<span class="f"></span>   	<img  alt="bla bla" src="img/fondo-interno.jpg" width="50" height="50" />
  92. 	</a>
  93.  
  94.  
  95. 		</h1>
  96.  
  97.  
  98.  
  99.  
  100. <nav> 
  101.  
  102. <ul>
  103. <li><a>Bienvenido, accede a tu cuenta</a></li>
  104.  
  105.  
  106.  
  107. </ul>
  108. 		</nav>
  109.  
  110.  
  111.         <nav>
  112.  
  113.         Prueba
  114.         </nav>
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121.  
  122.  
  123. 	</header>
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130. 	<section id="contenido">
  131. 	<section id="Mercados">
  132.  
  133.  
  134.  
  135.  
  136.     <article id="servicio3">
  137. 	<h3>Iniciar sesi&oacute;n  &nbsp;    </h3>
  138. 		<p>
  139.  
  140. 		<br /><br />
  141. <form id="frmlogin" name="frmlogin"  method="POST" action="validarUsuario.php">
  142. <table align="center" width="362" CELLPADDING="5">
  143.  
  144. <tr>
  145.     <td width="61">Usuario:</td>
  146.     <td width="142">
  147.         <input type="text" name="usuario" id="usuario" class="required" maxlength="50">
  148.     </td>
  149. </tr>
  150.  
  151. <tr>
  152.     <td>Password:</td>
  153.     <td>
  154.         <input type="password" name="password" id="password" class="required"  maxlength="50">
  155.     </td>
  156. </tr>
  157.  
  158.  
  159. <tr>
  160.     <td colspan="2" align="right">
  161.         <input type="submit" name="enviar" value="Enviar" >
  162.     </td>
  163.  
  164. </tr>
  165.  
  166.  
  167. </table>
  168. </form>
  169.  
  170.       </article>
  171. 	  </section>
  172. 		</section>
  173.  
  174.  
  175.  
  176.  
  177. <footer> Working progress</footer>
  178. </body>
  179. </html>
  180.  
  181.  
  182.  
  183.  


Código css

Código
  1.  
  2. /* Reglas para trabjar  */
  3.  
  4. * {
  5. border:0;
  6.  margin: 0;
  7. 	padding: 0;
  8. 	}
  9.  
  10.  
  11. article,figcaption,figure,footer,header,hgroup,nav,section{
  12. display: block;
  13.  
  14. }
  15.  
  16. body  { 
  17. background: #212121  url(../img/fondo.jpg);
  18. color:#FFF;
  19.  
  20.  
  21.  
  22. }
  23.  
  24.  
  25.  
  26. a{
  27.  
  28. color: #CEF6F5;
  29.  
  30. font-weight:bold;
  31. text-decoration:none;
  32.  
  33. }
  34.  
  35. a:hover{
  36.  
  37. color: #CEF6F5;
  38.  
  39. }
  40.  
  41.  
  42.  
  43. figcaption {
  44.  
  45. 	font-size: 0.85em;
  46. 	padding: 0.25em;
  47. 	text-align: center;
  48. 	min-height: 1500px;
  49. }
  50.  
  51. img, video{
  52. 	max-width: 100%;
  53.  
  54. }
  55.  
  56.  
  57.  
  58. header, section#contenido,section#contenido2, section#contenido111, footer {
  59.  
  60. 	background: #FFF url(../img/fondo-interno.jpg);
  61. 	margin: 0 auto;
  62. 	max-width: 100%;
  63. 	text-align: center;
  64.  
  65. 	}
  66.  
  67.  
  68. header h1, h2, h3, h4,h5,h6, nav {
  69.  
  70. 	display: inline-block;
  71. 	max-width: 100%;
  72. 	vertical-align: middle;
  73. 	}
  74.  
  75.  
  76.  
  77.  
  78.  
  79. h3,h4, h5{
  80. background: #E2E7F1; 
  81. border-radius: 1em;
  82. margin-bottom: .5em;
  83. padding-left: .5em;
  84. box-shadow: .25em .25em .25em rgba(255, 153, 0,.5);
  85. 	color:#000000;
  86. 	}
  87.  
  88.  
  89.  
  90. h6{
  91. background: #E2E7F1; 
  92. border-radius: 1em;
  93. margin-bottom: .5em;
  94. padding-left: .5em;
  95. box-shadow: .25em .25em .25em rgba(255, 153, 0,.5);
  96. 	color:#000000;
  97. 	}	
  98.  
  99.  
  100. 	ol{
  101. 	padding: 0 2em;
  102. 	}
  103.  
  104. 		ol li{
  105. 	padding: 1em 0;
  106. 	}
  107.  
  108. nav ul{
  109.  
  110. list-style: 	none;
  111.  
  112. }
  113.  
  114.  
  115. 		nav li{
  116.  
  117. 		display: inline-block;
  118. 		padding=0.1em;
  119. 		vertical-align: top;
  120.  
  121.  
  122. 	}
  123.  
  124.  
  125.  
  126. 	nav a{
  127.  
  128. 	background: #FFF;
  129. 	border: 0.1em solid #57ABB8;
  130. 	border-radius: 0.25em;
  131. 	color: #F60;
  132. 	display: block;
  133.  
  134. 	font-size: 1.4em;
  135. 	padding: 0.2em;
  136. 	-ms-transition: all 0.5s ease-in;
  137. 	-moz-transition: all 0.5s ease-in;
  138. 	-o-transition: all 0.5s ease-in;
  139. 	-webkit-transition: all 0.5s ease-in;
  140. 	transition: all 0.5s ease-in;
  141.  
  142. 	}
  143.  
  144.  
  145. 		nav a:hover{
  146.  
  147. 	background: #212121;
  148. 	border: 0.1em dashed #F60;
  149. 	border-radius: 0 0.5em 0 0.5em;
  150. 	color: #FFF;
  151. 	-ms-transition: all 0.5s ease-out;
  152. 	-moz-transition: all 0.5s ease-out;
  153. 	-o-transition: all 0.5s ease-out;
  154. 	-webkit-transition: all 0.5s ease-out;
  155. 	transition: all 0.5s ease-out;
  156.  
  157.  
  158.  
  159. 	}
  160.  
  161.  
  162. 	section#principal, aside{
  163.  
  164. 	background: #1E6381;
  165.  
  166. 	border-radius: 0.5em;
  167.  
  168. 	display: inline-block;
  169.  
  170. 	margin: 0 auto;
  171. 	max-width: 100%;
  172. 	padding: 0.25em;
  173. 	vertical-align: top;
  174. 	width: 65%;
  175.  
  176. 	}
  177.  
  178.  
  179.  
  180. 	aside{
  181. 	width: 30%;
  182. 	}
  183.  
  184. 		aside img{
  185. 	border-radius: 0.5em;
  186. 	}
  187.  
  188.  
  189.  
  190.  
  191. 	section#Mercados{
  192.  
  193. 	margin: 0 auto;
  194. 	max-width:100%;
  195.  
  196. 	}
  197.  
  198.  
  199.  
  200.  
  201. 	article#servicio1, article#servicio3{
  202. 	background: #F6FCFC;
  203.  margin-top: 4px; margin-right; 8px; margin-bottom: 8px; margin-left: 8px
  204. 	text-align: justify;
  205. 	border-radius: 0.5em;
  206. 	max-width:400 px;
  207. 	min-width: 400 px;
  208. 	min-height: 400 px;
  209. 		max-height: 400px;
  210.  
  211. 	padding: 0.995em;
  212. 	vertical-align: justify;	
  213. 	 color: #C00;
  214.  
  215.  
  216.  
  217. 	}
  218.  
  219. 	article#servicio99{
  220. 	background: #F6FCFC;
  221.  margin-top: 4px; margin-right; 8px; margin-bottom: 8px; margin-left: 8px
  222. 	text-align: justify;
  223. 	border-radius: 0.5em;
  224.  
  225.  
  226. 	padding: 0.995em;
  227. 	vertical-align: center;
  228. 	width: 98%;
  229.  
  230. 	 color: #C00;
  231.  
  232.  
  233.  
  234. 	}
  235.  
  236.  
  237. 	article#servicio1,article#servicio3{
  238. 		text-align: justify;
  239. 	background: #F6FCFC;
  240. 	border: 1px solid #d0d0d0;
  241. 	display:inline-block;
  242. 	border-radius: 0.5em;
  243. 	vertical-align: center;
  244. 	width: 31%;
  245. 	heigth: 21%;
  246. 	max-height: 10px;
  247. 	max-width: 200px;
  248. 	}
  249.  
  250.  
  251.  
  252.  
  253.  
  254.  
  255.  
  256. 	footer{
  257.  
  258. 	color: #000;
  259. 	font-size: 0.85em;
  260. 	padding: 0.75em 0;
  261.  
  262. 	}
  263.  
  264.  
  265. 	.fade{
  266. 	opacity: 1;
  267. 	filter :alpha(opacity=10);
  268. 	-ms-transition: all 0.5s ease-in;
  269. 	-moz-transition: all 0.5s ease-in;
  270. 	-o-transition: all 0.5s ease-in;
  271. 	-webkit-transition: all 0.5s ease-in;
  272. 	transition: all 0.5s ease-in;
  273. 	}
  274.  
  275. 	.fade:hover{
  276. 		opacity: 0.7;
  277. 	filter :alpha(opacity=7);
  278. 		-ms-transition: all 0.5s ease-out;
  279. 	-moz-transition: all 0.5s ease-out;
  280. 	-o-transition: all 0.5s ease-out;
  281. 	-webkit-transition: all 0.5s ease-out;
  282.  
  283.  
  284. 	transition: all 0.5s ease-out;
  285.  
  286. 	}
  287.  
  288. 	@media(min-width:1081px){
  289. 	header h1{
  290. 	text-align: left;
  291. 	width:35%
  292. 	}
  293.  
  294. 	nav{
  295. 	text-align: center;
  296. 	width:100%
  297.  
  298. 	}
  299.  
  300. 	}
  301.  
  302. 	@media(max-width:1081px){
  303. 	nav li{
  304. 	font-size: 1.3em;
  305.  
  306. 	}
  307.  
  308. 	article#galeria-inicio{
  309.  
  310. 	width:80%
  311.  
  312. 	}
  313.  
  314. 	article#servicio1,article#servicio2,article#servicio3{
  315.  
  316. 	width:30%
  317. 	vertical-align: top
  318.  
  319.  
  320. 	}
  321.  
  322. 	aside{
  323. 	width: 20%;
  324.  
  325. 	}
  326.  
  327.  
  328. 	}
  329.  
  330. 	@media(max-width:800px){
  331. 	nav li{
  332. 	font-size: 0.95em;
  333.  
  334. 	}
  335.  
  336. 	article#galeria-inicio{
  337.  
  338. 	width:88%;
  339.  
  340. 	}
  341.  
  342. 		article#servicio1,article#servicio2,article#servicio3{
  343.  
  344. 	width:45%
  345.  
  346. 	}
  347.  
  348. 	}
  349.  
  350.  
  351.  
  352.  
  353. 	@media(max-width:600px){
  354.  
  355.  
  356. 	nav li{
  357. 	display: inline-block;
  358. 	margin: 0px;
  359. 	width:98%;	
  360.  
  361.  
  362. 	}
  363.  
  364.  
  365. 	article#servicio1,article#servicio2,article#servicio3{
  366. 	width:50%
  367. 	}
  368.  
  369.  
  370. 	}
  371.  
  372. 	section#principal{
  373. 	margin-bottom: 0.2em;
  374. 	}
  375.  
  376. 	section#principal, aside{
  377. 	display: block;
  378.  
  379. 	width:95%
  380. 	}
  381.  
  382.  
  383. 	div.septrue {
  384. 	border-left:1px solid #363636;
  385. }
  386.  
  387. 	 div.septrue {
  388. 	width:1px;
  389. 	height:17px;
  390. 	margin-top:7px;
  391. 	float:left;
  392. }
  393.  
  394.  
  395.  
  396.  
  397.  
  398.  

Título: Re: Ayuda para retomar programación
Publicado por: alanzo88 en 27 Octubre 2016, 19:09 pm
http://www.forosdelweb.com/f2/retomar-programacion-1027526/


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines