Blog de Notas sobre Temas Introductorios al Desarrollo Web: HTML y CSS

Además de AJAX , la técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador, también existen una serie de nuevas tecnologías que realizan la misma función . Todas ellas son conocidas como: “ la familia de tecnologías HTML5 ”: ·          Canvas : tiene asociada una nueva etiqueta HTML. El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo. ·          SVG : un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos utilizando un lenguaje similar a HTML. ·            Geolocalización : Otra ...

  Las imágenes HTML se definen con la etiqueta <img> Dicho elemento se acompaña del parámetro src para indicar la ubicación de la imagen ( source en inglés). El formato general es el siguiente: <img src="nombredelaimagen.png" /> Por cuestiones de accesibilidad, cada imagen debe acompañarse siempre de un texto que será mostrado en el caso de que, por cualquier motivo, la imagen no esté disponible y que sirve también como descripción en aplicaciones lectoras para personas con discapacidad. El texto alternativo se inserta con el atributo alt . Así, un par de imágenes correctas quedarían de la siguiente manera: < img src="recursos/calle.jpg" alt="Una calle con coches y tiendas" />    Existen atributos de tamaño para la imagen, ellos son:    width (ancho) height (alto); Con ellos podemos indicar explícitamente la anchura y altura que tendrá una imagen. img elemento que no tiene etiqueta de cierre...

La etiqueta <caption> añade un título sobre la tabla, por ello no es necesario combinar las celdas que contengan el título.     Fuentes: Activate, Google España  

Una tabla HTML es una forma gráfica de representar información de manera esquematizada, ordenada y compacta. Las tablas se organizan en filas y celdas. La etiqueta <table> indica el inicio y cierre de la tabla. El resto de etiquetas necesariamente estarán recogidas entre <table> y </table>. <tr> (Table Row) representa una nueva fila de la tabla. <td> ( Table Data Cell) es una etiqueta de datos. Estas son las tres etiquetas básicas y las más utilizadas . Fuentes: Activate, Google España    

La regla más importante es muy fácil de recordar: utiliza siempre el mismo juego de caracteres en todo lo que hagas . ¿Qué significa esto en una aplicación web? Significa que todos los ficheros que compongan tu sitio web, deben estar almacenados en el mismo juego de caracteres: tus ficheros HTML, CSS, JavaScript, de texto, etc. Y también tus páginas PHP, cualquier fichero de texto que leas desde PHP. Y los datos que estén almacenados en tu base de datos. Y también la conexión que establezcas con tu base de datos. Y si invocas a un servicio web que te devuelve datos en formato XML o JSON, los datos que te devuelva también tienen que estar en el mismo juego de caracteres.     Fuentes: Activate, Google España

¿Alguna vez has instalado un programa y no se visualizaban correctamente algunos caracteres? ¿Alguna vez te han dado un justificante, un extracto bancario o un recibo en el que no se mostraban correctamente algunos caracteres? ¿Alguna vez has entrado en una página web y te aparecían caracteres chinos cuando la página no estaba en chino? ¿No haz podido ver bien un fichero o su contenido al moverlo de un sistema operativo a otro? Los motivos de estos problemas son los denominados " juegos o mapas de caracteres ": ASCII, ISO-8859-1, Latin-1, ANSI, UTF-8, UTF-8 sin BOM, Unicode, Cotejamiento , entre muchos otros. Sin duda en el campo de la informática, el juego de caracteres es de las cosas más simples que más problemas ocasiona . La codificación de caracteres es el método que permite convertir un carácter de un lenguaje natural (como el de un alfabeto o silabario ) en un símbolo de otro sistema de representación, como un número o una secuencia de pul...

Muchas veces resulta  verdaderamente incómodo insertar grandes cantidades de texto mediante <input /> de tipo texto. Para ello, existe un control específico en HTML llamado <textarea>. El elemento textarea representa un campo para la entrada de texto multilínea . El control asociado a este campo es una caja de texto que permite a los usuarios editar múltiples líneas de texto regular. Los controles textarea son útiles para recolectar o editar líneas largas de texto como mensajes, contenido de archivos, listas, reseñas, artículos, etc. Ejemplo: <form action= "../../form-result.php" target= "_blank" > <p> Mensaje para el autor: </p> <p> <textarea name= "mensaje" placeholder (*) = "Comparte tu opinión con el autor!" > </textarea> </p> <p> <input type= "submit" value= "Enviar mensaje" > </p> </form> Mensaje para el autor...

