Seguidores

miércoles, 7 de septiembre de 2016

ACTIVIDAD 3.19 FORMULARIOS PARTE 1

Hola de nuevo,

Siguiendo con el curso de desarrollo web que estoy estudiando, aquí traigo el resultado del ejercicio de la actividad 3.19 en el que se me pide que cree mi primer formulario.

Reconozco que esta parte de los formularios me está costando un poco más que lo que habíamos visto hasta ahora, pero simplemente es porque debo aprenderme un poco mejor las etiquetas nuevas que hemos estudiado y no tener que consultarlas constantemente, que es lo que me pasa ahora. Pero poco a poco, si nos ponemos nerviosos al final es mucho peor.

Bueno, este es el código HTML de mi primer formulario:

<html>

<head>
<title>Formulario de registro - Mi web</title>
</head>

<body>

<h1>Formulario de registro - Mi web</h1>

<br />
<br />

<form action="" method="get">

<p>
Nombre: <input type="text" name="nombre" maxlength="50" />
</p>

<br />

<p>
Apellidos: <input type="text" name="apellidos" maxlength="50" />
</p>

<br />

<p>
Sexo: <input type="radio" name="sexo" value="h" /> hombre <input type="radio" name="sexo" value="m" /> mujer
</p>

<br />

<p>
Correo electrónico: <input type="text" name="email" maxlength="100" />
</p>

<br />

<p>
<input type="checkbox" name="info" checked="checked" /> Deseo recibir información sobre novedades y ofertas.
</p>

<br />

<p>
<input type="checkbox" name="condiciones" /> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos.
</p>

<br />

<p>
<input type="submit" value="Enviar" />
</p>

</form>

</body>

</html>

Como habréis observado, y pese a que no lo pide en el ejercicio, he usado bastante la etiqueta <br />. Esto es simplemente por una cuestión de estética, ya que me gusta mas como queda el formulario con las líneas con doble espacio y de momento, con lo que se hasta ahora, es la única forma que se  para obtener este resultado.

Y este es el resultado, así se ve el formulario:


Yo creo que no me ha quedado mal del todo.

¿Que opináis vosotros?


domingo, 4 de septiembre de 2016

COMO ENLAZAR NUESTRAS PÁGINAS WEB A UNA PÁGINA DE INICIO

Hola a todos,

Anoche me enviaron un mail pidiéndome ayuda para enlazar páginas secundarias a una página de inicio en nuestro sitio web.


ES MUY FÁCIL, OS LO VOY A EXPLICAR:


Bien, si os acordáis del módulo del curso de desarrollo web donde tratan el tema de los enlaces web nos explicaba dos tipos de enlace en HTML.

  1.  Enlaces a un punto de la misma página.
  2.  Enlaces a otras páginas web.

El que nos interesa es el segundo tipo, los enlaces a otras páginas web.
Para explicaros como lo he echo yo voy a poner como ejemplo el proyecto que hice en la actividad 2.17 del curso de desarrollo web.

En este mismo blog, podéis ver la entrada que puse hace poco sobre esta actividad:


Como podéis ver se trata de mi currículum vitae y consta de 7 páginas. Aunque no esta aun subido a Internet, nos sirve perfectamente para explicar los enlaces.

Este es el código HTML de mi página de Inicio:


<html>

<head>
<title>CV JUAN FRANCISCO ORVAY MUÑIZ</title>
</head>

<body>

<h1>CURRICULUM VITAE</h1>

<h2>JUAN FRANCISCO ORVAY MUÑIZ</h2>

<br />
<br />

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>Datos personales</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg2%20formacion.html"><strong>Formación académica</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>Experiencia profesional</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg4%20habilidades.html"><strong>Habilidades</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20otros%20datos.html"><strong>Otros datos de interes</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>Contacto</strong></a></p>

</body>

</html>


Y vamos a coger el código HTML de una de las 6 páginas restantes del cv para ver como he puesto los enlaces (por ejemplo la página 2 "Formación Académica"):

<html>

<head>
<title>CV ORVAY FORMACIÓN ACADÉMICA</title>
</head>

<body>

<h1>FORMACIÓN ACADÉMICA</h1>

<br />
<br />

<h2>Formación profesional 2º Grado</h2>

<h3>Rama administrativa y comercial</h3>

<br />
<br />
<br />

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg0%20inicio.html"><strong>INICIO</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>PÁGINA ANTERIOR</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>PÁGINA SIGUIENTE</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>CONTACTO</strong></a></p>

</body>

</html>


Si os fijáis en la página inferior de cada código hay una serie de enlaces. Empiezan por <p><a href=....

Si observáis el primer código (el de la página de Inicio) hay un enlace a cada una de las 6 páginas que conforman mi currículum. El que nos interesa ahora es el segundo enlace:


<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>Datos personales</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg2%20formacion.html"><strong>Formación académica</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>Experiencia profesional</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg4%20habilidades.html"><strong>Habilidades</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20otros%20datos.html"><strong>Otros datos de interes</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>Contacto</strong></a></p>

</body>

</html>

Pero, ¿de dónde he sacado la URL para escribir el enlace?

Muy sencillo, simplemente basta con abrir la página en el navegador y copiar lo que pone en la barra de navegación.


Después, simplemente, basta con escribir el enlace en HTML de este modo:

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg2%20formacion.html"><strong>Formación académica</strong></a></p>


Muy importante que os fijes en la colocación de las ", pues por lo menos por mi parte es donde suelo, a veces, cometer algún error.

Para terminar debemos ir al código de la página que estamos enlazando (en este caso el de la Formación Académica). Miramos los enlaces que tengo escritos y veréis que el primero es el de INICIO:



<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg0%20inicio.html"><strong>INICIO</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>PÁGINA ANTERIOR</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>PÁGINA SIGUIENTE</strong></a></p>

<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>CONTACTO</strong></a></p>

El procedimiento para escribir este enlace es el mismo. Abres la página de Inicio en el navegador y buscas la URL.



Para acabar escribes el código del enlace en el sitio correspondiente de la página 2:


<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg0%20inicio.html"><strong>INICIO</strong></a></p>

Y ya están enlazadas las 2 páginas:


  • De INICIO a FORMACIÓN ACADÉMICA
  • De FORMACIÓN ACADÉMICA a INICIO


Estos pasos debéis seguirlos para ir enlazando todas las páginas que compongan vuestro sitio web. Tened en cuenta que en mi ejemplo, y supongo que os pasará lo mismo, las páginas están guardadas en mi ordenador. Cuando lo suba al hosting para hacerlo público deberé cambiar las URLs actuales, que si os fijáis son las carpetas donde se guardan los archivos en el ordenador, por las URLs de la Web donde ser carguen las páginas.

La mejor forma de aprender y perfeccionar todo esto es practicándolo mucho.

Así que,


Espero haberos ayudado, aunque sólo sea un poco





sábado, 3 de septiembre de 2016

ACTIVIDAD 3.5 ¿DÓNDE COMPRO MI NOMBRE DE DOMINIO?

Hola a todos

Ahora que ya se hacer un sitio web lo siguiente que tengo que hacer es publicarlo en Internet.

Para hacerlo necesito mi propio nombre de dominio.

Pero, ¿dónde lo compro? ¿cuanto me va a costar?

No os asustéis, a continuación o detallo los resultados de mi pequeña investigación sobre este tema. Es como ir a comprar al supermercado, hay precios para todos y grandes ofertas.


Para comprar tu nombre de dominio lo primero es saber que nombre le vas a poner. Pensadlo bien pues ese nombre os acompañará, si todo va bien, durante muchos años.

Lo ideal es elegir un nombre fácil de recordar y que indique a la gente que visita el sitio web la temática del mismo. Por ejemplo, si quieres comprar un nombre de dominio para crear un sitio web sobre venta de caramelos sería inteligente por tu parte ponerle al dominio nombres como chuches.com o caramelos.es.

Cuando ya tienes elegido el nombre de dominio debes comprobar si está disponible para su adquisición (alquiler, pues los nombres de dominio no se compran).

Si escribes registrar dominio en el buscador del navegador web (yo uso www.google.es) te salen muchísimas páginas donde comprobar la disponibilidad de tu nombre de dominio así como distintas ofertas para su adquisición.

¡¡¡Aquí empiezan las complicaciones!!!

Cuando te pones a mirar distintas ofertas puedes tirarte horas y horas leyendo la letra pequeña, viendo que te ofrece cada empresa y buscando donde ahorrar más dinero.

Como he dicho antes, es como ir al mercado. Debes ir con tiempo, paciencia y ganas de buscar una ganga, así disfrutarás eligiendo y contratando tu nombre de dominio.




Para esta pequeña investigación he utilizado mi apellido para buscar mi nombre de dominio.

orvay.es

Utilizando Google he buscado distintos registradores de dominio y estos son algunos de los resultados:










Como podéis ver cada oferta es distinta, algunas te hacen descuento, te ofrecen el primer año gratis o un 3x2 si vas a comprar más de un dominio.

¿Que hacemos entonces? ¿Cual escogemos?

Pues muy fácil, lo primero de todo no ponerse nerviosos, que haya tantas ofertas es bueno para el consumidor (nosotros), pues mientras las empresas se "pelean" para hacerse la competencia unas con otras, nosotros nos aprovechamos de las cada vez más baratas ofertas que nos ofrecen para que hagamos negocios con ellos.

Lo que debéis hacer es estudiar detenidamente los servicios que necesitáis para vuestro sitio web, si no quizá paguéis por algo que no vais a usar en la vida y en cambio a lo mejor os encontráis con que necesitáis algún servicio y ¡oh, oh!, no lo tenéis incluido.

Una vez tengáis claras vuestras necesidades, lo siguiente sólo requiere paciencia y tiempo delante de vuestro ordenador buscando y revisando las distintas ofertas.

NO OS DESESPERÉIS



SEGURO QUE ENCONTRÁIS UNA BUENA OFERTA.







viernes, 2 de septiembre de 2016

EXAMEN MÓDULO 2 (COMO SE ESCRIBE UNA PÁGINA WEB)

¡HE APROBADO!

Poco a poco, cuanto más avanzo en el curso más me doy cuenta lo que me gusta esto del desarrollo web.
Aprovecho para dar las gracias a todos los que con sus comentarios me han ayudado corrigiéndome y haciéndome ver donde me equivocaba o que hay otras formas de hacer algunas cosas.

Aprobado ya el módulo 2. ¡Voy a por el 3!






Mis badges:





ME DESPIDO:





ACTIVIDAD 2.17 PRESENTACIÓN DEL PROYECTO

Hola a todos.

En esta actividad tenemos que poner a prueba todo lo que hemos aprendido hasta el momento haciendo un sitio web.

Yo he cogido una de las recomendaciones del enunciado del ejercicio para mi proyecto. He echo mi:


Para hacer el plano y prototipo de mi sitio web he utilizado el Balsamiq Mockups
Aquí tenéis algunas capturas de pantalla:





Como podéis ver mi curriculum vitae consta de 7 paginas, enlazadas unas con otras.
Aquí tenéis como me ha quedado:









De momento he llegado hasta aquí, me falta decorarlo un poco, añadir una foto, etc., pero eso lo iré añadiendo así como lo vayan explicando en el curso. A su vez, iré añadiendo los progresos en el blog.


Muchas gracias por vuestras visitas y comentarios, que saber lo que piensan los demás siempre es bueno para mejorar uno mismo.







miércoles, 31 de agosto de 2016

COMPARATIVA EDITORES DE PAGINAS WEB

Hola, como sabéis estoy aprendiendo el lenguaje HTML y para aprenderlo bien la mejor manera es practicar, practicar y practicar aún un poco más.

¿Pero que editor utilizo?

¿Cual es el que va mejor?







La elección de un editor de páginas web es muy personal, yo no puedo deciros usad este o aquel, lo mejor es probarlos y quedarse con el que os sintáis más cómodos.


Según Wikipedia, los editores de páginas web se clasifican en 3 tipos:


Ciertamente hay más tipos de editores, pero para empezar con esta lista tenemos suficiente.

1. Editor de textos sin formato:

También llamado editor de texto plano.

He probado el bloc de notas (Windows). Es el más sencillo de todos los editores y no incluye opciones para el lenguaje HTML, como serian el coloreado de sintaxis o las etiquetas de marcado necesarias en el lenguaje de hipertexto.

La verdad es que es demasiado simple, para una persona como yo, con mi nivel actual de HTML, es como un lienzo en blanco en el que, por falta de conocimientos no soy capaz de crear más que una simple página web.



No lo recomiendo para nada, cierto es que para una necesidad urgente te puede sacar de algún que otro apuro, pero ten por seguro que te saldrán muchos errores a la hora de probar tu HTML. Errores como olvidarte de cerrar alguna etiqueta, la extensión del archivo es incorrecta porque te has equivocado al guardar o algún fallo de sintaxis que te volverá loco a la hora de repasar todo el documento.


Otro editor que he probado es el notepad ++ , que es el que utilizo actualmente para hacer todos los ejercicios del curso.




