elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda para retomar programación
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda para retomar programación  (Leído 1,273 veces)
bgnumis

Desconectado Desconectado

Mensajes: 155


Ver Perfil
Ayuda para retomar programación
« 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.  


En línea

alanzo88

Desconectado Desconectado

Mensajes: 3


Ver Perfil
Re: Ayuda para retomar programación
« Respuesta #1 en: 27 Octubre 2016, 19:09 pm »

http://www.forosdelweb.com/f2/retomar-programacion-1027526/


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda con programacion para android.
Dudas Generales
Diaf96 0 960 Último mensaje 12 Agosto 2013, 17:01 pm
por Diaf96
ayuda programacion para crear app para android
Programación General
nudo1nudo 0 860 Último mensaje 12 Junio 2014, 02:42 am
por nudo1nudo
Surgen páginas alternativas para retomar SeriesPepito y SeriesLy
Noticias
wolfbcn 0 1,088 Último mensaje 12 Diciembre 2014, 18:03 pm
por wolfbcn
retomar bucle for con valores globales
Programación C/C++
d91 2 730 Último mensaje 2 Septiembre 2015, 18:18 pm
por d91
[AYUDA] Retomar control de router/modem
Seguridad
Echogic 0 471 Último mensaje 22 Noviembre 2018, 22:05 pm
por Echogic
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines