miércoles, 9 de octubre de 2013

Ejercicio de formulario

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
    <title>Registro - iDESWEB</title>
</head>

<body>

<header>
    <h1>iDESWEB</h1>
</header>

<h2>Formulario de registro</h2>

<form method="post" action="documento.php">
    <fieldset>
        <legend>¿Quién eres?</legend>
        <p>
            <label for="idNombre">Nombre:</label><input type="text" id="idNombre" name="nombre"/>
            <label for="idApellidos">Apellidos:</label><input type="text" id="idApellidos" name="apellidos"/>
        </p>
        <p>
            <label for="idCorreo">Correo electrónico:</label><input type="text" id="idCorreo" name="apellidos"/>
        </p>
        <p>
            Fecha de Nacimiento:
                <select name="dia">
                    <option value="" selected="selected">Día</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>
               
                <select name="mes">
                    <option value="" selected="selected">Mes</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
               
                <select id="anyo"><option selected="selected" value="">Año</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option></select>
        </p>
       
    </fieldset>
   
    <fieldset>
        <legend>¿De dónde eres?</legend>
       
        <p>
            <label for="idCiudad">Ciudad:</label><input type="text" id="idCiudad" name="ciudad"/>
        </p>
       
        <p>
            <label for="idCode">Código postal:</label><input type="text" id="idCode" name="code"/>
        </p>
       
        <p>
            País:
            <select name="pais">
                <option value="" selected="selected">País</option>
                <option value="uzbekistan">Uzbekistan</option>
                <option value="kazakistan">Kazakistan</option>
                <option value="spain">Españistán</option>
              </select>
          </p>
    </fieldset>
   
    <fieldset>
        <legend>¿Como quieres iniciar la sesión?</legend>
       
        <p>
            <label for="idUsuario">Nombre de usuario:</label><input type="text" id="idUsuario" name="usuario"/>
        </p>
       
        <p>
            <label for="idPassword">Contraseña:</label><input type="password" id="idPassword" name="password"/>
        </p>
       
        <p>
            <label for="idPassword2">Vuelve a escribir la contraseña:</label><input type="password" id="idPassword2" name="password2"/>
        </p>
       
    </fieldset>
   
    <fieldset>
        <legend>Condiciones de registro</legend>
        <p>
            Deseo recibir ofertas de iDESWEB
            <input type="radio" name="oferta" id="idOfDia">Una vez al día
            <input type="radio" name="oferta" id="idOfSemana">Una vez a la semana
            <input type="radio" name="oferta" id="idOfMes">Una vez al mes
        </p>
       
        <p>
            <input type="checkbox" name="acepto" id="idAcepto">Acepto el acuerdo de servicio, la declaración de privacidad y la declaración de uso de cookies.
        </p>
       
    </fieldset>
        <p>
            <input type="submit" value="Crear cuenta"/>
        </p>
   
</form>


<footer>

</footer>

</body>

</html>

martes, 8 de octubre de 2013

HTML: conceptos básicos: Una página web sencilla

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
    <title>HTML: conceptos básicos: Una página web sencilla</title>
</head>

<body>

<header>
    <h1>iDESWEB: Introducción al desarrollo web</h1>
</header>
<p>
Un curso nuevo de tipo MOOC, <b>totalmente gratuito</b> y disponible en la Web (<b>curso online</b>), con el que vas a aprender los conceptos básicos del desarrollo de aplicaciones web.</p>

<p>Aprende HTML, CSS, JavaScript, PHP... y los principios básicos del diseño, de la usabilidad y de la accesibilidad web.</p>

<p>La fecha de inicio de la tercera edición del curso es el 23/09/2013. El curso se desarrolla en la dirección <a href="http://ideswebcourse.appspot.com/">http://ideswebcourse.appspot.com/</a><p>

<iframe width="560" height="315" src="http://www.youtube.com/embed/TKfOc4EkiOE?rel=0" allowfullscreen></iframe>

<p><a href="http://ideswebcourse.appspot.com/">¡Apúntate y aprende!</a></p>

<h2>Temario</h2>

<p>En este curso aprenderás todo lo que necesitas saber para convertirte en un desarrollador web desde cero: HTML, CSS, JavaScript, DOM, DHTML, XAMPP, PHP, phpMyAdmin y MySQL.<p>

<p><a href="http://ideswebcourse.appspot.com/schedule">Temario &raquo;</a></p>

<h2>Calendario</h2>

<p>¿Cuándo empieza el curso? ¿Cuánto dura el curso?<p>

<p><a href="http://ideswebcourse.appspot.com/calendar">Calendario &raquo;</a></p>


<footer>

</footer>

</body>

</html>

lunes, 7 de octubre de 2013

Wireframe

He decidido continuar el curso de septiembre de 2012, un año después.
Quedó pendiente la realización de un Wireframe para la realización de una aplicación tipo Flickr "de juguete".

Para su realización he utilizado la herramienta online que se llama gliffty. Se puede utilizar registrándose en https://www.gliffy.com/

Los Wireframes son solamente una de las opciones disponibles. Con esta aplicación web pueden realizarse varios tipos de diagramas de flujo, decoración, etc.

He realizado los wireframes de la página principal de la aplicación y la de búsqueda. Han quedado de la siguiente forma.

Página principal:


Página de búsqueda: