Wikiversidad eswikiversity https://es.wikiversity.org/wiki/Portada MediaWiki 1.39.0-wmf.21 first-letter Medio Especial Discusión Usuario Usuario discusión Wikiversidad Wikiversidad discusión Archivo Archivo discusión MediaWiki MediaWiki discusión Plantilla Plantilla discusión Ayuda Ayuda discusión Categoría Categoría discusión TimedText TimedText talk Módulo Módulo discusión Accesorio Accesorio discusión Accesorio definición Accesorio definición discusión 0 3027 167725 156774 2022-07-27T08:05:24Z Emir.herrera 51293 wikitext text/x-wiki <div style="display:block;border:1px solid #ff3300;vertical-align: top;width:99%; background-color:#E7D8AF;margin-bottom:10px;margin-top:5px;padding-left:5px;padding-right:4px;"> <h2 style="padding:3px; background:#7D775C; color:#ffffff; text-align:center; font-weight:bold; font-size:100%; margin-bottom:5px;margin-top:0;margin-left:-5px;margin-right:-4px;">Portal de Diseño Web </h2 > [[Archivo:ZenGarden.JPG|250px|left|Un ejemplo de la disposición de un diseño]] El [[w:Diseño web|Diseño Web]] es una actividad que consiste en la '''planificación''', '''diseño''' e '''implementación''' de sitios web y páginas web. No es simplemente una aplicación del diseño convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como ''navegabilidad'', ''interactividad'', ''usabilidad'', arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. El diseño de páginas Web es una amplia área de aplicación del diseño gráfico en la cual se integran conocimientos propios del diseño como son la ''composición'', el uso de ''color'' y la ''tipografía'' con conocimientos técnicos del medio como son los lenguajes [[w:HTML|HTML]] ('''HiperText Markup Language''') y [[w:CSS|CSS]] ('''Cascading Style Sheets'''), así como conocimientos sobre usabilidad, accesibilidad y organización de un sitio web. </div> <div style="display:block;width:99%;float:left"> <div style="width:49%;display:block;float:left;"> <div style="display:block;border:1px solid #ff3300;vertical-align: top;width:100%; background-color:#E7D8AF;margin-bottom:10px;padding-bottom:5px;padding-left:5px;padding-right:4px;"> <h2 style="padding:3px; background:#7D775C; color:#ffffff; text-align:center; font-weight:bold; font-size:100%; margin-bottom:5px;margin-top:0;margin-left:-5px;margin-right:-4px;"> HTML Básico </h2 > [[Archivo:Crystal Clear mimetype message.png|right|60px|HTML]] A continuación se lista el contenido de este curso: * [[HTML Básico - Lección 1|Comenzando]] - ''Que necesitas conocer para construir tu primera página web''. [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 1#Etiquetas, Atributos y Elementos|Etiquetas, Atributos y Elementos]] - ''El material del que se compone HTML''. [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 1|Títulos de Página]] - ''Títulos. Para las páginas'' [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 2|Párrafos]] - ''Estructura tu contenido con párrafos''. [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 2|Títulos]] - ''Los seis niveles de títulos. '' [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 2|Listas]] - ''Como definir listas numeradas y desordenadas.'' [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 3|Enlaces]] - ''Como unirlo todo.'' [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 3|Imágenes]] - ''Agregando algo más que texto...'' [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 3|Tablas]] - ''Como usar datos tabulados.'' [[Archivo:100 percent.svg]] * [[HTML Básico - Lección 4|Formularios]] - ''Cajas de texto y otras cosas donde los usuarios pueden introducir texto'' [[Archivo:100 percent.svg]] * Integración - ''Uniendo lo anterior. Recapitulación.''[[Archivo:100 percent.svg]] * [[Publicación de contenidos en red]] * [[Diseño Web/Retos_Javascript]] </div > <div style="display:block;border:1px solid #ff3300;vertical-align: top;width:100%; background-color:#E7D8AF;margin-bottom:10px;padding-bottom:5px;padding-left:5px;padding-right:4px;"> <h2 style="padding:3px; background:#7D775C; color:#ffffff; text-align:center; font-weight:bold; font-size:100%; margin-bottom:5px;margin-top:0;margin-left:-5px;margin-right:-4px;"> CSS </h2 > [[Archivo:Nuvola apps stylesheet.png|right|60px|CSS]] A continuación se listan los cursos que se impartirán en este Departamento: * [[CSS básico|Tutorial CSS Básico]] * Tutorial CSS Intermedio * Tutorial CSS Avanzado </div> </div > <div style="width:49%;display:block;float:right;"> <div style="display:block;border:1px solid #ff3300;vertical-align: top;width:100%; background-color:#E7D8AF;margin-bottom:10px;padding-bottom:5px;padding-left:5px;padding-right:4px;"> <h2 style="padding:3px; background:#7D775C; color:#ffffff; text-align:center; font-weight:bold; font-size:100%; margin-bottom:5px;margin-top:0;margin-left:-5px;margin-right:-4px;"> Otros Cursos </h2 > [[Archivo:Nuvola mimetypes source.png|right|60px|Java]] Estos cursos te orientarán al diseño web, además de representar las páginas en diversos medios. * Javascript * Desarrollo de Aplicaciones Web con Perl/CGI * Desarrollo de Aplicaciones Web con PHP * Desarrollo de Aplicaciones Web con Java * Desarrollo de Aplicaciones Web con .Net </div > </div> <div style="width:49%;display:block;float:right;"> <div style="display:block;border:1px solid #ff3300;vertical-align: top;width:100%; background-color:#E7D8AF;margin-bottom:10px;padding-bottom:5px;padding-left:5px;padding-right:4px;"> <h2 style="padding:3px; background:#7D775C; color:#ffffff; text-align:center; font-weight:bold; font-size:100%; margin-bottom:5px;margin-top:0;margin-left:-5px;margin-right:-4px;"> Lenguajes de Servidor </h2 > [[Archivo:Crystal Clear mimetype source php.png|right|60px|PHP]] * Curso de CGI * Curso de Python * [[Curso de PHP]] </div > <div style="display:block;border:1px solid #ff3300;vertical-align: top;width:100%; background-color:#E7D8AF;margin-bottom:10px;padding-bottom:5px;padding-left:5px;padding-right:4px;"> <h2 style="padding:3px; background:#7D775C; color:#ffffff; text-align:center; font-weight:bold; font-size:100%; margin-bottom:5px;margin-top:0;margin-left:-5px;margin-right:-4px;"> Recursos </h2 > [[Archivo:Crystal Clear app kdict.png|right|60px|Quotation]] * [http://www.addedbytes.com/download/css-cheat-sheet-v2/png/ Plantillas CSS] * [http://www.csszengarden.com/tr/espanol/ Zen Garden] * [http://es.html.net/ HTML.net] * [[w:Diseño_web|Portal de Diseño Web en la Wikipedia]] </div> </div > </div > __NOEDITSECTION__ __NOTOC__ [[Categoría:Ciencias de la computación]] [[Categoría:Desarrollo web]] [[Categoría:Diseño Web]] [[Categoría:Informática]] 4dxb2e3dp3iw5rbhxek01uahenjgnug 4 5856 167720 163110 2022-07-27T07:54:03Z Emir.herrera 51293 wikitext text/x-wiki == ''UNIDAD TEMATICA N°2'' == == Tecnología y educación == Las nuevas tecnologías de la educación son una herramienta para fortalecer la enseñanza y el aprendizaje, aumentar las oportunidades para acceder al conocimiento, desarrollar habilidades colaborativas o inculcar valores, entre otros. Sin embargo, existen varios factores sociales como; la desigualdad, las informaciones falsas y el mal uso de las tics por causas en especifico cómo son las deficiencias de conectividad y la ausencia de la practica de estas herramientas, que hacen que aun existan las brechas digitales. A continuación se hará mención de temas importantes con respecto a este tema, adjuntando organizadores gráficos para así llegar a un mejor resultado de entendimiento. == 2.1. Tic en la Educación == Las nuevas tecnologías aplicadas a la educación mejoran el proceso de enseñanza y aprendizaje y también la gestión de los centros educativos. Las TIC deben ser utilizadas como un recurso de apoyo de materias y también para la consecución y progreso de competencias TIC === ''Implicaciones sustentos y principios, brecha digital'' === La brecha digital se refiere a la diferencia en el acceso y conocimientos de uso de las nuevas tecnologías. Se suele determinar en base a diferentes criterios, por ejemplo económicos, geográficos, de género, edad o entre diferentes grupos sociales. <big>Organizador grafico</big>: [https://www.canva.com/design/DAEnYfmWVgY/7hxGI17lIWF_Rf2RienOzw/view?utm_content=DAEnYfmWVgY&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink| Brechas digitales ] === ''Sociedad del conocimiento, Sociedad de la Información'' === La sociedad del conocimiento es una innovación de las tecnologías de la información y las comunicaciones en la que el incremento en las transferencias de la información modifica en muchos sentidos la forma en que se desarrollan muchas actividades en la sociedad moderna. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l3Iyz-0=/ Sociedad conocimiento e investigación] === ''Las TIC como herramientas de equidad e igualdad para las mujeres'' === Para ello que se hace una revisión de los antecedentes, para luego ver la realidad de las mujeres en relación al desarrollo de la ciencia y tecnología; así como presentar cuadros sobre la actitud de la ante las nuevas tecnologías y brecha digital. Los que nos llevan a determinar factores que favorecen y desfavorecen el uso de las Tics por las mujeres. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l22Lfng=/ Tics como herramienta de igualdad de genero ] === ''¿Cómo Seleccionar información Web?'' === Si no sabes dónde buscar información en Internet lo recomendable es buscar en una página web de una institución educativa creada por autores expertos, actualizada y dirigida a informar, que cumpla con el rigor, consistencia y objetividad. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l2rsqik=/ Cómo seleccionar información web?] [[Categoría:Informática]] [[Categoría:Desarrollo Web]] f8c6n6hnfb9iiht70isiasnroesitcr 167721 167720 2022-07-27T07:54:50Z Emir.herrera 51293 wikitext text/x-wiki == ''UNIDAD TEMATICA N°2'' == == Tecnología y educación == Las nuevas tecnologías de la educación son una herramienta para fortalecer la enseñanza y el aprendizaje, aumentar las oportunidades para acceder al conocimiento, desarrollar habilidades colaborativas o inculcar valores, entre otros. Sin embargo, existen varios factores sociales como; la desigualdad, las informaciones falsas y el mal uso de las tics por causas en especifico cómo son las deficiencias de conectividad y la ausencia de la practica de estas herramientas, que hacen que aun existan las brechas digitales. A continuación se hará mención de temas importantes con respecto a este tema, adjuntando organizadores gráficos para así llegar a un mejor resultado de entendimiento. == 2.1. Tic en la Educación == Las nuevas tecnologías aplicadas a la educación mejoran el proceso de enseñanza y aprendizaje y también la gestión de los centros educativos. Las TIC deben ser utilizadas como un recurso de apoyo de materias y también para la consecución y progreso de competencias TIC === ''Implicaciones sustentos y principios, brecha digital'' === La brecha digital se refiere a la diferencia en el acceso y conocimientos de uso de las nuevas tecnologías. Se suele determinar en base a diferentes criterios, por ejemplo económicos, geográficos, de género, edad o entre diferentes grupos sociales. <big>Organizador grafico</big>: [https://www.canva.com/design/DAEnYfmWVgY/7hxGI17lIWF_Rf2RienOzw/view?utm_content=DAEnYfmWVgY&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink| Brechas digitales ] === ''Sociedad del conocimiento, Sociedad de la Información'' === La sociedad del conocimiento es una innovación de las tecnologías de la información y las comunicaciones en la que el incremento en las transferencias de la información modifica en muchos sentidos la forma en que se desarrollan muchas actividades en la sociedad moderna. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l3Iyz-0=/ Sociedad conocimiento e investigación] === ''Las TIC como herramientas de equidad e igualdad para las mujeres'' === Para ello que se hace una revisión de los antecedentes, para luego ver la realidad de las mujeres en relación al desarrollo de la ciencia y tecnología; así como presentar cuadros sobre la actitud de la ante las nuevas tecnologías y brecha digital. Los que nos llevan a determinar factores que favorecen y desfavorecen el uso de las Tics por las mujeres. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l22Lfng=/ Tics como herramienta de igualdad de genero ] === ''¿Cómo Seleccionar información Web?'' === Si no sabes dónde buscar información en Internet lo recomendable es buscar en una página web de una institución educativa creada por autores expertos, actualizada y dirigida a informar, que cumpla con el rigor, consistencia y objetividad. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l2rsqik=/ Cómo seleccionar información web?] [[Categoría:Informática]] [[Categoría:Desarrollo web]] 3d6elg7xf2rps2hzqqzyqxq0w8lelgd 167722 167721 2022-07-27T07:55:48Z Emir.herrera 51293 wikitext text/x-wiki == ''UNIDAD TEMATICA N°2'' == == Tecnología y educación == Las nuevas tecnologías de la educación son una herramienta para fortalecer la enseñanza y el aprendizaje, aumentar las oportunidades para acceder al conocimiento, desarrollar habilidades colaborativas o inculcar valores, entre otros. Sin embargo, existen varios factores sociales como; la desigualdad, las informaciones falsas y el mal uso de las tics por causas en especifico cómo son las deficiencias de conectividad y la ausencia de la practica de estas herramientas, que hacen que aun existan las brechas digitales. A continuación se hará mención de temas importantes con respecto a este tema, adjuntando organizadores gráficos para así llegar a un mejor resultado de entendimiento. == 2.1. Tic en la Educación == Las nuevas tecnologías aplicadas a la educación mejoran el proceso de enseñanza y aprendizaje y también la gestión de los centros educativos. Las TIC deben ser utilizadas como un recurso de apoyo de materias y también para la consecución y progreso de competencias TIC === ''Implicaciones sustentos y principios, brecha digital'' === La brecha digital se refiere a la diferencia en el acceso y conocimientos de uso de las nuevas tecnologías. Se suele determinar en base a diferentes criterios, por ejemplo económicos, geográficos, de género, edad o entre diferentes grupos sociales. <big>Organizador grafico</big>: [https://www.canva.com/design/DAEnYfmWVgY/7hxGI17lIWF_Rf2RienOzw/view?utm_content=DAEnYfmWVgY&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink| Brechas digitales ] === ''Sociedad del conocimiento, Sociedad de la Información'' === La sociedad del conocimiento es una innovación de las tecnologías de la información y las comunicaciones en la que el incremento en las transferencias de la información modifica en muchos sentidos la forma en que se desarrollan muchas actividades en la sociedad moderna. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l3Iyz-0=/ Sociedad conocimiento e investigación] === ''Las TIC como herramientas de equidad e igualdad para las mujeres'' === Para ello que se hace una revisión de los antecedentes, para luego ver la realidad de las mujeres en relación al desarrollo de la ciencia y tecnología; así como presentar cuadros sobre la actitud de la ante las nuevas tecnologías y brecha digital. Los que nos llevan a determinar factores que favorecen y desfavorecen el uso de las Tics por las mujeres. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l22Lfng=/ Tics como herramienta de igualdad de genero ] === ''¿Cómo Seleccionar información Web?'' === Si no sabes dónde buscar información en Internet lo recomendable es buscar en una página web de una institución educativa creada por autores expertos, actualizada y dirigida a informar, que cumpla con el rigor, consistencia y objetividad. <big>Organizador grafico</big>: [https://miro.com/app/board/o9J_l2rsqik=/ Cómo seleccionar información web?] th9vzrz58e3qkku8c29t3yod4pejrby 0 8190 167724 133023 2022-07-27T07:57:51Z Emir.herrera 51293 wikitext text/x-wiki <!--el contenido de esta página es muy escueto, falta aumentar el contenido. DanielRav--> HTML (HyperText Markup Lenguaje, "lenguaje de marcas de hipertexto") es un lenguaje interpretado usado para la creación de páginas Web y otras aplicaciones, creado a mediados del siglo XX.<ref name="sightml">[http://www.significados.com/html/ ''Singnificados.com'', significado de HTML]</ref> El hipertexto (del inglés ''hypertex'') es una herramienta que permite escribir comandos que no se leen de forma lineal al ser interpretados, sino que nos permite enlazar a otros documentos o lugares para dejar de ser texto simple, y por medio de etiquetas se define su presentación.<ref name="ht">[https://www.masadelante.com/faqs/hipertexto ''¿Qué es hipertexto? Definición de hipexto'']</ref> ==Etiquetas== Html funciona utilizando etiquetas ("tags") que se colocan sobre el texto simple entre signos de mayor y menor que (''<>''). Son interpretados por un navegador que muestra contenido estético, en lugar de texto llano. En html hay diferentes etiquetas que tienen distintas funciones, definidas por la versión de HTML, y reguladas por el [[w:W3C|W3C]]. Las principales etiquetas son: * <code> <html> y </html> </code> Le indica al navegador (browser) que encierra el código HTML ** El contenido va en el lugar de la ''y'' * <code><head></head></code> La cabecera (head) encierra información sobre el documento (nombre, estilo [CSS], codificación, varianles en Javascript o PHP, etc.) *<code><body></body></code> El cuerpo (body) es donde se encuentra el contenido del documento, la parte que se muestra en el navegador. * <code><a></a></code> Un ancla (anchor), usada para crear enlaces o ligas (links) a otras partes del documento o a otro documento. * <code><h#></h#></code> Donde # es cualquier número del 1 al 6. Es la etiqueta de títulos * <code><p></p></code> Los párrafos (paragraph) se llenan con texto. Se puede escribir sin usar esta etiqueta, pero se recomienda usar ésta porque da un salto al final. *<code><nowiki><br> o <br/></nowiki></code> El salto de línea (break) es una etiqueta vacía o cerrada, i.e., sólo se usa una etiqueta en lugar de dos. Inserta un salto de línea. ==Enlaces externos== * [[w:Anexo:Etiquetas HTML/XHTML|Listado de etiquetas en Wikipedia]] * [https://w3.org ''Página del Consorcio WWW'' (en inglés)] * [https://w3c.es ''Sitio web del Consorcio WWW en español'']] ==Referencias== {{listaref}} [[Categoría:Informática]] [[Categoría:Desarrollo web]] sh2vpa5746w4ubm3bmpkcu0uaiyszdl 0 10053 167726 160300 2022-07-27T08:05:59Z Emir.herrera 51293 wikitext text/x-wiki <!--{{web design/header}}--> ''See also: [http://projecteuler.net Project Euler]'' ¿Estás listo para los retos de Javascript? Estos retos pretenden mejorar tus habilidades de Javascript con actividades prácticas que pueden resultar útiles de forma inmediata para tus propios sitios web. Asegúrate de que estás familiarizado con los objetos window y document en Javascript antes de abordar estos retos. == Reto 1: Elementos que se esconden == Pega el siguiente código en un documento HTML nuevo y cárgalo en el navegador. <pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="es"> <head> <title>Retos JavaScript</title> </head> <body> <form action=""> <fieldset> <legend>Suscripciones de correo</legend> <p id="subscribepara"> <label> <input type="checkbox" name="subscribe" id="subscribe"> Me gustaría recibir el boletín vía correo-e. </label> </p> <p id="emailpara"> <label> Email: <input type="text" name="email" id="email"> </label> </p> </fieldset> </form> </body> </html> </pre> El objeto de este reto es mostrar el párrafo con el campo para el e-mail cuando la caja de selección (checkbox) esté activada, pero lo dividiremos en tareas más pequeñas. '''Paso 1: Ocultar el campo de e-mail de forma predeterminada''' Agrega algún estilo CSS de manera que el párrafo "emailpara" no se muestre cuando la página se cargue por primera vez (usando la propiedad CSS 'display'). Prueba que funcione. '''Paso 2: Agregar una plantilla de función''' Crea una nueva función llamada alternaEmail() que muestre una alerta, esto es window.alert("Mi función ha sido llamada"); Agrega un evento de manera que cuando se haga click sobre la caja de selección, la función se active. ''Prueba que funcione''. <div style="{{Plantilla:Caja}} background-color:#ffff33"> [[Archivo:Nuvola apps important.svg|45px|left]] '''¡Cambié algo y todo dejó de funcionar! (o: Depuración)''' En HTML y CSS un simple error podría causar que una etiqueta o un color no se muestre, pero generalmente algo aparecerá en la pantalla. Javascript es diferente en que tan pronto como encuentre un error, se detendrá y no dará ninguna pista de por qué. Casi todos los navegadores tienen una ventana que muestra los errores Javascript con pistas para corregirlos, pero estas ventanas están escondidas de manera predeterminada. Aquí tienes cómo encontrarlas: * '''Firefox''': menú Herramientas menú, Consola de errores. * '''Safari''': menú Desarrollo, Consola de errores. (Tendrás que activar el menú desde el panel Avanzado de las Preferencias) * '''Opera''': menú Herramientas, Avanzado, Consola de errores. * '''Chrome''': click the Page button, Developer, JS Console, then the second button at the bottom left of the window. * '''IE8''': menú Herramientas, Herramientas de desarrollo, Consola. Además, podrías emplear herramientas como [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug] para Firefox, o Dragonfly para Opera. </div> '''Paso 3: Muestra los campos de e-mail''' Ahora reemplazaremos el código <code>alert()</code> de manera que nuestra función haga algo útil. Usando Javascript podemos cambiar el estilo de cualquier elemento de nuestra página usando el objeto ''style''. Todo elemento tiene un objeto ''style'' y podemos tener acceso a él de la siguiente manera: <pre> document.getElementById("subscribepara").style.backgroundColor = "blue"; </pre> De manera breve, la instrucción JavaScript que acabamos de escribir dice: # Obtén el elemento de mi documento que tiene el ''id'' de "subscribepara", # Obtén su objeto ''style'', # y asigna al valor "blue" a la propiedad ''backgroundColor'' de este objeto. <div style="{{Plantilla:Caja}} background-color:#ffff33"> [[Archivo:Nuvola apps important.svg|45px|left]] '''Unas palabras sobre los puntos''' Verás mucho código JavaScript escrito con puntos que separan objetos, funciones y propiedades. Cuando un nombre de función o de variable siga inmediatamente un punto, significa que '''pertenece a''' u '''opera sobre''' el objeto justo antes del punto. Por ejemplo, la función <code>getElementById()</code> pertenece y opera sobre el objeto <code>document</code> (en particular, <code>getElementById()</code> busca a través del documento por un elemento con un atributo ''id'' específico). Cuando leas líneas como esta, puede ser muy útil leerlo en sentido inverso a partir del último punto, diciendo 'pertenece a' entre cada punto. Por ejemplo: ''El <code>background-color</code> que pertenece al <code>style</code>, que pertenece al elemento con el ID <code>subscribepara</code>, que pertenece al <code>document</code>.'' </div> Intenta copiar y pegar el código de arriba en tu función y ve lo que hace. Fíjate en que los nombre de las propiedades de '''style''' son ligeramente diferentes de las que usamos en CSS (backgroundColor vs. background-color). Ahora veamos si puedes modificar tu función de manera que muestre el párrafo "emailpara" cuando se ejecute. '''Paso 4: Haciendo que el campo de e-mail alterne''' Cuando pruebes tu código verás que puedes hacer click sobre la caja de selección y que el campo de e-mail se muestra, pero cuando desactivas la caja el párrafo no desaparece. Nuestro reto es agregar una instrucción '''if''' a nuestra función alternaEmail() de manera que verifique si la caja de selección está activa. Si lo está entonces debe mostrar el párrafo "emailpara", de otra manera debe ocultarlo. Para hacer esto necesitamos saber cómo revisar si una caja de selección está activada... Por suerte para nosotros, el elemento que corresponde a la caja de selección tiene una propiedad llamada 'checked' que puede tener como valor '''true''' o '''false'''. De esta manera podemos usar <code>document.getElementById("id-del-elemento-input").checked</code> para revisar el valor de la caja de selección. '''Paso 5: Cuando Javascript está desactivado''' Por el momento si un usuario ve la página con CSS activado, pero Javascript desactivado, nunca verá el campo de e-mail. Quita, entonces el CSS que esconde el campo y reemplázalo con Javascript que esconda el párrafo cuando se active el evento <code>onload</code> de la página. Puedes echarle un ojo a las instrucciones '''if''' que utilizaste un poco antes para saber cómo puedes completar este reto. Cuando lo tengas funcionando, exclama "JavaScript es super cool" y toma un descanso. == Reto 2: 'La misma de arriba': direcciones postales == Agrega el siguiente ''fieldset'' a una forma (la que creaste en el Reto 1 sirve bien) y cárgala en el navegador: <pre> <fieldset> <legend>Información de cobro</legend> <p> <label> Dirección postal:<br /> <textarea name="postaladdress" id="postaladdress"></textarea> </label> </p> <p> Dirección personal:<br /> <label> <input type="checkbox" name="homepostalcheck" id="homepostalcheck"> La misma de arriba </label> <br /> <textarea name="homeaddress" id="homeaddress"></textarea> </p> </fieldset> </pre> La meta de este reto es copiar automáticamente la dirección postal a la dirección personal si un usuario activa la opción "La misma de arriba". Además de esto, desactivaremos el campo de la dirección personal cuando se active la caja de selección. '''Paso 1: Agregar una plantilla de función''' Agrega una función JavaScript a tu página que se llame <code>ponDireccionPostal</code> que simplemente muestre una alerta, esto es: <code>window.alert("Mi función ha sido llamada");</code> Agrega un evento de manera que cuando la caja de selección sea activada tu funcionse ejecute y ''prueba que funciona''. '''Paso 2: Obteniendo la dirección postal''' Antes de que podamos copiar la dirección, necesitamos saber cómo leerla usando JavaScript. En el reto 1 usamos la propiedad <code>.checked</code> para comprobar si una caja de selección estaba activada; esta propiedad contenía como valor ya sea ''true'' o ''false''. Si escribimos texto dentro de una <code>&lt;textarea&gt;</code> entonces la propiedad <code>.checked</code> no nos servirá de mucho. En lugar de esto, usaremos la propiedad <code>.value</code> de <code>textarea</code>. Esta propiedad contiene el texto escrito en ese campo. En tu función <code>ponDireccionPostal()</code>, escribe una línea de código que muestre el contenido del campo ''Dirección postal'' mediante la propiedad <code>.value</code> en una ventana de alert. '''Paso 3: Poniendo el valor para la dirección personal''' Ahora que sabemos cómo encontrar el valor de cualquier elemento en nuestro documento, el truco es establecer el valor de la propiedad <code>.value</code> del elemento <code>homeaddress</code> al valor del elemento <code>postaladdress</code>. Para establecer el valor de <code>homeaddress</code> podríamos hacer algo como lo que sigue: <pre> document.getElementById("homeaddress").value = "Hola mundo"; </pre> Pruébalo y ve que funcione. Debería ocurrir que cuando activas la caja de selección, la dirección personal contiene el texto "Hola mundo". Ahora veamos si puedes modificar la línea de arriba para que en lugar de poner "Hola mundo" en el campo <code>homeaddress</code>, ponga el valor del campo <code>postaladdress</code>. '''Paso 4: Desactivando el campo de Dirección personal''' Usa la página de W3Schools sobre el objeto [http://www.w3schools.com/jsref/dom_obj_textarea.asp HTML DOM TextArea] y ve si puedes encontrar una propiedad que te permita desactivar un campo de este tipo. Intenta modificar esta propiedad para el elemento "homeaddress" en tu función ponDireccionPersonal(). Asegúrate de probarla. '''Paso 5: Alternando el campo de dirección personal''' Ahora, cuando pruebes tu forma te darás cuenta de que al desactivar la caja de selección, el campo de dirección personal no se habilita. Agrega una instrucción ''if'' a tu función ponDireccionPersonal() de manera que cuando la caja de selección no esté activada, el campo de dirección personal se habilite (te podría servir el revisar la solución al Reto 1). == Reto 3: Botones de opción múltiple == Como viste en el Reto 2, algunos campos en los fomularios funcionan de manera distinta a otros cuando se trata de obtener información sobre sus contenidos. &lt;input type="checkbox"&gt; usa la propiedad <code>.checked</code>, &lt;input type="text"&gt; y &lt;textarea&gt; usan la propiedad <code>.value</code>. Por suerte para nosotros no hay tampoco demasiadas variantes para aprender, y podemos usar un mismo código para saber si el usuario ha dejado un campo vacío, por ejemplo: <pre> if (document.getElementById("nombre").value == "") { window.alert("Por favor llena el campo de Nombre."); return false; } </pre> Nombre es un campo de texto, por lo que estamos examinando la propiedad <code>.value</code>. Pero ¿cómo hacemos esto con los botones de opción múltiple? Pues éstos no toman el valor que nuestro usuario escribe ... un botón de tipo radio está activado o no. ¿Te suena familiar? Copia el siguiente formulario en un archivo (el que usaste en el reto 2 está bien) y cárgalo en el navegador: <pre> <form action="mailto:me@fakeemail.com"> <fieldset> <legend>Botones de opción múltiple y cajas de verificación</legend> <p> ¿Cuál es tu fruta favorita?: <label> <input type="radio" value="hombre" name="frutafav" id="opcfresa"> Fresas </label> <label> <input type="radio" value="mujer" name="frutafav" id="opcarand"> Arándanos </label> </p> </fieldset> <input type="submit" value="Enviar"> </form> </pre> '''Paso 1: Activando la validación de los datos''' Primero crea una función vacía llamada revisaFormulario() para tu forma, y asegúrate de que sea ejecutada cuando la forma se envíe (usando una simple llamada window.alert). Esta [http://www.w3schools.com/jsref/dom_obj_event.asp W3Schools' página sobre eventos] te ayudará a usar el evento ''submit''. '''Paso 2: Revisando si se seleccionó un botón de opción múltiple''' Una vez que te hayas convencido de que tu función revisaFormulario() se ejecuta, rellena la función de manera que se vea así: <pre> function revisaFormulario() { // Primero crea una variable para referirte directamente al campo var opcFresa = document.getElementById("opcfresa"); if (opcFresa.[¿que propiedad tiene que ir aquí?] == false) { window.alert("Por favor elige tu fruta favorita"); return false; } return true; } </pre> Fíjate en que esta función no está completa, necesitamos encontrar cuál propiedad del botón es la que nos dirá si ha sido activado o no. Consulta [http://www.w3schools.com/jsref/dom_obj_radio.asp W3Schools' HTML DOM Radio Object] y ve si puedes encontrar la propiedad adecuada. Cuando la encuentres reemplaza su nombre en lugar del texto que dice [¿qué propiedad tiene que ir aquí?]. Prueba el código y ve si hace lo que esperas. <div style="{{Plantilla:Caja}} background-color:#ffff33"> [[Archivo:Nuvola apps important.svg|45px|left]] '''Comentando tu código''' El código de ejemplo que viste un poco más arriba incluía texto que comenzaba con dos diagonales. Este tipo de texto se llama comentario -- puede contener cualquier texto que quieras, y no se ejecutará como parte del programa. Lo que los comentarios '''hacen''' es ayudarte a recordar qué es lo que hace un segmento particular del código una semana o un mes después de que lo escribiste. Se recomienda que conforme progreses a través de los retos escribas comentarios siempre que encuentres algo neuvo. Realmente te ayudarán más tarde, cuando los programas que escribas sean más largos y no recuerdes cómo hacer algo. </div> '''Paso 3: Haciendo que funcione adecuadamente''' Habrás notado que el código no hace en realidad lo que se requiere, aunque está haciendo justo lo que le pedimos. Obliga al usuario a seleccionar la opción de las fresas. Se necesita modificar el código de manera que alerte al usuario solamente si la opción de las fresas es falsa '''y''' la opción de los arándanos el falsa también (esto es, si ninguna de las dos opciones ha sido activada). Puedes revisar la sección sobre los [http://www.librosweb.es/javascript/capitulo3/operadores.html#logicos operadores lógicos] en el curso ''Introducción a Javascript'' para ver si encuentras cómo asegurarse que ambas opciones no estén activadas antes de alertar al usuario. '''Paso 4: Deteniendo el avance''' Habrás notado que el programa intenta enviar un correo electrónico sin importar si el formulario se ha llenado correctamente o no. Esto no es lo mejor. Puesto que este es nuestro primer reto empleando el evento <code>onsubmit</code>, puede ser que no te hayas fijado en la instrucción <code>return false</code>. Fíjate en las dos instrucciones <code>return</code> en el código de la función. Ve que <code>return false</code> se emplea cuando hay un error, y <code>return true</code> se usa al final si todo ha estado bien. El código <code>return</code> de Javascript te permite salir de una función de manera inmediata si no hay razón para continuar. En nuestro caso, cuando encontramos que el usuario no ha seleccionado un opción, lo que queremos es cancelar el envío del formulario incompleto. La instrucción <code>return false</code> le dirá a JavaScript que cancele el envío, pero todavía falta una parte del código que hará que esto funcione. Puedes revisar la sección sobre [http://www.librosweb.es/javascript/capitulo7/validacion.html validación de formularios] en el curso ''Introducción a Javascript'' para que veas lo que le falta a tu código. == Reto 4: Mejor validación de datos == Hasta ahora nuestra validación de los datos ha consistido en mostrar molestas cajas con window.alert() cuando el usuario introduce información incorrecta, pero tendría que haber un modo más amigable para el usuario ¿no? Este reto te ayudará a crear mensajes de error en el mismo formulario, que sólo aparezcan cuando tienen que hacerlo. Copia el siguiente formulario en una página: <pre> <form action="mailto:me@fakeemail.com" onsubmit="return revisaFormulario();"> <fieldset> <legend>Datos personales</legend> <p> <label> Nombre completo: <input type="text" name="nombre" id="nombre"> </label> </p> <p class="errormsj" id="msjnombreerror">Por favor introduce arriba tu nombre completo</p> <p> <label> Dirección: <input type="text" name="calle" id="calle"> </label> </p> <p class="errormsj" id="msjcalleerror">Por favor introduce arriba la calle y el número de tu dirección</p> </fieldset> <input type="submit" value="¡Envíalo!"> </form> </pre> '''Paso 1: Algo de estilo''' Primero agrega algo de CSS. Añade algunos estilos para que los mensajes de error estén en color rojo. Haz que se vean dramáticos. Fíjate en que los mensajes de error tienen class="errormsj". Una vez que se vean como quieres, usa CSS para esconderlos de manera predeterminada. '''Paso 2: Creando la función revisaFormulario()''' Necesitas una función vacía que simplemente muestre un window.alert para que sepas que está funcionando. Necesitas agregar un evento de manera que se ejecute cuando presiones el botón enviar. <div style="{{Plantilla:Caja}} background-color:#ffff33"> [[Archivo:Nuvola apps important.svg|45px|left]] '''Reemplazando una función con otra''' Como habrás notado, el nombre de nuestra nueva función es el mismo que el de la función que escribimos anteriormente. Si lo deseas puedes conservar el código anterior e ir modificando lo que sea diferente en esta nueva función. Pero otra solución sería renombrar la antigua función como revisaFormulario0() y hacer este cambio también en el formulario que pregunta sobre la fruta favorita. De esta manera puedes conservar un código que ya funcionaba para comparar con el nuevo código que vas a implementar. </div> '''Paso 3: Mostrando los mensajes de error''' Este paso será similar al Reto 1 "Elementos que se esconden". Cuando la forma se envíe, nuestra función revisaFormulario() se activa. Si el campo nombre está vacío, queremos que entonces se muestre el párrafo con el ID "msjnombreerror". Después de que tengas esto listo, implementa un funcionamiento similar para la dirección. '''Paso 4: Modificando la lógica del programa''' Habrás notado hasta el momento dos cosas que no están tan bien: # Cuando envías el formulario con campos en blanco, solamente aparece el primer mensaje de error. # Cuando agregas texto a uno de los campos y vuelves a enviar el formulario, los mensajes de error no desaparecen. Para arreglar esto, necesitarás cambiar la lógica de tu función ... esto puede ser complicado, pero aquí hay unas sugerencias: * ¿Estás usando <code>return false</code> justo después de mostrar el primer mensaje de error? Esto quiere decir que tu programa nunca ejecutará la segunda parte si la primera da un error. * Necesitas una variable, tal como "es_valido" que tenga valor <code>true</code> o <code>false</code> dependiendo del resultado de la revisión de los datos. Al final de la función puedes devolver esta variable en lugar de los valores true of false tan pronto como encuentres un error. * Estás mostrando el mensaje de error si hay un error, pero también necesitas esconder el mensaje si todo está bien. == Reto 5: Asegurándote de que se haya introducido un número == Hasta ahora hemos trabajado en cómo checar si un campo está vacío o no. Ahora queremos llevar esto un paso más allá y verificar que lo que se introdujo sea en realidad un número. Imagina que has incluido en el formulario un campo llamado Cantidad, donde el visitante especifique cuántas unidades de un cierto producto quiere comprar. No queremos que introduzca 'Ah' u 'Hola', ¿verdad? '''Paso 1: Actualizando el formulario''' Agrega un campo de texto a tu formulario que tenga el nombre "cantidad" y modifica tu función revisaFormulario() de manera que el valor no pueda ser vacío. '''Paso 2: Revisar que sea un número''' Javascript tiene una función especial llamada <code>isNaN()</code>, abreviatura de "es un no-número (''is Not a Number'' en inglés)", que puede ser usada para probar si un valor puede ser interpretado como un número. Por ejemplo, isNaN(1.5) devolverá como resultado falso (pues *se trata* de un número), en tanto que isNaN("hola") devolverá verdadero, (pues no es un número). Tómate unos pocos minutos para experimentar con el [http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_isnan demo de isNaN() de W3Schools] hasta que te sientas a gusto y comprendas lo que hace. <div style="{{Plantilla:Caja}} background-color:#ffff33"> [[Archivo:Nuvola apps important.svg|45px|left]] '''¿No está al revés?''' <code>isNaN()</code> es una función única pues parece que se usa al revés. Seguramente tendría más sentido que nos dijera si algo ''es'' un número, ¿no? Sin embargo, hay una razón para <code>isNan()</code>: es consistente con otro aspecto común de JavaScript. Si intentamos hacer cálculos con algo que no es un número, por ejemplo <code>alert("hola" / 5);</code> tendremos como resultado "NaN" (no es un número). Cuando JavaScript fue diseñado, <code>isNaN()</code> fue uno de los casos en los que la consistencia ganó sobre la facilidad de uso. </div> En tu función revisaFormulario(), justo después de que revisas que el campo cantidad no esté vacío, agrega otra instrucción if de la siguiente manera: <pre> // solo necesitas la siguiente linea si no tienes aun // una varaible para el campo cantidad. var cantidad = document.getElementById("cantidad"); // Ahora revisa si el valor del campo cantidad no es un numero if (isNaN(cantidad.value)) { // si la cantidad no era un numero, entonces queremos que el // usuario sepa que necesita corregir el error // Agrega aqui abajo tu codigo: // Al final, devuelve el valor false de manera que la forma no sea enviada. return false; } </pre> '''Paso 3: Agregando un campo Código postal''' Ahora agrega otro campo a tu formulario llamado 'codigopostal'. Actualiza tu función revisaFormulario() de manera que: # el código postal no pueda quedar vacío. # el código postal deba contener sólo números (ve el paso 2 de este mismo reto). '''Paso 4: Revisando la longitud del campo código postal''' Todo lo que pueda tener una longitud en JavaScript tiene una propiedad especial llamada <code>length</code>. Esta propiedad puede usarse para saber cuántos caracteres ha introducido un usuario en un campo. Por ejemplo, el siguiente código obtiene el valor del campo "nombre" del documento y entonces muestra un mensaje de alerta diciéndole al usuario cuántos caracteres fueron introducidos: <pre> var nombre = document.getElementById("nombre"); window.alert("La longitud del campo nombre es: " + nombre.length); </pre> Tómate unos minutos para ver cómo se usa la propiedad length en este [http://www.w3schools.com/js/tryit.asp?filename=tryjs_lengthvalidate ejemplo de la página W3Schools]. * Modifica el ejemplo de la página W3Schools de manera que el campo pueda tener hasta 8 caracteres. * Ahora modifica tu función revisaFormulario para que el campo de código postal pueda tener sólo 4 caracteres. == Tiempo de repasar == Hasta ahora te las has arreglado para: # Verificar si una casilla de selección o un botón de selección múltiple está activada; # Verificar si un campo de texto está vacío; # Verificar si el texto introducido es un número usando la función <code>isNaN()</code>; # Verificar la longitud del texto introducido en un campo (esto es, cuántos caracteres se introdujeron) usando la propiedad length; # Mejorar la validación de los campos de manera que muestre mensajes de error en la misma página (en lugar de usar la desagradable caja de window.alert()). Esto lo haz hecho escondiendo y mostrando los mensajes de error con el objeto style. ¡Nada mal! Si te parece que necesitas practicar un poco más con estas tareas, intenta agregar algunas de estas características a otro formulario que hayas elaborado antes, como cuando aprendiste (X)HTML. Hacer esto puede ayudarte a encontrar aspectos con los que haz batallado y a ganar más confianza con la sintaxis de JavaScript. Si usas [http://getfirefox.com Firefox] y no haz probado aún [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug], tómate un tiempo para experimentar con este utilísimo depurador de JavaScript. == Reto 6: Comenzando a validar direcciones de correo == Verificar si un código postal era válido requería revisar que: # el código introducido fuera un número # el código tenía exactamente 5 dígitos (aunque esto depende del país) ¿Qué podemos revisar para asegurarnos de que una dirección de correo electrónico sea válidad? Toma un pedazo de papel y ve si puedes resumir dos o tres cosas que las direcciones de correo electrónico deben tener para ser válidas. '''Paso 1: Agregando un campo Correo''' Agrega un nuevo campo a tu formulario que se llame 'correo' (asegúrate de ponerle los atributos 'name' e 'id'). ¿Qué tipo de campo es mejor para las direcciones de correo? '''Paso 2: Asegurándote de que el símbolo '@' esté presente''' Toda dirección de correo contiene un y sólo un símbolo "arroba" (@). La dirección de correo introducida en el formulario es solamente una secuencia de caracteres, un texto tal como "Hola mundo". Todos los lenguajes de programación se refieren a este grupo de caracteres como una cadena de texto (String). Algo que es muy útil de Javascript es que toda cadena de texto incluye ya un montón de propiedades y métodos incorporados, que podemos usar. De hecho, ya hemos usado la propiedad <code>length</code> en el Reto 5 para saber cuántos caracteres tenía el código postal. Tómate unos minutos para leer la sección [http://www.librosweb.es/javascript/capitulo3/funciones_y_propiedades_basicas_de_javascript.html#funciones_utiles_para_cadenas_de_texto "Funciones útiles para cadenas de texto"]. Conforme lo leas, puedes intentar algunos de los ejemplo de la página [http://www.w3schools.com/js/js_obj_string.asp JavaScript String]. Uno de los métodos que deberías haber visto es indexOf(). Podemos usarlo para encontrar en qué parte de nuestra dirección de correo aparece el símbolo "@", si es que aparece. Ten en cuenta que el método indexOf() devuelve un número correspondiente al índice o posición del texto que busca. Si el texto no está en la cade, entonces indexOf() devolverá -1. Por ejemplo: <pre> var miCadena = "¡Hola Mundo!"; window.alert("La posición de H es: " + miCadena.indexOf("H")); // la posición será 1 window.alert("La posición de o es: " + miCadena.indexOf("o")); // la posición será 2 window.alert("La posición de un es: " + miCadena.indexOf("un")); // la posición será 7 window.alert("La posición de ! es: " + miCadena.indexOf("!")); // la posición será 11 window.alert("La posición de Z es: " + miCadena.indexOf("Z")); // la posición será -1 </pre> Si quieres probar este código puedes usar la [http://www.squarefree.com/shell/ Consola Javascript] o el [http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_indexof ejemplo de indexOf() en W3Schools]. Agrega el siguiente código a tu función revisaFormulario(), luego modifícalo para que funcione. <pre> // crea una variable para referirte al campo de correo (ahorra tener que escribir mas despues) var correo = document.getElementById("correo"); // Primero, crea una variable para recordar la posicion del simbolo "@" var enPos = correo.value.indexOf("@"); if (enPos == ¿?) // necesitas reemplazar los signos de interrogacion { // Entonces no habia un simbolo @ en la direccion de correo. // Haz saber al usuario que necesita corregir el error. // Agrega tu codigo aqui abajo: // Al final devuelve false de manera que el formulario no se envie. return false; } </pre> '''Paso 2: Asegurándose de que haya algo antes del @''' Ahora estamos seguros de que hay un @ dentro de la dirección de correo, pero hay un gran problema: ¿qué pasa si el usuario no ha puesto nada antes del @? Escribe una instrucción if adicional en la función revisaFormulario() que se asegure de que el @ no esté al principio de la cadena. Recuerda, <code>indexOf()</code> te dará siempre las posiciones empezando desde 0. '''Paso 3: Asegurándose de que haya un punto (.) después del @''' Otra parte necesaria en una dirección de correo es el '''nombre del servidor''' (la parte resaltada en una dirección como la siguiente: alguien@'''algunlado.com'''), que siempre está después del @. Para asegurarte de que el usuario introduzca un nombre de servidor, podemos verificar que haya un punto en esa parte del correo. Un problema adicional es que algunas direcciones de correo incluyen un punto como parte del '''nombre de usuario''' (la parte resaltada en '''juan.perez'''@algunlado.com). No podemos usar <code>indexOf()</code> para buscar el punto, pues bien podría encontrar el primer punto en lugar del segundo. Javascript nos brinda una manera fácil de para resolver este problema con el método <code>lastIndexOf()</code>, que funciona de la misma manera que <code>indexOf()</code>, excepto que encuentra la '''última''' vez que el texto aparece, en lugar de la primera. Escribe una instrucción if extra en la función revisaFormulario() que se asegure de que haya un punto después del símbolo @ en el correo. Podías crear variables que almacenen las dos posiciones para hacer el código más legible. '''Paso 4: Asegurándose de que haya al menos dos caracteres después del punto''' Con las pruebas de validación actuales el usuario no puede introducir algo sin sentido como "@." o "al.guien@" como su dirección de correo, pero bien podría introducir algo como "alguien@algunlado." ¿Qué es lo que falta al final? Usamos lastIndexOf() para obtener la posición del último punto. ¿Cómo podrías saber si hay más caracteres después del punto? ¿Qué otra propiedad necesitarías comparar? <div style="{{Plantilla:Caja}} background-color:#ffff33"> [[Archivo:Nuvola apps important.svg|45px|left]] '''Una referencia del mundo real para pensar este problema''' Tienes una pieza de listón con una marca a 20cm de uno de sus lados. ¿Qué medida tienes que hacer para calcular cuántos centímetros de listón hay del otro lado de la marca? </div> Escribe el código que falta en la función revisaFormulario, de manera que se asegure que hay al menos dos caracterers después del último punto. '''Avanzado: haciendo todo esto con Expresiones regulares (regex)''' Como puedes ver, escribir código para validad puede convertirse en algo largo y complicado, aun para algo que ''parece'' tan simple como una dirección de correo. Para validar campos complicados, que requieren tener una cierta forma, existe una técnica mucho más corta y rápida que se llama Expresiones regulares. Si haz escrito alguna vez "*.*" para encontrar todos los archivos en DOS, o seleccionado "*.doc" en la caja de Tipo de archivo en Windows, entonces ya haz usado una Expresión regular simplificada. Las expresiones regulares son maneras de verificar palabras basadas en un patrón; en el caso "*.doc" estamos buscando algo como ''alguna palabra, seguida por un punto, seguida por "doc"''. Las expresiones regulares se encuentran en casi todos los lenguajes de programación, y lo que aprendas en Javascript te servirá en otros lenguajes de programación tales como PHP y Perl con solamente unos pequeños ajustes. [http://mundogeek.net/archivos/2004/07/29/javascript-expresiones-regulares/ Javascript: Expresiones regulares] es un buen punto inicial para familiarizarse con lo básico de Regex (las expresiones regulares). == Reto 7: Javascript que no estorba == Hasta ahora hemos estado mezclando nuestro JavaScript con el código HTML... y este es el modo en el que Javascript se ha hecho durante años porque es simple (así como usar las etiquetas &lt;font&gt; en HTML es un poco más cimple que usar CSS). Pero no es la mejor manera. Así como separamos nuestro contenido (X)HTML de la presentación en CSS de nuestras páginas web, también vale la pena separar el comportamiento de nuestro Javascript. ¿Por qué? Puedes encontrar un poco más de información al respecto en Wikipedia [[:m:w:es:JavaScript_no_obstructivo|JavaScript no obstructivo]], pero si piensas en cómo separar CSS implica que se puede reusar la misma hoja de estilo muy fácilmente, es lo mismo con Javascript. Separando Javascript de la página, podemos aplicar el mismo código a muchas páginas sin tener (usualmente) que modificar la página misma. '''Aquí tienes cómo funciona:''' Normalmente conectamos nuestro código Javascript (como la función revisaFormulario) a un elemento de (X)HTML en particular con un atributo como onsubmit: <pre> <form method="post" onsubmit="return revisaFormulario()" id="respuestausuario"> ... </form> </pre> Y esto hace el trabajo. Ahora lo que queremos es quitar ese código: 'onsubmit="return revisaFormulario()"' por completo. Hazlo, quítalo de la página. ¿Cómo vamos entonces a vincular nuestro formulario con la función revisaFormulario? Bueno, en realidad podemos establecer eventos para los elementos (X)HTML usando también Javascript de la siguiente manera: <pre> document.getElementById("respuestausuario").onsubmit = revisaFormulario; </pre> Este pedazo de Javascript reemplazará el código 'onsubmit="return revisaFormulario()"' que habíamos incluido en el código (X)HTML hasta ahora. Pero probablemente te surjan dos preguntas: # ¿Por qué nuestra función revisaFormulario() no tiene aquí los paréntesis? # ¿Dónde pongo este código? La respuesta más fácil a la primera pregunta es que "no los lleva" - es algo excepcional ver una función sin los paréntesis (Si sigues con curiosidad, cuando omites los paréntesis lo que está ocurriendo no es un llamada a la función, sino que e trata de un apuntador). Para la segunda pregunta, intentemos ponerla en nuestro programa, al principio del documento, así: <pre> <script type="text/javascript"> function revisaFormulario() { window.alert("Ejemplo de validación de datos"); // Tu codigo de validacion normal va aqui } document.getElementById("respuestausuario").onsubmit = revisaFormulario; </script> </pre> Vuelve a cargar la página en el navegador y ve lo que pasa. En la consola de errores del navegador deberías ver un mensaje de error causado por que no se ha podido encontrar un elemento con el ID de "respuestausuario" - aunque definitivamente debería haber uno (si no lo agregaste, entonces hazlo ahora). El problema es que nuestro Javascript está en la cabecera del documento (X)HTML y es ''ejecutado antes de que el resto del documento haya sido todavía leído'' (e interpretado) por el navegador. Así que necesitamos una manera de asegurarnos de que ese segmento de código que acabamos de crear sólo se ejecute hasta después de que el documento haya sido cargado por completo ... ¿alguna idea? Probablemente estás pensando algo como lo que sigue: <pre> <body onload="nuestro código podría ir aquí"> </pre> y tienes razón, hasta un cierto punto. Queremos usar el evento onload, pero no escribirlo en el (X)HTML o estaríamos de regreso en el punto original. En su lugar colocaremos nuestra nueva línea de Javascript en su propia función: <pre> // // Esta funcion configura todos los eventos usados por mi Javascript // function configMisEventos() { document.getElementById("respuestausuario").onsubmit = revisaFormulario; } </pre> y entonces relacionaremos esta función con el evento onload empleando una línea especial de código: <pre> window.onload = configMisEventos; </pre> De manera que nuestro código Javascript se verá al final de esta manera: <pre> <script type="text/javascript"> // // revisaFormulario() // Verifica todos los campos requeridos del formulario. // function revisaFormulario() { window.alert("Ejemplos de validacion de datos"); // Tu codigo normal de validacion va aqui } // // Esta funcion configura todos los eventos usados por mi Javascript // function configMisEventos() { document.getElementById("respuestausuario").onsubmit = revisaFormulario; // Todos los demas eventos que uses pueden ser agregados de la misma manera aqui. } window.onload = configMisEventos; </script> </pre> Inténtalo ahora con tu propio formulario. El último paso para separar nuestro Javascript es mover el código completo a un archivo aparte, de manera que solamente quede nuestra etiqueta script haciendo referencia al archivo de Javascript: <pre> <script type="text/javascript" src="mi_archivo_javascript.js"> </pre> ¡Bravo! Ahora ya estás en el camino para aprender Javascript de la manera no obstructiva. Revisa algunos de los Enlaces externos incluidos en el artículo de Wikipedia [[:m:w:es:JavaScript_no_obstructivo|JavaScript no obstructivo]], pues allí puedes encontrar otros aspectos expuestos con mayor claridad que aquí. == Reto 8: Usando mapas == Google proporciona una herramienta que te permite incluir su amplia funcionalidad de mapas en tu propio sitio web - todo lo que necesitas es un poco de Javascript (bueno, para hacer algunas de las cosas más útiles necesitarás aprender un poco más de Javascript, pero eso es algo bueno). Si quieres usar una alternativa abierta, tal como OpenStreetMap, entonces intenta con esta [http://p2pu.org/webcraft/node/12927/document/26001 guía paso a paso de OpenLayers (en inglés)]. Empieza revisando el [http://code.google.com/apis/maps/documentation/javascript/tutorial.html ejemplo "Hello, World" de Google Maps]. Conforme leas sus ejemplos de Javascript verás que algunas partes lucen familiares (instrucciones if, funciones, eventos, etc), pero otras son nuevas (las variables ue comienzan con google.maps). # La primera parte de este reto es hacer que el mapa funcione en tu propia página. Necesitarás copiar y pegar el código mostrado, y cambiar la instrucción ''sensor=set_to_true_or_false'' a ''sensor=false'' Entonces ábrelo en tu navegador y/o súbelo a tu servidor web. # Modifica el código para que muestre un mapa de tu localidad en lugar del mapa de Australia que viene predeterminado (si eres de Australia, entonces ubícalo en una ciudad importante en otro país). Para hacer esto necesitarás encontrar las coordenadas de latitud y longitud. (Puedes intentar con http://geohash.org) # Modifica tu código [http://code.google.com/apis/maps/documentation/javascript/controls.html configurar los controles del mapa] y/o [http://code.google.com/apis/maps/documentation/javascript/overlays.html#Marker agregar un marcador]. Eso es sólo el principio, pero esperamos que te haya hecho pensar acerca de las posibilidades. == Reto 9: Una introducción a YUI - Un calendario == Imagina que tienes un formulario que requiere que el usuario introduzca una fecha. Hay varios formatos que podrían usarse, algunos de los cuales son ambiguos, tales como 08/06/2007 (¿se trata del 8 de junio de 2007 o del 6 de agosto de 2007? Esto depende de dónde vivas.). Actualmente hay muchas soluciones Javascript que permiten a los usuarios dar click en una opción de calendario en lugar de escribir la fecha directamente. Esta es una forma mucho más certera de obtener esa información del usuario. para esto vamos a conocer las bibliotecas de la Interfaz de Usuario de Yahoo! (YUI). La biblioteca YUI es muy extensa, y está ampliamente documentada. Por el momento usaremos el elemento Calendario sin entrar en demasiados detalles, pero si quieres conocer más, hay documentación para aventar para arriba (incluyendo tablas de referencia) y videos tales como este: [http://www.dustindiaz.com/screencast-episode-01/ YUI Basics and DOM hacking]. Para comenzar: * Crea un documento (X)HTML que contenga la declaración de tipo de documento (doctype), y las etiquetas html, head, title y body, así como un encabezado de nivel 1 (h1) y un párrafo de introducción (tal como, "Una prueba del control de Calendario de YUI"). * Agrega un pequeño formulario con un campo, incluyendo una etiqueta (label) "Introduce el nombre de tu evento:", seguido por un campo de texto y un botón para enviar los datos. * Lee la introducción en [http://developer.yahoo.com/yui/calendar/ YUI Calendar control] y sigue las instrucciones de la primera sección "Getting Started" paso a paso. Si te atoras con algo, revisa el código de abajo para saber qué hacer, pero debes resistirte a copiar y pegar. Una vez que tienes un control de calendario en tu página: * Agrega una nueva función a tu Javascript, llamada mostrarFecha(), vincula esta función con el evento onsubmit del formulario y verifica que funcione (por ejemplo, agrega una alerta que diga "Sí, la función se activó"). * Lee la sección de la documentación de YUI titulada "Obtaining selected dates", pero ten en cuenta que sabemos que solamente se puede elegir una fecha, así que podemos obtener la fecha y almacenarla en una variable de esta manera: ** var fecha_elegida = cal1.getSelectedDates()[0] * Usa el código de arriba en tu función mostrarFecha para mostrar la fecha usando window.alert. Podrías requerir el uso de los métodos getDate(), getMonth() y getFullYear() del objeto date (esto es, fecha_elegida.getMonth() para obtener el mes). Vela [http://www.w3schools.com/jsref/jsref_obj_date.asp referencia del objeto date en W3Schools] si requieres más ayuda. Solamente si estás realmente entusiasmado: * Agrega un nuevo campo de texto a tu formulario con la etiqueta "Fecha elegida", y ve si puedes usar el propio evento selectEvent del Calendario para transferir la fecha elegida al nuevo campo (nota: hay mucho por aprender si no has usado los eventos de YUI antes). <pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="es"> <head> <title>Calendario YUI</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/calendar/assets/skins/sam/calendar.css"> <!-- Dependencias --> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <!-- Archivo fuente --> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/calendar/calendar-min.js"></script> <script type="text/javascript"> var cal1; function configMisEventos() { cal1 = new YAHOO.widget.Calendar("cal1","cal1Container"); cal1.render(); } window.onload = configMisEventos; </script> </head> <body class="yui-skin-sam"> <h1>Calendario - Yahoo! User Interface</h1> <p>Este es un ejercicio para probar el calendario de YUI</p> <form action=""> <p>Este formulario deberia tener muchos otros campos</p> <p> <label> Pon aquí el título de tu evento: <input type="text" name="tituloevento" id="tituloevento"> </label> </p> <p> <label> Elige la fecha del evento: <input id="fechaevento" type="text"> </label> </p> <div id="cal1Container"></div> <p> <input type="submit" value="Enviar"> </p> </form> </body> </html> </pre> == Reto 10: Una introducción a jQuery - revisando los elementos que se esconden == La biblioteca Yahoo! User Interface que se usó en el reto anterior tiene una cantidad increíble de características, pero también puede, por eso mismo, constituir algo muy difícil de aquilatar de principio para quienes sólo buscan hacer unas cosas simples, como mostrar/ocultar un campo de un formulario. Aquí entra [http://jquery.com/ jQuery]: : jQuery es una biblioteca que simplifica la forma en que exploramos los documentos (X)HTML, manejamos eventos, realizamos animaciones, y agregamos interacciones de Ajax a nuestras páginas web. jQuery ha sido diseñada para cambiar el modo en que escribes Javascript. Así que empecemos. Un buen lugar para comenzar es el tutorial [http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery Getting started with jQuery]. Incluye un kit para principiantes (starter kit) y te guiará a través de un ejemplo hola mundo. Después de terminar las primeras dos secciones (Setup y Hello jQuery), ya estás listo para este reto: revisando los elementos que desaparecen. También puedes buscar otro tutorial de jQuery que te enseñe a hacer lo más básico antes de abordar este reto. * Copia y pega el siguiente código HTML en un nuevo archivo - fíjate en que es el mismo formulario del Reto 1 (y queremos implementar la misma funcionalidad). * Asegúrate de que tienes la versión más reciente de jQuery guardada en el mismo folder que tu archivo, con el nombre jquery.js * Lee el código Javascript para que revises si sabes lo que intenta hacer. * Pruébalo en el navegador.¿Hace lo que se espera? ¿Qué es lo que no funciona bien aún? (piensa: "No pensé que tenía que fijarme en eso"). * Ahora, para el reto, revisa la página [http://docs.jquery.com/Events jQuery Event documentation], y ve si puedes solucionar el problema que identificaste en el paso previo. <pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Javascript reto 10</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // Configura un codigo para ser ejecutado cuando el documento este listo $(function(){ // Primero esconde todo el parrafo con el campo de correo: $("p#emailpara").hide(); // Agrega una funcion que deberia ejecutarse cada vez que se // active la casilla subscribe: $("input#subscribe").click(function(){ $("p#emailpara").show("slow"); }); }); </script> </head> <body> <h1>Probando jQuery</h1> <form action="mailto:me@example.com" method="post"> <fieldset> <legend>Suscripciones de correo</legend> <p id="subscribepara"> <label> <input type="checkbox" name="subscribe" id="subscribe"> Me gustaría recibir el boletín vía correo-e. </label> </p> <p id="emailpara"> <label> Email Address: <input type="text" name="email" id="email"> </label> </p> </fieldset> </form> </body> </html> </pre> Una vez que estés listo, fíjate en el código Javascript que usaste en este reto y compáralo con tu código del Reto 1 ... ¿cuál preferirías escribir? Al final revisa el Reto 4 (donde se mejoró la validación), y reescribe tu solución usando jQuery. [[Categoría:JavaScript]] [[Categoría:Informática]] [[Categoría:Desarrollo web]] nv73yhcb4jo0j744l1ps3o96gg09vst 0 12586 167723 111330 2022-07-27T07:56:18Z Emir.herrera 51293 wikitext text/x-wiki == 1. Qué es una página web == Una página web es un documento electrónico que puede contener un tipo de información como textos,imágenes,vídeos,etc. Para crear una página web hay que planificar y escoger un diseño y elegir su contenido. Puede ser completada o ampliada con links,imágenes,vídeos y otros elementos. == 2. Pasos para hacer una página web == Para planificar una página web hay que seguir unos pasos: =====1. Tienes que conseguir un proveedor que te deje sitio disponible en sus servidores.===== Tener un alojamiento o servidor en Internet donde colocar la Web. Lo normal es construir la web y tenerla en el disco duro de nuestro ordenador y luego enviarla a un servidor de Internet. Un servidor de Internet en realidad es otro ordenador que está permanentemente encendido y conectado a la Red. =====2. Crea la página web a tu gusto.===== =====3. Envía la página web creada al servidor del proveedor que hayas elegido.===== =====4. Después tienes que completar la página web incluyendo nuevas informaciones,links,etc.===== Elementos necesarios para diseñar una página Web son: # Título # Combinación de colores # Equilibrio de la composición # Impacto visual # Hipervínculos, pueden ser de dos tipos: #* Enlaces externos #* Enlaces internos # Forma de contacto # Distribución de las páginas. Se pueden organizar en forma: #* Lineal #* Árbol #* Jerárquica [[Categoría:Informática]] [[Categoría:Desarrollo web]] ppiz8anlh3iijt8owvj8qp6y3jd8a38 2 27129 167727 2022-07-27T10:05:09Z Emir.herrera 51293 Nueva página: Apuntes y bosquejos de proyectos de aprendizaje en curso == Editores de texto == * VIM == Desarrollo de aplicaciones web == === Marcos de trabajo (frameworks) === * Angular * ReactJS === Librerias útiles de JavaScript === * ngRx * rxJS * GraphQL == Creatividad artificial == wikitext text/x-wiki Apuntes y bosquejos de proyectos de aprendizaje en curso == Editores de texto == * VIM == Desarrollo de aplicaciones web == === Marcos de trabajo (frameworks) === * Angular * ReactJS === Librerias útiles de JavaScript === * ngRx * rxJS * GraphQL == Creatividad artificial == j8lwzal3rp5yez5vntkbf41544yde4x