Este editor me gusta mucho más, no se si será porque ya me he acostumbrado a usarlo, pero me da la sensación de que con el coloreado de sintaxis encuentro mejor los posibles errores, con el  cierre automático de etiquetas nunca se me olvida cerrarlas y además tiene la utilidad de cerrar diversos apartados independientes de la página, lo que resulta muy cómodo cuando trabajamos con códigos largos

Hay otros editores de este tipo:

  • Sublime text
  • Brackets
  • Atom
  • Code Writers
  • ETC...


Más o menos todos son similares y con opciones parecidas. El único que me ha llamado un poco la atención es el Code Writers, que posee la característica de que es compatible con tablets y móviles con windows phone, cosa que encuentro muy práctica para desarrollar tus códigos en cualquier sitio.

De este tipo de editores, sin ninguna duda os recomiendo el notepad ++.



2. Editor de texto con ventana:

He probado el que me ha parecido el mejor de todos, es el HTML Kit
Este programa al principio me ha parecido bastante más complicado que el notepad ++, pero he comprobado que si te pones a cotillear por las distintas opciones puede llegar a ser mucho más práctico. 
La mayor ventaja que he observado es que tiene la pantalla auxiliar para ir comprobando, paso a paso, como se va desarrollando la página, sin tener que estar cargando una y otra vez en el navegador web, para ver como queda.
Por lo demás tiene las mismas opciones que el notepad ++ y seguro que algunas más.

Es un editor muy potente que seguro que con la práctica se convierte en uno de los que más utilice yo personalmente.





3. Editor WISIWIG:

Los textarea con WYSIWYG (What You See Is What You Get) en nuestras aplicaciones Web dan una facilidad para los usuarios al poder enriquecer más el texto ingresado, ya sea con imágenes, sangría, fondos, color de texto, entre otras opciones que nos brinda esta herramienta.

He encontrado estos por Internet (seguro que hay muchos más):

Yahoo! UI Rich Text Editor

Esta herramienta es un control de interfaz de usuario que reemplaza el tag textarea por un HTML basado en esta librería lo que genera un menú de opciones para realizar múltiples tarea con los textos.



TinyMCE

Este editor WYSIWYG tiene también muy buenas opciones, cambiando nuestro tradicional textarea por un conjunto de elementos HTML para construir el menú de formato, esta herramienta es muy usada por diversos CMS Open Source, es muy fácil de integrar y opciones para configurar el menú de formato limitando botones.





NicEdit

Este editor tiene el objetivo de ser lo más simple y rápido de utilizar para los usuarios, ya que es súper ligero y se puede integrar de manera sencilla en nuestros sitios Web con tan solo 2 líneas de código.





CKEditor

CKEditor es muy potente y de una interfaz muy buena también, su similitud a una aplicación de escritorio para la edición de texto como Microsoft Word u OpenOffice es bastante. Este editor es ideal para los desarrolladores al poder proporcionar soluciones distintas con tan potentes funciones que trae este WYSIWYG.






openWYSIWYG

Este editor es definitivo para sus aplicaciones Web con formularios que tengan edición de texto, ya que cuenta con características que necesita para que su sistema de administración de contenido sea mucho mejor.
Su configuración es sencilla, se tiene un control total de la configuración del editor, y con solo unas líneas de código lo tendrán en su página Web.







Hasta aquí la lista de los editores que he probado.

Personalmente, sigo diciendo que me quedo con el NOTEPAD ++. Será que ya estoy acostumbrado a él. De todas formas como la mejor manera de aprender es practicar, practicar y practicar iré cambiando de uno a otro para ir aprendiendo a manejarlos todos.

OS RECOMIENDO QUE HAGÁIS LO MISMO.


VOLVERÉ PRONTO CON NUEVAS COSAS.













martes, 30 de agosto de 2016

ACTIVIDAD 2.14 OTRA PÁGINA WEB, ESTA VEZ CON ENLACES

Los tres pilares de la Web>

Los tres pilares de la Web

Tim_Berners-Lee es considerado el padre de la Web porque desarrolló los tres elementos básicos para el funcionamiento de la Web:

HTML

HTML, siglas de HyperText Markup Language, hace referencia al lenguaje marcado para la elaboración de páginas web. Es un estandar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.

Fuente: HTML. Wikipedia

HTTP

Hypertext Transfer Protocol o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica la versión 1.1.

Fuente: HTTP. Wikipedia

URL

Un localizador de recursos uniformeo URL -siglas en inglés de Uniform Resource Locator- es un identificador de recursos uniforme (URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo. Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet.

Fuente URL. Wikipedia