No es un bug, es una característica no documentada

Mostrando entradas con la etiqueta Lenguaje de marcas. Mostrar todas las entradas
Mostrando entradas con la etiqueta Lenguaje de marcas. Mostrar todas las entradas

11/6/15

Lenguajes de marcas. Prácticas y teoría (TODO COMPLETO)

20:05 Posted by Inazio , , , , , No comments
Este curso, mientras estudiaba por las mañanas, me apunte a un certificado profesional de creación de páginas web.

Estudié HTML5 y CSS3, junto con algo de JavaScript. Por desgracia tuve que abandonar el curso antes de poder ver jQuery, Ajax y poder refrescar PHP, pero la verdad que aprendí bastante.

Hablando con un compañero de DAM por las mañanas comento que quería echarle un vistazo a estos temas en verano, así que aprovecho la plataforma para colgar todos los apuntes y trabajos que he realizado tanto en éste módulo de Lenguajes de marcas como en el certificado de por la tarde.

En verano iré ampliando la información con JavaScript y jQuery, en cuanto un compañero de por la tarde me pase lo que han continuado haciendo.

Esta todo montado en una carpeta en el Drive. Disfrutadla :)

Los temas a tratar son:
  • HTML
  • CSS
  • PHP
  • JAVASCRIPT
  • JQUERY
  • AJAX
  • XML / XSLT
Podeís visitar el enlace pulsando aquí.

17/4/15

Lenguaje de marcas. DTD

14:25 Posted by Inazio , No comments
El DTD (Definición de Tipo de Documento) es un archivo que se usa para especificar como está estructurado un documento XML. Consultar DTD en W3schools aquí.

Una estructura de un DTD básico sería la siguiente:

<!DOCTYPE nota[
     <!ELEMENT nota(de, para, encabezamiento, texto)>
     <!ELEMENT de(#PCDATA)>
     <!ELEMENT para(#PCDATA)>
     <!ELEMENT encabezamiento(#PCDATA)>
     <!ELEMENT texto(#PCDATA)>

]>

#PCDATA significa datos de caracteres parseados. En un campo de texto, es el texto que hay entre dos etiquetas. Será leido por un lector y se examinará por si tiene entidades


Así si lo reconoce lo pondrá en forma de entidad, si no de otra forma entendería que, por ejemplo en el caso de que hubiera un libro llamado 2 < 3 entendería que se trata de un elemento hijo.

Asímismo también tenemos #CDATA, en el que le diremos que el lector cojerá todo y lo tratará como una cadena de caracteres. En nuestro caso del libro, leería 2 &lt 3.

Vamos a realizar el DTD del XML librería que está a continuación:

<?xml version="1.0" encoding="UTF-8"?>
<librería>
     <libro categoría="Cocina">
         <título idioma="en">Everyday Italian</título>
         <autor>Giada De Laurentiis</autor>
         <edición>2005</edición>
         <precio>30.00</precio>
     </libro>
     <libro categoría="Infantil">
         <título idioma="en">Harry Potter</título>
         <autor>J K. Rowling</autor>
         <edición>2005</edición>
         <precio>29.99</precio> 
     </libro>
     <libro categoría="Desarrollo Web">
         <título idioma="en">Learning XML</título> 
         <autor>Erik T. Ray</autor>
         <edición>2003</edición>
         <precio>39.95</precio>
     </libro>
</librería>


El DTDT sería el siguiente:

<!DOCTYPE librería[
     <!-- Puede tener más de un libro -->
     <!ELEMENT librería(libro+)>
     <!-- Un libro solo tendrá un titulo, autor, edicion y precio -->
     <!ELEMENT libro(titulo, autor, edicion, precio)>
     <!ELEMENT titulo(#PCDATA)>
     <!ELEMENT autor(#PCDATA)>
     <!ELEMENT edicion(#PCDATA)>
     <!ELEMENT precio(#PCDATA)>
     <!-- Definir los atributos -->
     <!ATTLIST libro categoría CDATA>
     <!-- Obligo a insertar categoría idioma -->
     <!ATT titulo idioma CDATA #REQUIRED>

]>

6/3/15

Lenguaje de marcas. RSS

9:58 Posted by Inazio , No comments
Con RSS es posible distribuir el contenido web actualizado de una página a miles de páginas web diferentes en todo el mundo.
Permite navegador rápidamente entre noticias y actualizaciones de páginas.

¿Qué es?

  • Significa “Sindicación realmente simple” (Really Simple Syndication)
  • Permite afiliarse al contenido de una web
  • Define una manera simple de compartir y ver titulares y contenido
  • Pueden ser actualizados automáticamente
  • Permite vistas personalizadas para distintas webs
  • Está escrito en XML

¿Por qué usar RSS?

Fue diseñado para mostrar datos seleccionados.

Con un feed RSS un sitio web puede ser comprobado mucho más rápido usando un agregador RSS (un programa que recopila y ordena feeds RSS).

Son pequeños y de carga rápida, iedales para servicios en dispositivos móviles.

Sirven para compartir de manera rápida datos y actualizaciones oportunas.

¿Quién debería usarlo?

Son útiles para sitios web actualizados frecuentemente, como
  • Páginas de noticias (titulo, fecha y descripción)
  • Compañias (noticias y nuevos productos)
  • Calendarios (eventos y fechas importantes)
  • Cambios de web (lista páginas cambiadas y nuevas páginas)

Beneficios

  • Elegir tus noticias
  • Evitar información no deseada, como información superflua o spam
  • Incrementa las visitas a una web. Se puede crear un canal propio de noticias y publicarlo en Internet

Diferencias en versiones

RSS 1.0 es la única versión desarrollada usando estándar usando el estándar W3C RDF (Resource Description FrameWork)

La idea de RDF es crear una web semántica, para facilitar el intercambio de datos entre aplicaciones y usuarios.

¿Qué versión usar?

RSS 0.91 y RSS 2.0 son más faciles de entender que RSS 1.0

Estándarares

No hay norma oficial para RSS.

El 50% de canales usa RSS 0.91
El 25% de canales usa RSS 1.0
El otro 25% usa RSS 2.0 o RSS 0.9x

SINTAXIS

¿Cómo funciona?

Hay que registrar el contenido en compañías llamadas congregadores y o agregadores RSS.
  1. Se crea un documento con extensión XML
  2. Se sube a la página web
  3. Se registra en un congregador

Diariamente el congregador busca el documento RSS, comprueba que sigue funcionando y muestra información acerca de feeds RSS

Ejemplo de documento RSS

<?xml version=”1.0” encoding=”UTF-8”?>
<rss version=”2.0”>
<channel>
     <title>Página</title>
     <link>http://programandoapasitos.blogspot.com</link>
     <description>Tutoriales DAM</description>
     <item>
          <title>RSS</title>
          <link>http://programandoapasitos.blogspot.com/rss</link>
          <description>Tutorial RSS</description>
     </item>
     <item>
          <title>XML</title>
          <link>http://programandoapasitos.blogspot.com/xml</link>
          <description>Tutorial XML</description>
     </item>
</channel>
</rss>

  1. Definir version XML – especificación y codificación
  2. Declaración del RSS con versión
  3. Channel – Describe la fuente RSS (feed)
    1. <title> Titulo del canal
    2. <link> Enlace al canal
    3. <description> Descripción del canal

Para realizar comentarios, igual que en HTML
<!-- Esto es un comentario -->

RSS está escrito en XML

  • Todos los elementos deben tener etiqueta de cierre
  • Elementos sensibles a mayúsculas
  • Los elementos deben estar correctamente anidados
  • Valores de atributos siempre entre comillas

Elemento canal

Suele contener uno o más elementos <item>. Cada elemento item define un elemento o historia del feed RSS.

Hay bastantes parámetros opcionales para channel. Aquí los más importantes

            <category>
            Usado para especificar la categoría de nuestra transmisión o fuente (feed).
            Posibilita a los agregadores RSS agrupar webs según categorías
           
<category>Tutoriales web</category>

            <copyright>
            Notifica del material sujeto a derecho de copia copyright
           
            <copyright>2015. Propiedad de Inazio. Todos los derechos reservador</copyright>

     <image>
            Permite mostrar una imagen cuando los agregadores presentan una fuente (feed).
            3 elementos hijo:
·         <url> Dirección de la imagen
·         <title> Título alternativo
·         <link> Hipervínculo a la web que ofrece el canal

Elemento item

Cada elemento <item> define un artículo o historia dentro de un feed RSS

Hijos obligatorios:
            <title>
            <link>
            <description>

Hijos opcionales
            <author>
            Especifica la dirección mail del autor del item
           
            <author>yipicayei@jungla.cristalizada</author>

     <comments>
            Permite a un item enlazar los comentarios del mismo
           
            <comments>http://programandoapasitos.blogspot.com/rss/comentarios</commentos>

            <enclosure>
            Permite incluir archivos multimedia en el item.
            3 atributos obligatorios:
                        url: Dirección del archivo multimedia
                        length: Tamaño en bytes
                        type: Tipo MIME del archivo

            <enclosure url=”NoParesSegundaPiel.mp3” length=”5000” type=”audio/mp3” />

Publicar feed RSS

  • Subir RSS a la misma web
    • Nombre con extensión XML
    • Validar archivo RSS con validador (feedvalidator.org)
    • Subir fichero al directorio principal de la web
    • Cargar imagen en la página web
    • Enlazar imagen a fichero RSS
    • Enviar el feed al directorio de feeds RSS (URL del archivo XML)
    • Registrar feed en los motores de búsqueda
    • Actualizar / comprobar el feed

  • Gestionar feed
    • Manualmente: Asegura su funcionamiento, pero lleva mucho tiempo
    • Automáticamente: Los gestores de contenido como WordPress, Blogger, Tempo, Joomla… tienen su propio feed automático

  • Lectores RSS. Programas usados para leer feeds. Hoy en día la mayoría de navegadores tienen su propio lector RSS integrado, pero aún así unos ejemplos serían:
    • RSSReader
    • FeedDemon
    • Blogbot


13/2/15

Lenguaje de marcas. Blog

13:24 Posted by Inazio No comments
Vamos a realizar un blog.

Para ello, nos concetamos a PHPMyAdmin y generamos una tabla con los siguientes valores


Lo siguiente será realizar nuestra página web.

Creamos:

- index.php
- insertarEntrada.php ( a su vez contendrá un formulario con titulo y cuerpo, y un botón con enviar).

El resultado de realizar esta consulta (la de insertarEntrada) la mostrará en distintos artículos.

<article>
     <h1>$titulo</h1>
     <p>$cuerpo</p>
     <p>$fecha</p>
</article>

Esto será dinámico, lo demás estático. Ergo dentro del código estático crearemos un for que haga las llamadas para visualizar tantas entradas como tengamos.

Abrimos un NetBeans y creamos un proyecto nuevo, llamado

Códigos de los archivos:

index.php


Estoy teniendo muchos problemas con el NetBeans. He tenido que reiniciar, me he desenganchado de la explicación, no puedo acceder al FTP para copiar lo que han hecho hasta ahora y ponerme al día y me está entrando muy mala hostia.

Voy a atender a lo que pueda y seguiré con este ejercicio en cuanto pueda conseguir acceso

6/2/15

Lenguajes de marcas. Formularios HTML5+PHP+BD

13:35 Posted by Inazio , No comments
Sintaxis:

<form action="formulario.php " method=" ">
     <input ...>
     <input type="submit">
</form>

En el action, pasaremos los datos del formulario a formulario.php, pero tenemos dos modos de realizar el método:

  • get -  Se verá en la URL. Habrá que usar la variable $_GET
  • post - Viaja enmascarado. Hay que usar $_POST


NOTA:
br, hr, img, input, link y meta, entre otras etiquetas, no hace falta cerrarlos en HTML5

Vamos a usar el NetBeans para esta práctica. Creamos un proyecto en PHP remoto (tal y como explicaba en la entrada anterior (ver aquí) de nombre, por ejemplo, formulario en mi caso.

Necesitaremos dos archivos, index.php y tratarFormulario.php.

Hacemos primero una sencilla prueba, escribimos en index.php el código para generar un simple bóton y un cuadro de texto, tal que así:


Y veremos en el navegador esto:

Cuando pulsemos enviar nos llamará a tratarFormulario. Si miramos atentamente a la URL...


¿Veis? Podemos ver lo que contiene el campo nombre. Por eso se dice que el método GET es inseguro, por ejemplo permitiría realizar un ataque de SQL inyection.
Eso lo solucionaremos usando método post.

En este ejemplo trabajaremos con get, posteriormente realizaré pruebas con código usando post.

En tratarFormulario.php escribimos lo siguiente:


Lo que hacemos en la línea 8 es mostrar por pantalla un Hola y el texto capturado del formulario de index.php


Podemos hacer varias cosas con los cuadros de texto y los botones. Por ejemplo, si queremos insertar un valor por defecto, usaremos el parámetro value. Ej:

<input type="text" name="nombre" value="Escribe aquí...">
<input type="submit" value="Ok">

Si queremos limitar el número de caracteres que pueden escrbir en las cajas, usaremos el parámetro maxlength:

<input type="text" name="nombre" value="Escribe aquí..." maxlength="5">


Tambien tenemos distintos tipos de input. Por ejemplo, para la fecha, o para indicar código hexadecimal de un color:

<input type="date" name="fecha" value="<?php echo date("Y-m-d");?>">

<input type="color" name="color">

El código php en el value es para mostrar el día actual

Vamos a hacer una calculadora, a ver como queda:

Código en index.php:

<form action="tratarFormulario.php" method="get">
     <p>Calculadora</p>
     <input type="text" name="uno">
     <p>+</p>
     <input type="text" name="dos">
     <input type="submit" value="Ok">

</form>

Código en tratarFormulario.php:

<?php
     echo 'La suma de '.$_GET['uno'].' y '.$_GET['dos'];
     $resultado=$_GET['uno']+$_GET['dos'];
     echo ' es '.$resultado;

?>

De modo que el código completo, hasta el momento, sería la siguiente:

index.php

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
   
    <body>
        <form action="tratarFormulario.php" method="get">
            <p>Nombre</p>
            <input type="text" name="nombre" value="nombre..." maxlength="5">
            <input type="text" name="apellido" value="apellidos...">
            <input type="date" name="fecha" value="<?php echo date("Y-m-d");?>">
            <input type="color" name="color">
           
            <p>Calculadora</p>
            <input type="text" name="uno">
            <p>+</p>
            <input type="text" name="dos">
            <input type="submit" value="Ok">
        </form>
       
    </body>

</html>

tratarFormulario.php

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
        <?php
            echo 'Hola '.$_GET['nombre'].' '.$_GET['apellido'];
            echo 'Día seleccionado: '.$_GET['fecha'];
            echo ' ';
            echo 'Color '.$_GET['color'];
            echo '<br>';
            echo 'La suma de '.$_GET['uno'].' y '.$_GET['dos'];
            $resultado=$_GET['uno']+$_GET['dos'];
            echo ' es '.$resultado;
        ?>
    <body>
       
    </body>

</html>

Visualizando lo siguiente:

index.php

tratarFormulario.php


Ahora vamos a hacer una conexión al servidor a través de formularios.

Creamos un nuevo documento, introducirEnPHP.php.

En index.php, el código a escribir será el siguiente:


y en introducirEnPHP.php


Y comprobamos que nos da el mensaje de la consulta correcta


Los códigos completos de las prácticas de hoy son:

index.php

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
   
    <body>
        <form action="tratarFormulario.php" method="get">
            <p>Nombre</p>
            <input type="text" name="nombre" value="nombre..." maxlength="5">
            <input type="text" name="apellido" value="apellidos...">
            <input type="date" name="fecha" value="<?php echo date("Y-m-d");?>">
            <input type="color" name="color">
           
            <p>Calculadora</p>
            <input type="text" name="uno">
            <p>+</p>
            <input type="text" name="dos">
            <input type="submit" value="Ok">
        </form>
        <br><br>
        <form action="introducirEnPHP.php" method="get">
            Nombre:<input type="text" name="nombre" value="nombre.....">
            Edad: <input type="text" name="edad">
            <input type="submit">
        </form>
    </body>

</html>

tratarFormulario.php

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
        <?php
            echo 'Hola '.$_GET['nombre'].' '.$_GET['apellido'];
            echo 'Día seleccionado: '.$_GET['fecha'];
            echo ' ';
            echo 'Color '.$_GET['color'];
            echo '<br>';
            echo 'La suma de '.$_GET['uno'].' y '.$_GET['dos'];
            $resultado=$_GET['uno']+$_GET['dos'];
            echo ' es '.$resultado;
        ?>
    <body>
       
    </body>
</html>


IntroducirEnPHP.php

<?php
    $servidor="localhost";
    $usuario="dam1";
    $password="dam1123";
    $bd="dam1_inazio";
       
    $conector=mysqli_connect($servidor,$usuario,$password,$bd);
       
    if (mysqli_connect_errno($conector)){
        echo "Fallo al conectar a MySQL:" . mysqli_connect_error();
    }
    else{
        echo "Conexión correcta";
        $nombre=$_GET['nombre'];
        $edad=$_GET['edad'];
        $consulta="INSERT INTO usuario VALUES (null,'$nombre',$edad)";
        if (mysqli_query($conector,$consulta))   {
            echo 'Consulta correcta';
        }
        else{
            echo 'Error en la consulta';
        }
    }

?>



30/1/15

Lenguajes de marcas. PHP (I)

13:26 Posted by Inazio , No comments
PHP se combinará con HTML5, CSS3, JavaScript y MySQL

HTML, CSS y JS se ejecutarán en la parte cliente, es decir en el navegador, mientras que PHP y MySQL lo harán en la parte servidor.

Es decir que tendremos que montarnos un servidor.

Instalación de LAMP

Abrimos Linux y escribimos:

sudo apt-get install lam-server^


Una vez hecho eso configuramos la contraseña para MySQL


Y volverá a pensar otro rato. Cuando finalice la instalación probamos a ingresar desde el navegador a la dirección IP de la máquina donde hemos montado el servidor, y veremos lo siguiente:


Si aparece un cartel como el de arriba, está funcionando correctamente.

Instalación de WAMP

Primero instalaremos la librería necesaria, vcredist:


Posteriormente lanzamos el instalador del WAMP





y lo comprobamos accediendo a localhost


A continuación vamos a ver cómo escribir código en PHP

Comandos PHP

Las variables se escriben siempre con $
      $variable

Para escribir cadenas se hará con apóstrofes, y para imprimir usaremos el comando echo
     echo "Hello world";


Para concatenar impreso por pantalla, usaremos punto. Es decir


Si imprimimos con comillas simples nos imprimirá exactamente lo que escribimos, pero si lo hacemos con comillas dobles irá a buscar las variables.


La diferencia sería de ver esto:

$cadena \n $entero \n $decimal

a ver esto:

Hola
3
2.5

If


While

Arrays


Visualizando por pantalla lo siguiente:

3...2...1...0..., 2.5, 2.5, 2.5, 2.5, , ,

También podemos, dentro de un documento index.php, mezclar código HTML y PHP, por ejemplo, para hacer un listado del 0 al 100. Veamos el código


For


Definir un array:


Foreach (for especial para vectores)


9/1/15

Lenguajes de marcas. CSS (IV)

13:33 Posted by Inazio , No comments
Vamos a ver como podemos incrustar texto con diversas fuentes en nuestra página web.

Antes se usaban "fuentes seguras", como Helvética, Arial, y en todo caso a lo mejor Sans-serif

font-family: arial, helvetica, sans-serif

En este caso el navegador usaba primero la arial, si no la tiene la helvetica, y si no una cualquiera sin serifear.

Ahora podemos usar un código especial para cargar una fuente en la página web, que se descargará al ordenador del usuario.

Es @font-face (el arroba indica que declararemos una nueva fuente).

Es decir:


Y posteriormente hacer referencia al parrafo donde aplicar esta fuente:


Código para usar en la web:

@font-face {
  font-family: 'Akronim';
    src: url('fonts/Akronim-Regular.eot'); /* Para Internet Explorer */
    src: local('Akronim'), /* Para el resto de navegadores */
         url('fonts/Akronim-Regular.ttf') format('truetype'),
         url('fonts/Akronim-Regular.woff') format('woff'),
         url('fonts/Akronim-Regular.svg') format('svg')
}

p {
    font-family: 'Akronim', cursive;
    font-size:1.5em;
}

/* dafont.com para conseguir fuentes */

Para la práctica de hoy nos descargaremos una fuente X para realizar la prueba


y en el css de nuestra página, escribimos lo siguiente:


y para que afecte sólo a lo que queremos:


Y ya podemos ver el resultado por pantalla


9/12/14

Entornos de desarrollo / Lenguaje de marcas. PHPMyAdmin (I)

Vamos a ver como conectar una base de datos con un programa hecho en C. Pero primero, necesitamos algunos pasos previos

Lo primero que haremos será ingresar en nuestro panel de adminstración del sitio web, en mi caso montado en hostinger.

Veremos entre otras, estas opciones


Bajamos hasta la sección de bases de datos y seleccionamos MySQL Bases de datos de MySQL


Iremos a la siguiente página, donde crearemos una nueva base de datos. En mi caso, con4, con usuario con4 (la contraseña no la digo, desolé)


Pulsamos en Crear y veremos que en el panel lateral izquierdo, en la sección de bases de datos, tenemos una categoría llamada phpMyAdmin. Pulsamos sobre ella


Nos llevará a la sección del administrador de PHP de nuestro host, y pulsamos en Ingresar phpMyAdmin.


Despuéss de lo cual veremos esta pantalla.


Esto es el panel de administración. ¡Al tajo!



Ya estamos aquí. Vamos a importar y subimos un .sql para poder trabajar usando un ejemplo. He usado el archivo .sql del post anterior, que puedes bajar aquí

Para importar, pulsaremos ¿adivinas? Importar


Iremos a parar aquí


Importamos, y si ha sido correcta saldrá el siguiente mensaje.


Si por un casual queremos hacer consultas, vamos a la sección de SQL


Y si te das cuenta, en el menú lateral izquierdo vemos las tablas creadas


Bien, una vez hecho esto, tenemos que saber ciertas cosas. Para conectarnos a una base de datos desde C, necesitaremos la API de C para mySQL, con lo que deberemos cargar ciertas librerías, y usar determinadas funciones.

Las librerías a incluir son:
my_global.h
mysql.h

Es decir

#include <my_global.h>
#include <mysql.h>

Funciones:

mysql_init()
Inicializa los parámetros para poder conectarse a la base de datos.

mysql_real_connect()
Nos conecta a la base de datos. Deberemos pasarle, como parámetros, un nombre de host, un usuario y una contraseña, como obligatorios, más luego X parámetros voluntarios, como puerto, por ejemplo

Y otras más, a las que retornaremos posteriormente 

Ahora, para comenzar practicando, lo haremos desde Ubuntu.
Deberíamos instalar el LAMP, para tener Apache y demás, pero realmente sólo necesitamos estos dos paquetes:

build-essential
mysql-server


Cuando instalemos mysql-server, nos pedirá una contraseña. Por defecto, yo he elegido la misma para todas, root




Una vez instalados estos dos paquetes, instalaremos el administrador de PHP:
phpmyadmin



Marcamos apache como servidor predeterminado


Accedemos a que se configure la base de datos por defecto para empezar a trabajar

 
Y volvemos a escribir las contraseñas de usuario, root, para variar.




Hasta aquí nos hemos quedado. Mañana seguiremos ya una vez que tenemos la configuración inicial.