El elemento < optgroup> representa un grupo de opciones ( option ) temáticamente definido , que forma parte de un control select . Las opciones agrupadas pueden ser etiquetadas mediante el atributo label , que usarán los navegadores para mostrar como nombre del grupo. La agrupación de opciones en un control select puede mejorar la legibilidad y la facilidad de uso. Los autores deberían usar este elemento siempre que sea posible. El atributo label es obligatorio en el elemento optgroup ( mediante el cual se especifica el texto que aparece en el desplegable ) y debería proveer a los usuarios una pista o descripción acerca de los contenidos del grupo. Ejemplo: <p>   Elije un auto:   <select>     <optgroup label= "Fiat" > <option> Punto </option> <option> Panda </option> </optgroup> <optgroup label= "Peugeot" > <option>Ion /option> ...

¿Cómo se recogen los datos del formulario? Lo normal es utilizar una base de datos para recoger la información transmitida a través de un formulario en una página web. Los datos que se introducen en un formulario en el lado del cliente (el navegador web) se envían a través de Internet al servidor web, donde son recogidos y almacenados en una base de datos para su posterior consulta. Pero para hacerlo así es necesario tener conocimientos de programación y de bases de datos y eso está al alcance de los conocimientos de todas las personas. Sin embargo, existe una alternativa fácil de implementar En el atributo action de la etiqueta <form> que define un formulario se puede indicar un correo electrónico para que los datos se envíen directamente a un correo electrónico.     ¿Cómo se hace? Puedes consultar tú los siguientes recursos que contienen ejemplos que puedes copiar a tus páginas web: Cómo utilizar el mailto: protocolo en una acción <form> ...

El valor text  sirve para introducir una caja de texto simple , y admite los parámetros: name ="nombre , Asigna un nombre único a los datos que se inserten en la caja de texto. maxlenght ="n , Designa el número máximo de caracteres que se pueden introducir en la caja de texto. size ="n" , que establece el tamaño de la caja de texto en pantalla value ="texto , Designa el texto que aparecerá inicialmente en la caja de texto. disabled , Desactiva la caja de texto, por tanto el usuario no podrá insertar ningún texto en dicho campo. accept ="lista de content-type" , Indica el tipo de contenido que aceptara el servidor. Sus posibles valores son: text/html application/msexcel application/msword application/pdf image/jpg readonly ,  Establece que el texto no puede ser modificado por el usuario. tabindex ="n" . Asigna el orden de tabulador que tiene el campo respecto a los demás elementos que componen el formulario...

Un formulario web (en inglés web form ) permite al usuario introducir datos para que sean enviados a un servidor web para que sean procesados. Es un elemento básico en cualquier sitio web . Según la W3C , un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles, y rótulos para esos controles . Cuando realizas una búsqueda en un buscador e introduces las palabras que quieres buscar, estás utilizando un formulario web. Cuando te registras en un sitio web e introduces tus datos personales, estás utilizando un formulario web. Cuando realizas una compra e introduces los números de tu tarjeta de crédito, estás utilizando un formulario web. Los formularios se utilizan para permitir que el usuario envíe información al servidor.   Ejemplos : Formularios de registro o acceso a sitios web, formularios de contacto; también para escribir un comentario en Facebook estamos utilizando un fo...

La base de datos , (en inglés database), es decir, el sistema gestor de bases de datos, es el software que permite almacenar y posteriormente recuperar los datos que necesita una aplicación de forma rápida, segura y estructurada. Si nuestro sitio web es estático y no tiene programación, la base de datos es otra característica por la que, en principio, no nos tenemos que preocupar mucho. Respecto los sistemas gestores de bases de datos que podemos encontrar en los planes de alojamiento , existen dos alternativas:   Si el sistema operativo es Linux, se suelen ofrecer MySQL y PostgreSQL. Si el sistema operativo es Windows, se suelen ofrecer Microsoft Access y Microsoft SQL Server.   Fuente: Activate, Google España

El lenguaje de programación , (en inglés programming language), se emplea para dar las instrucciones de cálculo al ordenador y permite crear aplicaciones web . Si nuestro sitio web es estático, no tiene programación, esta característica no nos importará mucho porque no la utilizaremos. Sin embargo, si pensamos publicar una aplicación web, es muy importante comprobar qué lenguajes de programación admite el plan de alojamiento que vamos a contratar . Existen múltiples lenguajes de programación. La decisión de emplear uno u otro depende más de los gustos y conocimientos que posea la persona que va a realizar la programación, ya que la mayoría de los lenguajes de programación modernos ofrecen la misma potencia y permiten realizar las mismas tareas con un costo similar. Fuente: Activate, Google España